//Observe hash changes and load changes via external_frame

var url = '';

function dp_check_hash(){

	if( url != location.hash ){
		url = location.hash;
		if( url.substring(1) )
			dp_load_external_frame( url.substring(1) );
    }
}

setInterval( dp_check_hash, 100 );

var external_frame = null;
var external_iframe = null;

function dp_load_external_frame( url ) {
	
	if( !external_frame ) {
		
		var external_frame_height = document.viewport.getHeight() - 60;
		
		external_frame = new Element('div');
		external_frame.writeAttribute( 'id', 'external_frame' );
		external_frame.setStyle({
			position: 'absolute',
			zIndex: '10',
			top: '30px',
			left: '30px',
			width: '900px',
			height: external_frame_height + 'px',
			backgroundColor: '#fff',
			border: 'solid 1px #171717'
		});
		
		var external_topbar = new Element('div');
			external_topbar.setStyle({
				width: '100%',
				height: '30px',
				backgroundColor: '#171717'
			});
		
		external_frame.insert( external_topbar );
		
		var close_button = new Element('a');
			close_button.observe( 'click', function() {
				document.location = '#close';
				external_iframe.writeAttribute( 'src', '' );

			});
			close_button.setStyle({
				cursor: 'pointer',
				display: 'block',
				fontWeight: 'bold',
				color: '#fff',
				padding: '10px'
			});
			close_button.update('X');
			
		external_topbar.insert( close_button );
	
		external_iframe = new Element('iframe');
		external_iframe.writeAttribute( 'frameBorder', 'no' );
		external_iframe.setStyle({
			width: '100%',
			height: external_frame_height - 30 + 'px'
		});
		
		external_frame.insert( external_iframe );
		
		$('page_container').insert( { top: external_frame } );
	}
	
	if( url == 'close' )
		external_frame.hide();
	else {
		external_iframe.writeAttribute( 'src', url );
		external_frame.show();
	}
}

document.observe( 'dom:loaded', function() {
	
	$(document.body).select('a[rel^=external]').each( function(a) { 
		a.target = '_blank';
	});
	
});