$(document).ready(function(){
	//set timed auto-scroll on or off..
	var autoScroll = 0;
	
	
	//keep track of which DIV we're viewing (always relates to index of DIV in the markup which is reordered at looping of banner)..
	var currentView = 0;
	//..so we need a second variable to track which number panel you're looking at in the sequence..
	var panelID = 0;
	//need to know dot list width too..
	var dotWidth = 0;
	//work out how many panels there are
	var maxViews = $("#hero-panel-container .hero-panel-animate").size();
	//toggle to lock scrolling when we need to disable buttons
	var allowScroll = 0;
	//timers
	var timerID;
	var overrideTimerID;
	var iOSscrollTimerID;
	
	
	$("#non-js-message").css("display", "none");
	$("#hero-preloader").css("display", "block");
	$("#page-header-inner-home").css("height","260px");
	
	var leftArrowImage = new Image;
	leftArrowImage.src = "assets/hero-left-button-hover.png";
	var rightArrowImage = new Image;
	rightArrowImage.src = "assets/hero-right-button-hover.png";
	
	preloadImgs = function(){
  	  var currentImage;
  	  var n;
 	  var sliderImageObj;
      var imagesLoaded = 0;
      	
 	  for (n = 0; n < maxViews; n++) {
   	   	//alert(n);
   	   	
   	   	sliderImageObj =  new Image;
   	   	
   	  	currentImage =  "assets/hero-project-"+(n+1)+".jpg";
  	     
  	    sliderImageObj.src = currentImage;
  	    	
  	    $(sliderImageObj).imagesLoaded(function() {
  	  		imagesLoaded++;
        	if(imagesLoaded == maxViews-1){
        	//alert("loaded all!");
        		initBanner();
        	};

  	    });  	   	
			
       	};	
 	};
	
	function initBanner(){
		//$("#hero-holder").css("opacity", 0);
		
		//$("#hero-preloader").animate({opacity: 0}, 600, "easeOutExpo", function(){
			$("#hero-preloader").css("display", "none");
			
			$("#hero-holder").css("display", "block");
			
			allowScroll = 1;
		
			if(isIE6 == true){
				$("#hero-dot-list").css("display","none");
			};
			
			//get the width of the dots..
			//and centre them horizontally in the banner..
			dotWidth = $("#hero-dot-list").width();
			$("#hero-dot-list").css("margin-left", -(dotWidth/2)+"px");
			
			//$("#hero-holder").animate({opacity: 1}, 600, "easeOutExpo");
			
		//});
		
		
	};

	preloadImgs();
		
	
	//init stuff
	$("#hero-panel-container").shuffle();
	$("#hero-panel-container").css("width", 818*maxViews+"px")
	$("#hero-panel-container").css("left", "0px");
	
	$("#hero-button-left").mouseenter(function() { 
  	  $("#hero-button-left").css("background-image", "url(\"assets/hero-left-button-hover.png\")");
  	  if(isIE6 == true){$("#hero-button-left").supersleight({shim: "assets/x.gif"});};    	  
	});
	$("#hero-button-left").mouseleave(function() { 
  	  $("#hero-button-left").css("background-image", "url(\"assets/hero-left-button.png\")"); 
  	  if(isIE6 == true){$("#hero-button-left").supersleight({shim: "assets/x.gif"});};    	 
	});
	$("#hero-button-right").mouseenter(function() { 
  	  $("#hero-button-right").css("background-image", "url(\"assets/hero-right-button-hover.png\")"); 
  	  if(isIE6 == true){$("#hero-button-right").supersleight({shim: "assets/x.gif"});};    	  
	});
	$("#hero-button-right").mouseleave(function() { 
  	  $("#hero-button-right").css("background-image", "url(\"assets/hero-right-button.png\")");   
  	  if(isIE6 == true){$("#hero-button-right").supersleight({shim: "assets/x.gif"});};  	 
	});
		
	
	$("#hero-dot-list ul li:first-child").remove();

	//create the CSS for the background images (so we don't have to edit the CSS file each time we want a new project up).. be aware that in the css file the url would go '../assets/' not 'assets/'
	//And set absolute positions of panels
	for(var i=1;i<=maxViews;i++){
		var targetID = "#hero-project-"+i;
		var backgroundURL = "url(\"assets/hero-project-"+i+".jpg\")";
		$(targetID).css({"background-image": backgroundURL});
		
		//Add dots (list items in unordered list)..
		$("#hero-dot-list ul").append("<li></li>");
						
		if(i > 1){
			$("#hero-panel-container .hero-panel-animate:eq("+(i-1)+") div.hero-title").css("left", "-800px");
			$("#hero-panel-container .hero-panel-animate:eq("+(i-1)+") div.hero-subtitle").css("left", "-800px");
			$("#hero-panel-container .hero-panel-animate:eq("+(i-1)+") div.hero-link").css("left", "-800px");
		};
	};
	
		
	//set first dot to active..
	$("#hero-dot-list ul li:first-child").addClass("active");
	
	
	//override panel cycle timer on hover of 'view case study' link so it doesn't shoot off before you click it..
	$(".hero-link").mouseenter(function() {
  		overrideTimer();
	});
	
	//start looping timer	
	startTimer();
	
			
	//set IE transparent PNG fix 
	$("#hero-holder").supersleight({shim: "assets/x.gif"});
			
	//scroll button functionality - if buttons aren't locked override timers and kick off the scrolling
  	$("#hero-button-left").click(function() {
		if(allowScroll == 1){
			overrideTimer();
			changeView(-1);
		};		
	});
	$("#hero-button-right").click(function() {			
		if(allowScroll == 1){
			overrideTimer();
			changeView(1);
		};	
	});
    
    //timer stuff.. 2 timers.. one for regular interval header animation, one to kick in when user has scrolled the header.
    //It does nothing for 20secs then starts the loop timer back up
    function startTimer(){
    	if(autoScroll == 1){
    		timerID = setTimeout(function() { resetTimer(); }, 8000);
    	}
    };
    function startOverrideTimer(){
  	    if(autoScroll == 1){
  	   		clearTimeout(timerID);
    		overrideTimerID = setTimeout(function() { resetTimer(); }, 20000);
    	}
    };
    function resetTimer(){
  		//reset timers and scroll if appropriate
  		clearTimeout(overrideTimerID);
    	clearTimeout(timerID);
    	if(allowScroll == 1){
    		$(".hero-panel-animate").stop(true);
    		changeView(1);
    		
    	};	
    	startTimer();
    	
    };
    function overrideTimer(){
    	clearTimeout(overrideTimerID);
    	clearTimeout(timerID);
    	startOverrideTimer();
    };
	
	
      
    function changeView(num){
		//lock buttons while animations happen
		allowScroll = 0;
		
		//remove CURRENT active dot and set to inactive..
		$("#hero-dot-list ul li:eq("+panelID+")").removeClass("active");
		
		//increment/decrement the current panel you're looking at
		currentView += num;
		//also do the same to panel number var..
		panelID += num;	
		
		if(panelID < 0){
			panelID = maxViews-1;
		}else if(panelID > maxViews -1){
			panelID = 0;
		};
		
		//set correct dot to active..
		$("#hero-dot-list ul li:eq("+panelID+")").addClass("active");
				
		$("#hero-panel-container .hero-panel-animate").each(function(index){
			//go through animateable panels and move the titles/subtitles away off-'screen'. if the index of the div we're looking at matches the focus we're keeping track of, animate the text dont just css it away..
			if(index != currentView-num){
				$("#hero-panel-container .hero-panel-animate:eq("+index+") div.hero-title").css("left", "-800px");
				$("#hero-panel-container .hero-panel-animate:eq("+index+") div.hero-subtitle").css("left", "-800px");
				$("#hero-panel-container .hero-panel-animate:eq("+index+") div.hero-link").css("left", "-800px");
			}else if(index == currentView-num){
				//$("#hero-panel-container .hero-panel-animate:eq("+index+") div.hero-title").stop().animate({left:"-800px"}, 400, "easeInOutQuad");
				//$("#hero-panel-container .hero-panel-animate:eq("+index+") div.hero-subtitle").stop().animate({left:"-800px"}, 500, "easeInOutQuad");
			};
		});

		//if we're at the far left of the row of items, take the last div and put it at the start then instantly shift the whole visible area left by 1 panel width (can loop infinately left like this)..						
		//Also don't allow the currentView var to decrement if at far left and pressing left..
		if(currentView < 0){
		 	currentView = 0;
		 	$("#hero-panel-container .hero-panel-animate:last-child").insertBefore("#hero-panel-container .hero-panel-animate:first-child");
			$("#hero-panel-container").css("left", "-=818px");
		//if we're at the far right of the row of items, take the first div and put it at the start then instantly shift the whole visible area right by 1 panel width (can loop infinately left like this)..						
		//Also don't allow the currentView var to increment if at far right and pressing right..
		}else if(currentView > maxViews-1){
			currentView = maxViews-1;
			$("#hero-panel-container .hero-panel-animate:first-child").insertAfter("#hero-panel-container .hero-panel-animate:last-child");
			$("#hero-panel-container").css("left", "+=818px");
		};
						
		//scroll stuff				
		beginScrollAnim();		
		
		
	}
	//animate all panels along. Can't animate parent container if it's wider than screen width on iPad (flicker bug)..
	function beginScrollAnim(){
			
		var tweenTo = currentView * -818;
	
		$("#hero-panel-container").animate({left: tweenTo +"px", useTranslate3d:true},600, "easeInOutCubic", function(){
			beginTextOn();	
		});
		
	}
	//animate on text only on the panel we're looking at..
	function beginTextOn(){
		$("#hero-panel-container .hero-panel-animate:eq("+currentView+") div.hero-title").animate({left:"0px", useTranslate3d:true}, 400, "easeInOutQuad");
		$("#hero-panel-container .hero-panel-animate:eq("+currentView+") div.hero-subtitle").animate({left:"0px", useTranslate3d:true}, 500, "easeInOutQuad");
		$("#hero-panel-container .hero-panel-animate:eq("+currentView+") div.hero-link").animate({left:"0px", useTranslate3d:true}, 600, "easeInOutQuad", function(){
			allowScroll = 1;
		});
	
	};
	
	function clearQueue(){
		allowScroll = 1;
		$("#hero-panel-container").stop( true, true );
		$(".hero-title").stop(true, true);
		$(".hero-subtitle").stop(true, true);
		$(".hero-link").stop(true, true);

	};

	//window.onscroll = function() {
    	//if(allowScroll == 0){
    		//$("#hero-panel-container").css("top", "270px");
    		//iOSscrollTimerID = setTimeout(function() { resetiOSscrollTimer(); }, 2000);
    	//};
    //};
	
	function resetiOSscrollTimer(){
		clearTimeout(iOSscrollTimerID);
		$("#hero-panel-container").css("top", "0px");
	};
	  	
});
 
    


(function($){
  $.fn.shuffle = function() {
    return this.each(function(){
      var items = $(this).children();
      return (items.length)
        ? $(this).html($.shuffle(items))
        : this;
    });
  }
 
  $.shuffle = function(arr) {
    for(
      var j, x, i = arr.length; i;
      j = parseInt(Math.random() * i),
      x = arr[--i], arr[i] = arr[j], arr[j] = x
    );
    return arr;
  }
})(jQuery);


(function($){
$.fn.imagesLoaded = function(callback){
  var elems = this.filter('img'),
      len   = elems.length,
      blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
      
  elems.bind('load',function(){
      if (--len <= 0 && this.src !== blank){ callback.call(elems,this); }
  }).each(function(){
     // cached images don't fire load sometimes, so we reset src.
     if (this.complete || this.complete === undefined){
        var src = this.src;
        // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
        // data uri bypasses webkit log warning (thx doug jones)
        this.src = blank;
        this.src = src;
     }  
  }); 

  return this;
  }
})(jQuery);