// JavaScript Document
$(document).ready(function(e) {
    
	$("#slideshow").append('<div id="active-image"></div><div id="inactive-image"></div><ul id="dots"></ul>');
	$("#slideshow #images").hide();
	
	var slideshowTimeOut = 4000;
	
	var slideshowTimer;
	var startSlideshowTimer;
	
	
	var images = $("#slideshow #images").children();
	
	var vhBtn = $("#wrapper #left-col a#vh");
	var mgBtn = $("#wrapper #left-col a#mg");
	var yeastBtn = $("#wrapper #left-col a#yeast");
	var meBtn = $("#wrapper #left-col a#me");
	
	var slideshowWidth = $("#slideshow").width();
	
	var totalImages = images.length;
	var currentImage = 0;
	
	$.each(images, function(){
		$("#dots").append('<li><a href="javascript:void(0);"></a></li>');
	});

	var dots = $("#slideshow #dots").children();
	
	onSlideshowTimer();
	
	function onSlideshowTimer(){
		
		if (currentImage < totalImages){
			currentImage ++;
		} else {
			currentImage = 1;
		}
		
		switchImage();

		slideshowTimer = setTimeout(onSlideshowTimer, slideshowTimeOut);
	}
	
	
	//Lets switch logos!
	function switchImage (noAnim){
		
		//switch colored logo versions
		$("#left-col a").removeClass("active"); 
		$("#left-col a").eq(currentImage-1).addClass("active");

		var iImageHtml = $("#slideshow #active-image").html(); //get Image's HTML
		var aImageHtml = images.eq(currentImage-1).html(); //get Image's HTML
		
		if(!noAnim){
			//Sliding
			//$("#slideshow #active-image").html(aImageHtml).find("img").css("margin-left", slideshowWidth+"px").animate({marginLeft:"0"},"slow"); // Add it to the screen
			//$("#slideshow #inactive-image").html(iImageHtml).find("img").css("margin-left", "0px").animate({marginLeft:-slideshowWidth+"px"},"slow"); // Add it to the screen
			
			//Fading
			$("#slideshow #active-image").html(aImageHtml).find("img").css("margin-left","0px");
			$("#slideshow #inactive-image").html(iImageHtml).find("img").show().fadeOut('slow'); // Add it to the screen
		} else {
			$("#slideshow #active-image").html(aImageHtml).find("img").css("margin-left","0px"); // Add it to the screen
		}
		
		dots.find("a").removeClass("active").end().eq(currentImage-1).find("a").addClass("active"); //change dots
	}
	
	$("#dots a").click(function(){
		currentImage = $("#dots a").index(this)+1;
		switchImage();
		clearTimeout(slideshowTimer);
		clearTimeout(startSlideshowTimer);
		slideshowTimer = setTimeout(onSlideshowTimer, slideshowTimeOut);
	});
	
	$("#left-col a").mouseover(function(){
		currentImage = $("#left-col a").index(this)+1;	
		switchImage(true);
		clearTimeout(slideshowTimer);
		clearTimeout(startSlideshowTimer);
	});
	
	$("#left-col a").mouseout(function(){
		clearTimeout(slideshowTimer);
		clearTimeout(startSlideshowTimer);
		startSlideshowTimer = setTimeout(onSlideshowTimer, slideshowTimeOut);
	});
	
});