/**
 * Base class for popup windows
 */
var PopupBase = Class.create({

	/**
	 * @param elementId 
	 */
	initialize: function(elementId) {
		if(!elementId) {
			elementId = 'popup-window';
		}
		this.elementId = elementId;
		if (!document.getElementById(elementId)) {
			var element = document.createElement("div");
			element.id = elementId;
			element.setAttribute("style","display:none;");    
			document.body.appendChild(element);			
		}
		if (!document.getElementById('popup-overlay')) {
			var overlay = document.createElement("div");
			overlay.id = 'popup-overlay';
			overlay.setAttribute("style","display:none;");    
			document.body.appendChild(overlay);			
		}
		
		this.width = 300;
		this.title = '';
		this.content = '';
		this.buttons = new Array();
		this.modal = true;
	},

	setWidth: function(width) {
		this.width = width;
	},
	
	setTitle: function(title) {
		this.title = title;
	},
	
	setContent: function(content) {
		this.content = content;		
	},

	setModal: function(value) {
		this.modal = value;
	},
	
	getElementId: function() {
		return this.elementId;
	},

	getModal: function() {
		return this.modal;
	},

	calculateVerticalCenter:function() {
		return (document.viewport.getHeight()/4+ document.viewport.getScrollOffsets().top);
	},
	
	calculateHorizontalCenter:function() {
		return (document.viewport.getWidth()/2-this.width/2);
	},

	/**
	 * Populate the specified element with HTML
	 */
	generate: function() {
		$(this.elementId).update(this.renderHTML());
	},
	
	/**
	 * Return HTML, based on the defined template
	 */
	renderHTML: function() {
		var topPosition = this.calculateVerticalCenter();
		var leftPosition  = this.calculateHorizontalCenter();
		var buttons = this.renderButtonHTML();
		var template = this.getTemplate();

		return template.evaluate({
			top: topPosition,
			left: leftPosition,
			width: this.width,
			title: this.title,
			content: this.content,
			buttons: buttons
		});
	},

	renderButtonHTML:function() {
		var buttonHTML = '';
		for(var i=0;i<this.buttons.length;i++)
		{
			buttonHTML += this.buttons[i];
		}
		
		return buttonHTML;
	},

	getTemplate:function() {
		var template = new Template('<div style="width: #{width}px; position:absolute; top:#{top}px; left:#{left}px;" class="popup-window">'+
				'<div class="popup-title">#{title}</div>'+
				'<div class="popup-content txt12">#{content}</div>'+
				'#{buttons}'+
				'</div>');
		return template; 
	},

	getButtonTemplate:function() {
		var buttonTemplate = new Template('<input type=button class="#{buttonClass}" onclick="#{action}" value="#{buttonTitle}" style="font-size:11px; cursor: pointer;"/>');
		return buttonTemplate;
	},

	addButton: function(buttonTitle, style, action)	{
		if(style==undefined)
			style='button';
		if(action==undefined)
			action="PopupBase.hide()";
		
		//todo be able to add events to the buttons
		this.buttons.push(this.getButtonTemplate().evaluate({
			'buttonTitle': buttonTitle,
			'buttonClass': style,
			'action': action
		}));
	},
	
	show: function() {
		PopupBase.show(this);
	},

	hide: function() {
		PopupBase.hide();
	}
});

PopupBase.show = function(popup) {
	window.activePopup = popup;
	if(popup.getModal()) {
		$('popup-overlay').style.height = document.body.clientHeight + 'px';
		$('popup-overlay').show();
	}
	$(popup.getElementId()).show();
}

PopupBase.hide = function() {
	if (window.activePopup && window.activePopup.onhide) {
		window.activePopup.onhide();
	}
	if($('popup-overlay').visible()) {
		$('popup-overlay').hide();
	}
	$(window.activePopup.getElementId()).hide();
}