/*	Styles used to style a lightbox
	all styling done in _lighbox.css	*/
		IPC.CONFIG.LightBox = {
			_namespace : 'lb-', 
			activeLightBox : 'active', 
			closeButton : 'close', 
			console : 'console', 
			overlay : 'overlay', 
			titleBar : 'titlebar', 
			title : 'title'
		};
		
/*	Dom nodes used to create a light box	*/
		IPC.DOM.LightBox = {
			closeButton : '<a href="#" class="' + IPC.CONFIG.LightBox._namespace + IPC.CONFIG.LightBox.closeButton + '"><span>Close window</span></a>', 
			console : '<div class="' + IPC.CONFIG.LightBox._namespace + IPC.CONFIG.LightBox.console + '" />', 
			overlay : '<div class="' + IPC.CONFIG.LightBox._namespace + IPC.CONFIG.LightBox.overlay + '" />', 
			titleBar : '<div class="' + IPC.CONFIG.LightBox._namespace + IPC.CONFIG.LightBox.titleBar + '" />' 
		};
		
/*	Event handlers used for making a lightbox interactive	*/
		IPC.HANDLE.LightBox = {
			onHide : IPC.HANDLE._emptyFunction, 
			onShow : IPC.HANDLE._emptyFunction
		};
		
		IPC.LightBox = Class.create();
		IPC.LightBox.prototype = {
			initialize : function( target, options )
			{
/*	DEFINE CONSTANTS	*/
				this.DOM = IPC.CreateDOM( IPC.DOM.LightBox );
				this.CONFIG = Object.clone( IPC.CONFIG.LightBox );
				this.HANDLE = Object.clone( IPC.HANDLE.LightBox );
				this.DOCUMENT_ELEMENT = document.documentElement || $$( 'html' )[0];
				
				this.TARGET = $( target );
				this.options = $H( { 
					draggable : true, //	for future use
					resizable : false, //	for future use
					titleNode : IPC.DOM._emptyNode.cloneNode( false ), 
					trigger : false
				} ).merge( options || {} );
				
				if ( this.options.trigger ) 
					this.trigger = $( this.options.trigger );
				
				this._createLightBox();
				this._registerEvents();
			}, 
/*	PUBLIC METHODS	*/
			destroy : function()
			{
				Element.remove( this.DOM.overlay );
				Element.remove( this.DOM.console );
			}, 
			
			hide : function( evt )
			{
				this._unFormatPage();
				
				new Effect.Fade( 
					this.DOM.console, 
					{ 
						duration : 0.5, 
						afterFinish : function() {
							new Effect.Fade( this.DOM.overlay, { duration : 0.5, afterFinish : this.HANDLE.onHide.bind( this ) } );
						}.bind( this )
					} 
				);
				Event.stopObserving( window, 'resize', this.resizeable, false );
				
				this.visible= false;
				if ( evt ) Event.stop( evt );
			}, 
			
			resize : function()
			{
				if ( this.visible )
				{
					Element.show( this.DOM.overlay );
					Element.show( this.DOM.console );
					this._formatPage();
				}
			}, 
			
			show : function( evt )
			{
				this._formatPage();
				
				new Effect.Appear( 
					this.DOM.overlay, 
					{ 
						afterFinish : function() { 
							new Effect.Appear( this.DOM.console, { afterFinish : this.HANDLE.onShow.bind( this ), duration : 0.5 } ) 
						}.bind( this ), 
						duration : 0.5, 
						from : 0, 
						to : 0.9 
					} 
				);

//	do it this way to be able to stop observing later
				this.resizeable = this.resize.bindAsEventListener( this );
				Event.observe( window, 'resize', this.resizeable, false );
				
				this.visible = true;
				if ( evt ) Event.stop( evt );
			}, 
			
/*	PRIVATE METHODS	*/
			_centerConsole : function( offset )
			{
				var lb_overlay = Element.getDimensions( this.DOM.overlay );
				var lb_console = Element.getDimensions( this.DOM.console );
				
				xOffset = ( Math.abs( lb_overlay.width - lb_console.width ) / 2 ) + Math.abs( offset[0] );
				yOffset = ( Math.abs( lb_console.height - lb_overlay.height ) / 2 ) + Math.abs( offset[1] );
				
				Element.setStyle( this.DOM.console, { left : xOffset + 'px', top : yOffset + 'px' } );
			}, 
			
			_createLightBox : function()
			{
				document.body.appendChild( this.DOM.overlay );
				Element.hide( this.DOM.overlay );
				Element.addClassName( this.options.titleNode, this.CONFIG._namespace + this.CONFIG.title )
				
				this.DOM.titleBar.appendChild( this.options.titleNode );
				this.DOM.titleBar.appendChild( this.DOM.closeButton );
				
				this.DOM.console.appendChild( this.DOM.titleBar );
				this.DOM.console.appendChild( this.TARGET );
				
				if ( $USER.browser == 'Safari' )
					document.body.insertBefore( this.DOM.console, document.body.firstChild );
				else
					document.body.appendChild( this.DOM.console );
				Element.hide( this.DOM.console );
				this.visible= false;
				
				this.DOM.overlay.id = this.TARGET.id + '-overlay';
				this.DOM.titleBar.id = this.TARGET.id + '-titlebar';
				this.DOM.console.id = this.TARGET.id + '-console';
				
				if(this.options.draggable) {
					this.dragConsole = new Draggable( this.DOM.console, { handle : this.DOM.titleBar } );
					this.options.titleNode.style.cursor = "move";
				}
			}, 
			
			_formatPage : function()
			{
				var offset = Position.page( document.body );
				
				Element.setStyle( this.DOM.overlay, { 
						left : Math.abs( offset[0] ) + 'px', 
						top : Math.abs( offset[1] ) + 'px' 
					} );
				
				Element.setStyle( this.DOCUMENT_ELEMENT, { overflow : 'hidden' } );
				
//	IE6 craps out over 100% height so we need to explicitly set it's height.
				if ( $USER.browser == 'Explorer' && $USER.version <= 6 )
					this.DOM.overlay.style.height = this.DOCUMENT_ELEMENT.clientHeight + "px";
				
				this._centerConsole( offset );
				this._toggleSelectLists( 'hidden' );
				
				window.scrollTo( Math.abs( offset[0] ), Math.abs( offset[1] ) );
			}, 
			
			_registerEvents : function()
			{
				this.showEvent = this.show.bindAsEventListener( this );
				this.hideEvent = this.hide.bindAsEventListener( this );
				
				if ( this.options.trigger )
					Event.observe( this.trigger, 'click', this.showEvent );
				Event.observe( this.DOM.closeButton, 'click', this.hideEvent );
				Event.observe( this.DOM.overlay, 'dblclick', this.hideEvent );
			}, 
			
			_toggleSelectLists : function( visibility )
			{
				if ( $USER.browser == 'Explorer' )
					$$( 'select' ).each( function( list )
					{
						list.style.visbility = visibility;
					} );
			}, 
			
			_unFormatPage : function()
			{
				Element.setStyle( this.DOCUMENT_ELEMENT, { overflow : 'auto' } );
				this._toggleSelectLists( 'visible' );
			}
		};