/*****

Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com

Please leave this notice intact. 

Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html


*****/
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function changeimg (nextimg, spacersize)
  {
	currentimg=document.getElementById('cross_fader_id').value;
	document.getElementById('cross_fader_id').setAttribute('value',nextimg); 
	document.getElementById('crossfade_spacer').setAttribute('width',spacersize);
	fade('fadeBlock'+currentimg);
  }

function changeBanner()
  {
	var spacersize= Array(88,272,456,640);
	currentimg=document.getElementById('cross_fader_id').value;
	currentimg++;
	if(currentimg>3)
		currentimg=0;
	document.getElementById('cross_fader_id').value=currentimg;
	document.getElementById('crossfade_spacer').setAttribute('width',spacersize[currentimg]);
	setTimeout(changeBanner, 3000);
  }
  
function fadeover(fadeimg)
  {
	currentimg=document.getElementById('cross_fader_id').value;
	if (currentimg!=fadeimg)
		fade('fadeBlock'+fadeimg);
  }
  
function fadeproductover(product)
  {
	fade('productBlock'+product);
  }
  
function so_init() {
	if(!d.getElementById || !d.createElement)return;
	imgs = d.getElementById("imageContainer").getElementsByTagName("img");
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;
	setTimeout(so_xfade,500);
	setTimeout(changeBanner, 3000);
	fade('fadeBlock1');
	fade('fadeBlock2');
	fade('fadeBlock3');
	fade('productBlock0');
	fade('productBlock1');
	fade('productBlock2');
	fade('productBlock3');
	fade('productBlock4');
	fade('productBlock5');
	fade('productBlock6');
	fade('productBlock7');
	fade('productBlock8');
	fade('productBlock9');
}

function so_xfade() {
	nextimg=document.getElementById('cross_fader_id').value;
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[nextimg]?nextimg:0;

	nOpacity = imgs[nIndex].xOpacity;
	
	cOpacity-=.05; 
	nOpacity+=.05;
	
	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs[current]); 
	setOpacity(imgs[nIndex]);
	
	if(cOpacity<=0) {
		imgs[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,1000);
	} else {
		setTimeout(so_xfade, 50);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
	
}

var TimeToFade = 500.0;

function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null)
  {
    if(element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '1')
    {
      element.FadeState = 2;
    }
    else
    {
      element.FadeState = -2;
    }
  }
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }  
}

function animateFade(lastTick, eid)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0.5';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '50') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal/2 + 0.5;;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}