/**
 * Lightbox framework
 *
 * @author Frank Dekker
 * @copyright 2007-2008 Frank Dekker
 */

/**
 * My Lightbox 
 *
 * A bare frame to show an overlay + the box
 */
var light_box_lock = false;
var Lightbox = new Class({
	
	initialize: function( box_width ) {
		
		if ( light_box_lock )
			return;
		
		var page_size = window.getScrollSize();
				
		/*
			The structure of the lightbox will look like this and
		
			<div class="overlay"></div>
			<div class="lightbox"></div>
			</body>
			</html>
		*/	
		document.getElement( 'body' )
		   .appendChild( this.overlay = new Element( 'div', {
		        'id': 'overlay',
		        'styles': {	'height': page_size.y, 'width': page_size.x, 'opacity': 0.0 }
		   }))
		   .getParent()
		   .appendChild( this.lightbox = new Element( 'div', {
				'id': 'lightbox',
				'styles': {
					'width': box_width 
				}
			}));
			
		this.showing = true;			
	},
	
	show: function( ) {
	
		// check if we're already showing the lightbox
		if ( light_box_lock )
			return;
		
		// lock the lightbox in place
		light_box_lock = true;
	
		// create a new style fx for the lightbox
		this.fx = new Fx.Morph( this.overlay, {duration: 200, wait: false} );

		this.centerBox();		
		this.hideSelectBoxes();
		this.showing = true;
	
		this.fx.start( { 
			'opacity': 0.7 
		}).chain( function() {
			this.setStyle( 'visibility', 'visible' );
		}.bind( this.lightbox ) );
	},
	
	
	hide: function( ) {
		
		// hide the lightbox;
		this.lightbox.setStyle( 'visibility', 'hidden' );
		this.showing = false;
				
		// fade the overlay
		this.fx.start({
			'opacity': 0
		}).chain( function() {		
			// remove the components
			this.overlay.dispose();
			this.lightbox.dispose();	
			
			// show select boxes
			this.showSelectBoxes();				
		}.bind( this ));
		
		// unlock the lightbox
		light_box_lock = false;
	},
	
	
	isShowing: function ( ) {
		return this.showing;
	},
	
	
	centerBox: function( )
	{
		// get sizes		
		var window_size = window.getSize();
		var scroll_size = window.getScroll();
		var box_size = this.lightbox.getSize();	
				
		// determine the coordinates to center the lightbox in the current view	
		var box_x = scroll_size.x + ( window_size.x - box_size.x ) / 2;
		var box_y = scroll_size.y + ( window_size.y - box_size.y ) / 2;
		
		this.lightbox.setStyles({
			"margin-left": box_x,
			"margin-top": box_y
		});
	},
	
	hideSelectBoxes: function( ) {
		
		if ( !window.ie6 ) return;
		
		$$('select').each( function( elm ) {
			elm.setStyle( 'visibility', 'hidden' );
		});
	},
	
	showSelectBoxes: function( ) {
	
		if ( !window.ie6 ) return;
	
		$$('select').each( function( elm ) {
			elm.setStyle( 'visibility', 'visible' );
		});
	}

});


/**
 * Create a dialog
 */
var MyDialogBox = new Class({
	Extends: Lightbox,
	initialize: function( box_width, box_height ) {
	
		// initalize the parent
		this.parent( box_width );
		var myLightbox = this;
		
		/*
			-- create the dialog
		
			<div class="content_frame content_dark">
				<div class="header_outer">
				<div class="header_inner">
					
				</div></div>		
				<div class="body_outer">
				<div class="body_inner">
								
				</div></div>		
			</div>
		*/

		this.lightbox		
			.appendChild( new Element( 'div', {
				'class': 'content_frame content_light'				
			}))
			.appendChild( new Element( 'div', {
				'class': 'header_outer'
			}))
			.appendChild( this.header = new Element( 'div', {
				'class': 'header_inner'				
			}))
			.appendChild( new Element( 'a', {
				'class': 'closebutton',
				'href': '#',
				'html': 'X'				
			}))
			.addEvent( 'click', function(e) {
				new Event(e).stop();
				myLightbox.stopAndHide();				
			})			
			.getParent()
			.getParent()
			.getParent()
			.appendChild( new Element( 'div', {
				'class': 'body_outer'
			}))
			.appendChild( this.body = new Element( 'div', {				
				'class': 'body_inner'
			}))
			.appendChild( new Element( 'div', {
				'id': 'ytapiplayer'
			}));
			
		if ( box_height != '' )			
			this.body.setStyle( 'height', box_height );
			
		var params = { allowScriptAccess: "always" };
		var atts = { id: "myytplayer" };
		swfobject.embedSWF("http://www.youtube.com/v/gC7oFjMsp5k&enablejsapi=1&playerapiid=ytplayer&autoplay=1&ap=%2526fmt%3D18", 
						   "ytapiplayer", "600", "508", "8", null, null, params, atts );		
	},
	
	
	stopAndHide: function( ) {
		this.hide();
		var ytvideo = $('myytplayer');
		ytvideo.stopVideo();
		ytvideo.clearVideo();
	}

	
});


/**
 * Create a dialog
 */
var MyHtmlLightBox = new Class({
	Extends: Lightbox,
	initialize: function( elm, box_width, box_height ) {
	
		// initalize the parent
		this.parent( box_width );		
		
		/*
			-- create the dialog
		
			<div class="content_frame content_dark">
				<div class="header_outer">
				<div class="header_inner">
					
				</div></div>		
				<div class="body_outer">
				<div class="body_inner">
								
				</div></div>		
			</div>
		*/

		this.lightbox		
			.appendChild( new Element( 'div', {	'class': 'content_frame content_light' }))
			//.appendChild( new Element( 'div', {	'class': 'header_outer' }))
			//.appendChild( this.header = new Element( 'div', { 'class': 'header_inner' }))
			//.appendChild( new Element( 'a', { 'class': 'closebutton', 'href': '#', 'html': 'X' }))
			//.addEvent( 'click', function(e) { new Event(e).stop(); this.hide();	}.bindWithEvent( this ) )			
			//.getParent()
			//.getParent()
			//.getParent()
			.appendChild( new Element( 'div', {	'class': 'body_outer' }))
			.appendChild( this.body = new Element( 'div', {	'class': 'body_inner' }))
			.appendChild( elm );			
			
		if ( box_height != '' )			
			this.body.setStyle( 'height', box_height );
	}
	
});