// 'Yenko' Color changing slider with image fading
// @author Joel Grannas
// www.jQueryJOEL.com


(function($){
    $.fn.yenko = function(settings, data){		
        //SETTINGS
		var config = {
			'delay'			: 10000,
			'speed'			: 1200,
			'stacked'		: 3,
			'slideHeight'	: 130,
			'activeLocation': 1,
			'moveDirection' : "down"
		};
		if (settings){$.extend(config, settings);}

		//INITIAL SETUP
		var moving = "no";
		var setMoveDirection = config.moveDirection;
		$("#rightcol-uppernav li:eq(0)").addClass("active");
		var setName = createSetName();
		$("#yenko-nav-active").after("<ul id='yenko-nav-list'></ul>");
		$("#yenko-nav-background").css("height", config.slideHeight*config.stacked);
		buildData();
		
		//BUILD DATA
		function buildData(){
			setMoveDirection = config.moveDirection;
			$("#yenko-nav-active").css("top", config.slideHeight*config.activeLocation);
			//PRELOAD
			var count = 0;
			for(j=0;j<config.stacked;j++){
				$("<img />").load(function(){
					count++;
				}).attr('src', data[setName][j][3]);
				$("<img />").load(function(){
					count++;
				}).attr('src', data[setName][j][5]);
			}
			var int = setInterval(function(){
				if(count == config.stacked*2){
					clearInterval(int);
					buildStructure();
				}
			}, 500);
		}
			
		//STRUCTURE BUILD
		function buildStructure(){
			for(j=0;j<config.stacked;j++){
				var liStructure =	"<li class='yenko-nav-item' id='item" + j +"' style='top:" + j*config.slideHeight + "px'>" +
									"	<h1>" + data[setName][j][0] + "</h1>" +
									"	<span>" + data[setName][j][1] + "</span>" +
									"</li>";
				$("#yenko-nav-list").append(liStructure);
			}
			//ADD NAV ACTIVE IMAGES
			$("<img/>").attr("src",data[setName][config.activeLocation+1][5]).appendTo("#yenko-nav-active");
			$("<img/>").attr("src",data[setName][config.activeLocation][5]).appendTo("#yenko-nav-active");
			//MAIN BACKGROUND
			$("body").css("background",data[setName][config.activeLocation][6]);
			//ADD MAIN IMAGES
			$("<img/>").attr("src",data[setName][config.activeLocation+1][3]).appendTo("#yenko-image-container");
			$("<img/>").attr("src",data[setName][config.activeLocation][3]).appendTo("#yenko-image-container");
			//ADD CONTENT
			$("#yenko-image-data h1").text(data[setName][config.activeLocation][7]);
			$("#yenko-image-data span").text(data[setName][config.activeLocation][8]);
			$("#yenko-image-data a").attr("href",data[setName][config.activeLocation][2]);
			//BUTTON COLOR
			$("#yenko-image-data a").css("background-color",data[setName][config.activeLocation][6]);
			setTimer();
		}
		
		//TIMER
		function setTimer(){
			intID = setInterval(function(){
				animateSlider(getNextSlide());
			}, config.delay);
		}
		
		//CLEAR TIMER
		function clearTimer(){
			clearInterval(intID);	
		}
		
		//GET NEXT SLIDE
		function getNextSlide(){
			var currentID = parseInt($("li.yenko-nav-item").eq(config.activeLocation).attr("id").replace("item",""));
			if(setMoveDirection == "down"){
				myID = currentID+1;
				if(myID > data[setName].length-1){
					myID = 0;
				}
			} else {
				myID = currentID-1;
				if(myID < 0){
					myID = data[setName].length-1;
				}
			}
			return(myID);
		}
		
		//CLICK FUNCTION FOR SLIDES
		$("li.yenko-nav-item").live('click', function(){
			if($(this).index() !== config.activeLocation){
				if($(this).index() < config.activeLocation){
					setMoveDirection = "up";
				}
				if($(this).index() > config.activeLocation){
					setMoveDirection = "down";
				}
				var myID = parseInt($(this).attr("id").replace("item",""));
				clearTimer();
				//clearTimeout(clickTimer);
				animateSlider(myID);
				//var clickTimer = setTimeout(setTimer,5000);
			}
		});
		
		//MAIN ANIMATION FUNCTION
		function animateSlider(myID){
			if(moving == "no"){
				moving = "yes";
				var myTop = $("#item"+myID).css("top").replace("px","");
				var activeTop = config.activeLocation * config.slideHeight;
				var moveTop = activeTop - myTop;
				var slotsAbove = config.activeLocation;
				var slotsBelow = config.stacked-(config.activeLocation+1);
				
				//****PRELOAD - BEGIN
				var beforeID = myID-1;
				var afterID = myID+1;
				if(beforeID < 0){
					beforeID = data[setName].length-1;
				}
				if(afterID > data[setName].length-1){
					afterID = 0;	
				}
				$("<img />").load().attr('src', data[setName][beforeID][3]);
				$("<img />").load().attr('src', data[setName][beforeID][5]);
				$("<img />").load().attr('src', data[setName][afterID][3]);
				$("<img />").load().attr('src', data[setName][afterID][5]);
				//****PRELOAD - END
				
				//****ADD SLIDES - BEGIN
				var slidesToMove = moveTop / config.slideHeight;
				
				if(slidesToMove > 0){
					for(j=0;j<slidesToMove;j++){
						var addID = parseInt($("li.yenko-nav-item:first").attr("id").replace("item","")) - 1;
						var topLoc = parseInt($("li.yenko-nav-item:first").css("top").replace("px","")) - config.slideHeight;
						if(addID < 0){
							addID = data[setName].length + addID;
						}
						var liStructure =	"<li class='yenko-nav-item' id='item" + addID +"' style='top:" + topLoc + "px'>" +
										"	<h1>" + data[setName][addID][0] + "</h1>" +
										"	<span>" + data[setName][addID][1] + "</span>" +
										"</li>";
						$("#yenko-nav-list").prepend(liStructure);
					}
				}
				if(slidesToMove < 0){
					slidesToMove = slidesToMove * -1;
					for(j=0;j<slidesToMove;j++){
						var addID = parseInt($("li.yenko-nav-item:last").attr("id").replace("item","")) + 1;
						var topLoc = parseInt($("li.yenko-nav-item:last").css("top").replace("px","")) + config.slideHeight;
						if(addID > data[setName].length-1){
							addID = j*1;
						}
						var liStructure =	"<li class='yenko-nav-item' id='item" + addID +"' style='top:" + topLoc + "px'>" +
										"	<h1>" + data[setName][addID][0] + "</h1>" +
										"	<span>" + data[setName][addID][1] + "</span>" +
										"</li>";
						$("#yenko-nav-list").append(liStructure);
					}
				}
				//****ADD SLIDES - END
				
				$("#yenko-nav-background").css("background-position", "0px 0px");
				if(setMoveDirection == "down"){
					var bgMoveValue = "0px -" + config.slideHeight + "px";
				} else {
					var bgMoveValue = "0px " + config.slideHeight + "px";
				}
				
				//****ANIMATE NAVIGATION - BEGIN
				changeColors(myID);
				changeImage(myID);
				changeContent(myID);			
				$("#yenko-nav-active").animate({
					top: "-=" + moveTop
				}, config.speed/2, function(){
					//SLIDE BG
					$("#yenko-nav-background").animate({backgroundPosition: bgMoveValue}, config.speed/2);
					//SLIDE ALL
					$("li.yenko-nav-item, #yenko-nav-active").animate({
						top: "+=" + moveTop
					}, config.speed/2, function(){
						moving = "no";
						//REMOVE EXTRAS
						$("li.yenko-nav-item").each(function(){
							var myTopVal = parseInt($(this).css("top").replace("px",""));
							if(myTopVal >= config.stacked*config.slideHeight || myTopVal < 0){
								$(this).remove();
							}
						});
					});
				});
				//****ANIMATE NAVIGATION - END
			}
		}
		
		//ROTATE IMAGE
		function changeImage(myID){
			$("#yenko-image-container img:first").attr("src",data[setName][myID][3]);
			$("#yenko-image-container img:last").fadeOut(config.speed, function(){
				$(this).prependTo($("#yenko-image-container"));
				$("#yenko-image-container img:first").show();
			});
		}
		
		//CHANGE COLORS
		function changeColors(myID){
			$("<img/>").hide().attr("src",data[setName][myID][5]).appendTo("#yenko-nav-active").fadeIn(config.speed/2, function(){
				$("#yenko-nav-active img:first").remove();
			});
			$("body").animate({
					backgroundColor:data[setName][myID][6]
			},config.speed/2);
		}
		
		//CHANGE CONTENT
		function changeContent(myID){
			$("#yenko-image-data h1").fadeOut(config.speed/2,function(){
				$(this).text(data[setName][myID][7]);
				$(this).fadeIn(config.speed/2);
			});
			$("#yenko-image-data span").fadeOut(config.speed/2,function(){
				$(this).text(data[setName][myID][8]);
				$(this).fadeIn(config.speed/2);
			});
			$("#yenko-image-data a").fadeOut(config.speed/2,function(){
				$("#yenko-image-data a").attr("href",data[setName][myID][2]).css("background-color",data[setName][myID][6]);
				$(this).fadeIn(config.speed/2);
			});
			
		}
		
		//HOVER FOR VIEW SITE BUTTON
		$("#yenko-image-data a").hover(function(){
			$(this).css("background-position","0px -28px")
		}, function(){
			$(this).css("background-position","0px 0px")
		});
		
		//CLEAR DATA
		function clearData(){
			$("li, div, body").stop().clearQueue();
			clearInterval(intID);
			$("#yenko-image-container img").removeAttr("src");
			$("#yenko-nav-active img").removeAttr("src");
			$("#yenko-nav-list").empty();
			$("#yenko-nav-active").empty();
			$("#yenko-image-container").empty();
		}	
		
		//CLICK FUNCTION FOR MAIN NAV
		$("#rightcol-uppernav li").click(function(){
			if(moving == "no"){
				if($(this).hasClass("active")){
					//DO NOTHING
				} else {
					$(this).css("color","#5F5F5F");
					$("#rightcol-uppernav li").removeClass("active");
					$(this).addClass("active");
					setName = createSetName();
					clearData();
					buildData();
				}
			}
		});
			
		//CREATE SET NAME
		function createSetName(){
			switch ($("#rightcol-uppernav li.active").index()) {
					case 0: return "development"; break;
					case 1: return "design"; break;
					case 2: return "direction"; break;
					default: return "no data";
			}
		}
    };
})(jQuery);