/**
 * jquery.theatre.js.js
 * Copyright 2010, Yakabod, Inc.
 *
 * $Revision: 1.4 $
 * $Date: 2010/10/11 17:24:36 $
 *
 * Last edited by: $Author: danderson $
 *
 * Last eror free JSLint: 20100505 08:50
 *                        Checked Options: Assume a browser,
 *                                         Allow one var statement per function
 *                                         Disallow undefined variables
 *                                         Disallow dangling _ in identifiers
 *                                         Disallow == and !=
 *                                         Disallow ++ and --
 *                                         Disallow bitwise operators
 *                                         Disallow insecure . and [^...] in /RegExp/
 *                                         Require Initial Caps for constructors
 *                                         Require parens around immediate invocations
 *                        Predefined: window
 */
( function( global )
{
  "use strict";

  if( global.jQuery )
  {
    ( function( $ )
    {
      $.fn.extend( {
        Theatre: function( options )
        {

          var $Theatre, $TheatreOverlay, $TheatreScreenFrame;

          if( typeof options !== 'object' || options === null )
          {
            options = {};
          }

          options = $.extend( {
            screenWidth: '95%',
            screenHeight: '95%',
            screenColor: '#fff',
            screenOverflow: 'auto',
            overlayColor: '#000',
            overlayOpacity: 0.7
          }, options );

          $Theatre = $( '<div />' ).
            addClass( 'Theatre' );

          $TheatreOverlay = $( '<div />' ).
            addClass( 'TheatreOverlay' ).
            css( {
              'position': 'absolute',
							'top': 0,
              'left': 0,
              'z-index': 1500,
              'height': '100%',
              'width': '100%',
              'background-color': options.overlayColor,
              'opacity': options.overlayOpacity
            } ).
            appendTo( $Theatre );

          $TheatreScreenFrame = $( '<div />' ).
            addClass( 'TheatreScreenFrame' ).
            css( {
              'position': 'absolute',
              'z-index':1501,
              'height': options.screenHeight,
              'width': options.screenWidth,
              'background-color': options.screenColor,
              'overflow': options.screenOverflow
            } ).
            append(
              $( '<span />' ).
                addClass( 'ui-icon ui-icon-close fltrt' ).
								css( {
									'position': 'absolute',
									'top': '5px',
									'right': '20px'
	          		} ).								
								click( function( e )
                {
                  $Theatre.remove();

                  e.stopPropagation();
                  return false;
                } )
            ).
            append(
              $( '<div />' ).
                addClass( 'TheatreScreen' ).
                append( this )
            ).
            appendTo( $Theatre );

          /* $Theatre and its children MUST be appended to the DOM before we calculate positioning for $TheatreScreenFrame
             as we're relying on the calculated widths of the elements as they appear in the DOM */
          $( 'body' ).append( $Theatre );

          $TheatreScreenFrame.css( {
            'top': Math.round( ( $TheatreOverlay.outerHeight() - $TheatreScreenFrame.outerHeight() ) / 2 ),
            'left': Math.round( ( $TheatreOverlay.outerWidth() - $TheatreScreenFrame.outerWidth() ) / 2 )
          } );

          /* TODO: CSS positioning is putting the overlay and screen at the very top of the window, so we'll bump the scroll
             to there until we can get around to adjusting placement */
          $(window).scrollTop( 0 );

          return this;
        }
      } );
    }( global.jQuery ) );
  }
}( window ) );