//********************************************************// // Effect Class Ver. 0.9 // ÀÛ¼ºÀÚ : Çø³Ä¿¹Â´ÏÄÉÀ̼ÇÁî Á¤º´Å // ÀÛ¼ºÀÏ : 2008-04-01 //********************************************************// // IE BackgroundImage Flicker ¹ö±× ó¸® if(Prototype.Browser.IE) document.execCommand("BackgroundImageCache",false,true); var Effect = {}; Effect.Version = "0.9"; 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.documentElement.scrollHeight > document.documentElement.offsetHeight){ xScroll = document.documentElement.scrollWidth; yScroll = document.documentElement.scrollHeight; } else { xScroll = document.documentElement.offsetWidth; yScroll = document.documentElement.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; }; Effect.Offset = function(element) { var offsetParent = element.offsetParent; var width = element.offsetWidth; var height = element.offsetHeight; var top = element.offsetTop; var left = element.offsetLeft; //var right = offsetParent.offsetWidth - (left+width); //var bottom = offsetParent.offsetHeight - (top+height); return {width:width, height:height, top:top, left:left}; }, Effect.Tween = Class.create({ initialize : function(element, options) { // ±âº» option °´Ã¼¸¦ »ý¼ºÇÑ´Ù. this.options = { top: NaN, left: NaN, width: NaN, height: NaN, speed: 5, // Ŭ¼ö·Ï ´À·ÁÁü mode : "smooth", // smooth, regular, accel onComplete: Prototype.emptyFunction }; Object.extend(this.options, options || {}); this.element = $(element); var now = new Date(); this.element.id = this.element.id || this.element.identify(); this.element.setStyle({visibility:"visible"}); this.params = $A(); this.mNo = $A(); this.cPos = $A(); this.completeDone = 0; var offsetAll = Effect.Offset(this.element); $w("top bottom left right width height").each(function(param){ if(!isNaN(parseInt(this.options[param], 0))) { var offset = offsetAll[param]; this.params.push(param); this.cPos.push(offset); this.mNo.push(offset < parseInt(this.options[param], 0) ? 1 : -1); this.completeDone++; } }.bind(this)); this.bPos = this.cPos.clone(); ProcessInterval.set("tween_"+this.element.id,this.process.bind(this)); ProcessInterval.setComplete("tween_"+this.element.id, this.options.onComplete); }, // ·¹À̾ ¸ñÇ¥±îÁö ¸ð¼ÇÀ» ÃëÇϵµ·Ï °è¼Ó ½ÇÇàÇÑ´Ù. process : function() { var completeCheck = 0; this.params.each(function(p,i){ var pos = parseInt (this.options[p], 0); var speed = this.options.speed; switch(this.options.mode) { case "regular" : this.cPos[i]+= Math.ceil((pos-(this.bPos[i]))/(speed*2))+this.mNo[i]; break; case "smooth" : this.cPos[i]+= Math.ceil((pos-this.cPos[i])/speed)+this.mNo[i]; break; case "accel" : this.cPos[i]+= Math.ceil((pos-(this.bPos[i])-(pos-this.cPos[i]))/(speed/2))+this.mNo[i]; break; } if (pos * this.mNo[i] <= this.cPos[i] * this.mNo[i]) { this.cPos[i] = pos; completeCheck++; } this.element.style[this.params[i]] = this.cPos[i]+"px"; }.bind(this)); if(this.completeDone <= completeCheck) { return false; } else { return true; } } }); Effect.Opacity = Class.create({ initialize : function(element, options) { // ±âº» option °´Ã¼¸¦ »ý¼ºÇÑ´Ù. this.options = { opacity: 0, speed: 4, // Ŭ¼ö·Ï ´À·ÁÁü mode : "smooth", // smooth, regular, accel onComplete: Prototype.emptyFunction }; Object.extend(this.options, options || {}); this.element = $(element); var now = new Date(); this.element.id = this.element.id || this.element.identify(); this.cOpa = this.element.getOpacity() ? this.element.getOpacity()*100 : 0; this.bOpa = this.cPos; this.mNo = this.cOpa < this.options.opacity ? 1 : -1; ProcessInterval.set("opacity_"+this.element.id, this.process.bind(this)); ProcessInterval.setComplete("opacity_"+this.element.id, this.options.onComplete); }, // ·¹À̾ ¸ñÇ¥±îÁö ¸ð¼ÇÀ» ÃëÇϵµ·Ï °è¼Ó ½ÇÇàÇÑ´Ù. process : function() { var completeCheck = false; var speed = this.options.speed; var opacity = this.options.opacity; switch(this.options.mode) { case "regular" : this.cOpa+= Math.ceil((opacity-(this.bOpa))/(speed*2))+this.mNo; break; case "smooth" : this.cOpa+= Math.ceil((opacity-this.cOpa)/speed)+this.mNo; break; case "accel" : this.cOpa+= Math.ceil((opacity-(this.bOpa)-(opacity-this.cOpa))/(speed/2))+this.mNo; break; } if (opacity * this.mNo <= this.cOpa * this.mNo) { this.cOpa = opacity; completeCheck = true; } this.element.setOpacity(this.cOpa/100); if(completeCheck) { //var onComplete = this.options.onComplete.bind(this); //onComplete(); return false; } else { return true; } } }); Effect.Overlay = Class.create({ initialize : function(options) { // ±âº» option °´Ã¼¸¦ »ý¼ºÇÑ´Ù. this.options = { zIndex : 1000, smooth : true, opacity: 60, speed: 2, // Ŭ¼ö·Ï ´À·ÁÁü color:"#000000", onComplete: Prototype.emptyFunction }; Object.extend(this.options, options || {}); }, // ¿À¹ö·¹ÀÌ ·¹À̾ ÃʱâÈ­Çϰí È­¸éÀ» ¶ç¿î´Ù. show : function() { if(!$("overlayDiv")) { var arrayPageSize = getPageSize(); var elementHegiht = arrayPageSize[1]+"px"; this.element = new Element("div",{id:'overlayDiv'}); this.element.setStyle({ position : "absolute", top : "0px", left : "0px", width : "100%", height : elementHegiht, backgroundColor : this.options.color, zIndex : this.options.zIndex }); this.element.setOpacity((this.options.smooth?0:this.options.opacity)); this.currentOpacity = 0; $(document.body).insert(this.element); new Effect.Opacity("overlayDiv",{ opacity:this.options.opacity, speed:this.options.speed, onComplete:this.options.onComplete }); if(IE6) selectboxHidden("overlayDiv"); this.mouseDownHandler = this.doMouseDown.bindAsEventListener(this); this.mouseStopHandler = this.doMouseStop.bindAsEventListener(this); this.resizeWindowHandler = this.doResizeWindow.bindAsEventListener(this); this.element.observe("mousedown",this.mouseDownHandler); Event.observe(window, "resize",this.resizeWindowHandler); } }, // ¿À¹ö·¹À̸¦ »èÁ¦ÇÑ´Ù. hide : function() { if($("overlayDiv")) { if(IE6) selectboxVisible(); new Effect.Opacity("overlayDiv",{ opacity:0, speed:this.options.speed, onComplete : function() { Event.stopObserving(window,"resize",this.resizeWindowHandler); $("overlayDiv").remove(); }.bind(this) }); } }, doMouseDown : function() { document.observe('selectstart', this.mouseDragHandler); document.observe('dragstart', this.mouseDragHandler); $("overlayDiv").observe("mouseup",this.mouseStopHandler); }, doMouseStop : function() { document.stopObserving('selectstart', this.mouseDragHandler); document.stopObserving('dragstart', this.mouseDragHandler); $("overlayDiv").stopObserving("mousedown",this.mouseDownHandler); $("overlayDiv").stopObserving("mouseup",this.mouseStopHandler); }, doResizeWindow : function() { var arrayPageSize = getPageSize(); var elementHegiht = arrayPageSize[1]+"px"; $("overlayDiv").setStyle({ width : "100%", height : elementHegiht }); }, mouseDragHandler : function(e) { Event.stop(e); } }); Effect.Drag = Class.create({ // Ŭ·¡½º »ý¼ºÀÚ ÇÔ¼ö initialize: function(element, options) { // ±âº» option °´Ã¼¸¦ »ý¼ºÇÑ´Ù. this.options = { handler : "", onDragStart: Prototype.emptyFunction, onDragEnd : Prototype.emptyFunction }; Object.extend(this.options, options || {}); this.element = $(element); this.handler = $(this.options.handler); this.mouseDownHandler = this.doMouseDown.bindAsEventListener(this); this.mouseMoveHandler = this.doMove.bindAsEventListener(this); this.mouseStopHandler = this.doMoveStop.bindAsEventListener(this); this.mouseDragHandler = this.doDrag; if(this.handler) this.handler.observe('mousedown', this.mouseDownHandler); else 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++; this.options.onDragStart(); }, // ÇØ´ç °´Ã¼ À§¿¡¼­ ¸¶¿ì½º¸¦ ´©¸¥ »óÅ¿¡¼­ À̵¿ÇÏ¸é ÆË¾÷À» ¸¶¿ì½ºÀÇ À§Ä¡·Î À̵¿½ÃŲ´Ù. 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) { this.options.onDragEnd(); 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); } }); Effect.slideBar = Class.create({ // Ŭ·¡½º »ý¼ºÀÚ ÇÔ¼ö initialize: function(element, target) { this.element = $(element); this.target = $(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(); var offset = Position.cumulativeOffset(this.element); this.element._x = (e.pageX||e.clientX) - this.element.offsetLeft; document.observe('mousemove', this.mouseMoveHandler); document.observe('mouseup', this.mouseStopHandler); document.observe('selectstart', this.mouseDragHandler); document.observe('dragstart', this.mouseDragHandler); this.element.style.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"; }, // ¸¶¿ì½º Ŭ¸¯À» ³õÀ¸¸é À̵¿ÇÏ´Â À̺¥Æ®¸¦ »èÁ¦ÇÑ´Ù. 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); } }); Effect.StartLoading = function(element) { element = $(element); element.update("
"); }; var ProcessInterval = { timing : 30, entry : {}, entryComplete : {}, set : function(id, intance) { this.entry[id] = intance; if(!this.interval) this.start(); }, setComplete : function(id, intance) { this.entryComplete[id] = intance; if(!this.interval) this.start(); }, start : function() { this.interval = setInterval(this.excute, this.timing); }, excute : function() { var entry = ProcessInterval.entry; var entryComplete = ProcessInterval.entryComplete; if(entry.length <= 0) clearInterval(this.interval); for (var key in entry) { if(!entry[key].call()) { delete entry[key]; if(entryComplete[key]) { var complete = entryComplete[key]; delete entryComplete[key]; setTimeout(complete,100); } } } } };