var JSPopup = Class.create();
JSPopup.sequence = 1;
JSPopup.zIndexSeq = 100;
JSPopup.prototype = {
	initialize: function(_movable) {
		var idBase = "jspopupInstance" + JSPopup.sequence++;
		var zIndex = JSPopup.zIndexSeq++;
		var width = 448;
		//
		this.movable = (_movable == undefined) ? true : _movable;
		this.shown = false;
		this.discarded = false;
		//
		this.winDiv = $(document.createElement("div"));
		this.winDiv.id = idBase + "_div";
		this.winDiv.setStyle({
			position: "absolute",
			border: "1px solid #400000",
			backgroundColor: "#ffffff",
			width: width + "px",
			zIndex: zIndex,
			display: "none"
		});
		//
		this.iframeShim = $(document.createElement("iframe"));
		this.iframeShim.id = idBase + "_iframe";
		this.iframeShim.src = "javascript:false;";
		this.iframeShim.frameBorder = "0";
		this.iframeShim.scrolling = "no";
		this.iframeShim.setStyle({
			position: "absolute",
			zIndex: zIndex,
			display: "none"
		});
		//
		this.barDiv = $(document.createElement("div"));
		this.barDiv.setStyle({
			backgroundColor: "#c0ad78"
		});
		this.winDiv.appendChild(this.barDiv);
		//
		this.moveImg = $(document.createElement("img"));
		this.moveImg.src = "/_resource/image/jspopup_move.gif";
		this.moveImg.setStyle({
			width: (width - 15 - 4) + "px",
			height: "19px",
			cursor: (this.movable?"move":"auto")
		});
		this.barDiv.appendChild(this.moveImg);
		//
		this.closeImg = $(document.createElement("img"));
		this.closeImg.src = "/_resource/image/jspopup_close.gif";
		this.closeImg.setStyle({
			width: "15px",
			height: "15px",
			margin: "2px",
			cursor: "pointer"
		});
		this.barDiv.appendChild(this.closeImg);
		//
		this.contentDiv = $(document.createElement("div"));
		this.contentDiv.id = idBase + "_content";
		this.contentDiv.innerHTML = "Loading ...";
		this.winDiv.appendChild(this.contentDiv);
		//
		this.mouseDownHandler = this.startDrag.bindAsEventListener(this)
		this.mouseUpHandler = this.endDrag.bindAsEventListener(this);
		this.mouseMoveHandler = this.doDrag.bindAsEventListener(this);
		this.closeHandler = this.doClose.bindAsEventListener(this);
		//
		document.body.appendChild(this.iframeShim); // append iframeShim first so it will be under winDiv
		document.body.appendChild(this.winDiv);
	},
	setPosition: function(x, y) {
		this.winDiv.setStyle({ top: y + "px", left: x + "px"});
		if (this.shown) {
			this.adjustIFrameShim();
		}
	},
	setWidth: function(width) {
		this.winDiv.setStyle({ width: width + "px" });
		this.moveImg.setStyle({ width: (width - 15 - 4) + "px" });
		if (this.shown) {
			this.adjustIFrameShim();
		}
	},
	show: function() {
		this.winDiv.setStyle({ display: "block" });
		this.iframeShim.setStyle({ display: "block" });
		this.adjustIFrameShim();
		//
		if (this.movable) {
			Event.observe(this.moveImg, "mousedown", this.mouseDownHandler);
		}
		Event.observe(this.closeImg, "click", this.closeHandler);
		//
		this.shown = true;
	},
	loadUrl: function(url) {
		new Ajax.Updater(this.contentDiv.id, url, {
			method: "post",
			onComplete: function() { if (this.shown) { this.adjustIFrameShim(); } }.bindAsEventListener(this)
		});
	},
	adjustIFrameShim: function() {
		Position.clone(this.winDiv, this.iframeShim);
	},
	startDrag: function(event) {
		if (this.winDiv.getStyle("zIndex") != JSPopup.zIndexSeq - 1) {
			var zIndex = JSPopup.zIndexSeq++;
			this.winDiv.setStyle({ zIndex: zIndex });
			this.iframeShim.setStyle({ zIndex: zIndex });
		}
		this.ofsx = Event.pointerX(event) - this.getNum(this.winDiv.getStyle("left"));
		this.ofsy = Event.pointerY(event) - this.getNum(this.winDiv.getStyle("top"));
		Event.observe(document, "mouseup", this.mouseUpHandler);
		Event.observe(document, "mousemove", this.mouseMoveHandler);
		Event.stop(event);
	},
	endDrag: function(event) {
		Event.stopObserving(document, "mouseup", this.mouseUpHandler);
		Event.stopObserving(document, "mousemove", this.mouseMoveHandler);
		Event.stop(event);
	},
	doDrag: function(event) {
		var x = Event.pointerX(event) - this.ofsx;
		var y = Event.pointerY(event) - this.ofsy;
		this.setPosition(x, y);
		Event.stop(event);
	},
	doClose: function(event) {
		this.discard();
		Event.stop(event);
	},
	discard: function() {
		Event.stopObserving(this.moveImg, "mousedown", this.mouseDownHandler);
		Event.stopObserving(this.closeImg, "click", this.closeHandler);
		Element.remove(this.winDiv);
		Element.remove(this.iframeShim);
		this.discarded = true;
	},
	getNum: function(str) {
		return Number(str.replace("px", ""));
	}
};
