$(function() {

var animationSpeed = 700;

$("#main-right").css("display","block");
$("#main-right").css("visibility","hidden");
		
// Duplicate UL so we can filter the results

var duplicate = $("#imageScroller").html();

$("body").append("<div id='imageScrollerOrg'></div>");

$imageScrollerOrg = $("#imageScrollerOrg").html(duplicate);

// Get hash see if it matches any filter type we have

	var hash = window.location.hash;

	if(hash!=null && hash!=undefined && hash!="" && hash!="#") {
		hash = hash.replace("#",""); 
		if($imageScrollerOrg.find("."+hash).length>0) {
			hashHtml = "";
			$("#filterList").find("li").removeClass("active");
			$("#filterList").find("#"+hash).parent().addClass("active");
			$imageScrollerOrg.find("."+hash).each(function() {
				hashHtml+="<li>"+$(this).html()+"</li>";
			});
			$("#imageScroller ul").html(hashHtml);
		}
	}
		
	carouselVar = "";
	
	$("#imageScroller li").live({
        mouseenter:
           function()
           {
			$this = $(this);
			if($this.css("opacity")==1) {
				$this.find("img").stop(true,true).animate({ opacity: 1 },animationSpeed/2);
				carouselVar.stopAuto();
			}			
           },
        mouseleave:
           function()
           {
			if($this.css("opacity")==1) {
				$this.find("img").stop(true,true).animate({ opacity: 1 },animationSpeed/2);
				var size = carouselVar.size();
				if(size!=1) carouselVar.startAuto();
			}
           }
       }
	);

	function filterScroller(thisElem) {
	
		$("#filterList li a").unbind("click"); // stop filter spamming
	
		$("#filterList li").removeClass("active");
	
		$a = $(thisElem);				
		
		$a.parent().addClass("active");
		
		carouselVar.lock();		
		carouselVar.stopAuto();

		$("#imageScroller").animate({ opacity: 0 }, animationSpeed, function() {
	
			$this = $(this);
			
			carouselVar.reset();
			
			var id = $a.attr("ID");

			var i = 1;
			
			if(id=="filterAll") {
			
				$imageScrollerOrg.find("li").each(function(index,value) {
					carouselVar.add(i,"<li>"+$(this).html()+"</li>");						
					i++;
				});
				
				var size = $imageScrollerOrg.find("li").size();		
				
			} else {
			
				$imageScrollerOrg.find("li."+id).each(function(index,value) {
					carouselVar.add(i,"<li>"+$(this).html()+"</li>");						
					i++;
				});
				
				var size = $imageScrollerOrg.find("li."+id).size();
				
			}

			carouselVar.size(size);

			$this.find("li:first").animate({ opacity : 1 }, 0);
			
			Cufon.refresh();
			
			carouselVar.scroll(0);
	
			if(size!=1) carouselVar.startAuto();
			
			$this.animate({ opacity: 1 }, animationSpeed/2, function() {
				
				carouselVar.unlock();
				
				$("#filterList li a").bind("click",function() {
					filterScroller(this);
				});
			
			});							
			
			return false;
			
		});			
	
	}

	$("#filterList li a").bind("click",function() {
		filterScroller(this);
	});
	
	$("#next-button").click(function() {
		carouselVar.next();
		return false;
	});
	
	$("#prev-button").click(function() {
		carouselVar.prev();
		return false;
	});	

function carouselIn(carousel, item, idx, state) {

	Cufon.refresh();

	$("#imageScroller").find(".jcarousel-item[jcarouselindex='"+idx+"']").stop(true,true).animate({ opacity: 1 },animationSpeed);
	$("#imageScroller").find(".jcarousel-item").not("[jcarouselindex='"+idx+"']").stop(true,true).animate({ opacity: 0.0 },animationSpeed);

}	

function carouselCallback(carousel) {

	carouselVar = carousel;		
	
	$(window).load(function(){  // Wait till everything has finished loading.
		$(function() {
				$("#preloader").fadeOut("slow", function() {
					$("#main-right").css('visibility','visible').hide().fadeIn("slow",function() {						
						var size = carouselVar.size();
						if(size!=1) {
							carouselVar.startAuto(2);
						}
					});					
				});
		});
	});
	
}

	var carousel = $("#imageScroller").jcarousel({
		
		vertical : true,
		scroll : 1,
		//auto : 3,
		wrap : "circular",
		animation : animationSpeed,
		initCallback: carouselCallback,
		itemFirstInCallback: {
			onBeforeAnimation: carouselIn
		},		
		buttonNextHTML: null,
		buttonPrevHTML: null	
		
	});		

function windowResize() {				
	windowHeight = $(window).height()-42;						
	$(".jcarousel-clip-vertical").css("height",windowHeight);
}

$(window).resize(function() {
	windowResize();
});

windowResize();
	
});