var $outerContainer = $("#outerContainer"),
    mainTimeline = new TimelineLite();
	//BRIGHT SIDE STUFF
	var $slides = $(".slideBS");//slides
	var $slideshowBS = $("#slideshowBS");		//slideshow div	
	var currentSlide = 0;				//keep track on the current slide
	var stayTime = 5;					//time the slide stays
	var slideTime = 1.3;				//fade in / fade out time
	var slideCount = 0; 				//Add new variable to track how much times a happened


$(document).ready(function(){
    mainTimeline
    .from($outerContainer, 0.5, {autoAlpha:0})
	  
	  .add(slideOne()) 
		.add("panel2", "-=0.5") 
	  .add(slideTwo(), "panel2") 
  	.add("panel3", "-=0.5") 
    .add(Bspromo(), "panel3")
    
    ;
  });

function slideOne(){
	 var $promo01 = $("#promo01"),	
   		 $firstText01 = $("#promo01 h1"),
		 $secondText01 = $("#promo01 h2"), 
      tl = new TimelineLite();		
	
    tl.from($firstText01, 3, { opacity:0,ease:Back.easeOut})  
		.from($secondText01, 4, { opacity:0,ease:Back.easeOut},"-=03") 
		 //promo fade out
	.to($promo01, .8, { delay:5, opacity:0,ease:Back.easeOut}) 
		return tl;
}

function slideTwo(){
	 var $promo02 = $("#promo02"),
	 	$poloroids02 = $(".poloroid02"),	
   		 $logo = $("#logo02"),
		 $firstText02 = $("#promo02 h1"), 
      tl = new TimelineLite();

    tl.from($firstText02, 3, { opacity:0,ease:Back.easeOut}) 
		.from($logo, 0.5, { opacity:0,ease:Back.easeOut},"-=2.75")  
		.staggerFrom($poloroids02, 1, { opacity:0,ease:Back.easeOut},.2,"-=3") 
	.to($promo02, 0.5, { delay:5, opacity:0,ease:Back.easeOut}) 
	return tl;
}
function Bspromo(){
	var tl = new TimelineLite;
		tl.to($slideshowBS, .5, { autoAlpha:1}) 
		TweenLite.set($slides.filter(":gt(0)"), {autoAlpha:0});	//we hide all images after the first one, gt(0) grabs all the elements > 0 (first one)
		TweenLite.delayedCall((stayTime*2), nextSlideStop);				//wait for "stayTimex2" so it doesn't hide the first image and run the next function
		return tl;
	//this stops after slides run
	function nextSlideStop(){
				var tl = new TimelineLite;
				slideCount++; //increments the counter #
				if(slideCount >= $slides.length){ //if the # is greater than the # of slides, 
				TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:0} );	  //fade the current slide out over the same fadein/fadeout time as the other times
					//tl.to($slideshowBS, .8, { opacity:0,ease:Back.easeOut})  //fades out whole slideshow div
					return;				
				}
				TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:0} );		//fade out the old slide
				currentSlide = ++currentSlide % $slides.length;							//find out the next slide
				TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:1} );		//fade in the next slide
				TweenLite.delayedCall(stayTime, nextSlideStop);							//wait a couple of seconds before next slide
	}
}