/*
 * create popup
 */

var PopUp = Class.create({
	initialize: function (style, content)
	{
		this.hidden_iframes = new Array();
		this.hidden_selects = new Array();
		this.close_button 	= null;

		// create overlay
		this.overlay = new Element("div", { 'id': 'overlay', 'style': 'position: absolute; z-index: 80; top: 0; left: 0; background-color: #000; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; cursor: pointer;' });
		this.overlay.hide();
		window.document.body.appendChild(this.overlay);

		// create popup
		this.popup = new Element("div", {'id': 'popup', 'style': 'position: absolute; z-index: 100;'} );
		this.popup.hide();
		if (style) this.popup.setStyle(style);

		// set correct values to center popup & create overlay width/height
		this.center();
		window.document.body.appendChild(this.popup);

		// set content
		if (content)
		{
			if (typeof content == "string")
				this.update(content);
			else
				this.append(content);
		}

		// add close functionality
		Event.observe(this.overlay, 'click', this.hide.bindAsEventListener(this) );
		var keydown_event = function (key) {
			if (key.keyCode==Event.KEY_ESC)
				this.hide();
		}.bindAsEventListener(this);
		Event.observe(window, 'keydown', keydown_event);

		// onresize -> center
		var resize_event = this.center.bindAsEventListener(this);
		Event.observe(window, 'resize', resize_event);
		
		Event.observe(window.document, 'page:unload', function () {
			Event.stopObserving(window, 'keydown', keydown_event);
			Event.stopObserving(window, 'resize', resize_event);
		});
	},
	
	// hide overlay & popup
	hide: function ()
	{
		this.popup.fire("popup:close");
	
		this.overlay.hide();
		this.popup.hide();

		this.hidden_iframes.each( function (elem) {
			elem.style.visibility = "visible";
		} );
		this.hidden_selects.each( function (elem) {
			elem.style.visibility = "visible";
		} );
	},
	
	// show overlay & popup
	show: function ()
	{
		this.center();
		this.overlay.show();
		this.popup.show();

		this.hidden_iframes = $$('iframe');
		this.hidden_iframes.each( function (elem) {
			elem.style.visibility = "hidden";
		} );

		this.hidden_selects = $$('select');
		this.hidden_selects.each( function (elem) {
			elem.style.visibility = "hidden";
		} );
	},

	// update html
	update: function (content)
	{
		// create close_button
		this.close_button = new Element('div', { 'style': 'position: absolute; width: 15px; height: 15px; background: #ffffff url(/images/delete.gif) no-repeat top left; cursor: pointer; top: 0px; right: 0px;' });
		this.close_button.observe('click', this.hide.bindAsEventListener(this) );

		// create new div with content
		var content_div = new Element('div');
		content_div.update(content);

		// empty popup and append button+content
		this.popup.update("");
		this.popup.appendChild(this.close_button);
		this.popup.appendChild(content_div);
	},
	
	append: function (elem)
	{
		this.update("");
		debug(elem);
		this.popup.firstChild.appendChild(elem);
	},
	
	remove: function ()
	{
		this.popup.remove();
		this.overlay.remove();
	},
	
	// center popup in screen
	center: function ()
	{
		var view 				= window.document.viewport;
		var dimensions 	= view.getDimensions();
		var scroll 			= view.getScrollOffsets();
		var left 	= scroll.left + ( (dimensions.width - this.popup.getWidth()) / 2 );
		var top 	= scroll.top + ( (dimensions.height - this.popup.getHeight()) / 2 );
		this.popup.setStyle({
			left: (left<0?0:left)+'px',	// minimal 1
			top: 	(top<0?0:top)+'px'
		});
		
		var body 				= window.document.body;
		var body_width 	= Math.max(Math.max(body.clientWidth, body.scrollWidth), 0);
		var body_height = Math.max(Math.max(body.clientHeight, body.scrollHeight), 0);		
		this.overlay.setStyle({
			width: 	body_width+'px',	// minimal 1
			height: body_height+'px'
		});
	},

	getPosition: function ()
	{
		return {
			'left': 	parseInt(this.popup.style.left), 
			'top': 		parseInt(this.popup.style.top),
			'width': 	this.popup.getWidth(), 
			'height': this.popup.getHeight()
		};
	}
});