var TheAnimation;

function init()
{
  TheAnimation = new ContentAnimation();

  var terms = new PageQuery(window.location.search);
  var sec = terms.getValue("section");
  var subSec = terms.getValue("subsection");
  
  switch(sec)
  {
    case "whatWeDo":
      TheAnimation.GoToSphere(true);
      break;
    case "whatWeveDone":
      switch(subSec)
      {
        case "lge":
          TheAnimation.GoToCylinderLGE();
          break;
        case "sotc":
          TheAnimation.GoToCylinderSOTC();
          break;
        case "avery":
          TheAnimation.GoToCylinderAvery();
          break;
		case "srb":
          TheAnimation.GoToCylinderSRB();
          break;
        default:
          TheAnimation.GoToCylinderGT();
          break;
      }
      break;
    case "contact":
      TheAnimation.GoToCone(true);
      break;
    default:
      switch(subSec)
      {
        case "brandon":
          TheAnimation.GoToCubeBrandon();
          break;
        case "charlie":
          TheAnimation.GoToCubeCharlie();
          break;
        case "michael":
          TheAnimation.GoToCubeMichael();
          break;
        default:
          TheAnimation.GoToCubeCompany();
          break;
      }
      break;
  } 
}

function ContentAnimation()
{
  var _TransitionTime = 300;
  var _StartingFadeOutValue = 0;
  var _CurrentFadeOutValue = 0;
  var _StartingFadeInValue = 0;
  var _CurrentFadeInValue = 0;
  var _CurrentArrowPos = 0;
  var _StartingArrowPos = 0;
  var _CurrentDirection = -1;
  var _LastState = -1;
  var _FadeTimeLeft = 0;
  var _TotalFadeTime = 0;
  var _LastTick = 0;
  
  var _Arrow = gID("arrowMarker");
  var _ArrowPositions = new Array();
  _ArrowPositions.push(91);
  _ArrowPositions.push(283);
  _ArrowPositions.push(667);
  _ArrowPositions.push(859);
  
  var _ShapeImages = new Array();
  _ShapeImages.push(gID("cubeImg"));
  _ShapeImages.push(gID("sphereImg"));
  _ShapeImages.push(gID("cylinderImg"));
  _ShapeImages.push(gID("coneImg"));
  
  var _ContentArray = new Array();
  _ContentArray.push(gID("cubeContent"));
  _ContentArray.push(gID("sphereContent"));
  _ContentArray.push(gID("cylinderContent"));
  _ContentArray.push(gID("coneContent"));
  
  var _SubsectionContentArray = new Array();
  _SubsectionContentArray.push(new Array());
  _SubsectionContentArray[0].push(gID('cubeContentCompany'));
  _SubsectionContentArray[0].push(gID('cubeContentBrandon'));
  _SubsectionContentArray[0].push(gID('cubeContentCharlie'));
  _SubsectionContentArray[0].push(gID('cubeContentMichael'));
  _SubsectionContentArray.push(new Array());
  _SubsectionContentArray.push(new Array());
  _SubsectionContentArray[2].push(gID('cylinderContentGT'));
  _SubsectionContentArray[2].push(gID('cylinderContentLGE'));
  _SubsectionContentArray[2].push(gID('cylinderContentSOTC'));
  _SubsectionContentArray[2].push(gID('cylinderContentAvery'));
  _SubsectionContentArray[2].push(gID('cylinderContentSRB'));
  _SubsectionContentArray.push(new Array());
  
  var _SubsectionArrowArray = new Array();
  _SubsectionArrowArray.push(new Array());
  _SubsectionArrowArray[0].push(gID('cubeArrowsCompany'));
  _SubsectionArrowArray[0].push(gID('cubeArrowsBrandon'));
  _SubsectionArrowArray[0].push(gID('cubeArrowsCharlie'));
  _SubsectionArrowArray[0].push(gID('cubeArrowsMichael'));
  _SubsectionArrowArray.push(new Array());
  _SubsectionArrowArray.push(new Array());
  _SubsectionArrowArray[2].push(gID('cylinderArrowsGT'));
  _SubsectionArrowArray[2].push(gID('cylinderArrowsLGE'));
  _SubsectionArrowArray[2].push(gID('cylinderArrowsSOTC'));
  _SubsectionArrowArray[2].push(gID('cylinderArrowsAvery'));
  _SubsectionArrowArray[2].push(gID('cylinderArrowsSRB'));
  _SubsectionArrowArray.push(new Array()); 
  
  function finalizeState()
  {
    _CurrentArrowPos = _ArrowPositions[_CurrentDirection];
    _Arrow.style.left = _CurrentArrowPos + 'px';
    for(var i=0; i<_ContentArray.length; i++)
    {
      if(_CurrentDirection == i)
      {
        _ContentArray[i].style.display = 'block';
        _ContentArray[i].style.opacity = '1';
        _ContentArray[i].style.filter = 'alpha(opacity = 100)';
      }
      else
      {
        _ContentArray[i].style.display = 'none';
        _ContentArray[i].style.opacity = '0';
        _ContentArray[i].style.filter = 'alpha(opacity = 0)';
      }
    }
    
    _LastState = _CurrentDirection;
    _CurrentDirection = -1;
  }
  
  function initSubsection(sec, subsec)
  {
    var arrows = _SubsectionArrowArray[sec];
    var content = _SubsectionContentArray[sec];
    
    for(var i=0; i<arrows.length; i++)
    {
      if(i == subsec)
      {
        arrows[i].style.visibility = 'visible';
        content[i].style.display = 'block';
        content[i].style.height = '154px'; //IE 6 Hack
      }
      else
      {
        arrows[i].style.visibility = 'hidden';
        content[i].style.display = 'none';
        content[i].style.height = '0px';
      }
    }
  }
  
  function animateFade()
  { 
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - _LastTick;
    _LastTick = curTick;
 
    if(_FadeTimeLeft <= elapsedTicks)
    { finalizeState(); return; }
 
    _FadeTimeLeft -= elapsedTicks;
    var ratio = (_TotalFadeTime - _FadeTimeLeft)/_TotalFadeTime;
        
    _CurrentArrowPos = _StartingArrowPos + (_ArrowPositions[_CurrentDirection] - _StartingArrowPos)*ratio;
    _Arrow.style.left = _CurrentArrowPos + 'px';
    
    _CurrentFadeInValue = _StartingFadeInValue + (1 - _StartingFadeInValue)*ratio; 
    _ContentArray[_CurrentDirection].style.opacity = _CurrentFadeInValue;
    _ContentArray[_CurrentDirection].style.filter = 'alpha(opacity = ' + (_CurrentFadeInValue*100) + ')';
    
    _CurrentFadeOutValue = _StartingFadeOutValue + (0 - _StartingFadeOutValue)*ratio;
    _ContentArray[_LastState].style.opacity = _CurrentFadeOutValue;
    _ContentArray[_LastState].style.filter = 'alpha(opacity = ' + (_CurrentFadeOutValue*100) + ')';
 
    setTimeout(animateFade, 22);
  }
  
  function initGo(force, direction)
  {
    var newAnimation = (_CurrentDirection == -1);
    
    if(_CurrentDirection == direction || (newAnimation && _LastState == direction))
      return;
    
    if(!newAnimation)
      _LastState = _CurrentDirection;
      
    _CurrentDirection = direction;
    
    for(var i=0; i<_ShapeImages.length; i++)
    {
      if(i == _CurrentDirection)
        _ShapeImages[i].style.backgroundPosition = "-192px 0px";
      else
      {
        _ShapeImages[i].style.backgroundPosition = '';
        _ShapeImages[i].removeAttribute('style');
      }
    }
    
    if(force)
    { finalizeState(); return; }
    
    _StartingArrowPos = _CurrentArrowPos;
    
    for(var i=0; i<_ContentArray.length; i++)
    {
      if(i == _CurrentDirection || i == _LastState)
      {
        _ContentArray[i].style.display = 'block';
      }
      else
      {
        _ContentArray[i].style.display = 'none';
        _ContentArray[i].style.opacity = '0';
        _ContentArray[i].style.filter = 'alpha(opacity = 0)';
      }
    }
    
    if(newAnimation)
    {
      _StartingFadeInValue = 0;
      _StartingFadeOutValue = 1;
      _CurrentFadeInValue = _StartingFadeInValue;
      _CurrentFadeOutValue = _StartingFadeOutValue;
      _LastTick = new Date().getTime();
      _FadeTimeLeft = _TransitionTime;
      _TotalFadeTime = _FadeTimeLeft;
      setTimeout(animateFade, 22);
      return;
    }
    
    _StartingFadeOutValue = _CurrentFadeInValue;
    _StartingFadeInValue = 0;
    _CurrentFadeInValue = _StartingFadeInValue;
    _CurrentFadeOutValue = _StartingFadeOutValue;
    
    var ratio = Math.abs((_CurrentArrowPos - _ArrowPositions[_CurrentDirection])/(_ArrowPositions[_CurrentDirection] - _ArrowPositions[_LastState]));
    if(ratio > 1)
      ratio = 1;
      
    _FadeTimeLeft = _TransitionTime*ratio;
    _TotalFadeTime = _FadeTimeLeft;
  }

  this.GoToCubeCompany = function()
  { initSubsection(0, 0); initGo(true, 0); }
  
  this.GoToCubeBrandon = function()
  { initSubsection(0, 1); initGo(true, 0); }
  
  this.GoToCubeCharlie = function()
  { initSubsection(0, 2); initGo(true, 0); }
  
  this.GoToCubeMichael = function()
  { initSubsection(0, 3); initGo(true, 0); }
  
  this.GoToCylinderGT = function()
  { initSubsection(2, 0); initGo(true, 2); }
  
  this.GoToCylinderLGE = function()
  { initSubsection(2, 1); initGo(true, 2); }
  
  this.GoToCylinderSOTC = function()
  { initSubsection(2, 2); initGo(true, 2); }
  
  this.GoToCylinderAvery = function()
  { initSubsection(2, 3); initGo(true, 2); }
  
  this.GoToCylinderSRB = function()
  { initSubsection(2, 4); initGo(true, 2); }
  
  this.GoToCube = function(force)
  { initGo(force, 0); }
  
  this.GoToSphere = function(force)
  { initGo(force, 1); }
  
  this.GoToCylinder = function(force)
  { initGo(force, 2); }
  
  this.GoToCone = function(force)
  { initGo(force, 3); }
}

function cubeClick(e)
{ TheAnimation.GoToCube(false); }

function sphereClick(e)
{ TheAnimation.GoToSphere(false); }

function cylinderClick(e)
{ TheAnimation.GoToCylinder(false); }

function coneClick(e)
{ TheAnimation.GoToCone(false); }

function cubeCompanyClick(e)
{ TheAnimation.GoToCubeCompany(); }

function cubeBrandonClick(e)
{ TheAnimation.GoToCubeBrandon(); }

function cubeCharlieClick(e)
{ TheAnimation.GoToCubeCharlie(); }

function cubeMichaelClick(e)
{ TheAnimation.GoToCubeMichael(); }

function cylinderGTClick(e)
{ TheAnimation.GoToCylinderGT(); }

function cylinderLGEClick(e)
{ TheAnimation.GoToCylinderLGE(); }

function cylinderSOTCClick(e)
{ TheAnimation.GoToCylinderSOTC(); }

function cylinderAveryClick(e)
{ TheAnimation.GoToCylinderAvery(); }

function cylinderSRBClick(e)
{ TheAnimation.GoToCylinderSRB(); }

function PageQuery(q) {
  if(q.length > 1) 
    this.q = q.substring(1, q.length);
  else this.q = null;
  
  this.keyValuePairs = new Array();
  if(q)
    for(var i=0; i < this.q.split("&").length; i++)
      this.keyValuePairs[i] = this.q.split("&")[i];
  
  this.getKeyValuePairs = function() 
  { 
    return this.keyValuePairs;
  }
  
  this.getValue = function(s) 
  {
    for(var j=0; j < this.keyValuePairs.length; j++)
    {
      if(this.keyValuePairs[j].split("=")[0] == s)
        return this.keyValuePairs[j].split("=")[1];
    }
    return false;
  }
  
  this.getParameters = function() 
  {
    var a = new Array(this.getLength());
    for(var j=0; j < this.keyValuePairs.length; j++)
    {
      a[j] = this.keyValuePairs[j].split("=")[0];
    }
    return a;
  }
  
  this.getLength = function() 
  { 
    return this.keyValuePairs.length; 
  }
}

function gID(e){return document.getElementById(e);}