// initialize function creates the Watchers
function init(){
   for(i=1; i<36; i++){            
      new RowWatcher(i);      
   }         
   new Titler(PlotNotes);   
}

var TargetCoords = {
    1: '127px 182px',
    2: '124px 162px',
    3: '128px 143px',
    4: '145px 132px',
    5: '162px 120px',
    6: '178px 110px',
    7: '195px 100px',
    8: '180px 150px',
    9: '195px 150px',
   10: '215px 150px',
   11: '225px 165px',
   12: '240px 179px',
   13: '250px 192px',
   14: '310px 265px',
   15: '315px 290px',
   16: '345px 305px',
   17: '330px 323px',
   18: '307px 347px',
   19: '300px 325px',
   20: '287px 290px',
   21: '283px 347px',
   22: '260px 342px',
   23: '236px 363px',
   24: '235px 330px',
   25: '215px 335px',
   26: '200px 345px',
   27: '183px 365px',
   28: '200px 393px',
   29: '174px 400px',
   30: '260px 380px',
   31: '240px 398px',
   32: '225px 413px',
   33: '209px 429px',
   34: '134px 439px',
   35: '141px 465px'
}


//declaring the class
var RowWatcher = Class.create();

// Takes care of the map/table interactions
RowWatcher.prototype = {

   // adding the right event handlers
   initialize: function(row_number) {
      this.number    = row_number
      this.plot_name = 'plot' + row_number;
      this.plot_area = $(this.plot_name);
      this.plot_data = $(this.plot_name + '_data');
      //assigning our method to the event
      // the image map areas
      this.plot_area.onmouseover = this.highlight_plot.bindAsEventListener(this);
      this.plot_area.onmouseout = this.unhighlight.bindAsEventListener(this);
      // the table rows
      this.plot_data.onmouseover = this.highlight_plot.bindAsEventListener(this);
      this.plot_data.onmouseout = this.unhighlight.bindAsEventListener(this);
   },
   
   // highlight the correct portion of the graphic as well as the corresponding row
   highlight_plot: function(){
      
      // first un-highlight all the table rows
      for(i=1; i<36; i++){
         Element.removeClassName('plot' + i + '_data', 'highlight');
      }
      
      // highlight the current table row
      Element.addClassName(this.plot_data, 'highlight');
      
      // show highlight graphic
      //$('plotgraphic').className = this.plot_name; 
      // For some reason IE6 (but not IE5.5) fails to update the background
      // postion when changed via a class asignment.
      // A workaround is to assign the position offsets directly in JS instead 
      // of depending on the CSS
      $('plotgraphic').style.backgroundPosition = TargetCoords[this.number]; 
   },
   
   unhighlight:function (){
      Element.removeClassName(this.plot_data, 'highlight');
      $('plotgraphic').style.backgroundPosition = '100px 200px'; // safely hidden
   }
   
};

      
var Titler = function(titles){
    for(p in titles){
        $('plot' + p).title = $('plot' + p + '_data').title = titles[p];            
    }
}