var g_oCurrentGraphic;
var g_oNextGraphic;
var g_oFrame;

var g_oInfoBoxCurrent;
var g_oInfoBoxNext;

var g_Opacity;
var g_ArrayImage;
var gTimer;
var gVariableHeight;
var gIncrement;
var gCurrentIndex = 0;
var gNextIndex = 0;

// CONSTANTS
var STRIMAGEPATH = 'Images/Portfolio/';
var TRANSITIONDURATION = 1000; // in milliseconds, so 500 is equal to half a second
var VERTICALPADDING = 7;
var WAITTIMEBETWEENSTEPS;
var NUMSTEPS = 10;
var OPACITYSTEP;
var HEIGHTADJUSTMENTFORSPACING;
OPACITYSTEP = (100/NUMSTEPS); // This will work best if the NUMSTEPS goes evenly into 100
WAITTIMEBETWEENSTEPS = TRANSITIONDURATION/NUMSTEPS;
HEIGHTADJUSTMENTFORSPACING = VERTICALPADDING*2;

function Initialize(Arr, Frm, Curr, Next)
{
	g_ArrayImage = Arr;
	g_oCurrentGraphic = document.getElementById(Curr);
	g_oNextGraphic = document.getElementById(Next);
	g_oFrame = document.getElementById(Frm);
	g_oFrame.style.height = (g_ArrayImage[gCurrentIndex].ImgHeight) + 'px';
	//g_oInfoBoxCurrent = document.getElementById(InfoCurr);
	//g_oInfoBoxNext = document.getElementById(InfoNext);
	
	g_oCurrentGraphic.innerHTML = '<img src="' + STRIMAGEPATH + g_ArrayImage[gCurrentIndex].imgName + '" border="0" />';
}

function ChangeHeight(Ht, Frm)
{
  Ht = Math.round(Ht/10000); // This is because I am using a large number in order to avoid worrying about floating point math.
  
  var strHt;
  strHt = Ht + 'px';
  Frm.style.clip = 'rect(0px 595px ' + strHt + ' 0px)';
  Frm.style.height = strHt;
}

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

  // IE/Win
  g_oCurrentGraphic.style.filter = "alpha(opacity:"+(100-NextOpacity)+")";
  g_oNextGraphic.style.filter = "alpha(opacity:"+NextOpacity+")";
  g_oInfoBoxCurrent.style.filter = "alpha(opacity:"+(100-NextOpacity)+")";
  g_oInfoBoxNext.style.filter = "alpha(opacity:"+NextOpacity+")";
  
  NextOpacity = NextOpacity/100;
  // Safari<1.2, Konqueror
  g_oCurrentGraphic.style.KHTMLOpacity = 1 - NextOpacity;
  g_oNextGraphic.style.KHTMLOpacity = NextOpacity;
  g_oInfoBoxCurrent.style.KHTMLOpacity = 1 - NextOpacity;
  g_oInfoBoxNext.style.KHTMLOpacity = NextOpacity;
  
  // Older Mozilla and Firefox
  g_oCurrentGraphic.style.MozOpacity = 1 - NextOpacity;
  g_oNextGraphic.style.MozOpacity = NextOpacity;
  g_oInfoBoxCurrent.style.MozOpacity = 1 - NextOpacity;
  g_oInfoBoxNext.style.MozOpacity = NextOpacity;
  
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  g_oCurrentGraphic.style.opacity = 1 - NextOpacity;
  g_oNextGraphic.style.opacity = NextOpacity;
  g_oInfoBoxCurrent.style.opacity = 1 - NextOpacity;
  g_oInfoBoxNext.style.opacity = NextOpacity;
}

function FlowControl()
{
	if(gOpacity < 100)
	{
		gVariableHeight += (gIncrement*2);
		gOpacity += OPACITYSTEP;

		ChangeOpacity(gOpacity);
		//if(gOpacity <= 50)
			ChangeHeight(gVariableHeight, g_oFrame);
		gTimer = window.setTimeout("FlowControl()", WAITTIMEBETWEENSTEPS);
	}
	else
	{
		g_oInfoBoxNext.style.display = 'block';
		g_oInfoBoxCurrent.style.display = 'none';
		
		var gTemp = g_oInfoBoxCurrent;
		g_oInfoBoxCurrent = g_oInfoBoxNext;
		g_oInfoBoxNext = gTemp;
		
		g_oCurrentGraphic.innerHTML = '';
		
		gTemp = g_oCurrentGraphic;
		g_oCurrentGraphic = g_oNextGraphic;
		g_oNextGraphic = gTemp;
		
		gCurrentIndex = gNextIndex;
	}
}

function GotoNext(iIndex)
{
  if('undefined' != typeof(iIndex) )
  {
	gNextIndex=iIndex;
  }
  else
  {
  	gNextIndex=(this.gCurrentIndex<g_ArrayImage.length-1)? this.gCurrentIndex+1 : 0;
  }
  if( 0 >= g_ArrayImage.length ) return;
  clearTimeout(gTimer);
  gOpacity = 50;
  gVariableHeight = g_ArrayImage[gCurrentIndex].ImgHeight * 10000;
  gIncrement = (g_ArrayImage[gNextIndex].ImgHeight - g_ArrayImage[gCurrentIndex].ImgHeight)*10000/NUMSTEPS;

  g_oInfoBoxCurrent = document.getElementById(g_ArrayImage[gCurrentIndex].idOfInfoBox);
  g_oInfoBoxNext = document.getElementById(g_ArrayImage[gNextIndex].idOfInfoBox);

  g_oInfoBoxNext.style.display = 'block';
  g_oInfoBoxCurrent.style.display = 'block';
  ShowDots(gNextIndex);

  g_oNextGraphic.innerHTML = '<img src="' + STRIMAGEPATH + g_ArrayImage[gNextIndex].imgName + '" border="0" />';
  FlowControl();
}

function ShowDots(iSelectedIndex) {
	var strInnerHtml = '';
	var oObj;
	
	if(g_ArrayImage && g_ArrayImage.length > 0)
	{
		for(i = 0; i < g_ArrayImage.length; i++)
		{
			if( i == iSelectedIndex )
			{
				strInnerHtml += '<span class="Dot"><img class="DotSelected" src="Images/DotSelected.gif" /></span>';
			}
			else
			{
				strInnerHtml += '<span onclick="javascript:  GotoNext(' + i + ');" class="Dot"><img class="DotUnselected" src="Images/DotUnselected.gif" /></span>';			
			}
		}
	}
	oObj = document.getElementById(gSelectedSubNav);
	oObj.innerHTML = strInnerHtml;
}