var timeToFade   = 0.5;
var switchSpeed  = 6;
var currentFG    = currentBG = 0;
var animInterval = fadeTimeout = restartTimeout = "";
var websitepath = "http://www.lebanese-forces.com/";

function getNextBGID(imageID) {
	if( imageID+1 < imageArray.length ) {
		bgID = imageID+1;
	}
	else {
		bgID = 0;
	}
	return bgID;
}    
function getPreviousBGID(imageID) {
	if( imageID > 0 ) {
		bgID = imageID-1;
	}
	else if( imageID == -1 ){
		bgID = imageArray.length-2;
	}
	else if( imageID == 0 ){
		bgID = imageArray.length-1;
	}

	
	return bgID;
}    

function goToImage( eid, id ) {
	currentBG = getNextBGID(id);
	currentFG = currentURL = id;
	swapImage(eid,0);
	openCaption();
		for (i=1;i<imageArray.length+1;i++) {
		if (i != (currentURL+1))
	//classElm2 = document.getElementById( "pages" + (i) ).src = websitepath+"images/pages/"+(i)+"grey.jpg";
	classElm2 = document.getElementById( "pages" + (i) ).src = websitepath+"commonimages/pages/"+(i)+".gif";
}

}

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( "pages" + (currentURL+1) ).src = websitepath+"images/pages/"+(currentURL+1)+"grey.jpg";
	classElm = document.getElementById( "pages" + (currentURL+1) ).src = websitepath+"commonimages/pages/"+(currentURL+1)+".gif";
	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( "pages" + (currentURL+1) );
	//numbers.src = websitepath+"images/pages/"+(currentURL+1)+"red.jpg";
	numbers.src = websitepath+"commonimages/pages/"+(currentURL+1)+"c.gif";
	}

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 = 0; i <= urls.length-1; i++ ) {
	//content += "<span id="+i+"><a id='mainImages" + i + "' onclick=\"stopAnim();goToImage('mainImage'," + i + ")\"><img id='pages" + (i+1) + "' name='pages" + (i+1) + "' src=\""+websitepath+"images/pages/" + (i+1) + "grey.jpg\" alt='"+ (i+1) +"'></a></span>";
	content += "<span id="+i+"><a id='mainImages" + i + "' onclick=\"stopAnim();goToImage('mainImage'," + i + ")\"><img id='pages" + (i+1) + "' name='pages" + (i+1) + "' src=\""+websitepath+"commonimages/pages/" + (i+1) + ".gif\" alt='"+ (i+1) +"'></a></span>";

				
	}

	document.getElementById("mainImageNav").innerHTML = content;    

	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 );
	var control = document.getElementById('control')
	control.innerHTML = '<a href="javascript:pauseAnime();" onclick="pauseAnime();" onmouseover="rollover(\'pause\', \''+websitepath+'web/images/box/pause-red.jpg\')" onmouseout="rollover(\'pause\', \''+websitepath+'web/images/box/pause-grey.jpg\')"> <img alt="pause" title="pause" name="pause" src="'+websitepath+'web/images/box/pause-grey.jpg" /> </a>';
	
	//animInterval = setInterval( "fade( 'mainImage' )", switchSpeed * 1000 );
}
function pauseAnime() {
	clearInterval( animInterval );
	clearTimeout( fadeTimeout );
	clearTimeout( restartTimeout );
	var control = document.getElementById('control')
	control.innerHTML = '<a href="javascript:playAnime();goToImage(\'mainImage\',getNextBGID(currentBG-1));" onmouseover="rollover(\'play\', \''+websitepath+'web/images/box/play-red.jpg\')" onmouseout="rollover(\'play\', \''+websitepath+'web/images/box/play-grey.jpg\')"> <img alt="play" title="play" name="play" src="'+websitepath+'web/images/box/play-grey.jpg" /> </a>';

	//animInterval = setInterval( "fade( 'mainImage' )", switchSpeed * 1000 );
}

function playAnime() {
	animInterval = setInterval( "fade( 'mainImage' )", switchSpeed * 1000 );
	var control = document.getElementById('control')
	control.innerHTML = '<a href="javascript:pauseAnime();" onclick="pauseAnime();" onmouseover="rollover(\'pause\', \''+websitepath+'web/images/box/rotation/pause-red.jpg\')" onmouseout="rollover(\'pause\', \''+websitepath+'web/images/box/pause-grey.jpg\')"> <img alt="pause" title="pause" name="pause" src="'+websitepath+'images/box/rotation/pause-grey.jpg" /> </a>';
}

function closeCaption() {
	document.getElementById('closecaption').style.visibility = "hidden";
	var control = document.getElementById('closeopenbox')
	control.innerHTML = '<a href="javascript:openCaption();" onmouseover="rollover(\'openimage\', \''+websitepath+'web/images/box/+red.gif\')" onmouseout="rollover(\'openimage\', \''+websitepath+'web/images/box/+grey.gif\')"> <img name="openimage" src="'+websitepath+'web/images/box/+grey.gif" height="17" width="17"/> </a>';
		document.getElementById('closebutton').style.height = "20px";


	
}
function openCaption() {
	document.getElementById('closecaption').style.visibility = "visible";
	var control = document.getElementById('closeopenbox')
	control.innerHTML = '<a href="javascript:closeCaption();" onmouseover="rollover(\'closeimage\', \''+websitepath+'web/images/box/x-red.gif\')" onmouseout="rollover(\'closeimage\', \''+websitepath+'web/images/box/x-grey.gif\')"> <img name="closeimage" src="'+websitepath+'web/images/box/x-grey.gif" /> </a>';
		document.getElementById('closebutton').style.height = "85px";
}