var logoAngle = 0;
var text1SkewAngle = 0;
var text1SkewOffset = 2;
var text2SkewAngle = 0;
var text2SkewOffset = 1;
var text3Scale = 0;
var text3ScaleOffset = 0.1;

// The startAnimation routine is called when the script is loaded to initialize
// everything.

function startAnimation() {
  window.setInterval(animationStep, 50);
}

// The animationStep routine is called periodically to update the animations

function animationStep() {
  var logo = document.getElementById("logoimg");
  var text1 = document.getElementById("text1");
  var text2 = document.getElementById("text2");
  var text3 = document.getElementById("text3para");
  
  // Spin the Firefox logo by rotating it about its origin. By
  // default, all objects' origins are at their center along all
  // axes.
  
  logoAngle = logoAngle + 2;
  if (logoAngle >= 360) {
    logoAngle = logoAngle - 360;
  }
  
  logo.style.MozTransform = "rotate(" + logoAngle + "deg)";
  logo.style.WebkitTransform = "rotate(" + logoAngle + "deg)";
  
  // Fiddle with the text1 object by skewing it along the X
  // axis. This makes the text "lean" left and right.
  
  text1SkewAngle = text1SkewAngle + text1SkewOffset;
  if (text1SkewAngle > 45) {
    text1SkewAngle = 45;
    text1SkewOffset = -2;
  } else if (text1SkewAngle < -45) {
    text1SkewAngle = -45;
    text1SkewOffset = 2;
  }
  
  text1.style.MozTransform = "skewx(" + text1SkewAngle + "deg)";
  text1.style.WebkitTransform = "skewx(" + text1SkewAngle + "deg)";
  
  // Fiddle with the text2 object. This object we're skewing
  // along the Y axis.
 
  text2SkewAngle = text2SkewAngle + text2SkewOffset;
  if (text2SkewAngle > 45) {
    text2SkewAngle = 45;
    text2SkewOffset = -1;
  } else if (text2SkewAngle < -45) {
    text2SkewAngle = -45;
    text2SkewOffset = 1;
  }
  
  text2.style.MozTransform = "skewy(" + text2SkewAngle + "deg)";
  text2.style.WebkitTransform = "skewy(" + text2SkewAngle + "deg)";
  
  // Fiddle with the text3 object. Here we use scaling to make
  // the object appear to move forward and backward along the Z
  // axis. In addition, we change the text when we switch
  // directions, as well as the text color.
 
  text3Scale = text3Scale + text3ScaleOffset;
  if (text3Scale > 8) {
    text3Scale = 8;
    text3ScaleOffset = -0.1;
    text3.innerHTML = "It's going away so fast!"
    text3.style.color = "blue";
  } else if (text3Scale < 1) {
    text3Scale = 1;
    text3ScaleOffset = 0.1;
    text3.innerHTML = "It's coming right at us!";
    text3.style.color = "red";
  }
  
  text3.style.MozTransform = "scale(" + text3Scale + ")";
  text3.style.WebkitTransform = "scale(" + text3Scale + ")";
}

window.addEventListener("load", function(e) { startAnimation(); }, false);