var img_curw,img_curh,img_h=0,img_w=0;
var img_sx,img_sy,img_sh,img_sw,smel;
function zoomin() {
    var picel=document.getElementById("PIC");
    if (img_w==0) {
        img_w=picel.width;
        img_h=picel.height;
        smel=document.getElementById("SMBORD");
        img_sx=parseInt(smel.style.left);
        img_sy=parseInt(smel.style.top);
        img_sh=smel.height;
        img_sw=smel.width;
//alert(img_w+','+img_h+';'+img_sx+','+img_sy+','+img_sw+','+img_sh)
        }
    picel.width += 100;
    picel.style.top=(parseInt(picel.style.top)-50)+'px';
    picel.style.left=(parseInt(picel.style.left)-50)+'px';
    img_curw=picel.width;
    img_curh=picel.height;
    upsmall(picel);
    }

function zoomout() {
    var picel=document.getElementById("PIC");
    if (picel.width > img_w) {
        picel.width -= 100;
        picel.style.top=(parseInt(picel.style.top)+50)+'px';
        picel.style.left=(parseInt(picel.style.left)+50)+'px';
        img_curw=picel.width;
        img_curh=picel.height;
        chkbound(picel);
        }
    }

function fullimage() {
    var picel=document.getElementById("PIC");
    picel.width=img_w;
    picel.style.top='0px';
    picel.style.left='0px';
    img_curw=picel.width;
    img_curh=picel.height;
    upsmall(picel);
    }

function chkbound(me) {
//    var el=document.getElementById('test');
//    el.innerHTML=me.style.top+','+me.style.left+','+img_curh+','+img_curw+' ('+img_h+','+img_w+')';
    if (parseInt(me.style.top)>0)
        me.style.top="0px";
    if (parseInt(me.style.left)>0)
        me.style.left="0px";
    if (parseInt(me.style.top)+img_curh<img_h)
        me.style.top=img_h-img_curh+"px";
    if (parseInt(me.style.left)+img_curw<img_w)
        me.style.left=img_w-img_curw+"px";
    upsmall(me);
    }

function upsmall(me) {
//alert(img_sh+','+me.style.top+','+me.height);
    smel.style.top=Math.round(-parseInt(me.style.top)/me.height*img_sh)+'px';
    smel.style.left=Math.round(-parseInt(me.style.left)/me.width*img_sw)+'px';
    smel.style.height=img_h/me.height*img_sh+'px';
    smel.style.width=img_w/me.width*img_sw+'px';
//    var el=document.getElementById('test');
//    el.innerHTML=me.style.top+','+me.style.left+','+img_curh+','+img_curw+' ('+img_h+','+img_w+'); '+smel.style.top+','+smel.style.left+','+smel.style.height+','+smel.style.width;
    }

var box,deltaX,deltaY,deltasX,deltasY;

function Evt(evt) {
    evt = window.event ? window.event : evt;
    this.evt = evt;
    this.source = evt.target ? evt.target : evt.srcElement;
    this.x = evt.pageX ? evt.pageX : evt.clientX;
    this.y = evt.pageY ? evt.pageY : evt.clientY;
    if (this.evt.stopPropagation) {
        this.evt.stopPropagation();
        this.evt.preventDefault();
        }
    else {
        this.evt.cancelBubble = true;
        this.evt.returnValue = false;
        }
    }

function dragPress(evt) {
    evt = new Evt(evt);
    box=evt.source;
    if (parseInt(box.style.left)<0 || parseInt(box.style.top)<0) {
        deltaX=evt.x;
        deltaY=evt.y;
        if (parseInt(box.style.left)<0)
            deltaX = evt.x-parseInt(box.style.left);
        if (parseInt(box.style.top)<0)
            deltaY = evt.y-parseInt(box.style.top);
        box.style.cursor='move';
        box.onmousemove= dragMove;
        box.onmouseup= dragRelease;
        box.onmouseout=dragRelease;
//      box.onmouseout= dragStop;
//      box.onmouseout= dragMove;
        }
    }

function nodrag(evt) {
    return;
    }

function dragMove(evt) {
    var evt = new Evt(evt);
    var newx=evt.x-deltaX;
    var newy=evt.y-deltaY;
//    if (newx<0)
        box.style.left = newx+'px';
//    if (newy<0)
        box.style.top = newy+'px';
    chkbound(box);
    }

function dragPressSM(evt) {
    var evt = new Evt(evt);
    box=evt.source;
        deltasX=evt.x;
        deltasY=evt.y;
        box.style.cursor='move';
        box.onmousemove= dragMoveSM;
        box.onmouseup= dragRelease;
        box.onmouseout=dragRelease;
    }

function dragMoveSM(evt) {
    var evt = new Evt(evt);
    var newx=evt.x-deltasX;
    var newy=evt.y-deltasY;
//    var el=document.getElementById('test');
//    el.innerHTML=box.style.top+','+box.style.left+','+box.height+','+box.width+','+newy+','+newx;
    if (newx+parseInt(box.style.left)>=0 && newx+parseInt(box.style.left)+box.width<img_sw)
        box.style.left = parseInt(box.style.left)+newx+'px';
    if (newy+parseInt(box.style.top)>=0 && newy+parseInt(box.style.top)+box.height<img_sh)
        box.style.top = parseInt(box.style.top)+newy+'px';
    var el=document.getElementById('PIC');
    el.style.top=-Math.round(parseInt(box.style.top)/box.height*img_h)+'px';
    el.style.left=-Math.round(parseInt(box.style.left)/box.width*img_w)+'px';
//    var el=document.getElementById('test');
//    el.innerHTML=box.style.top+','+box.style.left+','+newx+','+newy;
    }

function dragRelease(evt) {
    var evt = new Evt(evt);
    box.style.cursor='auto';
    box.onmousemove = null;
    box.onmouseup = null;
    box.onmouseout = null;
    }