var popup_tools = {

	resize_cover: function() {

		if( !$('popup_cover') ) return;

		var d = this.get_window_dimensions();
		$('popup_cover').setStyle( { height: d.height + 'px', width: d.width + 'px' } );

	},

	open : function( title, content, width, height ) {

		this.width = width == null ? '832' : width;
		this.height = height == null ? '632' : height;

		//create popup cover and container if they don't exist
		if( !$('popup_cover') )	{
			$('body').insert( '<div id="popup_cover"></div><div id="popup_container"></div>' );
			$('popup_cover').hide();
			$('popup_container').hide();
		}

		this.resize_cover();

		//bring in the cover
		$('popup_cover').show().setStyle( { opacity: 0 } );
		new Effect.Opacity( 'popup_cover', { from: 0, to: 0.9, duration: 0.5 } );

		//scroll to the top of the window
		window.scrollTo( 0, 0 );

		//if the content is a page, include an iframe with that page instead
		if( content.match( new RegExp( /^page:.+/ ) ) )
			content = '<iframe id="popup_iframe" frameborder="0" marginheight="0" marginwidth="0" src="' + content.replace( new RegExp( /^page:(.+)$/ ), '$1' ) + '"></iframe>';

		//generate HTML for the popup
		var html =
		'<div id="popup_wrapper">' + 
			'<div id="popup_content">' + content + '</div>' +
		'</div>';
	
		//populate popup
		$('popup_container').update( html );

		this.place();

	},
	
	place: function() {
		
		if( !$('popup_wrapper') ) return;

		//get popup width
		var pw = this.width;
		var ph = this.height;

		//style container
		$('popup_container').show().setStyle( { width: pw + 'px', height: ph == 'auto' ? ph : ph + 'px', visibility: 'hidden' } );

		//resize popup_wrapper div to 100% height, this is the height of the container, minus the padding
		var padding = $('popup_wrapper').getStyle( 'paddingTop' ).toInt() + $('popup_wrapper').getStyle( 'paddingBottom' ).toInt();
		$('popup_wrapper').setStyle( { height: ( $('popup_container').getHeight() - padding ) + 'px' } );

		//resize iframe if needed, the height is the height of the popup_wrapper div - the popup_topbar
		if( $('popup_iframe') ) {0
			padding+= $('popup_content').getStyle( 'paddingTop' ).toInt() + $('popup_content').getStyle( 'paddingBottom' ).toInt();
			$('popup_iframe').setStyle( { height: ( $('popup_wrapper').getHeight() - padding ) + 'px' } );
		}

		//get popup height and window dimenions
		var d = this.get_window_dimensions();

		//place container
		var top = ( d.height / 2 ) - 315;
		var left = ( d.width / 2 ) - 415;
		
		if( top < 10 ) top = 10;
		if( left < 10 ) left = 10;

		//display
		$('popup_container').setStyle( { top: top + 'px', left: left + 'px', visibility: 'visible' } );
	
	},
	
	close : function() {
		
		$('popup_container').hide().update('');
		$('popup_cover').hide().setStyle( { opacity: 0 } );
		
	},
	
	get_window_dimensions: function() {
	
		var bw = window.innerWidth ? window.innerWidth : document.body.offsetWidth;
		var bh = window.innerHeight ? window.innerHeight : document.body.offsetHeight;
		//var bw = document.viewport.getWidth();
		//var bh = document.viewport.getHoeight();
		
		return { width: bw, height: bh }
	
	}
	
}

//resize elements when the DOM loads and if the window resizes
Event.observe( window, 'resize', function() { popup_tools.resize_cover(); popup_tools.place(); });

//Add some useful methods to the string class
String.prototype.toInt = function(){ return parseInt( this, 10 ) }

//window.onload = function() { popup_tools.open('The new Easy Booth', 'page:easy_booth.php'); }