var HitX = 0;
var HitY = 0;
var OffsetX = 0;
var OffsetY = 0;
var DragObj = null;
var isDrag  = false;

function PopupLayerFromImage(date, url, left, top, width)
{
	var now		= new Date();
	var tmp		= now.getFullYear() + "" + (now.getMonth() + 1) + "" + now.getDate();
	var today	= parseInt(tmp, 10);
	var limit	= parseInt(date.replace(/\-/g, ""), 10);

	if(today > limit) {
		return false;
	}

	var wrap = document.createElement('div');
	wrap = document.body.appendChild(wrap);
	wrap.style.position = "absolute";
	wrap.style.zIndex = "10000";
	wrap.style.left = left +"10px";
	wrap.style.top = top + "10px";
	wrap.style.width = width + "px";
	wrap.style.border = "3px solid #0A5AEC";
	wrap.style.borderTop = "1px solid #0A5AEC";
	wrap.style.backgroundColor = "#FFFFFF";

	var obj = wrap.appendChild(document.createElement('img'));
	obj.src = url;
	obj.style.border = 'none';
	obj.style.cursor = 'pointer';
	obj.onclick = function(e)
	{
		var obj = null;
		if(e) {
			obj = e.target;
		} else if(event) {
			obj = event.srcElement;
		}

		if(obj) {
			obj.parentElement.style.display = 'none';
		}
	};

	var title = obj.parentNode.insertBefore(document.createElement('div'), obj);
	title.style.position = "relative";
	title.style.width = wrap.style.width;
	title.style.background = "url(/popup/images/resource/titlebar.gif)";
	title.style.height = "17px";

	title.onmousedown = function(e)
	{
		var obj = null;
		var x, y;
		if(e) {
			obj = e.target;
			x = e.clientX;
			y = e.clientY;
		} else if(event) {
			obj = event.srcElement;
			x = event.clientX;
			y = event.clientY;
		}

		if(obj) {
			HitX = parseInt(obj.parentElement.style.left, 10);
			HitY = parseInt(obj.parentElement.style.top, 10);
			OffsetX = x;
			OffsetY = y;
			DragObj = obj.parentElement;
			isDrag = true;

			document.onmousemove = function(e)
			{
				var x, y;
				if(e) {
					if(isDrag) {
						x = e.clientX;
						y = e.clientY;
					}
				} else if(event) {
					if(isDrag) {
						x = event.clientX;
						y = event.clientY;
					}
				}

				if(DragObj && isDrag) {
					DragObj.style.left = (HitX + x - OffsetX) + "px";
					DragObj.style.top  = (HitY + y - OffsetY) + "px";
					DragObj.focus();
					document.onselectstart = function() { return false; };
				}
			};

			document.onmouseup = function(e) {
				isDrag = false;
				document.onmousemove = null;
				document.onselectstart = function() { return true; };
			}
		}
	};

	var btn = title.appendChild(document.createElement('img'));
	btn.src = "/popup/images/resource/closebtn.gif";
	btn.style.position = "absolute";
	btn.style.top = "2px";
	btn.style.right = "1px";
	btn.style.border = 'none';
	btn.style.cursor = 'pointer';
	btn.onclick = function(e)
	{
		var obj = null;
		if(e) {
			obj = e.target;
		} else if(event) {
			obj = event.srcElement;
		}

		if(obj) {
			obj = obj.parentElement;
			obj.parentElement.style.display = 'none';
		}
	};

	return true;
}