/**
 * MessageBox box using an html div.
 * 
 *  The MessageBox closes if the OK button is clicked, the user presses return, or 
 *  if any other part of the document is clicked. 
 * 
 * @param {String} className
 */
var MessageBox = function(elementID)
{
  this.elementID = elementID != undefined ? elementID : 'messagebox';
}

/**
 * Static function for showing a MessageBox box containing the specified html.
 * 
 * NB appropriate css rules must exist for the MessageBox box to display correctly.
 * See MessageBox.css for an example.
 * 
 * @param {String} contentHtml
 * @param {String} elementID
 * @return {MessageBox}
 */
MessageBox.show = function(contentHtml, buttons, elementID)
{
  var p = new MessageBox(elementID);
  p.showHtml(contentHtml, buttons);
  return p;  
}

/**
 * Shows the MessageBox box.
 * 
 * @param {String} html
 */
MessageBox.prototype.showHtml = function(contentHtml, buttons)
{
  try
  {
    // remove existing 
    if (oldMessageBoxElem = $(this.elementID))
      oldMessageBoxElem.MessageBox.close();
  
    // create and attach new div
    this.elem = document.createElement('div');
    this.elem.id = this.elementID;
    this.elem.MessageBox = this;
    this.buildHtml(contentHtml, buttons);  
    document.body.appendChild(this.elem);
		
    // event listeners for button clicks
		buttons.each(function (button){
      var buttonEl = $(button.elementID);
      buttonEl.observe('click', this.buttonClick.bindAsEventListener(this));
			buttonEl.messageBoxButton = button; 
		}, this);
    
//    // event listener for closing if document clicked
//    this.documentClickListener = this.documentClick.bindAsEventListener(this);
//    document.observe('click', this.documentClickListener);
    
    // event listener for closing on return
    this.keypressListener = this.keypress.bindAsEventListener(this);
    document.observe('keypress', this.keypressListener);
		
		// event listener for close button in header
		$('messagebox-header-close').observe('click', this.close.bind(this));
    
    // IE6 does not support position: fixed
    if (browserIsIE6() || browserIsIEQuirksMode())
      this.applyIE6PositionFixedFix(); 
  }
  catch(e)
  {
    console.error(e.message);
    console.trace();
  }
}

/**
 * Sets the MessageBox element html.  
 * 
 * @private
 * @param {Object} contentHtml
 */
MessageBox.prototype.buildHtml = function(contentHtml, buttons)
{
  // header 
  var html = '<div class="messagebox-header"><img id="messagebox-header-close" src="images/messagebox-close.gif" width="18" height="17" /></div>';
  
  html += '<div class="messagebox-content">' + contentHtml + '</div>';
  
  // button options 
	html += '<div class="messagebox-buttons">'
	buttons.each(function (button)
	{
    button.elementID = "messagebox-button-" + button.id; 
    html += '<div><button id="' + button.elementID + '"'
		if (button.disabled)
		  html += 'disabled="disabled"';  
		html += '>' + button.text + "</button></div>"  
  }, this);
	html += '</div>';
  

  this.elem.innerHTML = html;
}

/**
 * Closes the MessageBox.
 */
MessageBox.prototype.close = function()
{
  try
  {
    document.stopObserving('click', this.documentClickListener);
    document.stopObserving('keypress', this.keypressListener);
    
    if (this.windowScrollListener)
      Event.stopObserving(window, 'scroll', this.windowScrollListener); 

    this.elem.parentNode.removeChild(this.elem);
  }
  catch(e)
  {
    console.error(e.message);
    console.trace();
  }
}

/**
 * Event listener for OK button click.
 * 
 * @param {Event} event
 */
MessageBox.prototype.buttonClick = function(event)
{
	var button = Event.element(event).messageBoxButton;
	button.callback();
  this.close();
}

/**
 * Event handler for document click event.
 * 
 * @param {Event} event
 */
MessageBox.prototype.documentClick = function(event)
{
  var e = Event.element(event);
  if (!e.ancestors().contains(this.elem))
    this.close();
}

/**
 * Event handler for keypress event.
 * @param {Event} event
 */
MessageBox.prototype.keypress = function(event)
{
  if (event.keyCode == Event.KEY_RETURN)
    this.close();
}

/**
 * Fix for IE6's broken position: fixed support.
 */
MessageBox.prototype.applyIE6PositionFixedFix = function()
{
  // set position
  var top = Element.positionedOffset(this.elem).top;
  this.elem.originalTop = top;
  this.elem.style.top = document.body.scrollTop + this.elem.originalTop; 
  
  this.windowScrollListener = this.windowScroll.bindAsEventListener(this);
  Event.observe(window, 'scroll', this.windowScrollListener);
}

/**
 * Window scroll event handler for IE6 position fix
 * 
 * @param {Event} event
 */
MessageBox.prototype.windowScroll = function(event)
{
  this.elem.style.top = document.body.scrollTop + this.elem.originalTop;
}