/*
 * 	Easy Slider 1.7 - jQuery plugin
 *	written by Alen Grakalic	
 *	http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
/*
 *	markup example for $("#slider").easySlider();
 *	
 * 	<div id="slider">
 *		<ul>
 *			<li><img src="images/01.jpg" alt="" /></li>
 *			<li><img src="images/02.jpg" alt="" /></li>
 *			<li><img src="images/03.jpg" alt="" /></li>
 *			<li><img src="images/04.jpg" alt="" /></li>
 *			<li><img src="images/05.jpg" alt="" /></li>
 *		</ul>
 *	</div>
 *
 */

(function($) {

	$.fn.easySlider = function(options){
	  
		// default configuration properties
		var defaults = {			
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			controlsShow:	true,
			controlsBefore:	'',
			controlsAfter:	'',	
			controlsFade:	true,
			firstId: 		'firstBtn',
			firstText: 		'First',
			firstShow:		false,
			lastId: 		'lastBtn',	
			lastText: 		'Last',
			lastShow:		false,				
			vertical:		false,
			speed: 			800,
			auto:			false,
			pause:			1500,
			continuous:		false, 
			numeric: 		false,
			numericId: 		'controls'
		}; 
		
		var options = $.extend(defaults, options);  
		
			
		this.each(function() {  
			var obj = $(this); 				
			var s = $("li", obj).length;
			var w = $("li", obj).width(); 
			var clickable = true;
			obj.width(w); 
			obj.css("overflow","hidden");
			var ts = s-1;
			var t = 0;
			$("ul", obj).css('width',s*w);			
			
			if(options.continuous){
				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
				$("ul", obj).css('width',(s+1)*w);
			};				
			
			$('#subNavi ul li:first').addClass('act').siblings().addClass('inact');
			
			function adjust(){
				if(t>ts) t=0;		
				if(t<0) t=ts;	
				if(!options.vertical) {
					$("ul",obj).css("margin-left",(t*w*-1));
				} 
				clickable = true;
				if(options.numeric) setCurrent(t);
			};
			
			
		//-----------------------------------------------------------------------------------------------------------
		//The new image will scoll in and kick the old image out.
		//With the setting ScollIn = false, The original image will scroll out and reveal the new image
		var Scroll = function(ScrollIn){
			//Save the original status so we could set it in the end
			var backup = Obj.clone(true);		
			//Create a viewport for it
			Obj.wrap("<div id='GrpViewport-"+ EffectID+"'></div>");
			$("#GrpViewport-" + EffectID).css("overflow","hidden");
			$("#GrpViewport-" + EffectID).width(Obj.width());
			$("#GrpViewport-" + EffectID).height(Obj.height());								
			//Generate the effect map, move the effect map overlay the original map				
			$("#GrpViewport-" + EffectID).append("<img class='GrpEffectImg' id='"+EffectImageId.replace("#","")+"'/>");
			$(EffectImageId).css("position", "absolute");
			//Find where the Effect Image start
			var StartTop = 0;
			var StartLeft = 0;				
			switch(Args.Direction){
				case "RightLeft":	StartLeft = -Obj.width();	break;
				case "LeftRight":	StartLeft = Obj.width();	break;
				case "TopDown":		StartTop = -Obj.height();	break;
				case "DownTop":		StartTop = Obj.height();	break;
			}
			//In scroll in using the Start position, else, Set it to 0 so it could scroll out
			//Also need o set the destination of the animate different
			if(ScrollIn){
				$(EffectImageId).attr("src", Args.NewImage);
				$(EffectImageId).css("top", StartTop);
				$(EffectImageId).css("left", StartLeft);
				$(EffectImageId).css("opacity", Args.StartOpacity);
				EndTop = 0;
				EndLeft = 0;
				//Don't change the opacity if it scroll in
				EndOpacity = 1; 
			}else{
				$(EffectImageId).attr("src", Obj.attr("src"));
				$(EffectImageId).css("left", 0);
				$(EffectImageId).css("top", 0);
				Obj.attr("src", Args.NewImage);
				EndTop = StartTop;
				EndLeft = StartLeft;
				//Change the opacity base on the input				
				EndOpacity = Args.EndOpacity; 
			}
			//We need to treat absolute position different					
			//In some case there're text arround the image, it could be a bit mess up
			if(Obj.css("position")!="absolute")
			{
				$("#GrpViewport-" + EffectID).css("position","relative");					
				Obj.css("position","absolute");
			}
			else
			{			
				$("#GrpViewport-" + EffectID).css("position","absolute");
				$("#GrpViewport-" + EffectID).css("left",Obj.css("left"));
				$("#GrpViewport-" + EffectID).css("top",Obj.css("top"));		
				Obj.css("top",0);
				Obj.css("left",0);
			}
			//if effect the original image, then move it as well
			if(Args.EffectOriginal && ScrollIn)
			{			
				//Move the original image along
				Obj.animate({"top": - StartTop,
							"left": - StartLeft}, Args.Speed);									
			}			
			//Start the effect
			$(EffectImageId).animate({"opacity":EndOpacity,"top":EndTop,"left":EndLeft}, Args.Speed, 
					function(){
						//Finish the effect, and replace the viewport with this area
						backup.attr("src",Args.NewImage);
						//Also remove the Attr for imageswitch
						backup.removeAttr("imageswitch");
						$("#GrpViewport-" + EffectID).replaceWith(backup);
						EndFunction();
				});	
			
		};
		
	
			function animate(dir,clicked){
				if (clickable){
					clickable = false;
					var ot = t;				
					switch(dir){
						case "next":
							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;					
							break; 
						case "prev":
							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
							break; 
						case "first":
							t = 0;
							break; 
						case "last":
							t = ts;
							break; 
						default:
							t = dir;
							break; 
					};
					
									
					
					var diff = Math.abs(ot-t);
					var speed = diff*options.speed;						
					if(!options.vertical) {
						$('#subNavi ul li.space a').click(function(){
							
							t=0;
							p = (t*w*-1);
							$('li.space').addClass('act');
							$('li.bnr_reform').removeClass('act');
							$('li.bnr_renovation').removeClass('act');
							$('li.bnr_store').removeClass('act').addClass('inact');
							clearTimeout(timeout);
							
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);	
						});
						$('#subNavi ul li.bnr_reform a').click(function(){
							
							t=1;
							p = (t*w*-1);
							$('li.space').removeClass('act').addClass('inact');
							$('li.bnr_reform').addClass('act');
							$('li.bnr_renovation').removeClass('act');
							$('li.bnr_store').removeClass('act');
							clearTimeout(timeout);
							
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);	
						});
						$('#subNavi ul li.bnr_renovation a').click(function(){
																
							t=2;
							p = (t*w*-1);
							$('li.space').removeClass('act');
							$('li.bnr_reform').removeClass('act').addClass('inact');
							$('li.bnr_renovation').addClass('act');
							$('li.bnr_store').removeClass('act');
							clearTimeout(timeout);
							
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);	
						});
						$('#subNavi ul li.bnr_store a').click(function(){
																 
							t=3;
							p = (t*w*-1);
							$('li.space').removeClass('act');
							$('li.bnr_reform').removeClass('act');
							$('li.bnr_renovation').removeClass('act').addClass('inact');
							$('li.bnr_store').addClass('act');
							clearTimeout(timeout);
							
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);	
						});
						
						p = (t*w*-1);
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);				
					} 
					
					if(options.auto && dir=="next" && !clicked){
						if(t>=4) {
							t=0;
						}
						
						if(t==0){
						$('li.bnr_store').removeClass('act').addClass('inact');
						$('li.space').addClass('act');
						}
						
						if(t==1){
						$('li.space').removeClass('act').addClass('inact');
						$('li.bnr_reform').addClass('act');	
						}
						
						if(t==2){
						$('li.bnr_reform').removeClass('act').addClass('inact');
						$('li.bnr_renovation').addClass('act');
						}
						
						if(t==3){
						$('li.bnr_renovation').removeClass('act').addClass('inact');
						$('li.bnr_store').addClass('act');
						}
						
						
						timeout = setTimeout(function(){
							animate("next",false);
						},diff*options.speed+options.pause);
					};
			
				};
				
			};

			// init
			var timeout;
			if(options.auto){;
				timeout = setTimeout(function(){
					animate("next",false);
				},options.pause);
			};		
			
			if(options.numeric) setCurrent(0);
		
			
			
		});
	  
	};

})(jQuery);