var ConfirmationPopUp = jQuery.Class.create({
	/**
	 * Stores the options
	 */
	options: null,
	/**
	 * Stores the element that will be shown on the screen
	 */
	element: null,
	/**
	 * Contains the element that shows the message
	 */
	message: null,
	/**
	 * Stores the confirmation pop up content
	 */
	content: null,
	/**
	 * Indicates if the element is visible or not
	 */
	visible: null,
	/**
	 * Contains the buttons
	 */
	buttons: null,
	/**
	 * Constructor of the class
	 */
	init: function(options) {
		this.options = options;
		//Creating the HTML component
		this.renderComponent();
		this.createButtons();
		$(document.body).append(this.getHtml());
	},
	renderComponent: function() {
		var html = $('<div class="confirmation-pop-up"></div>');
		var content = $('<div class="confirmation-content"></div>');
		html.append(content);
		if(this.options.title)
			content.append('<div class="confirmation-title">'+this.options.title+'</div>');
		this.message = $('<div class="confirmation-message"></div>');
		this.message.append(this.options.message);
		content.append(this.message);
		this.element = $('<div class="confirmation-main"></div>');
		this.element.append('<div class="confirmation-pop-up-top"></div>');
		this.element.append(html);
		this.element.append('<div class="confirmation-pop-up-down"></div>');
		this.content = content;
		this.html = html;
		this.element.hide();
	},
	show: function() {
		visible: true;
		_this = this;
		this.calculateHeight();
		$(window).bind("scroll",function() {
			_this.calculateHeight();
		});
	},
	calculateHeight: function() {
		var top    = $(window).scrollTop();
		var height = $(window).height();
		var fixedHeight = top+Math.floor(height/2);
		this.element.show();
		this.element.attr("style","top: "+fixedHeight+"px; margin-top: -"+Math.floor(this.element.height()/2)+"px;");
	},
	hide: function() {
		this.element.hide();
		$(window).unbind("scroll");
	},
	createButtons: function() {
		var _this = this;
		if(!this.options.labels)
			this.options["labels"] = new Object();
		//Creating the buttons
		var ok = new Dropdown({label: this.options.labels.ok ? this.options.labels.ok : "Ok", dropdown: false, callback: function() { _this.options.okAction(); }});
		var yes = new Dropdown({label: this.options.labels.yes ? this.options.labels.yes :"Update", dropdown: false, callback: function() { _this.options.yesAction(); }});
		var no = new Dropdown({label: this.options.labels.no ? this.options.labels.no : "Cancel", dropdown: false, callback: function() { _this.options.noAction(); }});
		this.buttons = {
				ok: ok,
				yes: yes,
				no: no
		} ;
		//This element will contain the buttons
		var buttonContainer = $('<div class="confirmation-button-container"></div>');
		//Inserting buttons depending of the Confirmation Pop up type
		if(this.options.TYPE == "OK")
			buttonContainer.append(ok.getHtml());
		else if(this.options.TYPE == "QUESTION") {
			buttonContainer.append(no.getHtml());
			buttonContainer.append(yes.getHtml());
		}
		else
			throw "Error, invalid Confirmation button TYPE";
		this.content.append(buttonContainer);
	},
	/**
	 * Returns the generated element
	 */
	getHtml: function() {
		return this.element;
	},
	/**
	 * Disable the controls buttons
	 */
	disableButtons: function() {
		this.buttons.ok.disable();
		this.buttons.yes.disable();
		this.buttons.no.disable();
	},
	/**
	 * Enables the control buttons
	 */
	enableButtons: function() {
		this.buttons.ok.enable();
		this.buttons.yes.enable();
		this.buttons.no.enable();
	}
});