/**
 * Popup box using an html div.
 * 
 *  The popup 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 popup = function(elementID)
{
  this.elementID = elementID != undefined ? elementID : 'popup_js_active_popup';
}

/**
 * Static function for showing a popup box containing the specified html.
 * 
 * NB appropriate css rules must exist for the popup box to display correctly.
 * See popup.css for an example.
 * 
 * TODO: add a callback feature as the third parameter
 * 
 * @param {String} contentHtml
 * @param {array} buttons (optional) - defaults to ["OK"]
 * @return {popup}
 */
popup.show = function(contentHtml, buttons, callback)
{
  var p = new popup();
  
  if (buttons)
    p.buttons = buttons;
		
  if (callback)
    p.callback = callback; 
  
  p.showHtml(contentHtml);

  if(typeof(Suggest) != "undefined")
    Suggest.setupEvents(p.elem);

  return p;  
}

/**
 * Shows the popup box.
 * 
 * @param {String} html
 */
popup.prototype.showHtml = function(contentHtml)
{
  try
  {
    // remove existing 
    if (oldPopupElem = $(this.elementID))
      oldPopupElem.popup.close();
  
    // create and attach new div
    this.elem = document.createElement('div');
    this.elem.id = this.elementID;
    this.elem.popup = this;
    this.elem.className = 'popup_js_popup';
    this.setHtml(contentHtml);  
    document.body.appendChild(this.elem);
    
    // event listener for closing when OK button is clicked
    var buttons = this.elem.getElementsByTagName('button');
    $A(buttons).each(function(button) {
      Event.observe(button, 'click', this.buttonClick.bindAsEventListener(this));
    }, this);
    
    // event listener for closing if document clicked
    this.documentClickListener = this.documentClick.bindAsEventListener(this);
    document.observe.bind(document).defer('click', this.documentClickListener);
    
    // event listener for closing on return
    this.keypressListener = this.keypress.bindAsEventListener(this);
    document.observe('keypress', this.keypressListener);
    
    // IE6 does not support position: fixed
    if (browserIsIE6())
      this.applyIE6PositionFixedFix(); 
  }
  catch(e)
  {
    console.error(e.message);
    console.trace();
  }
}

/**
 * Sets the popup element html.  
 * 
 * @private
 * @param {Object} contentHtml
 */
popup.prototype.setHtml = function(contentHtml)
{
  // TODO: header 
  var html = "";
  
  html += "<div>" + contentHtml + "</div>";
  
  if (!this.buttons)
    this.buttons = ["OK"];
  
  html += "<div class=\"popup_buttons\">";
  for (var i = 0; i < this.buttons.length; i++) {
    html += '<button>' + this.buttons[i] + '</button>';
  }
  html += "</div>"

  this.elem.innerHTML = html;
}

/**
 * Closes the popup.
 */
popup.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)
  //{
  //  alert(e.message + ' at ' + e.lineNumber);
  //  console.error(e.message);
  //  console.trace();
  //}
}

/**
 * Event listener for OK button click.
 * 
 * @param {Event} event
 */
popup.prototype.buttonClick = function(event)
{
	var dialogResult=event.element().innerHTML;
	if (this.callback) {
	  if(this.callback(dialogResult)===false)
	    return;	
  }
  //console.info('popup.buttonClick', event.element());
  this.close();
}

/**
 * Event handler for document click event.
 * 
 * @param {Event} event
 */
popup.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
 */
popup.prototype.keypress = function(event)
{
  if (event.keyCode == Event.KEY_RETURN) {
		if (this.callback) {
		  if(this.callback('OK')===false)
		    return;	
	  }
    this.close();
  }
}

/**
 * Fix for IE6's broken position: fixed support.
 */
popup.prototype.applyIE6PositionFixedFix = function()
{
  // set position

  //Changed this to a hardcoded value - I am not sure what the reason for using positionedOffset was but it placed the OK button off the screen unnessecerily in smaller browser windows.
  //var top = Element.positionedOffset(this.elem).top; 

  var top = 20;
  this.elem.originalTop = top;
  this.elem.style.top = document.documentElement.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
 */
popup.prototype.windowScroll = function(event)
{
  this.elem.style.top = document.documentElement.scrollTop + this.elem.originalTop; 
}