var sp=5;
    var tc;
    var blFlag = false;
    var blFirstLoad = true;
    var blIsimgDrag = false;
    var Prex,Prey,Pimgp;
    var imgx,imgy;
    var tempx,tempy;
    if(document.getElementById("pre") != null || document.getElementById("pre") != undefined){
        imgx = document.getElementById("pic").width;
        imgy = document.getElementById("pic").height;
    }
    
    if(document.getElementById("pre") != null || document.getElementById("pre") != undefined){        
        var Pimgx=document.getElementById("pic").width;
        var Pimgy=document.getElementById("pic").height;
    }
    function imgScroll(d){
        var ptx=o.scrollLeft;
        var pty=o.scrollTop;
        if(tc) clearInterval(tc);
        if(d=="up"){
        tc=setInterval("up()",30);
        }
        else if(d=="down"){
            tc=setInterval("down()",30);
        }
        else if(d=="left"){
            tc=setInterval("left()",30);
        }
        else if(d=="right"){
            tc=setInterval("right()",30);
        }
        else{
            return alert("对不起，操作失败。");
        }
    }
    function up() {o.scrollTop -= sp;
        document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}
    function down() {o.scrollTop += sp;
        document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}
    function left() {o.scrollLeft -= sp;
        document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}
    function right() {o.scrollLeft += sp;
        document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}
    function mvStop()
    {
        if(tc) clearInterval(tc);
    }
    
    //***************************
    //屏蔽鼠标右键
    
    if (window.Event) 
    document.captureEvents(Event.MOUSEUP); 

    function nocontextmenu(){
        event.cancelBubble = true
        event.returnValue = false;
        return false;
    }

    function norightclick(e){
        if (window.Event){
            if (e.which == 2 || e.which == 3)
            return false;
        }
        else if (event.button == 2 || event.button == 3){
            event.cancelBubble = true
            event.returnValue = false;
            return false;
        }
    }

    if(document.getElementById("pre") != null || document.getElementById("pre") != undefined){
        document.oncontextmenu = nocontextmenu;     //对ie5.0以上
        document.onmousedown = norightclick;        //对其它浏览器    
    }
    //屏蔽鼠标右键结束
    //****************************

    preImgInit(imgx,imgy);
    var o=document.getElementById("imgShow");

    function preImgInit(imgx,imgy){        
        if(document.getElementById("pre") != null || document.getElementById("pre") != undefined){ 
            if(imgx > 650 || imgy > 488)
            {                
                document.getElementById("imgShow").className = "imgdiv2";
                blIsimgDrag = true;
            }
            else 
            {
                document.getElementById("imgShow").className = "imgdiv";
                blIsimgDrag = false;
            }
            
            if(imgx>=imgy)
            {                
                document.getElementById("pre").style.width="100%";
                document.getElementById("pre").style.height=imgy/imgx*100+"%";
                prep=document.getElementById("pre").clientWidth/imgx;
                imgp=document.getElementById("imgShow").clientWidth/imgx;
                Pimgp=imgp;
                if(imgx<=650){
                    document.getElementById("dragDiv").style.width = document.getElementById("pre").clientWidth+"px";
                    Prex = document.getElementById("pre").clientWidth;                    
                }
                else{
                    document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientWidth+"px";                
                    Prex = imgp*document.getElementById("pre").clientWidth;
                }
                if(imgy<=488){
                    document.getElementById("dragDiv").style.height = document.getElementById("pre").clientHeight+"px";
                    Prey = document.getElementById("pre").clientHeight;
                    document.getElementById("imgShow").top = (488 - imgx)/2 + "px";
                }
                else{
                    document.getElementById("dragDiv").style.height=document.getElementById("imgShow").clientHeight/imgx*document.getElementById("pre").clientWidth+"px";
                    Prey = imgp*document.getElementById("pre").clientHeight;
                    document.getElementById("imgShow").top = "0px";
                }
                document.getElementById("pre").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";
                document.getElementById("dragDiv").style.left=(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+"px";
                document.getElementById("dragDiv").style.top=(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").height)/2+1*prep+"px";   
	    }
            else
            {   
                document.getElementById("pre").style.height="100%";
                document.getElementById("pre").style.width=imgx/imgy*100+"%";
                prep=document.getElementById("pre").clientHeight/imgy;
                imgp=document.getElementById("imgShow").clientHeight/imgy;
                if(imgx<=650){
                    document.getElementById("dragDiv").style.width = document.getElementById("pre").clientWidth+"px";
                    Prex = document.getElementById("pre").clientWidth;
                }
                else{
                     document.getElementById("dragDiv").style.width=document.getElementById("imgShow").clientWidth/imgx*document.getElementById("pre").clientWidth+"px";
                       
                }
                if(imgy<=488){
                    document.getElementById("dragDiv").style.height = document.getElementById("pre").clientHeight+"px";
                    Prey = document.getElementById("pre").clientHeight;
                }
                else{
                    document.getElementById("dragDiv").style.height=document.getElementById("imgShow").clientHeight/imgx*document.getElementById("pre").clientWidth+"px";
                    
                }
                document.getElementById("pre").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";
                document.getElementById("dragDiv").style.left=(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+"px";
                document.getElementById("dragDiv").style.top=(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").height)/2+1*prep+"px";
               }
            document.getElementById("imgShow").scrollTop = -imgy;
            document.getElementById("imgShow").scrollLeft = -imgx;
        }
    }   

    
    function DlibSliderBar(id,callback) { with(this) {
            this.$            = document.getElementById || document.all;
            this.sldID        = id;
            this.sldObj       = null;
            this.instance     = this;
            this.barStyle     = "sliderBar";
            this.objStyle     = "sliderObj";
            this.btnStyle     = "sliderBtn";
            this.sldBar       = null;
            this.sldBtnL      = null;
            this.sldBtnR      = null;
            this.sldPoint     = null;
            this.sldMoved     = false;
            this.sldClicked   = false;
            this.callback     = callback;
            this.sldObjOffset = null;
            this.sldBarOffset = null;
            this.callbackArg  = Array.prototype.slice.call(arguments,2);
            this.sldMax       = 100;
            this.sldIncrement = 5;
            this.sldPoint     = 0;
            //instance.init.call(this,id);
        }
    }
    DlibSliderBar.prototype.setObjStyle=function(classname) { with(this)
        {   
            objStyle=classname;
        }
    }
    DlibSliderBar.prototype.setMaxPoint=function(maxpoint) { with(this)
        {
            sldMax=maxpoint;
        }
    }
    DlibSliderBar.prototype.setBtnStyle=function(classname) { with(this)
        {
        btnStyle=classname;
        }
    }
    DlibSliderBar.prototype.setBarStyle=function(classname) { with(this)
        {
            barStyle=classname;
        }
    }
    DlibSliderBar.prototype.setStyle=function() { with(this)
        {
            if (arguments[0]) barStyle=arguments[0];
            if (arguments[1]) btnStyle=arguments[1];
            if (arguments[2]) objStyle=arguments[2];
        }
    }
    DlibSliderBar.prototype.setIncrement=function(increment) { with(this)
        {
            if (isNaN(parseInt(increment))) return;
            sldIncrement = parseInt(increment);
        }
    }
    DlibSliderBar.prototype.getSldPoint=function() { with(this)
        {
            sldBarOffset = Offset(sldBar);
            sldObjOffset = Offset(sldObj);
            if(sldObjOffset == null) return;
            var sldObjwidth = sldObjOffset.w-sldBarOffset.w;
            var sldBarwidth = sldBarOffset.l-sldObjOffset.l;
            var sldLocation = parseInt(sldBarwidth/sldObjwidth*sldMax);
            return sldLocation;
        }
    }
    DlibSliderBar.prototype.setSldPoint=function(point) { with(this)
        {
            if (isNaN(parseInt(point))) return;
            if (point<0) point=0;
            if (point>sldMax) point=sldMax;
            if(sldObjOffset == null) return;
            var sldObjwidth  = sldObjOffset.w-sldBarOffset.w;
            var sldBarwidth  = sldBarOffset.l-sldObjOffset.l;
            sldPoint  = parseInt(point);
            var p = parseInt(sldPoint*sldObjwidth/sldMax)+sldObjOffset.l+1;
            sldBar.style.left = p;
            instance.getSldPoint();
        }
    }

    DlibSliderBar.prototype.init=function() { with(this)
        {   
            if ($(sldID + '__BtnL') && $(sldID + '__BtnR') && $(sldID + '__Bar')) {
            sldBtnL = $(sldID + '__BtnL');
            sldBar  = $(sldID + '__Bar');
            sldBtnR = $(sldID + '__BtnR');
        }
        else {
            sldBtnL    = document.createElement("BUTTON");
            sldBtnL.id = sldID + '__BtnL';
            sldBar     = document.createElement("DIV");
            sldBar.id  = sldID + '__Bar';
            sldBtnR    = document.createElement("BUTTON");
            sldBtnR.id = sldID + '__BtnR';
            document.body.appendChild(sldBtnL);
            document.body.appendChild(sldBar);
            document.body.appendChild(sldBtnR);
        }
        //-------------------------------------------------------------------
        sldObj           = $(sldID);
        if(sldObj != null) 
        sldObj.className = objStyle;
        sldBarOffset     = Offset(sldBar);
        sldObjOffset     = Offset(sldObj);
        //-------------------------------------------------------------------
        sldBtnL.value          = "";
        sldBtnL.className      = btnStyle;
        sldBtnL.style.position = "absolute";
        //-------------------------------------------------------------------
        sldBtnR.value          = "";
        sldBtnR.className      = "sliderBtnR";
        sldBtnR.style.position = "absolute";
        //-------------------------------------------------------------------
        sldBar.className       = barStyle;
        sldBar.style.position  = "absolute";
        if(sldObjOffset == null) return;
        sldBar.style.top       = sldObjOffset.t;
        sldBar.style.height    = sldObjOffset.h; 
        sldBar.style.left      = sldObjOffset.l;
        instance.fixed();
        //-------------------------------------------------------------------
        sldObj.onmousedown = function() {instance.handleObjBefore()};
        sldObj.onmouseup   = function() {instance.handleObjAfter()};
        sldObj.onclick = function() {instance.sliderclicked();}
        //-------------------------------------------------------------------
        sldBtnL.onmousedown = function() {instance.handleBtnClick('l')};
        sldBtnR.onmousedown = function() {instance.handleBtnClick('r')};
        sldBtnL.onfocus     = function() {this.blur()};
        sldBtnR.onfocus     = function() {this.blur()};
        //-------------------------------------------------------------------
        sldBar.onmousedown = function() {instance.handleSldDragStart()};
        sldBar.onmousemove = function() {instance.handleSldDrag()};
        sldBar.onmouseup   = function() {instance.handleSldDragEnd()};
        //-------------------------------------------------------------------
        
        }
    }
    DlibSliderBar.prototype.fixed=function() { with(this)
        {
            sldBarOffset = Offset(sldBar);
            sldObjOffset = Offset(sldObj);

            var sldBtnLOffset      = Offset(sldBtnL);
            sldBtnL.style.left     = sldObjOffset.l-sldBtnLOffset.w;
            sldBtnL.style.top      = sldObjOffset.t;
            sldBtnL.style.height   = sldObjOffset.h;
            //-------------------------------------------------------------------
            sldBtnR.style.left     = sldObjOffset.l+sldObjOffset.w;
            sldBtnR.style.top      = sldObjOffset.t;
            sldBtnR.style.height   = sldObjOffset.h;
            //-------------------------------------------------------------------
            sldBar.style.top       = sldObjOffset.t;
            sldBar.style.height    = sldObjOffset.h;
            //-------------------------------------------------------------------
            var p = sldBarOffset.l;
            if (p < sldObjOffset.l) sldBar.style.left=sldObjOffset.l;
            var w = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;
            if (p > w) sldBar.style.left = w;
            window.setTimeout(function(){instance.fixed()},10)
        }
    }
    DlibSliderBar.prototype.applyArg=function() { with(this)
        {
            if (typeof(callback)=='string') callback=eval(callback);
            if (typeof(callback)=='function') {
            var callbackArguments = [];
            for(var i=0; i<callbackArg.length; i++)
                callbackArguments[i] = callbackArg[i];
            callbackArguments.push(instance.getSldPoint());
            callback.apply(this,callbackArguments);
        } else { return; }
        }
    }
    DlibSliderBar.prototype.handleObjBefore=function() { with(this)
        {

        }
    }
    DlibSliderBar.prototype.handleObjAfter=function() { with(this)
        {

        }
    }
    DlibSliderBar.prototype.handleBtnClick=function(direction) { with(this)
        {   
            direction = direction.toLowerCase();
            sldPoint=instance.getSldPoint();
            if(direction == 'l') {
                instance.setSldPoint(this.sldPoint-sldIncrement);
            }
            else if (direction=='r') {
                instance.setSldPoint(this.sldPoint+sldIncrement);
            }
            else {
                return alert('not valid argument ' +direction);
            }
            instance.applyArg();
            instance.getSldPoint();
        }
    }
    DlibSliderBar.prototype.handleSldDragStart=function() { with(this)
        {
            sldBar.setCapture();
            sldMoved = true;
            sldBar.onlosecapture = function(){sldMoved=false;};
            sldPoint = event.clientX-sldBarOffset.l;
        }
    }
    DlibSliderBar.prototype.handleSldDrag=function() { with(this)
        {
            if(!sldMoved) return;
            var p = event.clientX-sldPoint;
            if (p <= sldObjOffset.l) {
                sldBar.style.left = sldObjOffset.l;
            }
            else if (p >= (sldObjOffset.l+sldObjOffset.w-sldBarOffset.w)) {
                sldBar.style.left = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;
            }
            else sldBar.style.left = p;
            instance.applyArg();
            instance.getSldPoint();
        }
    }
    DlibSliderBar.prototype.handleSldDragEnd=function() { with(this)
        {
            sldBar.releaseCapture();
            sldMoved=false;
        }
    }
    DlibSliderBar.prototype.sliderclicked=function() { with(this)
            var p = event.clientX;
            var sldObjOffset = Offset(this.sldObj);
            var sldBarOffset = Offset(this.sldBar); 
            if(sldObjOffset == null || sldBarOffset == null) return;
            if (p <= sldObjOffset.l +sldBarOffset.w/2) {
                this.sldBar.style.left = sldObjOffset.l;
            }
            else if (p >= (sldObjOffset.l+sldObjOffset.w-sldBarOffset.w)) {
                this.sldBar.style.left = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;
            }
            else this.sldBar.style.left = p-sldBarOffset.w/2;
            this.instance.applyArg();
            this.instance.getSldPoint();
    }
    function Offset(e) {
        if(e == null) return;
        var t = e.offsetTop;
        var l = e.offsetLeft;
        var w = e.offsetWidth;
        var h = e.offsetHeight;
        while(e=e.offsetParent) {
            t+=e.offsetTop;
            l+=e.offsetLeft;
        }
        return { t:t, l:l, w:w, h:h }
    }

    function DlibSliderReset(){    
        if(document.getElementById("pre") != null || document.getElementById("pre") != undefined){ 
            if(blFlag){                
                Slider.setSldPoint(50);
                document.getElementById("Svalue").innerHTML = "100%";
                document.getElementById("pic").style.width = Pimgx*1+"px";
                document.getElementById("pic").style.height = Pimgy*1+"px";
                preImgInit(imgx*1,imgy*1); 
                
            }            
        }
    }
    function SetAllin(){
        if(document.getElementById("pre") != null || document.getElementById("pre") != undefined){ 
            if(imgx>=imgy){
                if(imgy*(650/imgx) < 488){
                    preImgInit(650,imgy*(650/imgx)); 
                    var nPot = parseInt((650/imgx)*100);
                    Slider.setSldPoint(nPot-50);
                    document.getElementById("Svalue").innerHTML = nPot +"%";
                    document.getElementById("pic").style.width = 650+"px";
                    document.getElementById("pic").style.height = imgy*(650/imgx)+"px";
                }
                else {
                    preImgInit(imgx*(488/imgy),488); 
                    nPot = parseInt((488/imgy)*100);
                    Slider.setSldPoint(nPot-50);
                    document.getElementById("Svalue").innerHTML = nPot.toString() +"%";
                    document.getElementById("pic").style.width = imgx*(488/imgy)+"px";
                    document.getElementById("pic").style.height = 488+"px";
                }    
            }
	        else{
                preImgInit(imgx*(488/imgy),488); 
                nPot = parseInt((488/imgy)*100);
                Slider.setSldPoint(nPot-50);
                document.getElementById("Svalue").innerHTML = nPot.toString() +"%";
                document.getElementById("pic").style.width = imgx*(488/imgy)+"px";
                document.getElementById("pic").style.height = 488+"px";
            }
            document.getElementById("imgShow").className = "imgdiv2";
            blFlag = true;
        }
    }
    if(document.getElementById("pre") != null || document.getElementById("pre") != undefined){
        var Slider=new DlibSliderBar("Slider",callback,'  ');
        Slider.sldMax=150;
        Slider.setBtnStyle("sliderBtn");
        Slider.setBarStyle("sliderBar");
        Slider.setObjStyle("sliderObj");
        Slider.init();
        Slider.setSldPoint(50);
        callback('  ');
         Slider.setSldPoint(50);
    }
    function callback(s) {
        if(document.getElementById("pic") == null || document.getElementById("pic") == undefined ){
            return;
        }
        if(document.getElementById("dragDiv") == null || document.getElementById("dragDiv") ==undefined){
            return;
        }
        if(document.getElementById("pre") == null || document.getElementById("pre") ==undefined){
            return;
        }
        var $=document.getElementById;
        var Svalue=Slider.getSldPoint();
        if(Svalue == null || s == null ) return;        
        var svalue = parseInt(s+Svalue)+50;
        $("Svalue").innerHTML=svalue.toString()+"%";
        if(blFirstLoad){        
            if(Pimgx*svalue/100 <= 30 &&  Pimgy*svalue/100 <= 30 && Pimgx*svalue/100 > 0 && Pimgy*svalue/100 > 0){
                blFirstLoad = false;
                var strHref = location.href;
                var nReload = 0;
                if(strHref.substring(strHref.lastIndexOf('#')) == "#1")
                {
                    strHref = strHref.substring(0,strHref.length-3);
                }
                var strReNum = request("nReNum"); 
                if(strReNum != "") {               
                    nReload = parseInt(strReNum.toString())+1;
                    strReNum = nReload.toString();
                }
                else{
                    strReNum = 1;     
                }   
                strHref = strHref + "&nReNum=" + strReNum + "#1";
                if(nReload == 1){                
                    window.location.href = strHref;
                }
                return;
            }
        }        
        document.getElementById("pic").style.width = Pimgx*svalue/100+"px";
        document.getElementById("pic").style.height = Pimgy*svalue/100+"px";
        var nWidthFlag = 0;
        var nHeightFlag = 0;        
        if(imgx>=imgy)
        {
            if(Pimgy*svalue/100<488)
            {
                nHeightFlag = 1;
            }
            if(Pimgx*svalue/100<650)
            {
                nWidthFlag = 1;
            }
        }
        else
        {
            if(Pimgy*svalue/100<488)
            {
                nHeightFlag = 1;
            }
            if(Pimgx*svalue/100<650)
            {
                nWidthFlag = 1;
            }
        }
        if(svalue/100 != 1){        
            blFlag = true;
        }
        else{        
             blFlag = false;
        }
        if(svalue/100 > 1){
            preImgInit(imgx*(svalue/100),imgy*(svalue/100));                     
        }
        else if(svalue/100 < 1){
            if(nWidthFlag == 1){          
                document.getElementById("dragDiv").style.width = document.getElementById("pre").clientWidth;
                document.getElementById("dragDiv").style.left = document.getElementById("pre").offsetLeft;
            }
            if(nHeightFlag == 1){            
                document.getElementById("dragDiv").style.height = document.getElementById("pre").clientHeight;
                document.getElementById("dragDiv").style.top = document.getElementById("pre").offsetTop;
            } 
            nHeightFlag = 0;
            nWidthFlag = 0;      
        }
        if(imgx*(svalue/100) >= 650 || imgy*(svalue/100) >= 488){   
            document.getElementById("imgShow").className = "imgdiv2";
            blIsimgDrag = true;
        }
        else {
            document.getElementById("imgShow").className = "imgdiv";
            blIsimgDrag = false;
        }
    }    

    if(document.getElementById("pre") != null || document.getElementById("pre") != undefined){
        document.body.onselectstart=function(){return false};        
    }
    else{
        document.body.onselectstart=function(){return true};
    } 
    
    function request(paras){ 
        var url = location.href;  
        var paraString = url.substring(url.indexOf("?")+1).split("&");  
        var paraObj = {}  
        for (i=0; j=paraString[i]; i++){  
            paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);  
        }  
        var returnValue = paraObj[paras.toLowerCase()];  
        if(typeof(returnValue)=="undefined"){  
            return "";  
        }
        else{  
            return returnValue;  
        }  
    }

  
    
//    if(document.getElementById("pic").offsetWidth <= 30 && document.getElementById("pic").offsetHeigh <= 30)
//    {
//         
//    }