// $Revision$

Ensembl.Panel.Overlay = Ensembl.Panel.extend({
  constructor: function (id) {
    this.base(id);
    
    this.window    = $(window);
    this.isIE6     = $('body').hasClass('ie6');
    this.firstOpen = true;
    
    this.setMinMax();
    
    Ensembl.EventManager.register('windowResize', this, this.pageResize);
  },
  
  init: function () {
    var panel = this;
    
    this.customized = this.getCookie();
    
    this.base();
    
    if (!panel.isIE6) {
      $(this.el).draggable({
        handle: 'div.modal_title',
        stop: function (e, ui) {
          $.extend(panel.customized, ui.position);
          panel.setCookie();
        }
      }).resizable({
        maxWidth:  this.maxWidth,
        maxHeight: this.maxHeight,
        minWidth:  this.minWidth,
        minHeight: this.minHeight,
        stop:      function (e, ui) {
          $.extend(panel.customized, ui.size);
          panel.setCookie();
          
          $(this).css('position', 'fixed').css('top', function (i, top) {
            return parseInt(top, 10) - panel.window.scrollTop();
          }).css('left', function (i, left) {
            return parseInt(left, 10) - panel.window.scrollLeft();
          });
          
          Ensembl.EventManager.trigger('modalPanelResize');
        }
      });
    }
    
    this.elLk.background = $('#modal_bg').bind('click', function () { panel.hide() });
  },
  
  setCookie: function () {
    var panel  = this;
    var cookie = $.map([ 'width', 'height', 'left', 'top' ], function (i) { return panel.customized[i] || 0; });
    
    Ensembl.cookie.set('modal', cookie.join('|'));
  },
  
  getCookie: function () {
    var cookie = Ensembl.cookie.get('modal').split('|');
    
    return cookie.length === 4 && !this.isIE6 ? {
      width:  Math.min(parseInt(cookie[0], 10), this.maxWidth),
      height: Math.min(parseInt(cookie[1], 10), this.maxHeight),
      left:   parseInt(cookie[2], 10),
      top:    parseInt(cookie[3], 10)
    } : {};
  },
  
  show: function () {
    var css;
    
    this.elLk.background.show();
    
    if (this.firstOpen) {
      this.setDimensions();
      this.firstOpen = false;
    }
    
    if (this.isIE6) {
      css = { marginTop: this.window.scrollTop(), marginLeft: this.window.scrollLeft() };
      $(this.el).css(css);
      this.elLk.background.css(css);
      $('body').css('overflow', 'hidden');
      $('select').hide();
      $('select', this.el).show();
    }
    
    this.base();
  },
  
  hide: function () {
    this.base()
    
    this.elLk.background.hide();
    
    if (this.isIE6) {
      $('body').css('overflow', 'auto');
      $('select').show();
    }
  },
  
  setMinMax: function () {
    this.maxWidth  = Math.round(this.window.width()  * 0.9);
    this.maxHeight = Math.round(this.window.height() * 0.8);
    this.minWidth  = Math.min(700, this.maxWidth);
    this.minHeight = Math.min(500, this.maxHeight);
  },
  
  setDimensions: function () {
    this.setMinMax();
  
    var height       = this.customized.height ? Math.min(this.customized.height, this.maxHeight) : this.maxHeight;
    var width        = this.customized.width  ? Math.min(this.customized.width,  this.maxWidth)  : this.maxWidth;
    var offset       = $(this.el).offset();
    var windowWidth  = this.window.width();
    var windowHeight = this.window.height();

    $(this.el).resizable('option', {
      maxWidth:  this.maxWidth,
      maxHeight: this.maxHeight,
      minWidth:  this.minWidth,
      minHeight: this.minHeight
    }).css({ 
      height: height,
      width:  width,
      top:    !this.customized.top  || offset.top  + height > windowHeight || this.customized.top  + height > windowHeight ? (windowHeight - height) / 2 : this.customized.top,
      left:   !this.customized.left || offset.left + width  > windowWidth  || this.customized.left + width  > windowWidth  ? (windowWidth  - width)  / 2 : this.customized.left
    });
  },
  
  pageResize: function () {
    this.setDimensions();
    
    if (this.visible) {
      Ensembl.EventManager.trigger('modalPanelResize');
    }
  }
});

@@ -496,24 +496,57 @@
 draggable(%7B%0A
+        containment: 'document',%0A
         hand
@@ -607,33 +607,251 @@
 %7B%0A          
-$.extend(
+if (ui.position.top %3C panel.offsetTop) %7B%0A            ui.position.top = panel.offsetTop;%0A            $(this).css('top', panel.offsetTop);%0A          %7D%0A          %0A          panel.customized.left = ui.position.left %7C%7C 1;%0A          
 panel.custom
@@ -850,25 +850,31 @@
 l.customized
-,
+.top  =
  ui.position
@@ -873,17 +873,20 @@
 position
-)
+.top
 ;%0A      
@@ -2738,16 +2738,166 @@
 base();%0A
+    %0A    if (!this.offsetTop) %7B%0A      this.offsetTop = - $('.modal_title', this.el).position().top - $('.modal_close', this.el).position().top;%0A    %7D%0A
   %7D,%0A  %0A

fix an issue where you could move the overlay off the top of the window, and never get it back