/*
 * Author: Pradeep Kumar S, Vipashyin Web
 * Project: Horizontal Slider, for Invivia
 * Version: v1.01
 */
 
$(document).ready(function(){
	// Setting up slides
	var headWidth = 60;
	var shadowWidth = 20;
	var ZIndex = 500;
	var i = 0;
	var total = $("#slider_layers > span:even").length;
	var switchTimerId = 0; // For sleep
	var switchIndex = -1; // For sleep
	$("#slider_layers > span:even")
	.each(function(){
		// Considering Slide #0 is to be initially selected
		if (i == 0){
		    $(this).addClass("active").find(".slider_head").css("background-position", "right top")
			$(this).find(".slider_head").css("opacity", "0");
			}
		else {
			$(this).addClass("inactive");
			$(this).find(".slider_head").wrap("<div id='btnActive'></div>");
			$(this).find(".slider_head").css("opacity", "1");	
		}
		$(this).css({
			"width" : 960 - (headWidth + shadowWidth) * (total - 1),
			"right" : headWidth * (total - i - 1) + shadowWidth * (total - i),
			"z-index" : ZIndex - i
		});
		$(this).next().css({
			"right" : (headWidth + shadowWidth) * (total - i - 1),
			"z-index" : ZIndex - i
		});
		$(this).find(".slider_content").css("width", 800);
		i++;
	});	
	function bindHeadFunctions() {
		$("#slider_layers").find(".slider_head").parent("div")
			.bind("mouseover", function(){
			    $(this).children().css({ "background-position" : "right top" }); 
			    })
			.bind("mousedown", function(){
			    $(this).children().css({ "background-position" : "right top" }); 
			    switchSlide(ZIndex - $(this).parent().css("z-index"));
			    })
		    .bind("mouseout", function(){
			    if (!$(this).siblings().find(".slider_head").hasClass("active"))
				    $(this).children().css({ "background-position" : "right bottom" });
			    switchIndex = -1;
			    clearTimeout(switchTimerId);
		    });
	}
	// Initial Binding
	bindHeadFunctions();
	function switchSlide(newIndex) {
		if (switchIndex != newIndex) {
			switchIndex = newIndex;
			clearTimeout(switchTimerId);
			switchTimerId = setTimeout(function(){showSlide(switchIndex)}, 100); // Looks best when time >= animation time, so that it plays only if animation has ended
		}
	}
	function showSlide(index) {
		i = 0;
		$("#slider_layers > span:even")
		.each(function(){
			if (i == index) {
				$(this).removeClass("inactive").addClass("active").find(".slider_head").each(function(){
					$(this).clone().css("background-position", "right top").appendTo($(this).parent().parent()); 
					$(this).parent().remove();
				})
			}
			else if ($(this).hasClass("active")){
				$(this).removeClass("active").addClass("inactive").find(".slider_head").css("background-position", "right bottom").wrap("<div class='btnActive'></div>");
				$(this).find(".slider_head").animate({"opacity":"1"},500).css("display","block");
			}
			if($(this).hasClass("active")){
			    $(this).find(".slider_head").animate({"opacity":".0"},500).css("display","none");
			}
			$(this).animate({
				"right" :  (i < index) ? 960 - (headWidth * (i + 1) + shadowWidth * i) : headWidth * (total - i - 1) + shadowWidth * (total - i)
			}, 500);			
			$(this).next().animate({
				"right" : (i < index) ? 960 - (headWidth + shadowWidth) * (i + 1) : (headWidth + shadowWidth) * (total - i - 1)
			},  500);
			i++;
		});
		// Rebind functions
		bindHeadFunctions();
	}
});