function reshape(divToResize,endWidth)
{
  currentWidth = parseInt(document.getElementById(divToResize).style.width);
  
  distanceToResize = Math.sqrt(Math.pow((currentWidth-endWidth),2));
  perFramePixelChange = distanceToResize/(numberOfMillisecondsPerTransform/delayPerFrame);					 
  
 if (currentWidth < endWidth) resizeDirection = 1;
 else resizeDirection = 2;
  
  resize(divToResize,endWidth,perFramePixelChange,resizeDirection);
}

function resize(divToResize,endWidth,perFramePixelChange,resizeDirection)
{
  doResize = false;
  currentWidth = parseInt(document.getElementById(divToResize).style.width);
  
  if ((currentWidth < endWidth) && resizeDirection == 1) //resize up
  {
	newWidth = currentWidth + perFramePixelChange;
	if (newWidth > endWidth) newWidth = endWidth;
	doResize = true;
  }
  else if ((currentWidth > endWidth) && resizeDirection == 2) //resize down
  {
	newWidth = currentWidth - perFramePixelChange;
	if (newWidth < endWidth) newWidth = endWidth;
	doResize = true;
  }
  if (doResize)
  {
    document.getElementById(divToResize).style.width = newWidth+"px"; 
	setTimeout("resize('"+divToResize+"',"+endWidth+","+perFramePixelChange+",'"+resizeDirection+"');", 5);
   }
}



function fade(id, opacityStart, opacityEnd, millisec)
{ 
    //speed for each frame 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacityStart > opacityEnd)
	{ 
      for(i = opacityStart; i >= opacityEnd; i--)
	  { 
        setTimeout("changeOpacity(" + i + ",'" + id + "')",(timer * speed)); 
        timer++; 
      } 
    }
	else if(opacityStart < opacityEnd)
	{ 
      for(i = opacityStart; i <= opacityEnd; i++) 
      { 
        setTimeout("changeOpacity(" + i + ",'" + id + "')",(timer * speed)); 
        timer++; 
      } 
    } 
} 

//change the opacity for different browsers 
function changeOpacity(newOpacity, id)
{ 
    var object = document.getElementById(id).style; 
    object.opacity = (newOpacity / 100); 
    object.MozOpacity = (newOpacity / 100); 
    object.KhtmlOpacity = (newOpacity / 100); 
    object.filter = "alpha(opacity=" + newOpacity + ")";
}

function fadeThrough(imageDivToFadeIn,imageDivToFadeOut)
{
  changeOpacity(100,imageDivToFadeIn);
  fade(divToFadeOut,100,0,400); //fade out the top div to expose the one below
  setTimeout("rearrangeBackgroundOrder('"+imageDivToFadeOut+"','"+imageDivToFadeIn+"')",500);
}

function rearrangeMainImageOrder(imageDivToFadeOut,imageDivToFadeIn)
{
  document.getElementById(imageDivToFadeIn).style.zIndex=2;
  document.getElementById(imageDivToFadeOut).style.zIndex=1;
}

function changeBackground(newBackgroundColor)
{
  if (document.getElementById('background1').style.zIndex==2)
  {
    divToFadeOut = 'background1';
	divToFadeIn = 'background2';
  }
  else
  {
    divToFadeOut = 'background2';
	divToFadeIn = 'background1'; 
  }

  changeOpacity(100,divToFadeIn);
  document.getElementById(divToFadeIn).style.background=newBackgroundColor;
  fade(divToFadeOut,100,0,400); //fade out the top div to expose the one below
  setTimeout("rearrangeBackgroundOrder('"+divToFadeOut+"','"+divToFadeIn+"')",500);
}

function rearrangeBackgroundOrder(divToFadeOut,divToFadeIn)
{
  document.getElementById(divToFadeIn).style.zIndex=2;
  document.getElementById(divToFadeOut).style.zIndex=1;
  changeOpacity(100,divToFadeOut);
}
