// dependency: jquery-1.4.4.min.js
var JSPopup = function(_movable) {
	this.initialize(_movable);
};
JSPopup.sequence = 1;
JSPopup.zIndexSeq = 100;
JSPopup.prototype = {
	initialize: function(_movable) {
		var $ = jQuery;
		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 = $("<div/>");
		this.winDiv.attr({
			id: idBase + "_div"
		});
		this.winDiv.css({
			position: "absolute",
			border: "1px solid #400000",
			backgroundColor: "#ffffff",
			width: width + "px",
			zIndex: zIndex,
			display: "none"
		});
		//
		this.iframeShim = $("<iframe/>");
		this.iframeShim.attr({
			id: idBase + "_iframe",
			src: "javascript:false;",
			frameBorder: "0",
			scrolling: "no"
		});
		this.iframeShim.css({
			position: "absolute",
			zIndex: zIndex,
			display: "none"
		});
		//
		this.barDiv = $("<div/>");
		this.barDiv.css({
			backgroundColor: "#c0ad78"
		});
		this.winDiv.append(this.barDiv);
		//
		this.moveImg = $("<img/>");
		this.moveImg.attr({
			src: "/_resource/image/jspopup_move.gif"
		});
		this.moveImg.css({
			width: (width - 15 - 4) + "px",
			height: "19px",
			cursor: (this.movable?"move":"auto")
		});
		this.barDiv.append(this.moveImg);
		//
		this.closeImg = $("<img/>");
		this.closeImg.attr({
			src: "/_resource/image/jspopup_close.gif"
		});
		this.closeImg.css({
			width: "15px",
			height: "15px",
			margin: "2px",
			cursor: "pointer"
		});
		this.barDiv.append(this.closeImg);
		//
		this.contentDiv = $("<div/>");
		this.contentDiv.attr({
			id: idBase + "_content"
		});
		this.contentDiv.html("Loading ...");
		this.winDiv.append(this.contentDiv);
		//
		$("body").append(this.iframeShim); // append iframeShim first so it will be under winDiv
		$("body").append(this.winDiv);
	},
	setPosition: function(x, y) {
		var $ = jQuery;
		this.winDiv.css({ top: y + "px", left: x + "px"});
		if (this.shown) {
			this.adjustIFrameShim();
		}
	},
	setPositionAtEvent: function(event, offsetX, offsetY) {
		var $ = jQuery;
		var pageX = event.pageX;
		var pageY = event.pageY;
		/*
		// if event is javascript event (not jquery event)
		if (pageX == null && event.clientX != null) {
			var doc = document.documentElement;
			var body = document.body;
			pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
			pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
		}
		*/
		this.setPosition(pageX + offsetX, pageY + offsetY);
	},
	setPositionAtElement: function(elem, offsetX, offsetY) {
		var $ = jQuery;
		var elemPos = $(elem).offset();
		this.setPosition(elemPos.left + offsetX, elemPos.top + offsetY);
	},
	setWidth: function(width) {
		var $ = jQuery;
		this.winDiv.css({ width: width + "px" });
		this.moveImg.css({ width: (width - 15 - 4) + "px" });
		if (this.shown) {
			this.adjustIFrameShim();
		}
	},
	show: function() {
		var $ = jQuery;
		this.winDiv.css({ display: "block" });
		this.iframeShim.css({ display: "block" });
		this.adjustIFrameShim();
		//
		if (this.movable) {
			this.moveImg.bind("mousedown", { my: this }, this.startDrag);
		}
		this.closeImg.bind("click", { my: this }, this.doClose);
		//
		this.shown = true;
	},
	loadUrl: function(url) {
		var $ = jQuery;
		var my = this;
		$.ajax({
			type: "POST",
			url: url,
			dataType: "html",
			success: function(data, code){
				my.contentDiv.html(data);
				if (my.shown) { my.adjustIFrameShim(); };
			}
		});
	},
	adjustIFrameShim: function() {
		var $ = jQuery;
		var elemPos = this.winDiv.offset();
		this.iframeShim.offset({
			left: elemPos.left,
			top: elemPos.top
		});
		var w = this.winDiv.outerWidth();
		var h = this.winDiv.outerHeight();
		this.iframeShim.css({ width: w + "px", height: h + "px" });
	},
	startDrag: function(event) {
		var $ = jQuery;
		var my = event.data.my;
		if (my.winDiv.css("zIndex") != JSPopup.zIndexSeq - 1) {
			var zIndex = JSPopup.zIndexSeq++;
			my.winDiv.css({ zIndex: zIndex });
			my.iframeShim.css({ zIndex: zIndex });
		}
		my.ofsx = event.pageX - my.getNum(my.winDiv.css("left"));
		my.ofsy = event.pageY - my.getNum(my.winDiv.css("top"));
		$(document).bind("mouseup", { my: my }, my.endDrag);
		$(document).bind("mousemove", { my: my }, my.doDrag);
		event.preventDefault();
		event.stopPropagation();
	},
	endDrag: function(event) {
		var $ = jQuery;
		var my = event.data.my;
		$(document).unbind("mouseup", my.endDrag);
		$(document).unbind("mousemove", my.doDrag);
		event.preventDefault();
		event.stopPropagation();
	},
	doDrag: function(event) {
		var $ = jQuery;
		var my = event.data.my;
		var x = event.pageX - my.ofsx;
		var y = event.pageY - my.ofsy;
		my.setPosition(x, y);
		event.preventDefault();
		event.stopPropagation();
	},
	doClose: function(event) {
		var $ = jQuery;
		var my = event.data.my;
		my.discard();
		event.preventDefault();
		event.stopPropagation();
	},
	discard: function() {
		var $ = jQuery;
		this.moveImg.unbind("mousedown", this.startDrag);
		this.closeImg.unbind("click", this.doClose);
		this.winDiv.remove();
		this.iframeShim.remove();
		this.discarded = true;
	},
	getNum: function(str) {
		return Number(str.replace("px", ""));
	}
};