var loaderImage = new Image;
loaderImage.src = '/images/loading.gif';
loaderImage.width = 50;
loaderImage.height = 50;

function setLoading( el ) {
	el.update( '<img src="'+loaderImage.src+'" width="'+loaderImage.width+'" height="'+loaderImage.height+'" style="margin-top: ' + ((el.getHeight()-loaderImage.height) / 2) + 'px; margin-left: ' + ((el.getWidth()-loaderImage.width) / 2) + 'px"/>' );
}

var popup = {
	opened: false,
	
	openURL: function( url, width, height ) {
		this.open( width, height );
		WPRequest( url );
	},

	openLink: function( src, width, height ) {
		this.open( width, height );
		$('popupContent').update( '<iframe border=0 frameborder=0 style="border:0; margin:0; width:100%; height:100%;" src="'+src+'"/></iframe>' );
	},

	openImage: function( src, width, height ) {
		this.open( Math.min(document.viewport.getWidth(),width+23+16), Math.min(document.viewport.getHeight(),height+32+16) );
		$('popupContent').update( '<img width='+width+' height='+height+' src="'+src+'"/>' );
		},

	openStepPlan: function(width, height, path)
	{
		if( this.opened ) {
			alert( 'Er is al een popup open' );
			return;
		}
		
		var shader = $('popupShaderNoChrome');
		shader.setOpacity(0);
		shader.show();	

		var cont = $('popupContainerNoChrome');
		cont.setStyle( { 'width': width+'px', 'height': height+'px', 'marginTop': (height/-2)+'px', 'marginLeft': (width/-2)+'px' } );
	
		new Effect.Parallel( [
			new Effect.Opacity( shader, { sync: true, from: 0, to: 0.6 } ),
			new Effect.BlindDown( cont, { sync: true, afterUpdate: function() { cont.setOpacity(1); } } )
		] );
		
		$('popupShaderNoChrome').onclick = function() {
			popup.closeNoChrome();
		};
		setLoading( $('popupContentNoChrome') );
	
		this.opened = true;
		$('popupContentNoChrome').update('<div id="flashcontent" style="overflow: hidden;">Voor dit filmpje heb je Flash nodig.<a href="http://www.macromedia.com/go/getflashplayer/">Download Flash.</a></div><script type="text/javascript">var fo = new SWFObject("/' + path + '/viewer.swf", "viewer", "900px", "570px", "8", "#ffffff");fo.addVariable("xmlDataPath", "/' + path + '/gallery.xml");fo.addVariable("langOpenImage", "Open afbeelding in het groot");fo.addParam ("wmode","transparent");fo.write("flashcontent");</script>');
	},
	open: function( width, height ) {
		if( this.opened ) {
			alert( 'Er is al een popup open' );
			return;
		}
		
		var shader = $('popupShader');
		shader.setOpacity(0);
		shader.show();	

		var cont = $('popupContainer');
		cont.setStyle( { 'width': width+'px', 'height': height+'px', 'marginTop': (height/-2)+'px', 'marginLeft': (width/-2)+'px' } );
		
		$('popupTopLeft').setStyle( { 'position': 'absolute', 'top': '0px', 'left': '0px' } );
		$('popupTopMiddle').setStyle( { 'position': 'absolute', 'top': '0px', 'left': '32px', 'width': (width - 32 - 42)+'px' } );
		$('popupTopRight').setStyle( { 'position': 'absolute', 'top': '0px', 'left': (width - 42)+'px' } );
		$('popupMiddleLeft').setStyle( { 'position': 'absolute', 'top': '32px', 'left': '0px', 'height': (height - 32 - 32)+'px' } );
		$('popupMiddleRight').setStyle( { 'position': 'absolute', 'top': '42px', 'left': (width - 42)+'px', 'height': (height - 32 - 42)+'px' } );
		$('popupBottomLeft').setStyle( { 'position': 'absolute', 'top': (height - 32)+'px', 'left': '0px' } );
		$('popupBottomMiddle').setStyle( { 'position': 'absolute', 'top': (height - 32)+'px', 'left': '32px', 'width': (width - 32 - 42)+'px' } );
		$('popupBottomRight').setStyle( { 'position': 'absolute', 'top': (height - 32)+'px', 'left': (width - 42)+'px' } );
		$('popupCenter').setStyle( { 'position': 'absolute', 'top': '32px', 'left': '32px', 'width': (width - 32 - 42)+'px', 'height': (height - 32 - 32)+'px' } );
		$('popupContent').setStyle( { 'position': 'absolute', 'top': '32px', 'left': '23px', 'width': (width - 23 - 16)+'px', 'height': (height - 32 - 14)+'px' } );
		
		$('popupTopRight').onmouseover = function() {
			$('popupTopRight').down().style.visibility = 'hidden';
			$('popupTopRight').down().next().style.visibility = 'visible';
		};
		$('popupTopRight').onmouseout = function() {
			$('popupTopRight').down().style.visibility = 'visible';
			$('popupTopRight').down().next().style.visibility = 'hidden';
		};
		$('popupTopRight').onclick = function() {
			popup.close();
		};

		cont.setOpacity(0);
		cont.style.display = 'block';
		
		new Effect.Parallel( [
			new Effect.Opacity( shader, { sync: true, from: 0, to: 0.6 } ),
			new Effect.BlindDown( cont, { sync: true, afterUpdate: function() { cont.setOpacity(1); } } )
		] );
		
		setLoading( $('popupContent') );
	
		this.opened = true;
	},
	
	closeNoChrome: function()
	{
		new Effect.Parallel( [
			new Effect.BlindUp( $('popupContainerNoChrome'), { sync: true, afterFinish: function() { $('popupContainerNoChrome').hide(); } } ),
			new Effect.Opacity( $('popupShaderNoChrome'), { sync: true, from: 0.6, to: 0, afterFinish: function() { $('popupShaderNoChrome').hide(); } } )
		] );
		
		$('popupContentNoChrome').update('');
		this.opened = false;
	},
	close: function() {
		if( !this.opened ) {
			alert( 'Er is geen popup geopend' );
			return;
		}
		
		new Effect.Parallel( [
			new Effect.BlindUp( $('popupContainer'), { sync: true, afterFinish: function() { $('popupContainer').hide(); } } ),
			new Effect.Opacity( $('popupShader'), { sync: true, from: 0.6, to: 0, afterFinish: function() { $('popupShader').hide(); } } )
		] );
		
		this.opened = false;
	}
};