/*
Name: FbModal
Author: John Fawcett (For the most part)
Description: A very simple facebook-style lightbox.
It's very easy to use programmatically as you just provide content via the
function setContent.  You can specify custom show and hide events too.

This is based off the simple code provided by David Walsh
and his article found here http://davidwalsh.name/facebook-modal-mootools
I used the html and images he provied which he admittedly took straight
from Facebook.

Default Options:
   options:
   {
      id: 'fb-modal',
      className: 'generic_dialog',
      topOffset: 125,
      width: 532,
      onShow: function()
      {
         this.container.setStyle('display', 'block');
      },
      onHide: function()
      {
         this.container.setStyle('display', 'none');
      }
   }
   
Usage:
   var myModal = new FbModal(
   {
         id: 'myModal',
         onShow: function()
         {
            this.container.setStyle('display', 'block').fade(1);
         },
         onHide: function()
         {
            (function()
            {
               this.setStyle('display', 'none');
            }).delay(600, this.container.fade(0));
         }
   }).setContent('Title Test', '<p>Test Summary</p>', '<p>Test Body</p>').show();
*/

var FbModal = new Class(
{
   Implements: [Options, Events],
   
   options:
   {
      id: 'fb-modal',
      className: 'generic_dialog',
      topOffset: 80,
      width: 590,
      onShow: function()
      {
         this.container.setStyle('display', 'block');
      },
      onHide: function()
      {
         this.container.setStyle('display', 'none');
      }
   },

   container: {},
   initialize: function(options)
   {
      this.setOptions(options);

      // Create and inject the modal box
      this.container = new Element('div',
      {
         'class': this.options.className,
         'id': this.options.id,
         'styles': { 'display': 'block', 'visibility': 'hidden' }
      }).adopt(
         new Element('div',
         {
            'class': 'generic_dialog_popup',
            'styles': { 'top': this.options.topOffset + 'px' }
         }).adopt(
            new Element('table',
            {
               'class': 'pop_dialog_table',
               'styles': { 'width': this.options.width + 'px' }
            }).adopt(
               new Element('tbody').adopt(
                  new Element('tr').adopt(
                     new Element('td', { 'class': 'pop_topleft' }),
                     new Element('td', { 'class': 'pop_border pop_top' }),
                     new Element('td', { 'class': 'pop_topright' })
                  ),
                  
                  new Element('tr').adopt(
                     new Element('td', { 'class': 'pop_border pop_side' }),
                     new Element('td', { 'class': 'pop_content' }).adopt(
                        new Element('h2', { 'class': 'dialog_title' }).adopt(
                           new Element('span'),
                           new Element('a', { 'class': 'dialog_close', 'id': this.options.id + '-close' })
                        ),
                        new Element('div', { 'class': 'dialog_content' }).adopt(
                           //new Element('div', { 'class': 'dialog_summary' }),
                           new Element('div', { 'class': 'dialog_body' }),
                           new Element('div', {'class': 'dialog_buttons' }).adopt(
                              new Element('input',
                              {
                                 'type': 'button',
                                 'value': '    Close    ',
                                 'name': 'close',
                                 'class': 'inputsubmit'//,
                                 //'id': this.options.id + '-close'
                              })
                           )
                        )
                     ),
                     new Element('td', { 'class': 'pop_border pop_side' })
                  ),
                  
                  new Element('tr').adopt(
                     new Element('td', { 'class': 'pop_bottomleft' }),
                     new Element('td', { 'class': 'pop_border pop_bottom' }),
                     new Element('td', { 'class': 'pop_bottomright' })
                  )
               )
            )
         )
      ).setStyle('opacity', 0).inject(document.body);
      
      // Add some events
      $(this.options.id + '-close').addEvent('click', function() { this.hide(); }.bind(this));
      window.addEvent('keypress', function(e) { if (e.key == 'esc') this.hide(); }.bind(this));
      
      // make it draggable
      var drag = new Drag($(this.options.id),{ handle: $(this.options.id).getElement('.dialog_title') });
      
      /*// hide when clicking outside
      $(document.body).addEvent('click', function(e)
      {
         if (this.isOpen() && !e.target.getParent('.generic_dialog')) 
        	 this.hide(); 
         
      }.bind(this));
      */      
      
      return this;
   },
   
   show: function()
   {
      this.fireEvent('show');
      return this;
   },
   
   hide: function()
   {
      this.fireEvent('hide');
      return this;
   },
   
   setContent: function(titleText, bodyHtml)
   {
      this.setTitle(titleText);
      this.setBody(bodyHtml);
      
      return this;
   },
   
   setTitle: function(titleText)
   {
      this.container.getElement('.dialog_title span').set('html', '&nbsp;'+titleText);
      return this;
   },
   
   setSummary: function(summaryHtml)
   {
      this.container.getElement('.dialog_summary').set('html', summaryHtml);
      return this;
   },
   
   setBody: function(bodyHtml)
   {
      this.container.getElement('.dialog_body').set('html', bodyHtml);
      return this;
   },
   
   isOpen: function()
   {
      return (this.container.getStyle('display') == 'block') ? true : false;
   },
   
   setWidth: function(width)
   {
	   this.container.getElement('.pop_dialog_table').setStyle('width', width+'px');	  
	   return this;
   },
   
   setHeight: function(height)
   {
	   this.container.getElement('.dialog_body').setStyle('height', height+'px');	  
	   return this;
   }   
   
});