var photo = {
    top: 0,
    left: 0,
    divH: 0,
    divW: 0,
    level: 0,
    imgH: 0,
    imgW: 0,
    dx: 0,
    dy: 0,
    firstLoad: true,
    
    'init': function(){
        /*
         var img = document.getElementById('imgDetail');
         img.setAttribute("onmousedown", "{photo.down(event)}");
         img.setAttribute("onmouseup", "{photo.up}");
         */
    },
    'zoom': function(){
        clearInterval(photo.interval);
        document.getElementById('zoomdetail').style.display = "";
        //alert('--->');
        var v = document.getElementById('imageContainer');
        var img = document.getElementById('imgDetail');
        if (photo.firstLoad) {
            photo.imgH = img.height;
            photo.imgW = img.width;
            photo.firstLoad = false;
            // alert(img.height + "::" + img.width);
        }
        // alert(photo.imgH + ":::" + photo.imgW);
        img.style.top = 0;
        img.style.left = 0;
        photo.divW = v.offsetWidth;
        photo.divH = v.offsetHeight;
        
        photo.level = 0;
        
        //photo.dx = 15; //Math.round(Math.abs(Math.round(photo.imgW / 2) - Math.round(photo.divW / 2)) / 2);
        //photo.dy = 6; //Math.round(Math.abs(Math.round(photo.imgH / 2) - Math.round(photo.divH / 2)) / 2);
        
        // alert(photo.imgW + ":" + photo.imgH);
        var t = 2;
        if (photo.imgW > photo.imgH) {
            img.width = Math.round(photo.imgW / t);
            img.height = Math.round(photo.imgH / t);
            
            //style.left = "0 px";
            //var o = Math.round((img.width - photo.divH) / 2);
            //alert(o);
            img.style.left = Math.round((photo.divW / 2) - (img.width / 2)) + "px";
            img.style.top = Math.round((photo.divH / 2) - (img.height / 2)) + "px";
            
            photo.dx = 10;
            photo.dy = 13;
        }
        else {
            img.width = Math.round(photo.imgW / t);
            img.height = Math.round(photo.imgH / t);
            
            //var o = Math.round((img.height - photo.divW) / 2);
            //alert(o);
            img.style.left = Math.round((photo.divW / 2) - (img.width / 2)) + "px";
            img.style.top = Math.round((photo.divH / 2) - (img.height / 2)) + "px";
            
            photo.dx = 10;
            photo.dy = 13;
        }
        
        
    },
    'hide': function(){
        document.getElementById('zoomdetail').style.display = "none";
        clearInterval(photo.interval);
    },
    'zin': function(id){
        var img = document.getElementById(id);
        var i = 0;
        
        if (photo.level > 0) {
            photo.level--;
            photo.interval = setInterval(function(){
                photo.smooth(img, false, i++)
            }, 10);
        }
        
    },
    'zout': function(id){
        var img = document.getElementById(id);
        var i = 0;
        
        if (photo.level < 3) {
            photo.level++;
            photo.interval = setInterval(function(){
                photo.smooth(img, true, i++)
            }, 10);
        }
    },
    'smooth': function(img, Isplus, i){
        var h = img.offsetHeight;
        var w = img.offsetWidth;
        var t = parseInt(img.style.top + 0);
        var l = parseInt(img.style.left + 0);
        var k = 1.1;
        if (i == 5) {
            clearInterval(photo.interval);
        }
        else {
            if (Isplus) {
                img.height = (h * k);
                img.width = (w * k);
                
                img.style.left = (l - Math.round(((w * k) - w) / 2) - 0 * photo.dx) + "px";
                img.style.top = (t - Math.round(((h * k) - h) / 2) - 0 * photo.dy) + "px";
                
                photo.dx = Math.round(photo.dx * k);
                photo.dy = Math.round(photo.dy * k);
                
                //alert(photo.dx + ":" + photo.dy);
            }
            else {
                img.height = (h / k);
                img.width = (w / k);
                
                img.style.left = (l + Math.round((w - (w / k)) / 2) - 0 * photo.dx) + "px";
                img.style.top = (t + Math.round((h - (h / k)) / 2) - 0 * photo.dy) + "px"; // - (photo.dy / 4)) + "px";
                photo.dx = Math.round(photo.dx / k);
                photo.dy = Math.round(photo.dy / k);
                
                //alert(photo.dx + ":" + photo.dy);
            }
        }
    }
}

if (document.getElementById) {

    (function(){
    
        //Stop Opera selecting anything whilst dragging.
        if (window.opera) {
            document.write("<input type='hidden' id='Q' value=' '>");
        }
        
        var n = 500;
        var dragok = false;
        var y, x, d, dy, dx;
        
        function move(e){
            if (!e) 
                e = window.event;
            if (dragok) {
                var ll = dx + e.clientX - x;
                var tt = dy + e.clientY - y;
                
                var h = d.offsetHeight;
                var w = d.offsetWidth;
                
                var r = w + ll;
                var b = h + tt;
                
                if (ll > 0 && tt > 0) {
                    d.style.left = "0 px";
                    d.style.top = "0 px";
                }
                else {
                
                    if (r < photo.divW && b < photo.divH) {
                        d.style.left = ll + (photo.divW - r) + "px";
                        d.style.top = tt + (photo.divH - b) + "px";
                    }
                    else {
                        d.style.left = ll + "px";
                        d.style.top = tt + "px";
                    }
                }
                return false;
            }
        }
        
        function down(e){
            if (!e) 
                e = window.event;
            
            var tg = (window.event) ? e.srcElement : e.target;
            if (tg.nodeName != 'IMG') 
                return;
            else {
                var temp = document.getElementById('imgDetail');
                if (temp != null) {
                    if (temp.className == "dragclass") {
                        dragok = true;
                        temp.style.zIndex = 500;
                        
                        //the img
                        d = temp;
                        
                        //left top hien tai
                        dx = parseInt(temp.style.left + 0);
                        dy = parseInt(temp.style.top + 0);
                        
                        //toa do chuot
                        x = e.clientX;
                        y = e.clientY;
                        
                        document.onmousemove = move;
                        return false;
                    }
                }
            }
        }
        
        function up(){
            dragok = false;
            document.onmousemove = null;
        }
        
        document.onmousedown = down;
        document.onmouseup = up;
        
    })();
}//End.