// create a popover object as soon as the page loads
Event.observe(document, 'dom:loaded', function(){
  popover = new Popover();
});


// display a message to the user
function display_notification(message) {
  var message_div = new Element('div', { className:'pop-over-message' });
  message_div.innerHTML = message;
  popover.display(message_div);
  popover.resize_to_site_width();
}

// displays the given element in a popover shell
function pop_over(elm) {
  popover.display(elm);
  popover.fit_to_content();
}
function pop_over_close() {
  popover.close();
}



var Popover = Class.create(
{

  initialize : function() {
    // things to manipulate
    this.po = $('pop-over');
    this.poc = $('pop-over-content');
    this.pen = $('holding-pen');
    this.blanker = $('page-blanker');

    // store the initial width
    this.initial_width = this.po.getWidth();
    this.minimum_width = this.initial_width;

    // tracking of state
    this.displaying_content = false;
    this.events_attached = false;
    
    // we need to cache the bound redraw call so we can start and stop observing it
    this.bound_redraw = this.redraw.bindAsEventListener(this);
  },
  
  // display the given content in the pop_over
  display : function(elm) {
    this.clear_current();

    // insert our element
    this.poc.appendChild(elm);
    elm.show();

    // display the pop-over (otherwise we can't get the dimensions)
    this.po.show();

    if (!this.displaying_content) {
      // we need to position vertically the first time round

      // find the dimensions of the view area
      var page_height = document.viewport.getHeight();

      // find the height of the pop-over
      var elm_height = this.po.getHeight();

      // calculate the pop-over position
      var top = parseInt((page_height-elm_height)/4);
      if (top < 0)
        top = 0;

      // offset for the scroll
      top += document.viewport.getScrollOffsets()[1];

      // position the pop-over accordingly
      this.po.setStyle({ top:top.toString()+'px' });
    }

    // register the state change internally
    this.displaying_content = true;
    this.control_events();
    
    // redraw now just to make sure thing everything is where it should be
    this.redraw();
  },
  
  control_events : function() {
    if (this.displaying_content && !this.events_attached) {
      // need to add the events
      Event.observe(window, 'resize', this.bound_redraw);
      this.events_attached = true;
    } else if (!this.displaying_content && this.events_attached) {
      // need to remove the events
      Event.stopObserving(window, 'resize', this.bound_redraw);
      this.events_attached = false;
    }
  },
  
  display_blanker : function() {
    this.blanker.setStyle({ height:$('body').getHeight()+'px'})
    this.blanker.show();
  },
  
  clear_current : function() {
    // clear out the old pop-over
    this.poc.immediateDescendants().each(function(old_elm){
      old_elm.remove();
      // need to keep the old stuff safe
      this.pen.appendChild(old_elm);
    }.bind(this));
  },
  
  fit_to_content : function() {
    var widest_content = 0;

    // let it spill out as wide as it wants before we start trying to find the max width
    this.po.setStyle({width:'auto'});
    
    // find the widest content in the pop_over
    this.poc.immediateDescendants().each(function(elm){
      if (elm.getWidth() > widest_content)
        widest_content = elm.getWidth();
    }.bind(this));

    // make sure it is at least as big as the minimum limit
    if (this.minimum_width && widest_content < this.minimum_width)
      widest_content = this.minimum_width;

    // fit the pop-over around it
    this.resize_to(widest_content);
  },

  resize_to_site_width : function() {
    this.resize_to(this.initial_width);
  },
  
  resize_to : function(width) {
    // change the size of the inner element
    this.po.setStyle({width:width + 'px'});

    // recenter the pop-over
    this.center();
  },
  
  center : function() {
    var page_width = document.viewport.getWidth();
    // find the dimensions of the element we're going to display
    var total_width = this.po.getWidth();

    // calculate the pop-over position
    var left = parseInt((page_width-total_width)/2);
    if (left < 0)
      left = 0;

    // position the pop-over accordingly
    this.po.setStyle({ left:left.toString()+'px' });
  },
  
  redraw : function() {
    // make sure the blanker fits
    this.display_blanker();

    // and center the box horizontally
    this.center();
  },
  
  close : function() {
    this.po.hide();
    this.blanker.hide();
    // update the internal state
    this.displaying_content = false;
    // make sure the events get killed off
    this.control_events();
  }

}
);