/*

 detailsSelect.js -- a DHTML library for drag/rubber-band selection in gbrowse
                      This class handles details-specific configuration.

 Sheldon McKay <mckays@cshl.edu>
 $Id$

*/

var detailsObject;
var detailBalloon;

// Constructor
var Details = function () {
  this.imageId    = 'Detail Scale_image';
  this.marginTop  = '35px';
  this.background = 'yellow';
  this.fontColor  = 'blue';
  this.border     = '1px solid black';
  this.menuWidth  = '200px';
  return this;
}

// Inherit from base class SelectArea
Details.prototype = new SelectArea();

// Details-specific config.
Details.prototype.initialize = function() {
  var self = new Details;
  
  var i = $(self.imageId);
  if (!i) return false;

  i = self.replaceImage(i);
  

  //var p = $('panels');
  var p = i.parentNode.parentNode;
  self.height      = self.elementLocation(i,'height');
  self.panelHeight = self.elementLocation(p,'height');
  self.width       = self.elementLocation(i,'width');
  self.selectLayer = p.parentNode.parentNode;

//   try {
//       detailBalloon = new Balloon();
//       detailBalloon.vOffset  = 1;
//       detailBalloon.showOnly = 2; // just show twice
//       var helpFunction = function(event) {
// 	  if (!event) {
// 	      event = window.event;
// 	  }
// 	  var help = '<b>Scalebar:</b> Click here to recenter or click and drag left or right to select a region';
// 	  detailBalloon.showTooltip(event,help,0,250);
//       }
//       i.onmouseover = helpFunction;
//   }
//   catch(e) {
//       i.setAttribute('title','click and drag to select a region');
//   }

  self.scalebar = i;
  self.addSelectMenu('detail');
  self.addSelectBox('detail');
  detailsObject = self;
}

Details.prototype.startSelection = function(event) {
  var self = detailsObject;
  var evt = event || window.event;
  SelectArea.prototype.startRubber(self,event);
}

Details.prototype.loadSegmentInfo = function() {
  // get the segment info from gbrowse CGI parameters
  var self = detailsObject;
  var i = $(self.imageId);
  
  var segment_info = Controller.segment_info;

  this.ref          = segment_info.ref;
  this.segmentStart = parseInt(segment_info.detail_start);
  this.segmentEnd   = parseInt(segment_info.detail_stop);
  this.flip         = segment_info.flip;
  this.padLeft      = parseInt(segment_info.image_padding);
  this.pixelToDNA   = parseFloat(segment_info.details_pixel_ratio);
  this.detailStart  = parseInt(segment_info.detail_start);
  this.detailEnd    = parseInt(segment_info.detail_stop);
  this.max_segment  = parseInt(segment_info.max_segment);

  // If the keystyle is left, there may been extra padding
  var actualWidth   = this.elementLocation(i,'width');
  var expectedWidth = parseInt(segment_info.detail_width);
  if (actualWidth > expectedWidth) {
    this.padLeft     += actualWidth - expectedWidth;
  }

  // We fetch the left margin again because the controller can change 
  // the size & position of the section after it is created.
  this.left       = this.elementLocation($(this.imageId),'x1') - this.elementLocation(this.selectLayer,'x1');

  this.pixelStart   = this.left  + this.padLeft;
}

Details.prototype.formatMenu = function() {
  this.menuHTML = this.selectMenu.innerHTML || '\
  <table style="width:100%">\
         <tr>\
           <th style="background:lightgrey;cell-padding:5">\
             SELECTION\
             <a style="right:0px;position:absolute" href="javascript:SelectArea.prototype.cancelRubber()">\
               [X]\
             </a>\
           </th>\
         </tr>\
         <tr>\
           <td>\
             <a href="javascript:SelectArea.prototype.clearAndSubmit()">' + Controller.translate('ZOOM_IN') + '</a>\
           </td>\
         </tr>\
         <tr>\
           <td>\
             <a href="javascript:SelectArea.prototype.clearAndRecenter()">' + Controller.translate('RECENTER_ON_REGION') + '</a>\
           </td>\
         </tr>\
         <tr>\
           <td onmouseup="SelectArea.prototype.cancelRubber()">\
             <a href="?plugin=FastaDumper;plugin_action=Go;name=SELECTION" target="_new">\
              ' + Controller.translate('DUMP_AS_FASTA') + '\
             </a>\
           </td>\
         </tr>\
       </table>';
}