/*
DivPopup Class
Create floating/draggable div
ToDo: - Position following popup centered within parent popup
*/
var DivPopup = new Class({
	options:{
		closeHTML : "<a class='btn-close'><img src='/assets/project/img/icons/panel_close.gif' /></a>",
		width : 640,
		height : 480,
		callback : null,
		id : "popup",
		parentId : null
	},
	initialize: function(sTitle, sContent, options) {				
		this.setOptions(this.options, options);
		
		this.callback = this.options["callback"]; 
		this.id = this.options["id"];
		this.wrapper = new Element("div").setProperty("id", "wrapper-"+this.options["id"]);
		this.wall = new Element("div").addClass("wall");
		this.popup = new Element("div").addClass("panel-float").setProperty("id", this.options["id"]);
		this.close = new Element("div").setHTML(this.options["closeHTML"]);
		this.bar = new Element("div").addClass("bar").setHTML(sTitle);
		this.content = new Element("div").addClass("content").setHTML(sContent);
		
		this.parent = (this.options["parentId"] == null) ? top.window : $(this.options["parentId"]);
				
		this.createPopup();
		this.attachClose(this);
	},
	createPopup: function() {

		this.close.setStyles({
			"position" : "absolute",
			"top" : 0,
			"right" : 2,
			"cursor" : "pointer"
		});
		
		this.bar.setStyles({
			"width" : this.options["width"]-2			
		});
		this.bar.addEvent("mousedown", function() {
			this.setStyle("cursor", "move");
		}).addEvent("mouseup", function() {
			this.setStyle("cursor", "auto");
		});
		
		this.content.setStyles({
			"width" : this.options["width"]-2,
			"height" : this.options["height"],
			"overflow" : "auto"
		});		
		
		this.wall.setOpacity(.5).setStyles({
			"width" : this.parent.getSize()["size"]["x"],
			"height" : this.parent.getSize()["size"]["y"],
			"left" : this.parent.getPosition()["x"],
			"top" : this.parent.getPosition()["y"]
		});

		this.bar.appendChild(this.close);		
		this.popup.appendChild(this.bar);
		this.popup.appendChild(this.content);
		this.popup.setStyles({
			"z-index" : "999", 
			"position" : "absolute",
			"top" : ((top.window.getSize()["size"]["y"] / 2) - (this.options["height"] / 2)),
			"left" : ((top.window.getSize()["size"]["x"] / 2) - (this.options["width"] / 2))
		}).makeDraggable({
			handle: this.popup.getFirst(),
			onStart:function(el) {
				el.setOpacity(.5);
			},
			onComplete:function(el) {
				el.setOpacity(1);
			}
		});
		
		this.setWallandPopupWithParent();

		var oWall = this.wall;
		var oPopup = this.popup;
		var oWrapper = this.wrapper;
		
		oWrapper.appendChild(oWall);
		oWrapper.appendChild(oPopup);
		
		top.document.body.appendChild(oWrapper);
	},
	
	setTitle: function (sTitle) {
		this.bar.setHTML(sTitle);
	},
	setContent: function (sContent) {
		this.content.setHTML(sContent);
	},
	setWallandPopupWithParent: function (){		
		if($type(this.parent) != "object") {
			this.wall.setStyle("z-index", this.parent.getStyle("z-index").toInt()+1);
			this.popup.setStyle("z-index", this.wall.getStyle("z-index").toInt()+1);
		}
	},
	closePopup: function () {
		if(this.wrapper) {
			this.wrapper.remove();
			this.wrapper = null;
		}
	},
	attachClose: function(objPopup) {				
		this.wrapper.getElements('.btn-close').each(function(el) { 
			el.addEvent("click", function(){ this.closePopup(); }.bindWithEvent(objPopup), this);
		});
	}

});
DivPopup.implement(new Options);