// JavaScript Document
(function($) {
 
	 			
 $.fn.slideShow = function(options) {
  
	 var opts = $.extend({}, $.fn.slideShow.defaults, options);	 
	 
	 var sld={	 
			
			thumbNail:$("#"+opts.thumbWrapper+" ul li"),	
			 
			 leftClick:$(".leftClick"),
			 
			 rightClick:$(".rightClick"),
			 
			 thumbArrow:$(".thumbArrow"),
			 
			 autoSlide:true,
			 
			 resetAuto:null,
			 
			 resetAutoLoop:null,		 
			 
			 isAnimatingBanner:false,
			 
			 isAnimatingLoop:true,
			 
			 imageChange:null,		 
						 
			 currentImage:1,
			 
			 currentBlock:1,   // changing the block on first loop						 
					 
			 thumbChange:null,
			 
			 totalBlock:(opts.totalImages/3),

			 loop:function(){
			 
				if(sld.autoSlide){
					(sld.currentImage==opts.totalImages) ? (sld.currentImage=0,sld.currentBlock=1) : '';
														
							sld.isAnimatingLoop=true;
							sld.currentImage+=1;	
							
							sld.changeBanner(sld.currentImage);							
						
							sld.changeArrowLoop();
						
					
					}			
			 
			 },			 
			 thumbClick:function(T){
			 
						sld.clearAutoloop();
			 
						if(!sld.isAnimatingBanner){
						
							sld.isAnimatingBanner=true;
							var currentClick=sld.thumbNail.index(T)+1;
							//3*Bn-(3-N)	
							sld.currentImage=3*sld.currentBlock-(3-currentClick);		

							sld.changeBanner(sld.currentImage);
							
							(currentClick==1) ? (sld.thumbArrow.animate({left:'50px'},500) ): '';
							(currentClick==2) ? (sld.thumbArrow.animate({left:'135px'},500) ): '';
							(currentClick==3) ? (sld.thumbArrow.animate({left:'220px'},500) ): '';
						}
						
			},
			 rightArrowClick:function(){
			 
							sld.clearAutoloop();
			 
							if(!sld.isAnimatingBanner){
							
							
														
							if(sld.currentBlock < sld.totalBlock)
								{
								sld.isAnimatingBanner=true;
								sld.thumbArrow.animate({left:'50px'},500);
								sld.leftClick.animate({opacity:'1'},300);
								
								sld.currentBlock+=1;
								
								var incBlockImage=(3*sld.currentBlock)-2;								
								$("#"+opts.thumbWrapper+"  img:eq(0)").fadeOut(500,function(){	
								for(var i=0;i<=2;i++){								
								sld.thumbChange='images/banner/'+opts.thumbImageName+'_'+(incBlockImage)+".jpg";			
								$("#"+opts.thumbWrapper+" img:eq(" + ( i )+ ")").attr("src",sld.thumbChange);
								incBlockImage+=1;					
								}
								});								
								$("#"+opts.thumbWrapper+" ul li img").fadeOut(500).fadeIn();					
								
								sld.currentImage=incBlockImage;								
								sld.changeBanner(sld.currentImage);
							
								
								}
								else{
									sld.rightClick.animate({opacity:'0.3'},300);									
								}
								
								
							}
							
			 },
			 leftArrowClick:function(){
				
							sld.clearAutoloop();
			 
							if(!sld.isAnimatingBanner){
							
														
							if(sld.currentBlock > 1)
								{
								
								sld.isAnimatingBanner=true;						
								sld.thumbArrow.animate({left:'50px'},500);
								sld.rightClick.animate({opacity:'1'},300);
								
								sld.currentBlock-=1;
								
								var incBlockImage=(3*sld.currentBlock)-2;								
								$("#"+opts.thumbWrapper+"  img:eq(0)").fadeOut(500,function(){	
								for(var i=0;i<=2;i++){								
								sld.thumbChange='images/banner/'+opts.thumbImageName+'_'+(incBlockImage)+".jpg";			
								$("#"+opts.thumbWrapper+" img:eq(" + ( i )+ ")").attr("src",sld.thumbChange);
								incBlockImage+=1;					
								}
								});								
								$("#"+opts.thumbWrapper+" ul li img").fadeOut(500).fadeIn();	
								
								sld.currentImage=incBlockImage;								
								sld.changeBanner(sld.currentImage);							
								
								}
								else{
									sld.leftClick.animate({opacity:'0.3'},300);									
								}
								
								
							}
				
			 
			 },
			 changeBanner:function(imageNo){
							sld.imageChange='images/banner/'+opts.imageName+'_'+(imageNo)+".jpg";			
							$("#"+opts.imageWrapper+" .back img").attr("alt",opts.alt[imageNo]);
							$("#"+opts.imageWrapper+" .back img").attr("src",sld.imageChange);							
							$("#"+opts.imageWrapper+" .active").fadeOut(800,function(){sld.isAnimatingLoop=false,sld.isAnimatingBanner=false});
							$("#"+opts.imageWrapper+" .back").fadeIn(800).removeClass('back');							
							$("#"+opts.imageWrapper+" .active").removeClass('active').addClass('back').siblings().addClass('active');
				
			 },
			 changeThumbOnLoop:function(){
			 
						sld.rightClick.animate({opacity:'1'},300);
						sld.leftClick.animate({opacity:'1'},300);
			 
						(sld.currentImage!=1) ? ((sld.currentBlock+=1)) : '';
				
						var incImage=sld.currentImage;
						 $("#"+opts.thumbWrapper+"  img:eq(0)").fadeOut(500,function(){			
							for(var i=0;i<=2;i++){								
								sld.thumbChange='images/banner/'+opts.thumbImageName+'_'+(incImage)+".jpg";			
								$("#"+opts.thumbWrapper+" img:eq(" + ( i )+ ")").attr("src",sld.thumbChange);
								incImage+=1;					
							}
							});
							$("#"+opts.thumbWrapper+" ul li img").fadeOut(500).fadeIn();
			 
			 },			 
			 changeArrowLoop:function(){
			 
						(sld.currentImage%3==1) ? (sld.thumbArrow.animate({left:'50px'},500),sld.changeThumbOnLoop() ): '';
						(sld.currentImage%3==2) ? (sld.thumbArrow.animate({left:'135px'},500) ): '';
						(sld.currentImage%3==0) ? (sld.thumbArrow.animate({left:'220px'},500) ): '';
			 },
			 clearAutoloop:function(){
				sld.autoSlide=false;
				clearTimeout(sld.resetAuto);
				sld.resetAuto=setTimeout(sld.resetAutoLoop,opts.resetIntervalTime);
			 },
			 resetAutoLoop:function(){			 
				sld.autoSlide=true;
			 }
			 
			 
		}//sld

	 
	 return this.each(function() {
	 
	 var $this=$(this);
	 
	 
		$("#"+opts.imageWrapper+" .back").css({display:'none'});
				
		var auto=setInterval(sld.loop,opts.autoIntervalTime);
		
		
		sld.thumbNail.click(function(){			
			sld.thumbClick(this);		
		});
		sld.rightClick.click(function(){			
			sld.rightArrowClick(this);		
		});
		sld.leftClick.click(function(){			
			sld.leftArrowClick(this);		
		});
		
		
		
		});
	
	
	};

$.fn.slideShow.defaults = {
		imageName:'Banasura_Banner',
		thumbImageName : 'Banasura_Banner',		
		totalImages:12,
		imageWrapper:'imageWrapper',
		thumbWrapper:'thumbNailWrapper',
		thumbNailLength:3,
		autoIntervalTime:6000,
		resetIntervalTime:20000,
		alt:['',
		'Kerala Resort - Front View at Twlight',
		'Nature Resort - The massive Earth structure seen from behind',
		'Eco Resort - The Coridor of Main Bulding'
		]
		};
 

  
})(jQuery);

$(document).ready(function(){

	$("#imageWrapper").slideShow();	
	
});