var W3CDOM = (document.createElement && document.getElementsByTagName);
var gImages = new Array(14);

window.onload = init;

function init()
{
	if (!W3CDOM || navigator.appVersion.substring(17,23)=="MSIE 5") return;
  
  //get divs and add behaviours
	var squares = document.getElementById('header').getElementsByTagName('div');
	for (var i=0;i<squares.length;i++)
		if(!squares[i].id) {
      squares[i].clickState = false;
      squares[i].onmouseover = function() {
        this.style.background = "url('"+gImages[0].src+"')";
      }
      squares[i].onmouseout = function() {
        if(this.clickState) return;
        this.currentFrame = 0;
        animate(this);
      }
      squares[i].onclick = function() {
        this.clickState = !this.clickState;
        if(this.clickState)
          this.style.background = "url('"+gImages[0].src+"')";
      }
    }
  
  //preload images
  for(var i=0;i<gImages.length;i++) {
    gImages[i] = new Image();
      gImages[i].src = '/site/images/sequence1/seq'+i+'.png';
  }
}

function animate(div)
{
  div.style.background = "url('"+gImages[div.currentFrame].src+"')";
  if(div.currentFrame < gImages.length-1) {
    div.currentFrame++;
    setTimeout(function(){animate(div)}, 50);
  }
}