var zoomer=null;      
var numColumns=6;
var numRows=4;
var lastCellName='none';
var cameFrom='none';
var zIndex=1;
var canFade=new Array();
var fadeEffects=new Array();
var timers=new Array();

var cellNames=[['autotrader','bp','bridisco','cableandwireless','coop','dow'],
               ['draper','ec2i','gloss','hasbro','homebase','ici'],
               ['jdwilliams','maplin','mbna','mccannerickson','newsquest','otto'],
               ['rapid','redcats','regent','spicers','stives','trinitymirror']];
               
function setup()
{
  zoomer=$('zoomer');
  Event.observe(document,'mousemove',mousemove,false);
}

function fadeCell(cellName)
{
  if (canFade[cellName])
    {
      if (timers[cellName])
        clearTimeout(timers[cellName]);
      timers[cellName]=null;
      fadeEffects[cellName]=new Effect.Fade($('zoomed-'+cellName),{duration:1.25,afterFinish:function(){finishedFade(cellName)}});
    }
  else
    {
      if (timers[cellName])
        clearTimeout(timers[cellName]);
      timers[cellName]=setTimeout('fadeCell(\''+cellName+'\');',250);
    }
}
          
function appearCell(cellName)
{
  if (fadeEffects[cellName])
    fadeEffects[cellName].cancel();
  canFade[cellName]=false;
  $('zoomed-'+cellName).style.zIndex=zIndex++;
  new Effect.Appear($('zoomed-'+cellName),{duration:0.25,afterFinish:function(){finishedAppear(cellName)}});
}

function finishedAppear(cellName)
{
  canFade[cellName]=true;
}

function finishedFade(cellName)
{
  fadeEffects[cellName]=null;
}

function mousemove(e)
{
  var cellSize=100;
  var offset=zoomer.viewportOffset();
	var mouseX=Event.pointerX(e)-offset.left-9;
  var mouseY=Event.pointerY(e)-offset.top-9;
  var row=Math.floor(mouseY/cellSize);
  var col=Math.floor(mouseX/cellSize);
  var cellName='none';
  
  if (col>=0&&col<numColumns&&row>=0&&row<numRows)
    cellName=cellNames[row][col];
  if (cellName!=lastCellName)
    {
      cameFrom=lastCellName;
      lastCellName=cellName;
      
      if (cellName!='none')
        appearCell(cellName);
      if (cameFrom!='none')
        fadeCell(cameFrom);            
      }   
}

function zoomCell(sender)
{
  var id=sender.id.substring(7,sender.id.length);//turn 'zoomed-xyz' into 'xyz'
  appearCell(id);
}

function shrinkCell(sender)
{
  var id=sender.id.substring(7,sender.id.length);//turn 'zoomed-xyz' into 'xyz'
  canFade[id]=true;
  fadeCell(id);
}

Event.observe(window,'load',setup,false);