var slideInterval = setInterval( function(){ fader("#assx_image_list", "start"); }, 5000);
jQuery(document).ready(function(){
	var last = jQuery("#assx_thumb_list li:last").html();
	jQuery("#assx_thumb_list li:last").remove();
	jQuery("#assx_thumb_list").prepend('<li>'+last+'</li>');
	
	jQuery("#sendtofriend").click(function(){
		jQuery("#sendToFriend").slideToggle("slow");
		return false;
	});
	
	jQuery("#sendToFriendForm").validate({
		submitHandler: function(form) {			
			jQuery("#spinner").show();
			var url = 'http://'+location.hostname+'/giwp/wp-content/themes/assignment-x/functions/sendtofriend.php';
			jQuery.post(url, {sendto:form.sendto.value, subject:form.subject.value, content:form.content.value},
			function(data){
				if(data == "success"){
					jQuery("#sendToFriend").prepend('<div id="messageSuccess">Your Message Has Been Sent.</div>');
					jQuery("#spinner").hide();
					setTimeout(
							function(){
									jQuery("#messageSuccess").slideUp("slow", function(){jQuery(this).remove();});
								}, 3000);
				} else {
					jQuery("#sendToFriend").prepend('<div id="messageFailure">There was a problem sending your message.</div>');
					jQuery("#spinner").hide();
					setTimeout(
							function(){
									jQuery("#messageFailure").slideUp("slow", function(){jQuery(this).remove();});
								}, 3000);
				}
				
			})
		}
	});
});

jQuery('#assx_next').live('click', function(){

	fader("#assx_image_list", "start");
	clearInterval(slideInterval);
	slideInterval = setInterval( function(){ fader("#assx_image_list", "start"); }, 5000);
	return false;
});

jQuery('#assx_prev').live('click', function(){

	fader("#assx_image_list", "end");
	clearInterval(slideInterval);
	slideInterval = setInterval( function(){ fader("#assx_image_list", "start"); }, 5000);

	return false;
});

function fader(list, start) {

	jQuery(list).each(function(){

		//list of the main images
		var $this = jQuery(this),
		$children = $this.children("li");
		
		//list of the slide details (title and description)
		var $details = jQuery("#assx_details_list"),
		$dchildren = $details.children("li");
		
		//list of the thumbnails
		var $thumbs = jQuery("#assx_thumb_list"),
		$tchildren = $thumbs.children("li");

		var $first = $children.eq(0), //grab first element (top item)
		$dfirst = $dchildren.eq(0),
		$tfirst = $tchildren.eq(0),
		$next, //initalize variable to hold the next item
		length = $children.length, //determine length of the array
		index = 0; //initialize an index variable

		if(start == 'start') {
			index = 0;
		} else {
			index = length;
		}

		for(var i = 0; i <= length; i++)
		{
			if($children.eq(i).css("z-index") == 2)
			{
				$first = $children.eq(i);
				index = i;
			}
		}

		
		//determine if your at the end of the array
		//if so, set index to the first item
		//otherwise, increment to the next index
		if(start == 'start') {
			if (index+1 >= length) { index = 0; }
	
			else { index++; }			
		} else {
			if (!$children.eq(index-1).length) { index = length-1; alert(index);}
	
			else { index--; }
		}
		//grab the next item
		$next = $children.eq(index);

		//set z-index for the next item so that it is, one above all other elements
		//but one under the top item
		$next.css({ 'z-index': 1 });
		 
		//fade the top item out, revealing the next item
		$first.fadeTo('slow', 0, function() {
			
		//then just set the z-index to the lower level
		//and fade it back in
		$first.css({ 'z-index' : 0 }).fadeTo(0,1);
		 
		//set the next, now the top, item to the top level
		$next.css({ 'z-index' : 2 });
		 
		//make the new top item, $first
		$first = $next;

		});
		
		$dchildren.animate({"top":"63"});
		$dchildren.eq(index).animate({"top": 0});
		
		if(start == 'start') {
			var first_thumb = $tchildren.eq(0).html();
			$thumbs.append('<li>'+first_thumb+'</li>');
			$thumbs.animate({"margin-top":'-63px'}, function(){
				jQuery("#assx_thumb_list li:first").remove();
				jQuery("#assx_thumb_list").animate({"margin-top":'0px'}, 0);
			});
		} else {
			var last_thumb = $tchildren.eq(length-1).html();
			$thumbs.prepend('<li>'+last_thumb+'</li>').animate({"margin-top":'-63px'}, 0, function(){
				$thumbs.animate({"margin-top":'0px'}, function(){
					jQuery("#assx_thumb_list li:last").remove();
					jQuery("#assx_thumb_list").animate({"margin-top":'0px'}, 0);
				});
			});
		}
		
		
	});
}