$(document).ready(function() {
	//Fix older browsers that dont do nice CSS
	$('#content section:first-child').addClass('first');
	$('#content section li:nth-child(9n)').addClass('end');	
		
	// Add popup html
	$('<div id="popup_wrap" />').css('opacity', '0.8').appendTo($('body'));
	$('<div id="popup" />').css({
		'left': ($(window).width() - 400) / 2 + 'px'
	})
	.append('<div id="popup_content" />')
	.append($('<a href="#" id="close_btn">Close</a>').click(function() {
		$('#popup_content').html('');
		$('#popup').fadeOut(100, function() {
			$('#popup_wrap').fadeOut('200');
		});
		return false;
	}))
	.appendTo($('body'));
	
	// Zeroclipboard stuff
	ZeroClipboard.setMoviePath( '/swf/ZeroClipboard.swf' );
	$('#content section ol li').each(function() {
		var $link = $(this).children('a').eq(0);
		var $char_id = $link.attr('rel').split('char_');
		
		var $clip = new ZeroClipboard.Client();
		var $html = $clip.getHTML( 80, 90 );
		$clip.glue($link.get(0), $(this).get(0));
		var $txt = $link.attr('title');
		$clip.setText($txt + ';');
		$clip.addEventListener('onComplete', function() {
			var $pHeight = $(document).height();  
			var $wWidth = $(window).width();
			var $wHeight = $(window).height();
			
			$('#popup_content').html('<img id="loading" src="/img/loading.gif" alt="Copying to clipboard. Please wait" />');
			
			$('#popup_wrap')
			.css({'width': $wWidth, 'height': $pHeight})
			.fadeIn(200);
			
			$('#popup')
			.css({
				'top':  $wHeight/2-$('#popup').height()/2, 
				'left': $wWidth/2-$('#popup').width()/2
			})
			.show();
			
			$.ajax({
				url: 'index.php/plushash/updateCharacterCount/',
				type: 'POST',
				dataType: 'text',
				data: 'characterid=' + $char_id[1],
				success: function($text) {
					$vals = $text.split("|");
					$('#popup_content').html('<p><strong>' + $vals[1] + ';</strong> has successfully been copied to your clipboard &ndash; you can now paste it directly into your HTML!</p><p class="center"><strong>' + $vals[1] + ';</strong> has been copied <strong>' + $vals[0] + '</strong> times!</p>');
				}
			});
		});
	});
	
	// Accordian
	$("#content").accordion({header: 'section > h3', autoHeight: false});
	$("#content section").delegate('h3', 'mouseenter mouseleave', function() {
		$(this).toggleClass('hover');
	});
	
	// Create tooltip and hide to begin with
	$('<div id="tooltip" />')
	.css('display', 'none')
	.appendTo($('body'));

	$('#content section ol li')
	.live('mouseenter', function() {
		$this = $(this);
		
		$this.children('.zclip').css('display', 'block');
		$zlink = $this.children('a').eq(0);
		$zlink.addClass('hover');
		
		$offX = $this.offset().left;
		$offY = $this.offset().top;
		$('#tooltip')
		.html('<div>' + $zlink.attr('desc') + '</div>')
		.css({
			'left': ($offX - 40) + 'px',
			'top': ($offY - 10 - $('#tooltip').height()) + 'px',
			'z-index': 400
		})
		.fadeIn(500);
		return false;
	})
	.live('mouseleave', function() {
		$this.children('.zclip').css('display', 'none');
		$this.children('a').eq(0).removeClass('hover');
		$('#tooltip').css({
			'left': '-9999em',
			'top': 0,
			'display': 'none'
		});
		return false;
	});
});