var orig = 67;  // the inflated size in a slideshow
var small = 32; // the regular size in a slideshow
var sigma = 30.0; // the amount of decrease with distance
var slideshows = Array(); // a hashtable of all slideshows on a page
var captions = Array(); // a hashtable of all captions in slideshows

var skip = small+3
var imageY = parseInt(orig*0.5+1);

// display a caption that links to a site
function caption(id, text, link)
{
  $(id).innerHTML = "<a href='"+link+"'>"+text+"</a>";
}

// place an image in a "zoom" slideshow
function placeImage(id, left, size)
{
  image = document.getElementById(id+'_image')
  image.style.width = parseInt(size)+'px';
  image.style.height = parseInt(size)+'px';
  $(id).style.display = 'block';
  $(id).style.left = parseInt(left-1)+'px';
  $(id).style.top = parseInt((orig-size)*0.5+1)+'px';
}

// return the size based on the distance from the center of the image
function getSize(dSquared)
{
  normal = Math.exp(-dSquared/(2*sigma*sigma));
  if(normal<0.05) normal=0;
  alpha = 1.0*small/orig;
  size = normal*(1-alpha)+alpha;
  return size;
}

if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = shiftImages;
var mouseX, mouseY;

function shiftImages(e)
{
  if(!e) return;
	mouseX = parseInt(e.pageX)-parseInt(document.getElementById('canvas').offsetLeft);
	mouseY = parseInt(e.pageY)-parseInt(document.getElementById('canvas').offsetTop);
  slideshows.each(function(s, i)
  {
	  var x = mouseX - parseInt(document.getElementById(s[1]).offsetLeft);
	  var y = mouseY - parseInt(document.getElementById(s[1]).offsetTop);
    left = 10;
    minDistance = -1;
    for(i=0; i<s[0]; ++i)
    {
      imageX = (i+0.5)*skip;
      distance = (imageX-x)*(imageX-x)+(imageY-y)*(imageY-y);
      if(minDistance==-1 || distance<minDistance)
      {
        minDistance = distance;
        leftAtMinDistance = left;
        sizeAtMinDistance = orig*getSize(distance);
        iAtMinDistance = i;
      }
      size = orig*getSize(distance);
      left += parseInt(size)+3;
    }
    offset = (left-s[0]*skip-10)*x/(s[0]*skip);
    left = 10;
    for(i=0; i<s[0]; ++i)
    {
      imageX = (i+0.5)*skip;
      distance = (imageX-x)*(imageX-x)+(imageY-y)*(imageY-y);
      size = orig*getSize(distance);
      placeImage(s[1]+'_'+i, left-offset, size);
      left += parseInt(size)+3;
    }
    var caption = document.getElementById(s[1]+"_caption");
    if(minDistance<sizeAtMinDistance*sizeAtMinDistance)
    {
      caption.style.left = (leftAtMinDistance-offset-30)+'px';
      caption.style.width = (sizeAtMinDistance+60)+'px';
      caption.style.top = (orig+5)+'px';
      caption.innerHTML = captions[s[1]+"_"+iAtMinDistance];
    }
    else
    {
      caption.innerHTML = "";
    }
  })
}


var seriesInfo = Array(); // the hashtable of all image series
var cropInfo = Array(); // the hashtable of all crop information

// blow up an image in a series
function displayFromSeries(id, i)
{
  if(seriesInfo[id][0] != -1)
  {
    oldi = seriesInfo[id][0];
    var image = document.getElementById(id+'_'+i+'_image');
    var imageWidth = cropInfo[id+'_'+oldi][3];
    var imageHeight = cropInfo[id+'_'+oldi][4];
    var x1 = cropInfo[id+'_'+oldi][0];
    var y1 = cropInfo[id+'_'+oldi][1];
    var x2 = cropInfo[id+'_'+oldi][0]+cropInfo[id+'_'+oldi][2];
    var y2 = cropInfo[id+'_'+oldi][1]+cropInfo[id+'_'+oldi][2];
    new Effect.Morph(id+'_'+oldi,
        {style:
          {left: $(id+'_'+oldi).oldLeft,
           top: $(id+'_'+oldi).oldTop,
           width: '32px',
           height: '32px'
          },
         duration: 0.5,
         afterFinish: function(){
           document.getElementById(id+'_'+oldi+'_link').href = "javascript:displayFromSeries('"+id+"',"+oldi+")";
           document.getElementById(id+'_'+oldi+'_link').target = "_self";
         }
        });
    new Effect.Morph(id+'_'+seriesInfo[id][0]+'_image',
        {style:
          {width: parseInt(32.0*imageWidth/(x2-x1))+'px',
           height: parseInt(32.0*imageHeight/(y2-y1))+'px',
           marginLeft: parseInt(-32*x1/(x2-x1))+'px',
           marginTop: parseInt(-32*y1/(y2-y1))+'px'
          },
         duration: 0.5
        });
  }
  seriesInfo[id][0] = i;
  new Effect.Morph(id+'_'+i, 
      {style:
        {left: (seriesInfo[id][2]*35+95)+'px',
         top: (seriesInfo[id][3]*35+70)+'px',
         width: cropInfo[id+'_'+i][3]+'px',
         height: cropInfo[id+'_'+i][4]+'px'
        },
       duration: 1.0,
       afterFinish: function(){
         document.getElementById(id+'_'+i+'_link').href = cropInfo[id+'_'+i][5]
         document.getElementById(id+'_'+i+'_link').target = "_self";
         }
      });
  new Effect.Morph(id+'_'+i+'_image',
      {style:
        {width: cropInfo[id+'_'+i][3]+'px',
         height: cropInfo[id+'_'+i][4]+'px',
         marginLeft: '0px',
         marginTop: '0px'
        },
       duration: 1.0
      });
}