/** implementation Class */
pandora.util.layerpop.prototype  = {
	_dragMode : false,
	_skinLayerId : null,
	_layerId : null,
	_topLayerId : null,

	_oHtml : null,
	_removeEventFuncName : null,
	_layerTitle : null,
	_layerOption : null,
	_layerWidth : null,
	_layerHeight : null,
	_layerTop : null,
	_layerLeft : null,
	_bodyWidth : null,
	_bodyHeight : null,

	_evtClosePop : null,
	_evtBgClose : null,
	_evtChangeMode1 : null,
	_evtSetLayerPosition : null,
	_evtChangeMode2 : null,
	_evtNotDrag : null,
	_evtResizeWindow : null,
	_evtBodyClick : null,

	_lx : 0,
	_ly : 0,
	_prevX : 0,
	_prevY : 0,

	_endRight : null,
	_endBottom : null,

	_rnd : 0,
	initialize : function() {},

	//option => "1" : 레이어 바깥 클릭시 답힘, "2" : 레이어 안쪽 닫힘 버튼 클릭시만 닫힘, "3" : 움직이지 않는 레이어(레이어 바깥 클릭시 닫힘)

	set : function(oHtml, removeEventFuncName, obj, option, title, layerWidth, layerHeight, layerTop, layerLeft, skinlayerid) {
		this._super = obj;
		this._removeEventFuncName = removeEventFuncName;
		this._oHtml = oHtml.toString();
		this._layerTitle = title;
		this._layerOption = option.toString();
		this._layerWidth = layerWidth;
		this._layerHeight = layerHeight;
		this._layerTop = layerTop;
		this._layerLeft = layerLeft;

		var rnd = "";
		try {
			var now=new Date();
			var timestamp=(now.getTime()/1000).toFixed(); 
			if ($('layerPopup')) rnd = timestamp;
		}
		catch (e) {
		}

		this._skinLayerId		= (rnd) ? 'layerPopup' + rnd : 'layerPopup';
		this._topLayerId		= (rnd) ? "topLayer" + rnd : "topLayer";
		this._layerId			= (rnd) ? "oPop" + rnd : "oPop";
		this._targetID			= (rnd) ? "content_id" + rnd : "content_id";
		this._topHiddenLayerId	= (rnd) ? "topHiddenLayer" + rnd : "topHiddenLayer";
		this._btnClose			= (rnd) ? "btnClose" + rnd : "btnClose";
		this._handle			= (rnd) ? "handle" + rnd : "handle";
		this._popTitle			= (rnd) ? "popTitle" + rnd : "popTitle";
		this._OperaBlur			= (rnd) ? "OperaBlur" + rnd : "OperaBlur";

		if($(this._layerId)) this.closePopup();
		this.setBackLayer();

		this._bodyWidth = document.body.clientWidth;
		if(document.body.clientHeight >= document.body.scrollHeight)	{
			this._bodyHeight = document.body.clientHeight;
		} else {
			this._bodyHeight = document.body.scrollHeight;
		}
		this.setPosition();
		this.showLayout();
	},

	setBackLayer : function()	{
		new Insertion.Bottom(document.body,'<div id="'+this._skinLayerId+'"></div>');

		var oStringBuffer = new pandora.util.StringBuffer();

		switch(this._layerOption)	{
			case "1" :
				/*
				this._topLayerId = 'topLayer';
				this._layerId = 'oPop';
				this._targetID = 'content_id';
				*/

				oStringBuffer.append('<div id="'+this._topLayerId+'" style="position:absolute;z-index:998;"></div>');
				oStringBuffer.append('<div id="'+this._layerId+'" style="display:none;position:absolute;z-index:999;left:0px;top:0px;">');
				oStringBuffer.append('<div  class="playlist">');
				oStringBuffer.append('	<div class="playlist_title" id="'+this._handle+'" style="height:20px;cursor:pointer">');
				oStringBuffer.append('		<div class="layer_close"><a id="'+this._btnClose+'"><span class="icon_close"></span></a></div>');
				oStringBuffer.append('		<div id="'+this._popTitle+'">'+this._layerTitle+'</div>');
				oStringBuffer.append('	</div>');
				oStringBuffer.append('	<div id="'+this._targetID+'" style="padding:5px 10px;background-color:#ffffff"></div>');
				oStringBuffer.append('</div>');
				if(Prototype.Browser.Opera) oStringBuffer.append('<div id="'+this._OperaBlur+'" style="position:absolute;visibility:hidden;width:0px;height:0px;"><form><input type="text" style="width:0px;height:0px;"></form></div></div>');
				break;
			case "2" :
				/*
				this._topLayerId = 'topLayer';
				this._layerId = 'oPop';
				this._targetID = 'content_id';
				this._topHiddenLayerId = 'topHiddenLayer';
				*/

				oStringBuffer.append('<div id="'+this._topLayerId+'" style="position:absolute;z-index:998;"></div>');
				oStringBuffer.append('<div id="'+this._topHiddenLayerId+'" style="position:absolute;z-index:997;"></div>');
				oStringBuffer.append('<div id="'+this._layerId+'" class="playlist" style="display:none;position:absolute;z-index:999;left:0px;top:0px;">');
				oStringBuffer.append('	<div class="playlist_title" id="'+this._handle+'" style="height:20px;cursor:pointer">');
				oStringBuffer.append('		<div class="layer_close"><a style="cursor:pointer"><img src="'+variable.getChild('defaultImg')+'/icon_close.gif" border="0" id="'+this._btnClose+'"></a></div>');
				oStringBuffer.append('		<div id="'+this._popTitle+'">'+this._layerTitle+'</div>');
				oStringBuffer.append('	</div>');
				oStringBuffer.append('	<div id="'+this._targetID+'" style="padding:5px 10px;background-color:#ffffff"></div>');
				oStringBuffer.append('</div>');
				if(Prototype.Browser.Opera) oStringBuffer.append('<div id="'+this._OperaBlur+'" style="position:absolute;visibility:hidden;width:0px;height:0px;"><form><input type="text" style="width:0px;height:0px;"></form></div>');
				break;
			case "3" :
				/*
				this._layerId = 'oPop';
				this._targetID = 'content_id';
				*/

				oStringBuffer.append('<div id="'+this._layerId+'" style="display:none;position:absolute;z-index:999;left:0px;top:0px;">');
				oStringBuffer.append('	<div id="'+this._targetID+'"></div>');
				oStringBuffer.append('</div>');
				break;
			case "4" :
				/*
				this._layerId = 'oPop';
				this._targetID = 'content_id';
				*/

				oStringBuffer.append('<div id="'+this._topLayerId+'" style="position:absolute;z-index:998;"></div>');
				oStringBuffer.append('<div id="'+this._layerId+'" style="display:none;position:absolute;z-index:999;left:0px;top:0px;">');
				oStringBuffer.append('<div  class="playlist" style="width:100%">');
				oStringBuffer.append('	<div class="playlist_title" id="'+this._handle+'" style="height:20px;cursor:pointer">');
				oStringBuffer.append('		<span class="icon_close" style="float:right" id="'+this._btnClose+'"></span>');
				oStringBuffer.append('		<div id="'+this._popTitle+'">'+this._layerTitle+'</div>');
				oStringBuffer.append('	</div>');
				oStringBuffer.append('	<div id="'+this._targetID+'" style="padding:5px 10px;background-color:#ffffff"></div>');
				oStringBuffer.append('</div>');
				oStringBuffer.append('</div>');
				break;
			case "5" : // 타이틀 없는 움직이지 않는 레이어 창
				oStringBuffer.append('<div id="'+this._topLayerId+'" style="position:absolute;z-index:998;"></div>');
				oStringBuffer.append('<div id="'+this._layerId+'" style="display:none;position:absolute;z-index:999;left:0px;top:0px;">');
				oStringBuffer.append('	<div  class="playlist">');
				oStringBuffer.append('		<div id="'+this._targetID+'"></div>');
				oStringBuffer.append('	</div>');
				oStringBuffer.append('</div>');
				break;
		}

		$(this._skinLayerId).innerHTML = oStringBuffer;
		oStringBuffer = null;
	},

	setPosition : function ()	{
		$(this._layerId).style.width = this._layerWidth + "px";
		$(this._layerId).style.height = this._layerHeight;
		this._endRight = this._bodyWidth - parseInt($(this._layerId).style.width, 10);
		this._endBottom = this._bodyHeight - parseInt($(this._layerId).style.height, 10);

		if(this._layerTop != null && this._layerTop != "")	{
			var posInitTop = this._layerTop;
		} else {
			var posInitTop = Math.floor((this._bodyHeight - parseInt($(this._layerId).style.height, 10)) / 2);
		}
		if(this._layerLeft != null && this._layerLeft != "")	{
			var posInitLeft = this._layerLeft;
		} else {
			var posInitLeft = Math.floor((this._bodyWidth - parseInt($(this._layerId).style.width, 10)) / 2);
		}
		with($(this._layerId).style) {
			position = "absolute";
			left = posInitLeft + "px";
			top = posInitTop + "px";
		}

		this._lx = $(this._layerId).style.left.replace(/px*$/,"");
		this._ly = $(this._layerId).style.top.replace(/px*$/,"");
	},

	showLayout : function()	{
		this._rnd++;
		$(this._layerId).show();
		this.setTopLayer();
		this.setUI(this._oHtml);
		this._oHtml = null;

		try {
			this.setEventListener();
		}
		catch (e) {
		}

	},

	closePopup : function()	{
		try {
			this.removeEventListener();
		}
		catch (e) {
		}

		try {
			this._removeEventFuncName();
		}
		catch (e) {
		}
		
		try {
			$(this._skinLayerId).remove();
		}
		catch (e) {
			console.log('remove fail');
		}

	},

	setTopLayer : function()	{
		if(this._layerOption != '3' && this._layerOption != '4' && this._layerOption != '5')	{
			$(this._topLayerId).setStyle({
				'left' : '0px',
				'top' : '0px',
				'width' : (document.body.clientWidth + "px")
			});
		}

		if(this._layerOption == '2')	{
			var  transparent = '0.01';

			$(this._topHiddenLayerId).setStyle({
				'left' : '0px',
				'top' : '0px',
				'width' : (this._bodyWidth + "px"),
				'height' : (this._bodyHeight + "px"),
				'background' : '#000',
				'opacity' : transparent
			});
		}
	},

	topLayerOpen : function()	{
		var height = this._bodyHeight;

		$(this._topLayerId).style.height = height + 'px';
		$(this._topLayerId).style.display = 'block';
	},

	setLayerPosition : function (event) {
		if(this._dragMode)	{
			var x = Event.pointerX(event);
			var y = Event.pointerY(event);

			if(this._prevX!=0 && this._prevY!=0){
				this._lx = this._lx-(this._prevX-x);
				this._ly = this._ly-(this._prevY-y);

				if(this._lx <= 0 ) this._lx = 1;
				if(this._lx > this._endRight) this._lx = this._endRight;
				if(this._ly <= 0 ) this._ly = 1;
				if(this._ly > this._endBottom) this._ly = this._endBottom;
			}
			this._prevX = x;
			this._prevY = y;

			if(Prototype.Browser.Opera)	{
				var tmp = "";
				(tmp = $('OperaBlur')).style.pixelLeft = x;
				tmp.style.pixelTop = y;
				(tmp = tmp.children[0].children[0]).focus();
				tmp.blur();
			}

			$(this._layerId).style.left = this._lx+'px';
			$(this._layerId).style.top = this._ly+'px';
		}
	},

	bgClose : function()	{
		$(this._topLayerId).style.display = 'none';
	},

	changeMode1 : function()	{
		this._prevX = 0;
		this._prevY = 0;
		this._dragMode = false;
		this.bgClose();
	},

	changeMode2 : function()	{
		this._prevX = 0;
		this._prevY = 0;
		this._dragMode = true;
		this.topLayerOpen();
	},

	notDrag : function()	{
		return false;
	},

	resizeWindow : function()	{
		this._bodyWidth = document.body.clientWidth;
		this._bodyHeight = document.body.clientHeight;

		if((parseInt(this._lx)) + parseInt($(this._layerId).style.width) > this._bodyWidth)	{
			if(this._bodyWidth - parseInt($(this._layerId).style.width) > 0)	{
				var xPosition = this._bodyWidth - parseInt($(this._layerId).style.width);
			} else {
				var xPosition = 1;
			}
			this._lx = xPosition;
			$(this._layerId).style.left = xPosition+"px";
		}

		if((parseInt(this._ly)) + parseInt($(this._layerId).style.height) > this._bodyHeight)	{
			if(this._bodyHeight - parseInt($(this._layerId).style.height) > 0)	{
				var yPosition = this._bodyHeight - parseInt($(this._layerId).style.height);
			} else {
				var yPosition = 1;
			}
			this._ly = yPosition;
			$(this._layerId).style.top = yPosition+"px";
		}
		this._bodyWidth = document.body.clientWidth;
		if(document.body.clientHeight >= document.body.scrollHeight)	{
			this._bodyHeight = document.body.clientHeight;
		} else {
			this._bodyHeight = document.body.scrollHeight;
		}

		this.setTopLayer();
		this._endRight = this._bodyWidth - parseInt($(this._layerId).style.width, 10);
		this._endBottom = this._bodyHeight - parseInt($(this._layerId).style.height, 10);
	},

	bodyClick : function(evt2) {
		var pointerX = Event.pointerX(evt2);
		var pointerY = Event.pointerY(evt2);
		if($(this._layerId) && !Position.within($(this._layerId), pointerX, pointerY)) this.closePopup();
	},

    setEventListener : function() {
		this._evtClosePop = this.closePopup.bindAsEventListener(this);
		this._evtBgClose = this.bgClose.bindAsEventListener(this);
		this._evtChangeMode1 = this.changeMode1.bindAsEventListener(this);
		this._evtSetLayerPosition = this.setLayerPosition.bindAsEventListener(this);
		this._evtChangeMode2 = this.changeMode2.bindAsEventListener(this);
		this._evtNotDrag = this.notDrag.bindAsEventListener(this);
		this._evtResizeWindow = this.resizeWindow.bindAsEventListener(this);
		this._evtBodyClick = this.bodyClick.bindAsEventListener(this);

		if(this._layerOption != "3") {
			if ($(this._btnClose)) Event.observe(this._btnClose, "click", this._evtClosePop);
			if ($(this._topLayerId)) Event.observe(this._topLayerId, "mouseup", this._evtChangeMode1);
			if ($(this._topLayerId)) Event.observe(this._topLayerId, "mousemove", this._evtSetLayerPosition);
			if ($(this._topLayerId)) Event.observe(this._topLayerId, "click", this._evtBgClose);
			if ($(this._layerId)) Event.observe(this._layerId, "mouseup", this._evtChangeMode1);
			if ($(this._layerId)) Event.observe(this._layerId, "mousemove", this._evtSetLayerPosition);
			if(Prototype.Browser.IE) if ($(this._handle)) Event.observe(this._handle, "selectstart", this._evtNotDrag);
			if ($(this._handle)) Event.observe(this._handle, "mousedown", this._evtChangeMode2);
			if ($(this._handle)) Event.observe(this._handle, "mouseup", this._evtChangeMode1);
			if ($(this._handle)) Event.observe(this._handle, "mousemove", this._evtSetLayerPosition);
			Event.observe(window, "resize", this._evtResizeWindow);
		}
		if(this._layerOption != "2") {
			Event.observe(document.body, "mousedown", this._evtBodyClick);
		}
	},

    removeEventListener : function() {
		if(this._layerOption != "3") {
			if ($(this._btnClose)) Event.stopObserving(this._btnClose, "click", this._evtClosePop);
			if ($(this._topLayerId)) Event.stopObserving(this._topLayerId, "click", this._evtBgClose);
			if ($(this._topLayerId)) Event.stopObserving(this._topLayerId, "mouseup", this._evtChangeMode1);
			if ($(this._topLayerId)) Event.stopObserving(this._topLayerId, "mousemove", this._evtSetLayerPosition);
			if ($(this._layerId)) Event.stopObserving(this._layerId, "mouseup", this._evtChangeMode1);
			if ($(this._layerId)) Event.stopObserving(this._layerId, "mousemove", this._evtSetLayerPosition);
			if(Prototype.Browser.IE) if ($(this._handle)) Event.stopObserving(this._handle, "selectstart", this._evtNotDrag);
			if ($(this._handle)) Event.stopObserving(this._handle, "mousedown", this._evtChangeMode2);
			if ($(this._handle)) Event.stopObserving(this._handle, "mouseup", this._evtChangeMode1);
			if ($(this._handle)) Event.stopObserving(this._handle, "mousemove", this._evtSetLayerPosition);
			Event.stopObserving(window, "resize", this._evtResizeWindow);
		}
		if(this._layerOption != "2") Event.stopObserving(document.body, "mousedown", this._evtBodyClick);
	}
};

Object.extend(pandora.util.layerpop.prototype , pandora.util.model.prototype);

/** Single Pattern - get only once Instance */
var cLayerPop = Class.create();
    cLayerPop._instance_ = null;
    cLayerPop.getInstance = function(dis) {
		if(this._instance_ == null || dis == "new") this._instance_ = new pandora.util.layerpop();
        return this._instance_;
    };