var timeToFade   = 0.5;
var switchSpeed  = 6;
var currentFG    = currentBG = 0;
var animInterval = fadeTimeout = restartTimeout = "";
	
function getNextBGID(imageID) {
	if( imageID+1 < imageArray.length ) {
		bgID = imageID+1;
	}
	else {
		bgID = 0;
	}
	return bgID;
}    
							
function goToImage( eid, id ) {
	document.getElementById( eid + "s" + currentFG ).className = "";     
	document.getElementById( eid + "s" + currentBG ).className = ""; 

	currentBG = getNextBGID(id);
	currentFG = currentURL = id;
	swapImage(eid,0);
}

function swapImage(eid,state) {
	imgUrl   = document.getElementById(eid+"URL");
	caption  = document.getElementById( eid + "Caption" );
	titleUrl = document.getElementById( eid + "TitleUrl" );
	bg       = document.getElementById( eid + "BG");
	element  = document.getElementById( eid );
	classElm = document.getElementById( eid + "s" + currentURL ).className = "";
	switch( state ) {
		//foreground image is transparent
		//so swap fg image for next round
		case -1:   
		setNextFG(eid);
		currentURL = currentBG;
		break;
	
		//foreground image is opaque
		//so swap bg image for next round
		case 1:       
		setNextBG(eid);
		currentURL = currentFG;  
		break;
		
		//initialise
		default:
			setNextBG(eid);
			element.FadeState     = 2;
			element.src           = imageArray[currentFG];
			element.style.opacity = 1;
			element.style.filter  = 'alpha(opacity = ' + (100) + ')';
			bg.style.background   = 'url('+ imageArray[bgID] +') no-repeat';
			bg.style.opacity = 1;
			break;    
		
	}
	titleUrl.href      = urls[currentURL];
	titleUrl.innerHTML = titles[currentURL];
	caption.innerHTML  = captions[currentURL];
	imgUrl.href        = urls[currentURL];
	numbers = document.getElementById( eid + "s" + currentURL );
	numbers.className = "article_num_red";
}

function setNextFG(eid) {
	fg = document.getElementById(eid);
	if( currentFG >= imageArray.length - 2 ) { 
		currentFG = ( currentFG == imageArray.length - 1 ? 1 : 0 );
	}
	else {
		currentFG += 2;
	}
	fg.src=imageArray[currentFG];
}

function setNextBG(eid) {
	bg  = document.getElementById( eid + "BG" );

	bgi = getNextBGID(currentFG);
	bg.style.background = 'url('+ imageArray[bgi] + ') no-repeat';
	currentBG = bgi;
}

	
function fade(eid)
{
  fadeTime = timeToFade * 1000;
  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(Math.abs( element.FadeState ) == 1 )
  {
	element.FadeState *= -1;
	element.FadeTimeLeft = fadeTime - element.FadeTimeLeft;
  }
  else
  {
	element.FadeState = element.FadeState == 2 ? -1 : 1;
	element.FadeTimeLeft = fadeTime;
	fadeTimeout = setTimeout("animateFade(" + new Date().getTime()
		+ ",'" + eid + "')", 33);
  } 
}
function animateFade(lastTick, eid)
{ 
  fadeTime = timeToFade * 1000;
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {

	swapImage(eid,element.FadeState);

	element.style.opacity = element.FadeState == 1 ? '1' : '0';
	element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';
	element.FadeState = element.FadeState == 1 ? 2 : -2;
	return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/fadeTime;
  if(element.FadeState == 1)
	newOpVal = 1 - newOpVal;

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

function initImageCycle() {
	
	var content = "";
	for( i = urls.length-1; i >= 0; i-- ) {
		content += "<span><a id='mainImages" + i + "' onclick=\"stopAnim();goToImage('mainImage'," + i + ")\">" + (i+1) + "</a></span>";
	}
	document.getElementById("mainImageNav").innerHTML = content;    
	if( readCookie("askmenchannel") ) {
		goToImage( "mainImage", readCookie("askmenchannel") );
		deleteCookie("askmenchannel");
	}
	else {
	goToImage( "mainImage", 0 );
		animInterval = setInterval( "fade( 'mainImage' )", switchSpeed * 1000 );
	}
}

function stopAnim() {
	clearInterval( animInterval );
	clearTimeout( fadeTimeout );
	clearTimeout( restartTimeout );
	restartTimeout = setTimeout( "animInterval = setInterval( \"fade( 'mainImage' )\", switchSpeed * 1000 )", switchSpeed * 1000 );
	//animInterval = setInterval( "fade( 'mainImage' )", switchSpeed * 1000 );
}

initImageCycle();