
//********************************************************//
//	유저 인터페이스 관련 함수
//  작성일 : 2007-01-27
//********************************************************//

// IE BackgroundImage Flicker 버그 처리
if(Prototype.Browser.IE) document.execCommand("BackgroundImageCache",false,true);

var IE6 = navigator.appVersion.toLowerCase().indexOf("msie 6.0") > 0 ? true : false;
var SP1 = IE6 > 0 ? (navigator.appMinorVersion.toLowerCase().indexOf("sp1") > 0 ? true : false) : false;

//////////////////////////////////////////////
//    페이지 사이즈 구하기
//////////////////////////////////////////////
var getPageSize = function(){
	var xScroll, yScroll;
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight); 
	return arrayPageSize;
};


///////////////////////////////////////////////
//    윈도우 가시화면 높이값 구하기
///////////////////////////////////////////////
var getPageScroll = function(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll); 
	return arrayPageScroll;
};


///////////////////////////////////////////////////////////////////
//   오버레이화면을 구성하여 디스플레이 함
///////////////////////////////////////////////////////////////////
var Overlay = {
	
	smooth : true,
	opacity : 0,
	interval : 0,

	// 오버레이 레이어를 초기화하고 화면을 띄운다.
	show : function(zIndex, color, opacity) {
		//$$("html")[0].setStyle({overflow:"hidden"});
		var arrayPageSize = getPageSize();
		var elementHegiht;
		if(IE6 && SP1) elementHegiht = arrayPageSize[1]+"px";
		else elementHegiht = arrayPageSize[1] > window.screen.availHeight-100 ? arrayPageSize[1]+"px" : '100%';
		
		this.opacity = (opacity||50);
		this.element = new Element("div",{id:'popupOverlay'});
		this.element.setStyle({position : "absolute", top : "0px", left : "0px", width : "100%", height : elementHegiht, backgroundColor : (color||"#000000"), zIndex : zIndex});
		this.element.setOpacity((this.smooth?0:(this.opacity)/100));
		this.currentOpacity = 0;
		$$("body")[0].appendChild(this.element);

		if(this.smooth) this.interval = setInterval(this.smoothly.bind(this), 30);

		
		this.mouseDownHandler = this.doMouseDown.bindAsEventListener(this);
		this.mouseStopHandler = this.doMouseStop.bindAsEventListener(this);

		this.element.observe("mousedown",this.mouseDownHandler);
		
		if(IE6) selectboxHidden("popupOverlay");
		selectboxHidden("popupOverlay","OBJECT");
	},

	// 오버레이를 부드럽게 띄운다
	smoothly : function() {
		if(this.currentOpacity < this.opacity-1) {
			var thisOpacity = Math.ceil(this.currentOpacity+(this.opacity-this.currentOpacity)/4);
			this.currentOpacity+=thisOpacity;
			this.element.setOpacity(thisOpacity/100);
		} else {
			this.element.setOpacity(this.opacity/100);
			clearInterval(this.interval);
		}
	},

	// 오버레이를 삭제한다.
	hide : function() {
		//var objHTML = $$("html")[0].setStyle({overflowX:"auto",overflowY:"scroll"});
		// 팝업을 드레그 하는동안 문서의 셀렉트와 드레그를 막는다 (IE 전용)
		this.doMouseStop();
		$("popupOverlay").remove();
	},

	doMouseDown : function() {
		document.observe('selectstart', this.mouseDragHandler);
		document.observe('dragstart', this.mouseDragHandler);
		$("popupOverlay").observe("mouseup",this.mouseStopHandler);
	},

	doMouseStop : function() {
		document.stopObserving('selectstart', this.mouseDragHandler);
		document.stopObserving('dragstart', this.mouseDragHandler);
		$("popupOverlay").stopObserving("mousedown",this.mouseDownHandler);
		$("popupOverlay").stopObserving("mouseup",this.mouseStopHandler);
	},

	mouseDragHandler : function(e) {
		Event.stop(e);
	}
};


///////////////////////////////////////////////////////////////////////////////////////
//   레이어를 제어한다.
///////////////////////////////////////////////////////////////////////////////////////
var Layer = {
	
	entry : $H(),
	
	// 새로운 element 를 등록한다.
	regist : function(elementName) {
		if(!this.entry.get(elementName)) this.entry.set(elementName, new this.Element(elementName));
		return this.entry.get(elementName);
	},
	
	// LayerInstance 객체를 리턴한다.
	get : function(elementName) {
		return this.entry.get(elementName);
	},

	// 새로운 팝업을 생성한다.
	tween : function(elementName, options) {
		var instance = this.regist(elementName);
		instance.tween(options);
	},
	
	// 레이어를 가로로 Flip한다.
	flipW : function(elementName, options) {
		var instance = this.regist(elementName);
		var element = $(elementName);
		options = options||{};
		options.width = element.offsetWidth > 0 ? 0: !options.width ?element.scrollWidth : options.width;
		instance.tween(options);
	},
	
	// 레이어를 세로로 Flip한다.
	flipH : function(elementName, options) {
		var instance = this.regist(elementName);
		var element = $(elementName);
		options = options||{};
		options.height = element.offsetHeight > 0 ? 0: !options.height ?element.scrollHeight : options.height;
		instance.tween(options);
	},
	
	// 레이어가 윈도우의 스크롤을 따라 움직인다.
	scroll : function(elementName, minTop, maxTop, options) {
		var instance = this.regist(elementName);
		var element = $(elementName);
		var scrollHandler = function(){
			var currentY = element.offsetTop;
			var fromY = currentY - minTop;
			var maxY =  document.body.scrollHeight - element.scrollHeight - maxTop;
			var toY = document.viewport.getScrollOffsets().top + minTop;
			options = options||{};
			options.top = toY > maxY ? maxY < minTop ? minTop : maxY : toY < minTop ? minTop : toY;
			instance.tween(options);
		};
		scrollHandler();
		Event.observe(window, 'scroll', scrollHandler);
	},

	update : function(elementName,url,parameter,onSuccess) {
		var instance = this.regist(elementName);
		var element = $(elementName);
		Layer.startLoad(elementName);
		new Ajax.Request(url,{
			parameters : parameter,					// 전송할 파라메터.
			onSuccess : function(request) {			//	페이지 로딩 성공시 처리
				Layer.endLoad(elementName);
				$(elementName).update(request.responseText);
				//$(elementName).innerHTML = request.responseText;
			},
			onFailure: function(request) {				// 에러시 보여줄 화면
				Layer.endLoad(elementName);
				trace(request.responseText);
				alert("status : " + request.status + " Error");
			}
		});
	},

	startLoad : function(elementName) {
		var element = $(elementName);
		element.update("<div id='divLoading' style='width:100%;height:100%' class='c'><img src='/images/common/loading.gif'></div>");
	},

	endLoad : function(elementName) {
		var element = $(elementName);
		element.select("#divLoading").invoke("remove");
	},
	
	// 지정된 tween 액션을 중지한다.
	stop : function(elementName) {
		if(this.entry.get(elementName)) this.entry.get(elementName).stop();
	},
	
	// 지정된 tween 액션을 중지한다.
	remove : function(elementName) {
		this.entry.unset(elementName);
	}
};


///////////////////////////////////////////////////////////////////////////////////////
//   ※ Layer 를 통해서 생성한다.
//   지정된 레이어를 제어할 수 있는 클래스를 생성한다.
///////////////////////////////////////////////////////////////////////////////////////
Layer.Element = Class.create({
		
	// 클래스 생성자 함수
	initialize : function(elementName) {
		// 기본 option 객체를 생성한다.
		this.options = {
			top: NaN, left: NaN, width: NaN, height: NaN, 
			speed: 4,				// 클수록 느려짐
			timing: 50,			// 클수록 느려짐
			mode : "smooth",	// smooth, regular, accel
			onInitialize: function(){},
			onComplete: function(){}
		};
		this.elementName = elementName;
		this.element = $(elementName);
		this.params = ["top","left","width","height"];
	},
	
	// 레이어객체의 크기/위치를 변경한다. 
	tween : function(options) {
		Object.extend(this.options, options || {});
		if(!isNaN(this.options.width) || !isNaN(this.options.height)) this.element.setStyle({overflow:"hidden"});
		this.params = $A([]);
		this.modeNum = $A([]);
		this.currentNum = $A([]);
		this.completeDone = 0;
		$w('top left width height').each(function(param){
			if(!isNaN(this.options[param])) {
				var offset = eval("this.element.offset"+param.capitalize());
				this.params.push(param);
				this.currentNum.push(offset);
				this.modeNum.push(offset < this.options[param] ? 1 : -1);
				this.completeDone++;
			}
		}.bind(this));
		this.beforeNum = this.currentNum.clone();
		if (!this.interval) this.interval = setInterval(this.process.bind(this), this.options.timing);
	},

	// 레이어가 목표까지 모션을 취하도록 계속 실행한다.
	process : function()  {
		var completeCheck = 0;
		this.params.each(function(p,i){
			var param = this.options[p];
			switch(this.options.mode) {
				case "regular" : this.currentNum[i]+= Math.ceil((param-(this.beforeNum[i]))/(this.options.speed*2))+this.modeNum[i]; break;
				case "smooth" : this.currentNum[i]+= Math.ceil((param-this.currentNum[i])/this.options.speed)+this.modeNum[i]; break;
				case "accel" : this.currentNum[i]+= Math.ceil((param-(this.beforeNum[i])-(param-this.currentNum[i]))/(this.options.speed/2))+this.modeNum[i]; break;
			}

			if (param * this.modeNum[i] <= this.currentNum[i] * this.modeNum[i]) {
				this.currentNum[i] = param;
				completeCheck++;
			}
			this.element.style[this.params[i]] = this.currentNum[i]+"px";
		}.bind(this));
		if(this.completeDone <= completeCheck) this.complete();
	},
	
	// 지정된 tween 액션이 완료되면 액션을 중지하고  onComplete 함수를 실행한다.
	complete : function() {
		var onComplete = this.options.onComplete.bind(this);
		this.stop();
		onComplete();
	},
	
	// 지정된 tween 액션을 중지한다.
	stop : function() {
		if (this.interval) clearInterval(this.interval);
		delete this.interval;
		//trace(this.elementName + " complete");
		//this.initialize(this.elementName);
		Layer.remove(this.elementName);
	}
});


///////////////////////////////////////////////////////////////////////////////////////
//   외부 페이지를 불러 레이어 팝업으로 띄우고 제어한다.
///////////////////////////////////////////////////////////////////////////////////////
var Popup = {

	entry : $H(),
	zIndex : 1001,
	overlay : false,
	
	// 새로운 element 를 등록한다.
	regist : function(elementName) {
		if(!this.entry.get(elementName)) this.entry.set(elementName, new this.Element(elementName));
		return this.entry.get(elementName);
	},

	// 새로운 팝업을 생성한다.
	open : function(elementName, url, options) {
		var instance = this.regist(elementName);
		instance.create(url, options);
		if(IE6) Event.observe($(elementName),"propertychange",function() {selectboxHidden(elementName)});
		this.zIndex++;
		return {
			overlay : function() {
				if(!this.overlay) Overlay.show(this.zIndex-1);
				this.overlay = true;
			}.bind(this)
		};
	},

	// PopupInstance 객체를 리턴한다.
	get : function(elementName) {
		return this.entry.get(elementName);
	},

	// 드래그 속성을 부여한다.
	startDrag : function(elementName) {	
		this.entry.get(elementName).startDrag();
	},

	// 드래그 속성을 삭제한다.
	stopDrag : function(elementName) {	
		this.entry.get(elementName).stopDrag();
	},

	// 팝업을 삭제한다.
	close : function(elementName) {
		if(this.entry.get(elementName)) {
			this.entry.get(elementName).close();
			this.entry.unset(elementName);
			if(IE6) selectboxVisible("SELECT");
			selectboxVisible("OBJECT");
			if (this.overlay) { Overlay.hide(); this.overlay = false; }
		}
	},

	// 모든 팝업을 삭제한다.
	closeAll : function() {
		this.entry.each(function(pair) { this.close(pair.key); }.bind(this));
	}
};


///////////////////////////////////////////////////////////////////////////////////////
//   ※ Popup 을 통해서 생성한다.
//   외부페이지를 Ajax.Request 클래스를 이용해 레이어 팝업으로 띄운다.
///////////////////////////////////////////////////////////////////////////////////////
Popup.Element = Class.create({

	// 클래스 생성자 함수
	initialize: function(elementName) {
		// 비어있는 option 객체를 생성한다.
		this.options = {
			top: 0, left: 0, width: 0, height: 0, 
			onLoad: function(){}, 
			onCloseBefore:function(){},
			onClose: function(){}
		};
		this.elementName = elementName;
		this.element = ($(elementName) || elementName);
	},

	// 팝업을 생성한다.
	create : function(url,options) {
		this.url = url;
		Object.extend(this.options, options || {});
		
		if(typeof this.element  != "object") {
			this.element = new Element("div",{id:this.elementName});
			document.body.appendChild(this.element);
		}

		new Ajax.Request(this.url,{
			onSuccess : function(request) {
				this.element.update(request.responseText);
				var arrayPageSize = getPageSize();
				var arrayPageScroll = getPageScroll();
				var width = (this.options.width ? this.options.width : this.element.down().offsetWidth);
				var height = (this.options.height ? this.options.height : this.element.down().offsetHeight);
				var centerTop = (arrayPageScroll[1] + ((arrayPageSize[3] - height) / 2));
				var top = (this.options.top ? this.options.top : centerTop > 0 ? centerTop : 10);
				var centerLeft = (((arrayPageSize[0] - width) / 2));
				var left = (this.options.left ? this.options.left : centerLeft > 0 ? centerLeft : 10);
				this.element.setStyle({position:"absolute", display:"block", width:width+"px", height:height+"px",
									top:(height > 0 ? top : 0)+"px", left:(width > 0 ? left : 0)+"px", zIndex:Popup.zIndex});
				this.startDrag();
				if(typeof this.options.onLoad == "function") this.options.onLoad();
			}.bind(this),

			onFailure : function(request) {
				alert("status : " + request.status + " Error");
				if(Popup.overlay) Overlay.hide();
				Popup.overlay = true;
			}
		});
	},

	// 현재 팝업에 드래그 속성을 부여한다.
	startDrag : function() {
		this.draggableObj = new Draggable(this.elementName);
	},

	// 현재 팝업에 드래그 속성을 삭제한다.
	stopDrag : function() {
		this.draggableObj.stop();
	},
	
	// 현재 팝업을 삭제한다.
	close : function() {
		if(typeof this.options.onCloseBefore == "function") this.options.onCloseBefore();
		this.element.remove();
		if(typeof this.options.onClose == "function") this.options.onClose();
	}
});


////////////////////////////////////////////////////////
// 지정된 DIV에 Drag 속성을 부여한다.
////////////////////////////////////////////////////////
var Draggable = Class.create({

	// 클래스 생성자 함수
	initialize: function(element)	 {
		this.element = $(element);
		this.mouseDownHandler = this.doMouseDown.bindAsEventListener(this);
		this.mouseMoveHandler = this.doMove.bindAsEventListener(this);
		this.mouseStopHandler = this.doMoveStop.bindAsEventListener(this);
		this.mouseDragHandler = this.doDrag;
		this.element.observe('mousedown', this.mouseDownHandler);
	},
	
	// 해당 객체 위에 마우스를 클릭하면 드래그 속성을 시작한다.
	doMouseDown : function(e) {	
		var srcObj=(e.srcElement||e.target);
		var nodeName = srcObj.nodeName.toUpperCase();
		if(nodeName == "DIV" || nodeName == "INPUT" || nodeName == "SELECT"
			 || nodeName == "OPTION" || nodeName == "BUTTON" || nodeName == "TEXTAREA") return;
		var offset = Position.cumulativeOffset(this.element);
		this.element._x = (e.pageX||e.clientX) - offset[0];
		this.element._y = (e.pageY||e.clientY) - offset[1];

		document.observe('mousemove', this.mouseMoveHandler);
		document.observe('mouseup', this.mouseStopHandler);
		document.observe('selectstart', this.mouseDragHandler);
		document.observe('dragstart', this.mouseDragHandler);
		this.element.style.zIndex = Popup.zIndex;
		Popup.zIndex++;
	},
	
	// 해당 객체 위에서 마우스를 누른 상태에서 이동하면 팝업을 마우스의 위치로 이동시킨다.
	doMove : function(e) {
		var arrayPageSize = getPageSize();
		if((e.pageX||e.clientX)-this.element._x < 20) this.element.style.left = "0px";
		else if(((e.pageX||e.clientX)-this.element._x)+this.element.offsetWidth > arrayPageSize[0]-20)  
			this.element.style.left = (arrayPageSize[0]-this.element.offsetWidth)+"px";
		else this.element.style.left = (e.pageX||e.clientX)-this.element._x+"px";
		
		if((e.pageY||e.clientY)-this.element._y < 20) this.element.style.top = "0px";
		else if(((e.pageY||e.clientY)-this.element._y)+this.element.offsetHeight > arrayPageSize[1]-20) 
			this.element.style.top = (arrayPageSize[1]-this.element.offsetHeight)+"px";
		else this.element.style.top = (e.pageY||e.clientY)-this.element._y+"px";
	},
	
	// 마우스 클릭을 놓으면 이동하는 이벤트를 삭제한다.
	doMoveStop : function(e) {
		document.stopObserving('mousemove', this.mouseMoveHandler);
		document.stopObserving('mouseup', this.mouseStopHandler);
		document.stopObserving('selectstart', this.mouseDragHandler);
		document.stopObserving('dragstart', this.mouseDragHandler);
	},
	
	// 팝업 이동 시 내용이 드래그 되는것을 막는다.
	doDrag : function(e) {
		Event.stop(e);
	},

	// 드래그 속성을 삭제한다.
	stop : function() {
		Event.stopObserving(this.element, 'mousedown', this.mouseDownListener);
	}
});