$(document).ready(
	function()
	{
		$(".main_image .desc").show();
		$(".main_image .block").animate({ opacity: 1 }, 1 );
		var liHeight = 71;
		var liCount = $(".image_thumb ul li").length;
		
		var nextTopPos = 0;
		var liOnTop = 1;
		var currentLi = 0;
		var oldLi = 0;
		var pause = false;
		var rotateInProgress = false;
		var clicked = false;
		
		$("#paging_up").click(function(){
			if(liOnTop > 1){
				--liOnTop;
				nextTopPos = (liHeight * liOnTop) - liHeight;
			}
		});
		$("#paging_down").click(function(){
			if(liOnTop <= (liCount - 4)){
				nextTopPos = (liHeight * liOnTop);
				++liOnTop;
			}
		});
		
		var listRePos = function(){
			$("#scrollable").animate({'top': -nextTopPos}, 1000, function(){
				setTimeout(listRePos, 0);
			});
		};
		
		setTimeout(listRePos, 0);
		
		var getActive = function() {		
			var $a = 0;
			while($(".image_thumb ul li").eq($a)){
				$thisLi = $(".image_thumb ul li").eq($a);
				if($thisLi.hasClass("active"))
					break;
				++$a;
			}
			return $a;
		}
		
		$mainWindow = $("#image-description-rotator");
		$(".image_thumb ul li:first").addClass('active');
		var firstImgAlt = $(".image_thumb ul li.active").find('img').attr("alt");
		var firstImgTitle = $(".image_thumb ul li.active").find('a').attr("href");
		var firstImgDesc = $(".image_thumb ul li.active").find('.block').html();
		var firstImgDescHeight = $(".main_image").find('.block').height();
		$(".main_image img").attr({ src: firstImgTitle , alt: firstImgAlt });
		$(".main_image .block").html(firstImgDesc);
		
		$(".image_thumb ul li").click(function(){
			
			var imgAlt = $(this).find('img').attr("alt");
			var imgTitle = $(this).find('a').attr("href");
			var imgDesc = $(this).find('.block').html();
			var imgDescHeight = $(".main_image").find('.block').height();

			if ($(this).is(".active")) {
				return false;
			}else{
				$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 500 , function() { //Pull the block down (negative bottom margin of its own height)
					$(".main_image img").animate({opacity: 0}, 200, function(){
						$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
					});
					$(".main_image img").animate({opacity: 1.0}, 200, function(){
						$(".main_image .block").html(imgDesc).animate({ opacity: 1,  marginBottom: "0" }, 500 );
					});  //swap the html of the block, then pull the block container back up and set opacity
				});
			}
			
			$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all list-items
			$(this).addClass('active');  //Add class of 'active' on the selected list
			
			var $c = getActive();
			if($c <= 1){
				liOnTop = 1;
			}else{
				if($c > (liCount - 3) ){
					liOnTop = liCount - 3;
				}else{
					liOnTop = $c;
				}
			}
			nextTopPos = (liHeight * liOnTop) - liHeight;
			return false;

		}).hover(
			function(){ $(this).addClass('hover'); },
			function(){ $(this).removeClass('hover'); }
		);
		
		$("a.next").click(function(){
			clearTimeout(pause);
			clicked = true;
			oldLi = getActive();
			pause = setTimeout(imageRotate, 0);
			return false;
		});
		$("a.back").click(function(){
			clearTimeout(pause);
			clicked = true;
			oldLi = (getActive()+(liCount-2));
			pause = setTimeout(imageRotate, 0);
			return false;
		});
		var imageRotate = function() {
			if (!rotateInProgress) {
					rotateInProgress = true;
					pause = false;
					currentLi = (oldLi + 1) % liCount;
					$(".image_thumb ul li").eq(currentLi).trigger("click");
					rotateInProgress = false; 
					if (!pause && !clicked) {
						pause = setTimeout(imageRotate, 4000);
					}
					clicked = false;
					oldLi = currentLi;
			}
		}
		if (!pause) {
			oldLi = getActive();
			pause = setTimeout(imageRotate, 4000);
		}
		$mainWindow.hover(
			function() {
				clearTimeout(pause); 
				pause = false;
			},
			function() {
				if (!pause) {
					oldLi = getActive();
					pause = setTimeout(imageRotate, 2000);
				}
			}
		);
	}
);