

/*

Better(?) Image cross fader (C)2004 Patrick H. Lauke aka redux

Inspired by Steve at Slayeroffice slayeroffice.com/code/imageCrossFade/ 

preInit "Scheduler" idea by Cameron Adams aka The Man in Blue
www.themaninblue.com/writing/perspective/2004/09/29/ 

Tweaked to deal with empty nodes 19 Feb 2006

*/

/* general variables */

//slider('image_holder');
slider('promotions_move',false, "slide", true);


function slider(galleryId, controls, type, useWindowEvent){

  //set defualts
  controls = typeof(controls) != 'undefined' ? controls : true;
  type = typeof(type) != 'undefined' ? type : 'fade';
  useWindowEvent = typeof(type) != 'undefined' ? useWindowEvent : false;

  //var galleryId = 'image_holder'; /* change this to the ID of the gallery list */
  var gallery; /* this will be the object reference to the list later on */
  var galleryImages; /* array that will hold all child elements of the list */
  var currentImage; /* keeps track of which image should currently be showing */
  var previousImage;
  var preInitTimer;
  var timerCrossFade = null;
  var transTime = 5000;
  var feedBack = "1";
  var counterHolder = [];
  var animating = false;
  var slidePosition =0;
  /* functions */
  var defaultClasses = 'gallery-counter gallery-button';
  
  
  function setUpButtons(){
    
    var buttonHolder = document.createElement('div');
    buttonHolder.setAttribute('class','button-holder');
    buttonHolder.setAttribute("className", 'button-holder');
    gallery.appendChild(buttonHolder);
      
    var prevButton = document.createElement('a');
    prevButton.setAttribute('href', '#');
    var text = document.createTextNode("\u00AB");
    prevButton.setAttribute('class','gallery-previous-button gallery-button');
    prevButton.setAttribute("className", 'gallery-previous-button gallery-button');
    prevButton.appendChild(text);
    buttonHolder.appendChild(prevButton); 
  
    
    for(i=0;i<galleryImages.length;i++) {
      counterHolder[i] = document.createElement('a');
      counterHolder[i].setAttribute('href', '#');
      counterHolder[i].setAttribute('rel', i);
      var text = document.createTextNode(i+1);
      
      counterHolder[i].setAttribute('class',defaultClasses);
      counterHolder[i].setAttribute("className", defaultClasses);
      counterHolder[i].appendChild(text);
      buttonHolder.appendChild(counterHolder[i]);
      
      counterHolder[i].onclick = function(){
	
	if(previousImage != parseFloat(this.getAttribute('rel'))){
	  clearTimeout(timerCrossFade);
	  currentImage = parseFloat(this.getAttribute('rel'));
	  crossfade(100);
	}
	
      return false;
      }
      
    }
    
    var nextButton = document.createElement('a');
    nextButton.setAttribute('href', '#');
    var text = document.createTextNode("\u00BB");
    nextButton.setAttribute('class','gallery-next-button gallery-button');
    nextButton.setAttribute("className", 'gallery-next-button gallery-button');
    nextButton.appendChild(text);
    buttonHolder.appendChild(nextButton);
     preInit() 
    //fader(buttonHolder,25);
  
  
  
    prevButton.onclick = function(){
      currentImage-=2;
      
      if(currentImage==-1){
	currentImage = galleryImages.length-1;     
      }else if(currentImage==-2){
	currentImage = galleryImages.length-2;
      }
      clearTimeout(timerCrossFade)
      crossfade(100);
      return false;
    }
    
    nextButton.onclick = function(){
      clearTimeout(timerCrossFade)
      crossfade(100);//timerCrossFade = window.setTimeout("crossfade(100)", 1000);
      return false;
    }
    
    gallery.onmouseover = function(){
	fader(buttonHolder,100);
	  //nextButton.style.display = "block";
	  //prevButton.style.display = "block";
  
     }
    gallery.onmouseout = function(){
	fader(buttonHolder,25);
	//nextButton.style.display = "none";
	//prevButton.style.display = "none";
     }
     
    
  }
  
  function preInit() {
	  /* an inspired kludge that - in most cases - manages to initially hide the image gallery list
	     before even onload is triggered (at which point it's normally too late, and the whole list already
	     appeared to the user before being remolded) */
	  
	  // clear the current operations.fix for multiple fader instancinations
	  clearTimeout(timerCrossFade);
	  
	  
	  
	  if ((document.getElementById)&&(gallery=document.getElementById(galleryId))) {
		  //gallery.style.visibility = "hidden";
		  if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay mrclay.org/ for this small Opera fix */
	  } else {
		  preInitTimer = setTimeout("preInit()",2);
	  }
	  
	  
  
  }
  
  function fader(obj,opacity) {
   // alert('hey')
  
	  /* helper function to deal specifically with images and the cross-browser differences in opacity handling */
	  //var obj=galleryImages[imageNumber];
	  if (obj.style) {
		  if (obj.style.MozOpacity!=null) {  
			  /* Mozilla's pre-CSS3 proprietary rule */
			  obj.style.MozOpacity = (opacity/100) - .001;
		  } else if (obj.style.filter!=null) {
			  /* IE's proprietary filter */
			  
			  obj.style.filter = "alpha(opacity="+opacity+")";
		  } else if (obj.style.opacity!=null) {
			  /* CSS3 compatible */
			  obj.style.opacity = ((opacity/100) - .001);
		  } else if (obj.style.filter!=null) {
			  /* IE's proprietary filter */
			  obj.style.filter = "alpha(opacity="+opacity+")";
		  }
		  else{
		    
		  }
	  }	
	  
  }
  
  function fadeInit() {
  
	  if (document.getElementById) {
  
		  preInit(); /* shouldn't be necessary, but IE can sometimes get ahead of itself and trigger fadeInit first */
		  galleryImages = new Array;
		  if(!gallery){
		    return;
		  }
		  var node = gallery.firstChild;
		  /* instead of using childNodes (which also gets empty nodes and messes up the script later)
		  we do it the old-fashioned way and loop through the first child and its siblings */
		  while (node) {
			  if (node.nodeType==1) {
				  galleryImages.push(node);
			  }
			  node = node.nextSibling;
		  }
		  if(type == "fade"){
		    for(i=0;i<galleryImages.length;i++) {
			    /* loop through all these child nodes and set up their styles */
			    galleryImages[i].style.position='absolute';
			    galleryImages[i].style.top=0;
			    galleryImages[i].style.zIndex=0;
			    /* set their opacity to transparent */
			    fader(galleryImages[i],0);
		    }
		  }else if(type == "slide"){
		    var holderWidth = 0;

		    for(i=0;i<galleryImages.length;i++) {
			    /* loop through all these child nodes and set up their styles */
			    galleryImages[i].style.styleFloat='left';
			    galleryImages[i].style.cssFloat='left';
			    holderWidth += galleryImages[i].offsetWidth;
			    //galleryImages[i].style.top=0;
			    //galleryImages[i].style.zIndex=0;
			    /* set their opacity to transparent */
			    //fader(galleryImages[i],0);
		    }
		    gallery.style.width = holderWidth + "px";
		    gallery.style.position =  "absolute";
		    gallery.style.left =  "0";
		  }
		  /* make the list visible again */
		  gallery.style.visibility = 'visible';
		  /* initialise a few parameters to get the cycle going */
		  currentImage=0;
		  previousImage=galleryImages.length-1;
		  opacity=100;
		  fader(galleryImages[currentImage],100);
		  /* start the whole crossfade process after a second's pause */
  //		if($('tooltip')){
  //			$('tooltip').innerHTML = $(galleryImages[currentImage]).down().next().innerHTML;
  //		}
		  //timerCrossFade = window.setTimeout("crossfade(100)", transTime);
		  
		  
		  //create the buttons by Ben hughes
		  if(controls){setUpButtons();};
		  
		  if(type == "fade"){crossfade(100);}
		  else if(type == "slide"){slide()}
  
	  }
  }
  var add = false;

  function slide() {
    
		  if ((slidePosition*-1) != 450*currentImage) {
		    animating == true;
			  /* current image not faded up fully yet...so increase its opacity */
			  
			  if(add){slidePosition+=10;}
			  else{slidePosition-=10;}
			  gallery.style.left =  slidePosition + "px";
			  			  
			  timerCrossFade = window.setTimeout(function(){slide()},add?1:3);
		  } else {
  
			  //change the button classes
			  if(controls){
  
			    counterHolder[previousImage].setAttribute('class',defaultClasses);
			    counterHolder[currentImage].setAttribute('class',defaultClasses + ' selected');
			    
			    counterHolder[previousImage].setAttribute('className',defaultClasses);
			    counterHolder[currentImage].setAttribute('className',defaultClasses + ' selected');
			  }
 
					  
			  previousImage=currentImage;
			  currentImage+=1;
			  
			  add = false;
  
  
			  if (currentImage>=galleryImages.length) {
				  /* start over from first image if we cycled through all images in the list */
				  currentImage=0;
				  //slidePosition=0;
				  add = true;
			  }
			  transTime = 10000;
			  timerCrossFade = window.setTimeout(function(){slide()}, transTime);
		  }
		  
  }

  
  function crossfade(opacity) {
		  if (opacity < 100) {
		    animating == true;
			  /* current image not faded up fully yet...so increase its opacity */
			  fader(galleryImages[currentImage],opacity);
			  fader(galleryImages[previousImage],100-opacity);
			  opacity += 6.0;//2.5
			  
			  timerCrossFade = window.setTimeout(function(){crossfade(opacity)},  30);
		  } else {
			  /* ***************************
			  *	custom code for hero shot
			  *  *************************** */
			  //fix added by andrew. dom walk method
  //			$('tooltip').innerHTML = $(galleryImages[currentImage]).down().next().innerHTML;
  
  
  
			  //change the button classes
			  if(controls){
  
			    counterHolder[previousImage].setAttribute('class',defaultClasses);
			    counterHolder[currentImage].setAttribute('class',defaultClasses + ' selected');
			    
			    counterHolder[previousImage].setAttribute('className',defaultClasses);
			    counterHolder[currentImage].setAttribute('className',defaultClasses + ' selected');
			  }
			    
			   // buttonHolder.setAttribute("className", 'button-holder');
  
			  
			  /* *************************** */
			  /* make the previous image - which is now covered by the current one fully - transparent */
					  
			  fader(galleryImages[previousImage],0);
			  fader(galleryImages[currentImage],100);
			  /* set order of images before updating placeholder vars */
			  galleryImages[previousImage].style.zIndex = 0;
			  galleryImages[currentImage].style.zIndex = 100;
			  			  
			  /* current image is now previous image, as we advance in the list of images */
			  previousImage=currentImage;
			  currentImage+=1;
  
			  if (currentImage>=galleryImages.length) {
				  /* start over from first image if we cycled through all images in the list */
				  currentImage=0;
			  }
			  
					  
			  
			  /* make sure the current image is on top of the previous one */
			  //galleryImages[previousImage].style.zIndex = 0;
			  //galleryImages[currentImage].style.zIndex = 100;
			  /* and start the crossfade after a second's pause */
			  opacity=0;
			  //crossfade(opacity);
			  
			  timerCrossFade = window.setTimeout(function(){crossfade(opacity)}, transTime);
		  }
		  
  }
  
  /* initialise fader by hiding image object first */
  if(useWindowEvent)addEvent(window,'load',fadeInit);
  else fadeInit();
  
  
  /* 3rd party helper functions */
  
  /* addEvent handler for IE and other browsers */
  function addEvent(elm, evType, fn, useCapture) 
  // addEvent and removeEvent
  // cross-browser event handling for IE5+,  NS6 and Mozilla
  // By Scott Andrew
  {
   if (elm.addEventListener){
     elm.addEventListener(evType, fn, useCapture);
     return true;
   } else if (elm.attachEvent){
     var r = elm.attachEvent("on"+evType, fn);
     return r;
   }
   return false;
  } 

}
