$(document).ready(function() {
  
  if(!isWorse) {
    $("#boxNav img").fadeTo(0,0);
    
    $("#boxNav a").hover (
      function() { boxNavHover(this, false); },
      function() { boxNavHover(this, true); }
    );
  }
  
  animateComputer();  
});

function boxNavHover(context, out) {
  
  if(!out) {
    $(context)
      .stop(true)
      .animate({ paddingBottom:[30,'easeOutCubic'], bottom:[30,'easeOutCubic'] }, 100)
      .animate({ paddingBottom:[20,'easeInCubic'], bottom:[20,'easeInCubic'] }, 150);
    
    $("span", context)
      .stop()
      .animate({ color:"#ffffff" }, 250);
    
    $("h2", context)
      .stop()
      .animate({ color:"#ff6633" }, 250);
      
    $("img", context)
      .stop()
      .animate({ opacity:1 }, 250);
  }
  else {
    $(context)
      .stop(true)
      .animate({ paddingBottom:0, bottom:0 }, 300);
      
    $("span", context)
      .stop()
      .animate({ color:"#535353" }, 300);

    $("h2", context)
      .stop()
      .animate({ color:"#ffffff" }, 300);
      
    $("img", context)
      .stop()
      .animate({ opacity:0 }, 250);
  }
}

var nextComputer = 1;

function animateComputer() {
  var lastComputer = nextComputer;
  nextComputer++;
  if(nextComputer > 5)
    nextComputer = 1;
  
  if(!isWorse) {
    $("#computerFront")
      .delay(1000)
      .fadeOut(1000, function() {
        $(this)
          .removeClass("computer"+lastComputer)
          .addClass("computer"+nextComputer)
          .fadeIn(1000);
        setTimeout("animateComputer()", 3000);
      });
  }
  else {
    $("#computerFront")
      .removeClass("computer"+lastComputer)
      .addClass("computer"+nextComputer);
    setTimeout("animateComputer()", 5000);
  }
}