/**
 * @author bdgeorge
 */
$(document).ready(function(){
	/* Initialise the list here */
	var slideImages=
		[
			{'description':'Visit the Lookbook','image':'images/homeimage1.jpg'},
			{'description':'Visit the Lookbook','image':'images/homeimage2.jpg'},
			{'description':'Visit the Lookbook','image':'images/homeimage3.jpg'},
			{'description':'Visit the Lookbook','image':'images/homeimage4.jpg'},
			{'description':'Visit the Lookbook','image':'images/homeimage5.jpg'}						
		];	
	/****************************************
	 * Don't change anything from here down *
	 ****************************************/ 
	 
	 var slideShow = {
	 	/**
	 	 * Slide Show Object
	 	 * This object will look for any div with the named class and start cycling through it
	 	 */
		/* Some Constants*/
		strShow: ".SlideShowTeaser", 	//This class name will hold the slide show 
		strTemp: ".temp",		//This class is the temporary image that should be in place to start with
		strSlideId: "slide_", 	//This class is used to hold the slides
		intDisplay: 3000, 		//The time to show each slide
		intFade: 750,			//The Fade in/out time
		count:0,				//The number of images found to display
		mySlides:"",			//Private Holding object
		init: function(data){
			//Now we have returned some data, time to show it as a slide show
			//first check that we have some valid results
			if (data.length > 0) {
				//Now look for our target div to attach stuff to and extend it with the returned data
				
				//wack the returned data into the data method of the div so that we don't have call the php file again
				mySlides = $(slideShow.strShow);
				mySlides.deck = data;			
				mySlides.count =data.length;	
				//initialise a counter variable to 0
				mySlides.counter=0;									
		        $.each(mySlides.deck, function(i,item){
					mySlides.append('<img style="display:none" class="'+slideShow.strSlideId+i+'"src="'+item.image+'" title="'+item.description+'"/></a>');				
				});	
				if (mySlides.count > 1){							
					//Now start the timed rotation			
					mySlides.timer = setInterval(slideShow.nextSlide, slideShow.intDisplay);	
					//Now pause/restart the timer as we mouseenter/mouseleave from the outer div
					$(slideShow.strShow).bind("mouseenter",function(){
						clearInterval(mySlides.timer);
					}).bind("mouseleave",function(){
						mySlides.timer = setInterval(slideShow.nextSlide, slideShow.intDisplay);
					});		
				} else {
					//remove the next and previous links 
					//$("#product_rotator a.next").remove();
					//$("#product_rotator a.last").remove();						
				}	
				//We're ready to go so fade out the placeholder and fade in the first content
				$(slideShow.strShow +" "+slideShow.strTemp).fadeOut(500, function(){
					//console.log(slideShow.strShow +" "+slideShow.strTemp);					
					$("."+slideShow.strSlideId+"0").fadeIn(slideShow.intFade);
				});	
				//$('.SlideShow .temp').fadeOut(500);				
			}		
		},
		nextSlide: function(){
			//Create a next fact function, this will hide the current fact and show the previous one, if we are on the first fact then go the last
			//calculate the next fact
			var nextProduct = 0;			
			mySlides.counter == mySlides.count-1 ? nextProduct=0: nextProduct = mySlides.counter+1;	
			//console.log("Next Slide! Counter:"+mySlides.counter+" Next:"+nextProduct+" "+slideShow.strSlideId+mySlides.counter);				
			$("."+slideShow.strSlideId+mySlides.counter).fadeOut(slideShow.intFade);
			$("."+slideShow.strSlideId+nextProduct).fadeIn(slideShow.intFade);
			mySlides.counter=nextProduct;
			return false;			
		},
		lastSlide: function(){
			
		}
	 }
	 slideShow.init(slideImages);
});