var ppDelay = 0;
var ppSpeed = 100;
var ppFrames = 10;
var blocks = new Array();
var topListOffset = 0;
var bottomListOffset = 500;
var listCounter = 0;

window.onbeforeunload = function () {
   // the mere presence of this function forces browser not to cache page - so back button works mostly properly
}

function Block(id, x, y, w, h, bgx, bgy, tx, ty, tw, th, tbgx, tbgy, bg, bgb){
	this.id = id;
	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;
	this.bgx = bgx;
	this.bgy = bgy;
	this.tx = tx;
	this.ty = ty;
	this.tw = tw;
	this.th = th;
	this.tbgx = tbgx;
	this.tbgy = tbgy;
	this.bg = bg;
	this.bgb = bgb;
}

function registerBlock(id, x, y, w, h, bgx, bgy, tx, ty, tw, th, tbgx, tbgy, bg, bgb){
 blocks[id] = new Block(id, x, y, w, h, bgx, bgy, tx, ty, tw, th, tbgx, tbgy, bg, bgb);
}

function rollOverBlockLink(id){
 var titleElement = document.getElementById(id + "Title");
 if(titleElement.className == "imageLinkTitle") titleElement.className = "imageLinkTitleHighlighted" ;
 var imgElement = document.getElementById(id + "Table");
 boxData = blocks[id];
 imgElement.style.background = boxData.bgb;
 var blockElement = document.getElementById(id);
 imgElement.style.backgroundPosition = boxData.bgx + "px " + boxData.bgy + "px";
 blockElement.style.cursor = "pointer";
}

function rollOffBlockLink(id){
 var theElement = document.getElementById(id + "Title");
 if(theElement.className == "imageLinkTitleHighlighted") theElement.className = "imageLinkTitle" ;
 var imgElement = document.getElementById(id + "Table");
 boxData = blocks[id];
 if(boxData.bg != "") imgElement.style.background = boxData.bg;
 imgElement.style.backgroundPosition = boxData.bgx + "px " + boxData.bgy + "px";
}

function setBlockPosition(id, x, y, w, h, bgx, bgy){
 b = blocks[id];
 b.x = x;
 b.y = y;
 b.w = w;
 b.h = h;
 b.bgx = bgx;
 b.bgy = bgy;
 var block = document.getElementById(id);
 if(block == undefined) return;
 block.style.left = x + "px";
 block.style.top = y + "px";
 block.style.width = w + "px";
 block.style.height = h + "px";
 block.style.display= "block";
 var tbl = document.getElementById(id + "Table");
 tbl.style.backgroundPosition = bgx + "px " + bgy + "px";

 if(listCounter++ == 10){
  var topList = document.getElementById("topListTable");
  topListOffset -= 20;
  if(topListOffset < 0) topListOffset = 5000;
  topList.style.backgroundPosition = topListOffset + "px";

  var bottomList = document.getElementById("bottomListTable");
  bottomListOffset += 20;
  if(bottomListOffset > 5000) bottomListOffset = 0;
  bottomList.style.backgroundPosition = bottomListOffset + "px";
  listCounter = 0;
 }
}

function setBlockBackground(id, bg){
 var tbl = document.getElementById(id + "Table");
 tbl.style.background = bg;
}

function moveBlock(id){
 b = blocks[id];
 if(b == undefined) return;
 xStep = ((b.tx + b.tw/2) - (b.x + b.w/2)) / ppFrames;
 yStep = ((b.ty + b.th/2) - (b.y + b.h/2)) / ppFrames;
 wStep = (b.tw - b.w) / ppFrames;
 hStep = (b.th - b.h) / ppFrames;
 bgxStep = (b.tbgx - b.bgx) / ppFrames;
 bgyStep = (b.tbgy - b.bgy) / ppFrames;
 for(f = 1; f < ppFrames; f++){
  width = Math.abs(b.w + (wStep * f));
  height = Math.abs(b.h + (hStep * f));
  x = (b.x + b.w/2 + xStep * f) - width/2;
  y = (b.y + b.h/2 + yStep * f) - height/2;
  bgx = (b.bgx + bgxStep * f);
  bgy = (b.bgy + bgyStep * f);
  setTimeout("setBlockPosition(\'" + id + "\', " + x + ", " + y + ", " + width + ", " + height + ", " + bgx + ", " + bgy + ")", ppDelay + ppSpeed * f - 1);
 }
 setTimeout("setBlockPosition(\'" + id + "\', " + b.tx + ", " + b.ty + ", " + b.tw + ", " + b.th + ", " + b.tbgx + ", " + b.tbgy + ")", ppDelay + ppSpeed * f); 
 // set target to off-screen position, for page-out.
 b.tx = b.x;
 b.ty = b.y;
 if(b.tx > -10 && b.ty > -10){ b.ty = -900; }
}

function doPageOut(id, url){
 for(b in blocks){
  var block = document.getElementById(b + "Table");
  block.onmouseover = "";
  if(b != id) moveBlock(b);
 }
 setTimeout("window.location.assign('" + url + "');", ppDelay + (ppSpeed * ppFrames));
}

function doPageIn(){
 for(b in blocks){
  moveBlock(b);
 }
}