/////////////ÀÌÀüÇÑ µðºñ¿¡¼­ÀÇ Å« »çÁø resize¸¦ À§ÇØ /////////////////
var resizePhoto = {
    vars : {"width":600, "element":"articleBody"},//ÃʱⰪ.. ¹¹ÇÏ¸é º»¹® Å×ÀÌºí ³ÐÀ̸¦ Àç¾î ¿Íµµ µÊ, ÇÑÁ¤ÁöÀ» elementById

    bind:function(obj, evt, fun){
        if(obj.addEventListener)    obj.addEventListener(evt, fun, false);
        else obj.attachEvent("on"+evt, fun);
    },

    init:function(){
        var  imgs = document.getElementById(resizePhoto.vars.element);///ÇÑÁ¤ÇÒ ºÎºÐ .. ¿©±â¼± ±â»ç º»¹® ÀÌ´Ï °Å±âºÎÅÍ À̹ÌÁö Ž»ö

        if(imgs && imgs!="undefined"){
            resizePhoto.vars.imgs=imgs;
            resizePhoto.findImgTags();
        }        
    },

    findImgTags:function(){//À̹ÌÁö ã±â
        var imgs = this.vars.imgs.getElementsByTagName('img');
        if(imgs.length>0){
            this.vars.imgObj=imgs;
            this.sizeOf();
        }
    },
    
    realSize:function(src){
        var img = document.createElement("img");
        img.src = src; //Ãß°¡ ½ÃŲÈÄ Å©±â¸¸ Àç¾î ¿È
        
        var _w = img.width;
        var _h = img.height;
        //document.body.appendChild(img);    
        //document.body.removeChild(img);//²Ü·° °Å¸®´Â°Ô ½È¾î¼­ ÁÖ¼®, ¹«½¼ÀÏ ÀÖÀ¸·Á³ª ¤Ñ¤Ña
        return {w:_w, h:_h};
    },

    sizeOf:function(){//»çÀÌÁî Á¶Àý
        var obj = this.vars.imgObj;

        for(var i=0; i<obj.length; i++){
            var realWidth = this.realSize(obj[i].src).w;//½ÇÁ¦ ³ÐÀÌ

            if(realWidth>this.vars.width && obj[i].width!="undefined"){
                var w = obj[i].width;//ÅÂ±× ³ÐÀÌ
                var h = obj[i].height;
                var src = obj[i].src;

                obj[i].setAttribute("width", w<this.vars.width?w:this.vars.width);
                obj[i].setAttribute("title", "Ŭ¸¯Çϸé Å« À̹ÌÁö·Î º¼¼ö ÀÖ½À´Ï´Ù.");
                obj[i].style.border = "2px solid #f4f4f4";
                this.clickPhotoEvt(obj[i], src, realWidth, h);
            }            
        }
    },

    clickPhotoEvt:function(obj, src, w, h){//À̺¥Æ® ÁÜ
        obj.style.cursor = "pointer";

        this.bind(obj, "mouseover", function(){
                                    obj.style.border = "2px solid #696969";
                                });

        this.bind(obj, "mouseout", function(){
                                    obj.style.border = "2px solid #f4f4f4";
                                });
        this.bind(obj, "click", function(){                                    
                                    resizePhoto.clickPhoto(src, w, h);
                                });

    },
    
    clickPhoto:function(src, w, h){//Ŭ¸¯
        this.positionLayer(src, w, h);
        this.bind(window, "resize", function(){  
                                                    if(document.getElementById("imgResizeView") || document.getElementById("imgResizeBox")){
                                                        resizePhoto.closeLayer();//¸®»çÀÌÁî ÇϱâÀü Á¦°Å
                                                        resizePhoto.positionLayer(src, w, h);
                                                    }else{//remove event
                                                        if(window.removeEventListener) window.removeEventListener("resize");
                                                        else window.detachEvent("resize");
                                                    }
                                                 });
    }, 

    positionLayer:function(src, w, h){//À̹ÌÁö ¶ç¿ì±â ½ÇÇà
        var cw = document.body.clientWidth >  document.body.scrollWidth ? document.body.clientWidth : document.body.scrollWidth;
        var ch = document.body.clientHeight > document.body.scrollHeight ? document.body.clientHeight : document.body.scrollHeight;
        var st = document.body.scrollTop;
        
        var xc = cw>w ? (cw/2)-(w/2) : 0; //°¡¿îµ¥ ã±â
        var tp = st + 10; //À§·Î ºÎÅÍ ¶ç¿ö¼­

        var tw = cw>w ? cw : w; //·¹À̾îÅ©±â , À̹ÌÁö°¡ ´õ Å©´Ù¸é À̹ÌÁö Å©±â·Î
        var th = (ch>h ? ch : h)+tp; //·¹À̾îÅ©±â , ÀÌÁö°¡ ´õ Å©´Ù¸é À̹ÌÁö Å©±â·Î + ½ºÅ©·Ñž
        
        xc = parseInt(xc);
        tp = parseInt(tp);
        tw = parseInt(tw);
        th = parseInt(th);

        //background div
        var div = document.createElement("div");
        div.setAttribute("width", tw);
        div.setAttribute("height", th);
        div.setAttribute("id", "imgResizeView");
        div.setAttribute("title", "Ŭ¸¯Çϸé À̹ÌÁö°¡ »ç¶óÁý´Ï´Ù.");
        div.style.position = "absolute";
        div.style.width = tw + "px";
        div.style.height = th + "px";
        div.style.top = "0px";
        div.style.left = "0px";
        div.style.backgroundColor = "#ccc";
        div.style.opacity = "0.5";
        div.style.filter = "alpha(opacity:50)";
        div.style.cursor = "pointer";
        this.bind(div, "click", resizePhoto.closeLayer);
        //if(div.addEventListener)    div.addEventListener("click", resizePhoto.closeLayer, false);
        //else div.attachEvent("onclick", resizePhoto.closeLayer);


        //À̹ÌÁö div    
        var imgDiv = document.createElement("div");
        imgDiv.setAttribute("width", w);
        imgDiv.setAttribute("height", h);
        imgDiv.setAttribute("id", "imgResizeBox");
        imgDiv.setAttribute("title", "Ŭ¸¯Çϸé À̹ÌÁö°¡ »ç¶óÁý´Ï´Ù.");
        imgDiv.style.position = "absolute";
        imgDiv.style.top = tp + "px";
        imgDiv.style.left = xc + "px";
        imgDiv.style.width = w + "px";
        imgDiv.style.height = h + "px";
        imgDiv.style.backgroundImage = "url("+src+")";
        imgDiv.style.cursor = "pointer";
        imgDiv.style.border = "3px solid #666";
        this.bind(imgDiv, "click", resizePhoto.closeLayer);
        //if(imgDiv.addEventListener)    imgDiv.addEventListener("click", resizePhoto.closeLayer, false);
        //else imgDiv.attachEvent("onclick", resizePhoto.closeLayer);
        
        /*±×³É ¹é±×¶ó¿îµå·Î ¾º¿ò
        var img = document.createElement("img");
        img.setAttribute("width", w);
        img.setAttribute("height", h);
        img.setAttribute("src", src);        
        img.style.width = w + "px";
        img.style.height = h + "px";
        img.style.cursor = "pointer";
        img.setAttribute("title", "Ŭ¸¯Çϸé À̹ÌÁö°¡ »ç¶óÁý´Ï´Ù.");
        if(img.addEventListener)    img.addEventListener("click", resizePhoto.closeLayer, false);
        else img.attachEvent("onclick", resizePhoto.closeLayer);
        
        imgDiv.appendChild(img);
        */
        

        document.body.appendChild(div); /////·¹ÀÌ¾î ¶ä.
        document.body.appendChild(imgDiv);    //±×À§¿¡ À̹ÌÁö(img´Â absolute ;;;
    },

    closeLayer:function(){
        var div = document.getElementById("imgResizeView");
        var imgbox = document.getElementById("imgResizeBox");

        if(imgbox) document.body.removeChild(imgbox);
        if(div) document.body.removeChild(div);
    }
}