var mainwidth = 850;    // update the styles if you change this
var plaquewidth = 290;  // update the styles if you change this
var plaqueheight = 370; // update the styles if you change this
var basezindex = 1000;  // only change this if you know whatsup
var row1_ht = 1.6;      // how much higher than plaque1
var row2_ht = 1.1;      // how much higher than plaque2 and 3
// other globals
var momma_center = mainwidth/2; // what is the abs center of momma?
var plaque_middle = momma_center-plaquewidth/2;
for(i=1;i<7;i++) {
  eval("var position"+i+"='';");
  eval("var plaque"+i+"effects='';");
  eval("var plaque"+i+"effects2='';");
}
window.addEvent('load',function() {
  // these attempt to set things up, but if the three vars above change
  // one will get better visual performance by also updating the styles
  $('plaque_daddy').setStyle('width',mainwidth);
  $('plaque_momma').setStyle('width',mainwidth);
  $('plaque_momma').setStyle('height',plaqueheight*1.5);
  $$('.plaque').setStyle('width',plaquewidth);
  $$('.plaque').setStyle('height',plaqueheight);

  init_positions();
  set_positions();
  init_plaque_movement();
});

function set_positions() {
  // now morph all the plaques into positions
  //position1.x = (plaque_middle-plaquewidth).toInt(); 
  //position1.y = plaqueheight; position1.z = basezindex+5;

  position2.x = (plaque_middle-plaquewidth/row1_ht).toInt(); 
  position2.y = plaqueheight*.35; position2.z = basezindex+5;
  setTimeout("plaque2effects.start({'margin-left':position2.x,'margin-top':position2.y,'z-index':position2.z});",100);

  position3.x = (plaque_middle+plaquewidth/row1_ht).toInt(); 
  position3.y = plaqueheight*.35; position3.z = basezindex+4;
  setTimeout("plaque3effects.start({'margin-left':position3.x,'margin-top':position3.y,'z-index':position3.z});",200);
  
  position4.x = (plaque_middle-plaquewidth/row2_ht).toInt(); 
  position4.y = plaqueheight*.25; position4.z = basezindex+3;
  setTimeout("plaque4effects.start({'margin-left':position4.x,'margin-top':position4.y,'z-index':position4.z});",300);
  
  position5.x = (plaque_middle+plaquewidth/row2_ht).toInt(); 
  position5.y = plaqueheight*.25; position5.z = basezindex+2;
  setTimeout("plaque5effects.start({'margin-left':position5.x,'margin-top':position5.y,'z-index':position5.z});",400);
  
  position6.x = plaque_middle.toInt(); 
  position6.y = plaqueheight*.15; position6.z = basezindex+1;
  setTimeout("plaque6effects.start({'margin-left':position6.x,'margin-top':position6.y,'z-index':position6.z});",500);

  setlinks();

}

function mouseover_positions(item,amount) {
  var myid = item.getProperty('id');
  var id = myid.substr(6);
  mytop = item.getStyle('margin-top').toInt();
  mytopnew = amount+mytop;
  eval("plaque"+id+"effects2.start({'margin-top':"+mytopnew+"}).chain(function(){this.start({'margin-top':"+mytop+"});});");

  //eval("plaque"+id+"effects2.start({'margin-top':"+mytopnew+"});");
  //window.status += 'evaled ('+amount+') ';
  //if (amount<0) setTimeout('mouseover_positions($("'+myid+'"),20);',1000);
}

function init_plaque_movement() {
  $$('.plaque').each(function(item) {
    item.addEvent('mouseenter',function() {
      if (!item.hasClass('moving')) {
        var myid = item.getProperty('id');
        mouseover_positions(item,-5);
      }
    }); 
    item.addEvent('mouseup',function() {
      // cancel the changes if we're in motion
      var frozen = false;
      var motion = false;
      frozen = setTimeout('fix_positions();',200);
      for(i=1;i<7;i++) {
        for(j=1;j<7;j++) {
          if ($('plaque'+j).hasClass('pos'+i)) {
            var myx_c = eval("position"+i+".x").toInt();
            var myx_a = $('plaque'+j).getStyle('margin-left').toInt();
            var myy_c = eval("position"+i+".y").toInt();
            // i confess, it's weird that Morph stops the margin-top 1 pixel too seen in IE and FF
            var myy_a = $('plaque'+j).getStyle('margin-top').toInt();
            var diff_x = 1-(myx_c/myx_a);
            var diff_y = 1-(myy_c/myy_a);
            if (diff_x>.05||diff_y>.05) {
              return true;
            }
            //if (motion==true) alert(diff_x+' '+diff_y);
            //frozen = setTimeout('frozen_fix()',1000);
          }
        }
      }
      /*var pi = item.getProperty('longdesc').substr(3).toInt(); // pi stands for POSITION INDEX
      if (pi==="1") return true;  // i'm already in front, sir*/
      if (item.hasClass('pos1')) return true; // i'm already in front, sir
      // the class string has the current position...we need it in var pi
      for(i=0;i<7;i++) {
        var clss = item.getProperty('class');
        //alert(clss);
        var asdf = clss.contains('pos'+i);
        //alert(clss);
        if (asdf) {
          pi = i;
        }
      }

      // who's on first?
      // here's the twist...the id's are now out of order
      // watch the shells closely as i show you who is it
      for(i=1;i<7;i++) if ($('plaque'+i).hasClass('pos1')) var of = i; // of stands for ON FIRST

      // move the one that was clicked into position 1
      var myid = item.getProperty('id');
      var id = myid.substr(6).toInt();
      $("plaque"+id).addClass('moving');
      eval("plaque"+id+"effects2.cancel();");
      eval("plaque"+id+"effects.start({'margin-left':position1.x,'margin-top':position1.y,'z-index':position1.z}).chain(function(){$('"+myid+"').removeClass('moving');});");
      item.removeClass('over');
      $$('.plaque').removeClass('pos'+pi);
      $$('.plaque').removeClass('pos1');
      item.addClass('pos1');
      // set the height of the link
      //alert("plaque"+id+' is in pos1');

      // move the one that was in position one to position [was clicked]
      $("plaque"+of).addClass('moving');
      eval("plaque"+of+"effects2.cancel();");
      eval("plaque"+of+"effects.start({'margin-left':position"+pi+".x,'margin-top':position"+pi+".y,'z-index':position"+pi+".z}).chain(function(){$('plaque"+of+"').removeClass('moving');});");
      $("plaque"+of).removeClass('over');
      $("plaque"+of).addClass('pos'+pi);
      //alert("plaque"+of+' is in pos'+pi);

      setTimeout('setlinks()',500);

    });
  });
}

function setlinks() {
  var href = $$('.pos1')[0].getProperty('longdesc');
  var bigA = $('bigA'); 
  var asdf = bigA.href;
  if (asdf=='http://init/') {
    var styles = $$('.pos1')[0].getStyles('width','height','margin','marginLeft');
    bigA.setStyles({'display':'block', /*'border':'#FF0 solid 1px', */'width':styles.width, 'height':styles.height, 'margin':styles.margin, 'margin-left':styles.marginLeft.toInt()+50, 'position':'absolute', 'z-index':9999});
  }
  $('bigA').setProperty('href',href);
}

function fix_positions() {
  position1.x = plaque_middle.toInt(); 
  position1.y = plaqueheight*.45; position1.z = basezindex+6;
  for(i=1;i<7;i++) if ($('plaque'+i).hasClass('pos1')) var of = i; // of stands for ON FIRST
  if (!$('plaque'+of).hasClass('over')) setTimeout("plaque"+of+"effects.start({'margin-left':position1.x,'margin-top':position1.y,'z-index':position1.z});",100);

  position2.x = (plaque_middle-plaquewidth/row1_ht).toInt(); 
  position2.y = plaqueheight*.35; position2.z = basezindex+5;
  for(i=1;i<7;i++) if ($('plaque'+i).hasClass('pos2')) var of = i; // of stands for ON FIRST
  if (!$('plaque'+of).hasClass('over')) setTimeout("plaque"+of+"effects.start({'margin-left':position2.x,'margin-top':position2.y,'z-index':position2.z});",100);

  position3.x = (plaque_middle+plaquewidth/row1_ht).toInt(); 
  position3.y = plaqueheight*.35; position3.z = basezindex+4;
  for(i=1;i<7;i++) if ($('plaque'+i).hasClass('pos3')) var of = i; // of stands for ON FIRST
  if (!$('plaque'+of).hasClass('over')) setTimeout("plaque"+of+"effects.start({'margin-left':position3.x,'margin-top':position3.y,'z-index':position3.z});",200);
  
  position4.x = (plaque_middle-plaquewidth/row2_ht).toInt(); 
  position4.y = plaqueheight*.25; position4.z = basezindex+3;
  for(i=1;i<7;i++) if ($('plaque'+i).hasClass('pos4')) var of = i; // of stands for ON FIRST
  if (!$('plaque'+of).hasClass('over')) setTimeout("plaque"+of+"effects.start({'margin-left':position4.x,'margin-top':position4.y,'z-index':position4.z});",300);
  
  position5.x = (plaque_middle+plaquewidth/row2_ht).toInt(); 
  position5.y = plaqueheight*.25; position5.z = basezindex+2;
  for(i=1;i<7;i++) if ($('plaque'+i).hasClass('pos5')) var of = i; // of stands for ON FIRST
  if (!$('plaque'+of).hasClass('over')) setTimeout("plaque"+of+"effects.start({'margin-left':position5.x,'margin-top':position5.y,'z-index':position5.z});",400);
  
  position6.x = plaque_middle.toInt(); 
  position6.y = plaqueheight*.15; position6.z = basezindex+1;
  for(i=1;i<7;i++) if ($('plaque'+i).hasClass('pos6')) var of = i; // of stands for ON FIRST
  if (!$('plaque'+of).hasClass('over')) setTimeout("plaque"+of+"effects.start({'margin-left':position6.x,'margin-top':position6.y,'z-index':position6.z});",500);
}

function init_positions() {
  // okay, let's create the position objects:
  position1 = {}; position2 = {}; position3 = {};
  position4 = {}; position5 = {}; position6 = {};

  // what is the leftmost x and topmost y value of the 1st position plaque?
  position1.x = plaque_middle; position1.y = plaqueheight*.45; position1.z = basezindex+6;

  // okay, now do this for all plaques:
  for(i=1;i<7;i++) {
    // all plaques need an effects instance

    eval("plaque"+i+"effects = new Fx.Morph('plaque"+i+"', {duration: 'long', transition: Fx.Transitions.Sine.easeOut, ignore: true});");
    eval("plaque"+i+"effects2 = new Fx.Morph('plaque"+i+"', {duration: 'short', transition: Fx.Transitions.Sine.easeOut, ignore: true});");

    // initially all plaques will be in position one
    $('plaque'+i).setStyles({'margin-left':position1.x,'margin-top':position1.y,'z-index':position1.z,'visibility':'visible'});
  }
}