/*../scripts/overlaydiv.js*//*../../../scripts/overlaydiv.js*//* ../../../scripts/overlaydiv.js */
/**
 * 
 * Copyright (c) 2006-2009 - Max.nl
 *
 */


if(typeof(Control.Window) == "undefined")
        throw "ModalDialogHandler requires Control.Window to be loaded.";

/**
 * Constructor.
 * @param html
 */
var ModalDialogHandler = Class.create( {

	initialize: function( html, options ) {
		this.modalDialogs = {};
		this.options = Object.extend({
			width: 		0.8,
			height:		0.8,
			fade:		true,
			duration:	0.5,
			id: 		"modal_dialog"
		},options || {});
		
		this.options.width = this.getWidth();
		this.options.height = this.getHeight();
		this.createModalDialog( html );
		this.openModalDialog();
	},

// -------------------------------------------------
// Operations on dialogs.

	getDomElementId: function()
	{
		return this.options.id;
	},

	/**
	 * Close a modal dialog.
	 */
	closeModalDialog: function()
	{
		var domElementId = this.getDomElementId();
		if( this.modalDialogs[ domElementId ]) {
			this.modalDialogs[ domElementId ].close()
		}
		return true;
	},
	

	/**
	 * Create the modal dialog.
	 * The element is hidden by default, call open openContentPanel() to display it.
	 * When the element already exists, it's contents will be updated.
	 */
	createModalDialog: function( html )
	{
		var domElementId = this.getDomElementId();
		var dialog;
		if( !( dialog = $(domElementId))) {
			dialog = new Element('div', {id: domElementId});
			$(document.body).insert( dialog );
	
			// decorate the container with wrapper, header, close-button and default classes
			var window_factory = function(container,options){
				var window_wrapper	= new Element('div').setStyle({
					height: '100%'
				}).addClassName('modalDialogPanel');
				var window_header = new Element('div').setStyle({
					cursor: 'move'
				}).addClassName('modalDialogCaption');
				var window_close = new Element('a', {
					href:'#' 
				}).addClassName('closeButton').update('sluiten');
	
				Event.observe( window_close, 'click', function(){
					this.closeModalDialog();
					this.removeModalDialog();
				}.bind( this ));
				
				var window_contents = new Element('div').setStyle({
					height: '100%'
				}).addClassName('modalDialogContent').update( html );
		
				var windowOptions = Object.extend({
					className: 		'modal',
					draggable:		window_header,
					closeOnClick:	window_close,
				    overlayOpacity:	0.8
				},options || {});
				
				var w = new Control.Modal(container, windowOptions);
				w.container.insert( window_wrapper );
				window_wrapper.insert(window_header);
				window_header.insert(window_close);
				window_wrapper.insert(window_contents);
				return w;
			}.bind( this );
	
			 this.modalDialogs[domElementId] = window_factory($(domElementId),Object.extend({  
			     fade		: this.options.fade,
			     duration	: this.options.duration,
			     iframeshim	: true
			 },this.options||{}));
		} 
	
		 return true;
	},
	

	/**
	 * Show a modal dialog.
	 */
	openModalDialog: function()
	{
		// Check if element exists.
		var domElementId = this.getDomElementId();
		var panel        = $( domElementId );
		if( panel == null ) {
			//alert("interne fout in overlayDetails: element '" + domElementId + "' niet gevonden.");
			return false;
		}
		if( !this.modalDialogs[ domElementId ]) {
			//alert("interne fout in overlayDetails: element '" + domElementId + "' niet gevonden.");
			return false;
		}
		
		this.modalDialogs[ domElementId ].open();
	
		return true;
	}, 


	/**
	 * Remove a modal dialog.
	 */
	removeModalDialog: function()
	{
		// Check if element exists.
		var domElementId = this.getDomElementId();
		var panel        = $(domElementId);
		if( panel == null ) {
			return;
		}
	
		// Remove the panel.
		if( this.modalDialogs[ domElementId ]) {
			this.modalDialogs[ domElementId ].destroy();
		}
		//panel.remove();
		return true;
	},
	
	getWidth: function() {
		if( isNaN( this.options.width )) {
			return this.options.width; 
		} else if( this.options.width > 1 ) {
			return this.options.width;
		} else {
			// use width as percentage of screen width
			var width = Math.floor(document.viewport.getWidth() * this.options.width);
			return width;
		}
	},
	
	getHeight: function() {
		if( isNaN( this.options.height )) {
			return this.options.height; 
		} else if( this.options.height > 1 ) {
			return this.options.height;
		} else {
			// use height as percentage of screen height
			var height = Math.floor( document.viewport.getHeight() * this.options.height);
			return height;
		}
	}
}
);