/*--------------------------------------------------------------------------
 *  Whereis Zooming Photo Object, version 1.0.0
 *  (c) 2007 M&Soft, Inc.
 *--------------------------------------------------------------------------*/
 
function whereisZoomPhoto() {
	var defaultWidth = 200;
	var defaultHeight = 150;
	var borderWidth = 1;			// Å׵θ® 
	var photoMargin = 1;			// ¿©¹é
	var titleHeight = 30;
	
	var titlebarString = '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td background="/Images/Common/Photoview_backimg.gif"><img src="/Images/Common/Photoview_tit.gif" width="163" height="30"></td></tr></table>'
        //<table width='100%' height='100%' border=0><tr><td align=left>Whereis Photo Window</td></tr></table>";
	var loadingString = '<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="949494"><tr><td align="center" bgcolor="#FFFFFF"><img src="/Images/Common/Photoveiw_loadingimg.gif"></td></tr></table>';
        // "<table width='100%' height='100%' border=0><tr><td align=center>Loading..</td></tr></table>";
	var closebuttonString = '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="/Images/Common/Photoview_closebtn.gif" width="17" height="17" border="0"></td></tr></table>'
	var ZoomPhoto = Class.create();
	var zindex = 0;
	var framenumber = 0;
	var cnt=0;
	ZoomPhoto.prototype = {
		initialize:function(element, imgURL, autoPosition, useIframe) {
			this.useIframe = useIframe;
			this.autoPosition = autoPosition;

			// base
			this.base = this._createElementLayer(0, 0, defaultWidth, defaultHeight, '0px solid #ABABAB', 'base', 'hidden'); //this._createBaseLayer();
			this.base.hide();
			// iframe layer .. 
			if(this.useIframe) 	this.iframelayer = this._makeIframeLayer();
			else				this.iframelayer = null;
			// background layer..
			this.backgroundlayer = this._createElementLayer(0, 0, defaultWidth, defaultHeight, '1px solid #a2a2a2', 'background', '');
			// titlebar layer
			this.titlebar = this._makeTitlebar();
			// loading layer	
			this.loading = this._makeLoading();

			this.closebutton = this._makeCloseButton();
			this.titlebar.appendChild(this.closebutton);
		


			// add mouse move event to titlebar..
			Event.observe(this.titlebar, 'mousedown', this._movestart.bindAsEventListener(this));
			if(Prototype.Browser.IE) {
				Event.observe(this.titlebar, 'mousemove', this._moveprocess.bindAsEventListener(this));
				Event.observe(this.titlebar, 'mouseup', this._movestop.bindAsEventListener(this));
			} else {
				Event.observe(document, 'mousemove', this._moveprocess.bindAsEventListener(this));
				Event.observe(document, 'mouseup', this._movestop.bindAsEventListener(this));
			}
			this.dragging = false;
			
			
			this.imagebody = this._makeImageBody();
			this.image = this._makeImage();
			
			//this.imagebody.appendChild(this.image);
			///////////////////////////////////////////
			//alert(useIframe);
			this.imagebody.appendChild(this.image);
			element.appendChild(this.base);
			
			if(this.useIframe) {
				this.base.appendChild(this.iframelayer);			
			}
			this.base.appendChild(this.backgroundlayer);
			this.base.appendChild(this.loading);
			
			this.base.appendChild(this.titlebar);
			this.base.appendChild(this.imagebody);
			this.showImage(imgURL);
			///////////////////////////////////////////
		},
		_makeImageBody : function() {
			var X = borderWidth + photoMargin;
			var Y = borderWidth + titleHeight + photoMargin;
			var W = defaultWidth - (borderWidth*2) - (photoMargin*2);
			var H = defaultHeight - Y - photoMargin - borderWidth;
			var layer = this._createElementLayer(X, Y, W, H, '1px solid #949494', 'imagebody', '');
			layer.style.left = -10000; //hide();
			if(Prototype.Browser.IE)
				layer.style.cursor = 'hand';
			else
				layer.style.cursor = 'pointer';
			Event.observe(layer, 'click', this.close.bindAsEventListener(this));			
			return layer;
		},
		_makeLoading : function() {
			var X = borderWidth + photoMargin;
			var Y = borderWidth + titleHeight + photoMargin;
			var W = defaultWidth - (photoMargin*2) - (borderWidth*2);
			var H = defaultHeight - Y - photoMargin - borderWidth;
			
			var layer = this._createElementLayer(X, Y, W, H, '1px solid #ABABAB', 'loading', 'hidden');
			layer.update(loadingString);
			return layer;
		},
		_makeTitlebar : function() {
			// titlebar layer
			var layer = this._createElementLayer(borderWidth, borderWidth, defaultWidth-(borderWidth*2), titleHeight-(borderWidth*2), '0px solid red', 'titlebar', ''); 
			layer.style.filter="progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#CCCCCC)";
			layer.style.cursor = 'move';
			layer.update(titlebarString);
			return layer;
		},
		
		showImage : function(imgURL) {
			if(imgURL == '') {
				this.base.hide();
				return false;
			}
			this._beforeResizing();
			this.base.show();
			this.base.style.zIndex = zindex++;
			this.resetPosition();
			if(this.image)	{
				this.imagebody.removeChild(this.image);
				this.image = this._makeImage();
				this.imagebody.appendChild(this.image);
			}
			this.image.src = imgURL;
			
			//return;
			if(this.image.complete){			// ºê¶ó¿ìÀú¿¡¼­ ÇØ´çÀ̹ÌÁö¸¦ ÀÌ¹Ì ·ÎµùÇÏ¿© ij½ÃÇÏ´Â °æ¿ì true ÀÓ..
				this.loadCallBack.apply(this);
			} else {
				Event.observe(this.image, 'load', this.loadCallBack.bind(this));
			}
		},
		_makeImage : function() {
			var img;
			img = new Image();//new Element('img');
			img.style.position = 'absolute';
			img.style.left = 0;
			img.style.top = 0;
			return img;
		},
		_makeCloseButton : function() {
			var btnWidth = 17;
			var btnHeight = 17;
			var btnX = this._stripPx(this.titlebar.style.width) - btnWidth - 5;
			var layer = this._createElementLayer(btnX, 7, btnWidth, btnHeight, '0px solid #000000', 'closebtn', '');
			if(Prototype.Browser.IE)
				layer.style.cursor = 'hand';
			else
				layer.style.cursor = 'pointer';
			
			layer.update(closebuttonString);
			Event.observe(layer, 'click', this.close.bind(this));
			return layer;
		},
		close : function() {
			this.base.hide();		// ÇÏÀ§µµ ÀÚµ¿À¸·Î »èÁ¦µÊ
		},
	    _movestart : function(event) {
            if (!Event.isLeftClick(event)) return false;

            this.dragStartX = Event.pointerX(event);
            this.dragStartY = Event.pointerY(event);
            this.originX = this._stripPx(this.base.style.left);
            this.originY = this._stripPx(this.base.style.top);
            
            this.dragging = true;
			if(Prototype.Browser.IE) {
				this.titlebar.setCapture();
			}
	    	Event.stop(event);
            return false;			
	    },
	    _moveprocess : function(event) {
	    	if(this.dragging) {
	    		var X, Y;
	    		var evtX, evtY;
	    		var minY, maxY, minX, maxX;
	    		minX = window.document.body.scrollLeft;
    			maxX = this._stripPx(window.document.body.scrollLeft) + this._stripPx(window.document.body.clientWidth);
    			minY = window.document.body.scrollTop;
    			maxY = this._stripPx(window.document.body.scrollTop) + this._stripPx(window.document.body.clientHeight);
	    		evtX = (Event.pointerX(event) < minX) ? minX : (Event.pointerX(event) > maxX) ? maxX : Event.pointerX(event);
	    		evtY = (Event.pointerY(event) < minY) ? minY : (Event.pointerY(event) > maxY) ? maxY : Event.pointerY(event);
	    		
                var X = this.originX + (evtX - this.dragStartX);
				var Y = this.originY + (evtY - this.dragStartY);
                this.base.style.left = X; 
				this.base.style.top = Y;
				
                Event.stop(event);		//  ¹öºí ¹æÁö
			}
	    },
	    _movestop : function(event) {
	    	this.dragging = false;
   			if(Prototype.Browser.IE) {
				this.titlebar.releaseCapture();
			}

	    },
	    resetPosition : function() {
	    	if(this.autoPosition) {
		    	this.base.style.left = document.body.scrollLeft + (document.body.clientWidth - this._stripPx(this.base.style.width)) / 2;
		    	this.base.style.top = document.body.scrollTop + 100;
			}
	    	this.imagebody.style.left = -10000;
	    },
		loadCallBack : function() {
			var maxImgWidth = document.body.clientWidth - (photoMargin*2) - (borderWidth*2) - 50;		// °¡·Î ±âÁØ ½ºÄÉÀϸµ
			//var maxImgHeight = document.body.clientHeight - photoMargin * 2;
			var width = this.image.clientWidth;
			var height = this.image.clientHeight;
			//alert('image width = ' + width);
			if(width > maxImgWidth) {
				height = height * (maxImgWidth/width);
				width = maxImgWidth;
			}
			this.image.style.width = width;
			this.image.style.height = height;
			this.imagebody.style.width = width + 2;
			this.imagebody.style.height = height + 2;
			
			width = width + 1;
			var tW = width + (photoMargin*2) + (borderWidth*2) + 1;
			var tH = this._stripPx(this.imagebody.style.top) + this._stripPx(this.imagebody.style.height);
			this._delayResize.bind(this).delay(0.002, this.base, tW, tH+photoMargin+borderWidth);
		},
		_delayResize : function(element, w, h) {
			var r = 0.2;
			var oW = this._stripPx(element.style.width);
			var oH = this._stripPx(element.style.height);
			var tW = oW + Math.round((w - oW) * r);
			var tH = oH + Math.round((h - oH) * r);
			if( Math.abs(w-oW) <= 2) tW = w;
			if( Math.abs(h-oH) <= 2) tH = h;
			element.style.width = tW;//oW + Math.ceil((w - oW) * r);
			element.style.height = tH; //oH + Math.ceil((h - oH) * r);
			
			this.backgroundlayer.style.width = tW;
			this.backgroundlayer.style.height= tH;
			if(this.iframelayer) {
				this.iframelayer.style.width = tW;
				this.iframelayer.style.height = tH;
			}
			this.loading.style.width = tW - (photoMargin*2) - (borderWidth*2);
			this.loading.style.height = tH - (borderWidth + titleHeight + photoMargin) - photoMargin - borderWidth;

			this.titlebar.style.width = tW - (borderWidth*2);
			
			if(this.autoPosition)
	    		element.style.left = document.body.scrollLeft + (document.body.clientWidth - this._stripPx(element.style.width)) / 2;
			
			
			var btnX = this._stripPx(this.titlebar.style.width) - this._stripPx(this.closebutton.style.width) - 5;
			this.closebutton.style.left = btnX;
			
			if( ((w>oW)&&((w-oW)>0)) || ( (w<oW)&&((w-oW)<=0)) ) {
				this._delayResize.bind(this).delay(0.002, this.base, w, h);
			}
			else if(  ((h>oH)&&((h-oH)>0)) || ((h<oH)&&((h-oH)<=0)) ) {
				this._delayResize.bind(this).delay(0.002, this.base, w, h);
			}
			else {
				this._afterResizing();
			}
		},
		_beforeResizing : function() {
			this.loading.show();
		},
		_afterResizing : function() {
			this.loading.hide();
			this.imagebody.style.left = borderWidth + photoMargin;
		},
		_makeIframeLayer : function() {
			var frameid = 'if' + (framenumber++);
			var ifstring = '';
	        if(Prototype.Browser.IE){
				ifstring = '<iframe id=' + frameid + ' src="about:blank" width=100% height=100% frameborder="0" z-index="-10"></iframe>';
			} else {
				ifstring = 'this is not support iframe';
			}
			var iframelayer = this._createElementLayer(0,0,defaultWidth,defaultHeight,'0px solid green','iframelayer','');
			iframelayer.update(ifstring);
			iframelayer.frameid = frameid;
			return iframelayer;			
		},
		_createElementLayer : function(x, y, w, h, border, id, overflow) {
	        var layer = new Element('DIV');
	        layer.style.position = 'absolute';
	        layer.style.border = border; //'1px solid #ABABAB';
			layer.id = id;
			layer.style.left = x;
			layer.style.top = y;//this.titlebar.style.height;
			layer.style.width = w; // - (photoMargin*2)-1;
			layer.style.height = h; // - photoMargin;
			layer.style.overflow = overflow;
			layer.style.backgroundColor = '#EFEFEF';
			//layer.update('this is ' + id);
	        if(Prototype.Browser.IE){
	            layer.unselectable = "on";
	            layer.onselectstart = function() { return false;};
	        }
	        else{
	            layer.style.MozUserSelect = "none"
	        }
	        return layer;
	    	
	    },
	    _stripPx: function(value) {
				if (value == "") return 0;
				if (Object.isNumber(value)) return value;
				if (Object.isString(value))
                	return parseFloat(value.substring(0, value.length - 2));
		}
	    
	};
	window.ZoomPhoto = ZoomPhoto;
};
whereisZoomPhoto();