/*
Human Element
Gregg Milligan
4/29/2010
*/

//CLICK TRANSITION FADER VALUES 
var TimeToFade = 800.0; //1000 was original value
var fade_smoothness_TimeOut = 33; //33 suggested 

//AUTO TRANSITION FADER VALUES
var TimeToAutoFade = 20000;

//a list of images contained in a div tag with this id will be treated as a rotating banner group
var ROTATOR_CONTAINER_ID = "img_rotator_container";

//a list of button images contained in a div tag with this id will be treated as a rotating banner group
var BUTTONS_CONTAINER_ID = "img_rotator_buttons";




/*ADDITIONAL CODE*/

var pathStringItemSeparator = "**";
var mButtonsList;

var elementsToFade=new Array();
var outBtnImgSrc=new Array();
var overBtnImgSrc=new Array();

var fadeInProgress;

function fadeInit()
{
	resetFadeInProgress();
	
	//start autofade for banner
	banner_FadeIntervalId = setInterval('nextImage()', TimeToAutoFade);
}

function startButtons(pathList)
{
	mButtonsList = pathList;
	
	//get the out state images for each button
	for (var i = 0; i < document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img').length ; i++)
	{
		outBtnImgSrc[i] = document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img')[i].src;
	}
	
	//get the over state images for each button
	parseStringList(pathList);
	
	//set the first button to the over state image
	select_btn_at(0);
	
	if (buttonsValid())
	{
		showButtons();
	}
}

function buttonsValid()
{
	var validBtns = false;
	
	if (mButtonsList != null)
	{
		//make sure that there are the same number of buttons and banner images
		if (document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img').length == document.getElementById(ROTATOR_CONTAINER_ID).getElementsByTagName('img').length)
		{
			validBtns = true;
		}
		else
		{
			document.getElementById(BUTTONS_CONTAINER_ID).innerHTML = "<span style='color:red;background-color:white;'>error, there must be an equal number of images in the id=\"" + BUTTONS_CONTAINER_ID + "\" container as the id=\"" + ROTATOR_CONTAINER_ID + "\" container.</span>";
		}
	}
	
	return validBtns;
}

function showButtons()
{
	document.getElementById(BUTTONS_CONTAINER_ID).style.display = "block";
	document.getElementById(BUTTONS_CONTAINER_ID).style.zIndex = 50;
	document.getElementById(BUTTONS_CONTAINER_ID).style.position = "relative";
}

function parseStringList(pathList)
{
	var startSeparatorIndex = 0;
	var endSeparatorIndex;
	var arrayIndex = 0;
	var quitPathExtraction = false;
	
	var pathSubString = pathList;
	
	//remove all spaces from the fade path list string
	while (pathList.indexOf(" ") != -1)
	{
		pathList = pathList.replace(" ","");
	}
	
	//extract all individual fade paths from the fade path list
	while (quitPathExtraction == false)
	{
		if (pathList.indexOf(pathStringItemSeparator) != -1)
		{
			endSeparatorIndex = pathList.indexOf(pathStringItemSeparator);
		}
		else
		{
			endSeparatorIndex = pathList.length;
			quitPathExtraction = true;
		}
		
		pathSubString = pathList.substring(startSeparatorIndex,endSeparatorIndex);

		//load the next substring into the array
		overBtnImgSrc[arrayIndex] = pathSubString;
		arrayIndex++;
		
		//get the next start index positions
		startSeparatorIndex = endSeparatorIndex;
		
		//get the next end index positions
		pathList = pathList.replace(pathStringItemSeparator,'');
	}
	
	//fill in the rest of the array positions if needed...
	
	var differenceInCount = document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img').length - overBtnImgSrc.length;
	
	//are the number of src paths equal to the number of buttons?
	if (differenceInCount > 0)
	{
		var duplicateLastSrcGiven = overBtnImgSrc[overBtnImgSrc.length - 1];
		
		//if some src paths are missing, fill them in with the previous src path actually listed
		for (var i = overBtnImgSrc.length; i < document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img').length; i++)
		{
			overBtnImgSrc[i] = duplicateLastSrcGiven;
		}
	}
}

//when the cursor is on the button
function r_btn_over(thisBtn)
{
	if (buttonsValid())
	{
		//set the over image for the button that the cursor is over
		thisBtn.src = overBtnImgSrc[getIndexOfThisBtn(thisBtn)];
	}
}

//when the cursor is off of the button
function r_btn_out(thisBtn)
{
	if (buttonsValid())
	{
		var currImgIndex = getDisplayedImgIndex();
		
		//if the current image does not correspond with this button
		if(thisBtn != document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img')[currImgIndex])
		{
			var currentBtnIndex;
			
			//find the index of the current button
			currentBtnIndex = getIndexOfThisBtn(thisBtn);
			
			//switch the image to the off-state image
			thisBtn.src = outBtnImgSrc[currentBtnIndex];	
		}
	}
}

function getIndexOfThisBtn(thisBtn)
{
	var currentBtnIndex = -1;
	
	if (buttonsValid())
	{		
		//find the index of the current button
		for (var i = 0; i < document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img').length ; i++)
		{
			if (thisBtn == document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img')[i])
			{
				currentBtnIndex = i;
			}
		}
	}
		
	return currentBtnIndex;
}

function select_btn_at(btnOverIndex)
{
	if (buttonsValid())
	{
		document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img')[btnOverIndex].src = overBtnImgSrc[btnOverIndex];
	}
}

function align_selected_btn_with_banner()
{
	if (buttonsValid())
	{
		var currentBanner = getDisplayedImgIndex();
		
		//reset all of the buttons so that they are all in the out state
		for (var i = 0; i < document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img').length ; i++)
		{
			//replace it with the out image
			document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img')[i].src = outBtnImgSrc[i];
		}
		
		//give the button that corresponds with the current banner the over image
		document.getElementById(BUTTONS_CONTAINER_ID).getElementsByTagName('img')[currentBanner].src = overBtnImgSrc[currentBanner];
	}
}

//what image index number is currently being displayed?
function getDisplayedImgIndex()
{
	var displayedIndex = -1;
	
	for (var i = 0; i < document.getElementById(ROTATOR_CONTAINER_ID).getElementsByTagName('img').length ; i++)
	{
		if (document.getElementById(ROTATOR_CONTAINER_ID).getElementsByTagName('img')[i].style.display != "none")
		{
			displayedIndex = i;
		}
	}
	
	return displayedIndex;
}

//go to the next image in the rotating group
function nextImage()
{
	var currentIndex = getDisplayedImgIndex();
	
	//if the last image has been reached
	if (currentIndex == document.getElementById(ROTATOR_CONTAINER_ID).getElementsByTagName('img').length - 1)
	{
		//go back to the first image
		showImgAtIndex(0);
	}
	else
	{
		//go to the next image
		showImgAtIndex(currentIndex + 1);
	}
}

//go to the previous image in the rotating group
function prevImage()
{
	var currentIndex = getDisplayedImgIndex();
	
	//if the first image has been reached
	if (currentIndex == 0)
	{
		//go back to the last image
		showImgAtIndex(document.getElementById(ROTATOR_CONTAINER_ID).getElementsByTagName('img').length - 1);
	}
	else
	{
		//go to the previous image
		showImgAtIndex(currentIndex - 1);
	}
}

//show an image at a specific index position
function showImgAtIndex(theShowIndex)
{
	if (!fadeInProgress)
	{
		fadeInProgress = true;
		
		//hide all of the images in the rotation group except one
		for (var i = 0; i < document.getElementById(ROTATOR_CONTAINER_ID).getElementsByTagName('img').length ; i++)
		{
			elementsToFade[i] = document.getElementById(ROTATOR_CONTAINER_ID).getElementsByTagName('img')[i];
			
			//make sure the images are overlapped
			//elementsToFade[i].style.position = "absolute";
			showButtons();
			
			
			//if the current index is not equal to the index at which the image should be shown
			if (i != theShowIndex)
			{
				//move the image to be revealed, after the top image fades out, to the back
				elementsToFade[i].style.zIndex = 20;
				
				//reverse the opaque fade state
				fade(i);
				
				//hide the image when fade out has completed 
				setTimeout('hideImage(' + i + ')', TimeToFade);
				
				//fade back in so that it will fade out next time (toggle)
				setTimeout('fade(' + i + ')', TimeToFade + 10);
				
				setTimeout('resetFadeInProgress()', TimeToFade + 10);
			}
			else
			{
				//show the image
				showImage(i);
				
				//move the image to be revealed, after the top image fades out, to the back
				elementsToFade[i].style.zIndex = 0;
			}
		}	
		
		setTimeout('align_selected_btn_with_banner()',TimeToFade);
	}
}

function resetFadeInProgress()
{
	fadeInProgress = false;
}

function hideImage(eIndex)
{
	elementsToFade[eIndex].style.display = "none";	
}

function showImage(eIndex)
{
	elementsToFade[eIndex].style.display = "block";	
}

/*FADE CODE SECTION modified from http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/*/

function fade(eIndex)
{
  if(elementsToFade[eIndex] == null)
    return;
	
   
  if(elementsToFade[eIndex].FadeState == null)
  {
    if(elementsToFade[eIndex].style.opacity == null 
        || elementsToFade[eIndex].style.opacity == '' 
        || elementsToFade[eIndex].style.opacity == '1')
    {
      elementsToFade[eIndex].FadeState = 2;
    }
    else
    {
      elementsToFade[eIndex].FadeState = -2;
    }
  }
    
  if(elementsToFade[eIndex].FadeState == 1 || elementsToFade[eIndex].FadeState == -1)
  {
	elementsToFade[eIndex].FadeState = elementsToFade[eIndex].FadeState == 1 ? -1 : 1;
    elementsToFade[eIndex].FadeTimeLeft = TimeToFade - elementsToFade[eIndex].FadeTimeLeft;
  }
  else
  {
    elementsToFade[eIndex].FadeState = elementsToFade[eIndex].FadeState == 2 ? -1 : 1;
    elementsToFade[eIndex].FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + "," + eIndex + ")", fade_smoothness_TimeOut);
  }  
}

function animateFade(lastTick,eIndex)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  if(elementsToFade[eIndex].FadeTimeLeft <= elapsedTicks)
  {
    elementsToFade[eIndex].style.opacity = elementsToFade[eIndex].FadeState == 1 ? '1' : '0';
    elementsToFade[eIndex].style.filter = 'alpha(opacity = ' 
        + (elementsToFade[eIndex].FadeState == 1 ? '100' : '0') + ')';
    elementsToFade[eIndex].FadeState = elementsToFade[eIndex].FadeState == 1 ? 2 : -2;
    return;
  }
 
  elementsToFade[eIndex].FadeTimeLeft -= elapsedTicks;
  var newOpVal = elementsToFade[eIndex].FadeTimeLeft/TimeToFade;
  if(elementsToFade[eIndex].FadeState == 1)
    newOpVal = 1 - newOpVal;

  elementsToFade[eIndex].style.opacity = newOpVal;
  elementsToFade[eIndex].style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
  
  setTimeout("animateFade(" + curTick + "," + eIndex + ")", fade_smoothness_TimeOut);
}