/* This javascript file handles the clicks for the Nov 2009 hero images section
 * as well as the automatic transition and fade outs between the hero images 
 */ 

if (!(typeof(addEvent)=='function')) {
  function addEvent(name,obj,f) {
    if (window.attachEvent) {
      obj.attachEvent("on"+name,f);
    } else if (window.addEventListener) {
      obj.addEventListener(name,f,false);
    }
  }
}

if (!(typeof(removeEvent)=='function')) {
	function removeEvent(name,obj,f) {
		if (window.attachEvent) {
			obj.detachEvent("on"+name,f);
		} else if (window.addEventListener) {
			obj.removeEventListener(name,f,false);
		}
	}
}

addEvent('load',window,function() {
	
	/* Hero Links */
	var heroLinks = new Array();
	heroLinks[0] = "http://www.equipoysuministros.es/hp-colour";
	heroLinks[1] = "http://www.equipoysuministros.es/XEROX-supplies.htm";
heroLinks[2] = "http://www.equipoysuministros.es/oki-toner";
 heroLinks[3] = "http://www.equipoysuministros.es/tinta-toner-compatible";


	/* Hero Links */
	
	var heroOptions = document.getElementById("hero-options");
	var heroImageContainer = document.getElementById("nov09-hero-image");
	var heroImage = document.getElementById("nov09-default-hero-image");
	var heroLink = document.getElementById("hero-image-link");
	var currentimg = 0;
	
	//Set the 5 hero images to be used.
	var image1 = "hero_hpcompatibles.jpg"; 
	var image2 = "hero_xeroxcompatibles.jpg";
var image3 = "hero_okicompatibles.jpg";
var image4 = "hero_compatibles.jpg"; 

	
	//Create an array of all the hero images to be used by the crossfade function
	var heroImages = new Array();
	heroImages[0] = heroImage.src; 
	var tempSrc = heroImage.src.lastIndexOf("hero_");
	var first = heroImage.src.slice(0,tempSrc);
	heroImages[1] = first + image2;
	heroImages[2] = first + image3;
	heroImages[3] = first + image4;
	
	function changeHero(e)
	{
		var target=null;
    if (window.event) {
      target=window.event.srcElement;
      window.event.cancelBubble=true;
    } else {
      target=e.target;
      if (e.preventDefault) e.preventDefault();
      if (e.stopPropagation) e.stopPropagation();
    }
		
		//Set the appropriate hero image based on the li that was clicked.
		//Either the li or one of its children could have been clicked. Handle both.
		if(target.tagName != "LI")
			target = target.parentNode;
		
		var selectedHero = null;
		for(var i=0; i<target.childNodes.length; i++)
		{
			if(target.childNodes[i].tagName == "IMG")
				selectedHero = target.childNodes[i]; 
		}
		
		//Change the hero image
		//Change the src value of the printerText image
		var heroIdentifier = heroImage.src.lastIndexOf("hero_");
		var first = heroImage.src.slice(0,heroIdentifier);
		var last = "";
		
		switch(selectedHero.className)
		{
			case "welcome":
				last = image1;
				currentimg = 0;
				break;
			case "gsa":
				last = image2;
				currentimg = 1;
				break;
			case "purl":
				last = image3;
				currentimg = 2;
				break;
			case "coffee":
				last = image4;
				currentimg = 3;
				break;
		}
		
		//Call the fadeonce function when an item in the hero navigation is clicked.
		var tempArr = new Array();
		tempArr[0] = first + last;
		fadeonce(heroImage,tempArr);
		
		//If the link is blank remove the href attribute
		if(heroLinks[currentimg] == "")
			heroLink.removeAttribute("href");
		else
		{
			//Change the link for the hero image
			heroLink.href = heroLinks[currentimg];
		}
		
		//Loop through all the hero options and set all options to inactive except the one that was clicked.
		var heroOptionsLi = heroOptions.getElementsByTagName("LI"); 
		for(var i=0; i<heroOptionsLi.length; i++)
		{
			for(var j=0;j<heroOptionsLi[i].childNodes.length; j++)
			{
				if(heroOptionsLi[i].childNodes[j].tagName == "IMG")
					if(heroOptionsLi[i].childNodes[j].className == selectedHero.className)
						heroOptionsLi[i].className = "active";
					else
						heroOptionsLi[i].className = "";	
			}//for j		
		}//for i
	}//changeHero
	
	function fadeonce(img,urls)
	{
		var self=this;
	  	
	  var d=new Date();
	  var fadestart=d.getTime();
	
	  this.imginterval=0; //  milliseconds between images
	  this.fadeinterval=800; //  milliseconds to complete a fade
	  this.img=img;
	
		this.urls=new Array();
	  for (var i=0;i<urls.length;i++) {
	    this.urls[i]=new Image;
	    this.urls[i].src=urls[i];
	  }
	
	  if (this.urls.length >= 1) {
			setTimeout(startFading,self.imginterval);
	  }
	
	  function startFading() {
			if (self.fade) {
	      heroImageContainer.removeChild(self.fade);
	    }
	
	    self.fade=document.createElement('img');
	    self.fade.style.width="713px";
	    self.fade.style.height="216px";
	    self.fade.style.position='absolute';
	    self.fade.style.top='0px';
	    self.fade.style.left='0px';
	    self.fade.src=self.img.src;
			
			self.img.src = self.urls[0].src;
	    heroImageContainer.appendChild(self.fade);
	    var d=new Date();
	    fadestart=d.getTime();
	
	    doFade();
	  }
	
	  function doFade() {
	    var d=new Date();
	    var now=d.getTime();
	    var elapsed=now-fadestart;
	
	    if (elapsed > self.fadeinterval) {
	      heroImageContainer.removeChild(self.fade);
	      self.fade=null;
	    } else {
	      var opacity=(1-(elapsed/self.fadeinterval));
				if (self.fade)
				{
					self.fade.style.opacity = opacity;
					self.fade.style.filter = 'alpha(opacity=' + opacity * 100 + ')';
		      setTimeout(doFade,50);
				}	
	    }
	  }
	}//fadeonce
	
	function crossfade(img,urls) {
	  var self=this;
	  	
	  var d=new Date();
	  var fadestart=d.getTime();
	
	  this.imginterval=7000; //  milliseconds between images
	  this.fadeinterval=800; //  milliseconds to complete a fade
	  this.img=img;
	
	  this.urls=new Array();
	  for (var i=0;i<urls.length;i++) {
	    this.urls[i]=new Image;
	    this.urls[i].src=urls[i];
	  }
	
	  if (this.urls.length > 1) {
			setTimeout(startFading,self.imginterval);
	  }
	
	  function startFading() {
			
			//Get the appropriate image index
			var index = null;
			if(currentimg == 3)
				index = 0;
			else
				index = currentimg + 1;	
			
			//If the link is blank remove the href attribute
			if(heroLinks[index] == "")
				heroLink.removeAttribute("href");
			else
			{
				//Change the link for the hero image 
				heroLink.href = heroLinks[index];
			}
			
			//Loop through all the hero options and set all options to inactive except the one that was clicked.
			var heroOptionsLi = heroOptions.getElementsByTagName("LI"); 
			for(var i=0; i<heroOptionsLi.length; i++)
			{
				for(var j=0;j<heroOptionsLi[i].childNodes.length; j++)
				{
					if(heroOptionsLi[i].childNodes[j].tagName == "IMG")
						if(currentimg == i-1 || (i==0 && currentimg==3))
							heroOptionsLi[i].className = "active";
						else
							heroOptionsLi[i].className = "";	
				}//for j		
			}//for i	
			
	    if (self.fade) {
	      heroImageContainer.removeChild(self.fade);
	    }
	
	    self.fade=document.createElement('img');
	    self.fade.style.width="713px";
	    self.fade.style.height="216px";
	    self.fade.style.position='absolute';
	    self.fade.style.top='0px';
	    self.fade.style.left='0px';
	    self.fade.src=self.img.src;
	
	    currentimg++;
	    if (currentimg >= self.urls.length) currentimg=0;
	    self.img.src=self.urls[currentimg].src;
	    heroImageContainer.appendChild(self.fade);
	    var d=new Date();
	    fadestart=d.getTime();
	
	    doFade();
	    setTimeout(startFading,self.imginterval);
	  }
	
	  function doFade() {
	    var d=new Date();
	    var now=d.getTime();
	    var elapsed=now-fadestart;
	
	    if (elapsed > self.fadeinterval) {
	      heroImageContainer.removeChild(self.fade);
	      self.fade=null;
	    } else {
	      var opacity=(1-(elapsed/self.fadeinterval));
	      self.fade.style.opacity=opacity;
	      self.fade.style.filter='alpha(opacity='+opacity*100+')';
	      setTimeout(doFade,50);
	    }
	  }
	}//crossfade
	
	//Add event listeners for all the hero options
	for(var i=0; i<heroOptions.childNodes.length; i++)
	{
		if(heroOptions.childNodes[i].tagName == "LI")
		{
			addEvent('click',heroOptions.childNodes[i],changeHero);
		}
	}
	
	//Initialize the crossfade function
	var fade = new crossfade(heroImage,heroImages);
});