var g_oPhotoHolder;
var g_oImage;
var g_oInfoBoxCurrent;
var g_oInfoBoxNext;
var gFadeImageArray = new Array();
var gFadeInfoBoxArray = new Array();
var gImageCurrentIndex;
var gImageNextIndex;
var gFadeTimer;
var gPause = false;
var gOpacity;

var gSelectedInfoBox = 'WinterPineappleClassic';
var gIndex = 0;
var gSelectedArray = [
    { 'imgName': 'WinterPineappleClassic.jpg',      'alt': 'Winter Pineapple Classic', 'idOfInfoBox': 'IB_WinterPineappleClassic', 'idOfNameSelector': 'NM_WinterPineappleClassic' },
    { 'imgName': 'EAW.jpg',      'alt': 'EAW', 'idOfInfoBox': 'IB_EAW', 'idOfNameSelector': 'NM_EAW' },
    { 'imgName': 'Mackie.jpg',      'alt': 'Mackie', 'idOfInfoBox': 'IB_Mackie', 'idOfNameSelector': 'NM_Mackie' },
    { 'imgName': 'CellNetix.jpg',      'alt': 'CellNetix', 'idOfInfoBox': 'IB_CellNetix', 'idOfNameSelector': 'NM_CellNetix' },
    { 'imgName': 'WOF.jpg',      'alt': 'WOF', 'idOfInfoBox': 'IB_WOF', 'idOfNameSelector': 'NM_WOF' },
    { 'imgName': 'LionfishCreative.jpg',      'alt': 'Lionfish', 'idOfInfoBox': 'IB_Lionfish', 'idOfNameSelector': 'NM_Lionfish' },
    { 'imgName': 'BakingSecurityIn.jpg',      'alt': 'Backing Security In', 'idOfInfoBox': 'IB_BakingSecurityIn', 'idOfNameSelector': 'NM_BakingSecurityIn' },
    { 'imgName': 'MSCovermount.jpg',      'alt': 'Microsoft Covermount', 'idOfInfoBox': 'IB_MSCovermount', 'idOfNameSelector': 'NM_MSCovermount' },
    { 'imgName': 'SandMatters.jpg',      'alt': 'Sand Matters', 'idOfInfoBox': 'IB_SandMatters', 'idOfNameSelector': 'NM_SandMatters' },
    { 'imgName': 'GaylindaGardner.jpg',      'alt': 'Gaylinda Gardner', 'idOfInfoBox': 'IB_GaylindaGardner', 'idOfNameSelector': 'NM_GaylindaGardner' },
    { 'imgName': 'LOUD.jpg',      'alt': 'LOUD', 'idOfInfoBox': 'IB_LOUD', 'idOfNameSelector': 'NM_LOUD' },
    { 'imgName': 'Incipio.jpg',      'alt': 'Incipio', 'idOfInfoBox': 'IB_Incipio', 'idOfNameSelector': 'NM_Incipio' },
    { 'imgName': 'MSStoreContest.jpg',      'alt': 'MS Store Contest', 'idOfInfoBox': 'IB_MSStoreContest', 'idOfNameSelector': 'NM_MSStoreContest' },
    { 'imgName': 'Wednet.jpg',      'alt': 'Wednet', 'idOfInfoBox': 'IB_Wednet', 'idOfNameSelector': 'NM_Wednet' },
    { 'imgName': 'DynamicsRecruit.jpg',      'alt': 'Dynamics Recruit', 'idOfInfoBox': 'IB_DynamicsRecruit', 'idOfNameSelector': 'NM_DynamicsRecruit' },
    { 'imgName': 'DIS.jpg',      'alt': 'Drunk In Seattle', 'idOfInfoBox': 'IB_DIS', 'idOfNameSelector': 'NM_DIS' },
    { 'imgName': 'SAM.jpg',      'alt': 'SAM Toolkit', 'idOfInfoBox': 'IB_SAMToolkit', 'idOfNameSelector': 'NM_SAMToolkit' },
    { 'imgName': 'MonsterShowdown.jpg',      'alt': 'Monster Showdown', 'idOfInfoBox': 'IB_MonsterShowdown', 'idOfNameSelector': 'NM_MonsterShowdown' },
    { 'imgName': 'TAPCO.jpg',      'alt': 'TAPCO', 'idOfInfoBox': 'IB_TAPCO', 'idOfNameSelector': 'NM_TAPCO' }

]


function ShowPiece(iSelectedIndex) {
	var strInnerHtml = '';
	var oObj;
	if(gSelectedArray && gSelectedArray.length > 0)
	{
		for(i = 0; i < gSelectedArray.length; i++)
		{
			if( i == iSelectedIndex )
			{
				oObj = document.getElementById(gSelectedArray[i].idOfNameSelector)
				oObj.className = 'PortfolioPieceSelected';
				oObj.innerHTML = '<div>' + gSelectedArray[i].alt + '</div>';
			}
			else
			{
				oObj = document.getElementById(gSelectedArray[i].idOfNameSelector)
				oObj.className = 'PortfolioPiece';
				oObj.innerHTML = '<div onclick="FadeGotoNext(' + i + ')">' + gSelectedArray[i].alt + '</div>';
			}
		}
	}
}

		//Initialize the fade
function SetHeroImage()
{
  var oHeroImageArea;
  var InfoBoxArray = new Array();
  var HeroImageImageArray = new Array();
  for(i = 0; i < gSelectedArray.length; i++)
  {
  	HeroImageImageArray[i] = '/image.axd?picture=Images/Pieces/' + gSelectedArray[i].imgName;
	InfoBoxArray[i] = gSelectedArray[i].idOfInfoBox;
  }

  if( 0 < HeroImageImageArray.length ) // This Array must always have at least one image, and that is what we will start with.
  {
    oHeroImageArea = document.getElementById('HeroImageWrapper');
	oHeroImageArea.style.background = 'url(' + HeroImageImageArray[0] + ')';
	oHeroImageArea.style.width = 320;
	oHeroImageArea.style.height = 266;
	oHeroImageArea.innerHTML = '<img id="HeroImageImage" onclick="javascript: FadeGotoNext();" src="' + HeroImageImageArray[0] + '" alt="Portfolio" width="320" height="266" border="0" />';
	if ( 1 < HeroImageImageArray.length )
	{
    	fadeInit(HeroImageImageArray, oHeroImageArea.id, 'HeroImageImage', InfoBoxArray );
	}
  }
}

function fadeInit(ImageArray, DivWrapperId, ImgId, InfoBoxArray) {
  gFadeImageArray = ImageArray;
  gImageCurrentIndex = 0;
  gImageNextIndex = 1;
  g_oPhotoHolder = document.getElementById(DivWrapperId);
  g_oImage = document.getElementById(ImgId);
  gFadeInfoBoxArray = InfoBoxArray;
  gPause = true;
  g_oPhotoHolder.style.cursor = 'pointer';
  
  g_oInfoBoxCurrent = document.getElementById(gFadeInfoBoxArray[gImageCurrentIndex])
  g_oInfoBoxCurrent.style.opacity = 100;
  g_oInfoBoxCurrent.style.display = 'block';
  if( 1 >= gFadeImageArray.length )
  {
	g_oPhotoHolder.style.cursor = 'default';
    return true;
  }
}

//The setOpacity function is passed an object and an opacity value. It then sets the opacity of the supplied object using four proprietary ways. It also prevents a flicker in Firefox caused when opacity is set to 100%, by setting the value to 99.999% instead.

function setOpacity(opacity) {
  var NextOpacity = (opacity == 100)?99.999:opacity;

  // IE/Win
  g_oImage.style.filter = "alpha(opacity:"+NextOpacity+")";
  g_oInfoBoxCurrent.style.filter = "alpha(opacity:"+(1-NextOpacity)+")";
  g_oInfoBoxNext.style.filter = "alpha(opacity:"+NextOpacity+")";
  
  NextOpacity = NextOpacity/100;
  // Safari<1.2, Konqueror
  g_oImage.style.KHTMLOpacity = NextOpacity;
  g_oInfoBoxCurrent.style.KHTMLOpacity = 1 - NextOpacity;
  g_oInfoBoxNext.style.KHTMLOpacity = NextOpacity;
  
  // Older Mozilla and Firefox
  g_oImage.style.MozOpacity = NextOpacity;
  g_oInfoBoxCurrent.style.MozOpacity = 1 - NextOpacity;
  g_oInfoBoxNext.style.MozOpacity = NextOpacity;
  
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  g_oImage.style.opacity = NextOpacity;
  g_oInfoBoxCurrent.style.opacity = 1 - NextOpacity;
  g_oInfoBoxNext.style.opacity = NextOpacity;
}
//The fadeIn function uses a Timeout to call itself every 100ms with an object Id and an opacity. The opacity is specified as a percentage and increased 10% at a time. The loop stops once the opacity reaches 100%:

function fadeIn() {
  if (!gPause)
  {
    if (gOpacity <= 100) {
      setOpacity(gOpacity);
      gOpacity += 5;
      gFadeTimer = window.setTimeout("fadeIn()", 25);
    }
	else
	{
      gImageCurrentIndex = gImageNextIndex;
	  g_oInfoBoxCurrent.style.display = 'none';
	  g_oInfoBoxCurrent = g_oInfoBoxNext;
	  gPause = true;
	}
  }
}

function fadeReset(iIndex)
{
  if('undefined' != typeof(iIndex) && iIndex >= 0)
  {
	gImageNextIndex=iIndex;
  }
  else
  {
  	gImageNextIndex=(this.gImageCurrentIndex<gFadeImageArray.length-1)? this.gImageCurrentIndex+1 : 0;
  }
  g_oInfoBoxCurrent = document.getElementById(gFadeInfoBoxArray[gImageCurrentIndex]);
  g_oInfoBoxNext = document.getElementById(gFadeInfoBoxArray[gImageNextIndex]);
  g_oInfoBoxCurrent.style.display = 'block';
  g_oInfoBoxNext.style.display = 'block';
  
  gOpacity = 0;
  setOpacity(gOpacity);
  //g_oImage.style.visibility = 'visible';
  g_oPhotoHolder.style.backgroundImage = "url('" + gFadeImageArray[gImageCurrentIndex] +"')";
  ShowPiece(gImageNextIndex);

  if( !gPause )
      gFadeTimer = window.setTimeout("fadePause()", 50);

}

function FadeGotoNext(iIndex)
{
  gPause = false;
  if( 0 >= gFadeImageArray.length ) return true;
  clearTimeout(gFadeTimer);
  gOpacity = 50;
  fadeReset(iIndex);
}

function fadePause()
{
  if( 0 >= gFadeImageArray.length ) return true;
  g_oImage.src = gFadeImageArray[gImageNextIndex];
  gFadeTimer = window.setTimeout("fadeIn()", 50);
}