// image manager for JavaScript
    theHeight=360
    currentX=0
    currentY=0
    startX=0
    startY=0
    inDrag=false
    
    curheight=theHeight
    var img = new Image
    if (img.addEventListener) {
        img.addEventListener("load",changeBkgrnd,false)          
    } else {
        img.onload=changeBkgrnd       
    }
    orgpic=thepic
    centerX=0
    centerY=0
    var waiting = new Image
    waiting.src="/images/pleasewait.gif"
    curimgsrc=""
    function switchImg(someImage) {
        if (document.getElementById("theShoeImage") == undefined) {
            someImage = someImage.replace("/resize/resizeimg.aspx?img=", "")
            document.theShoeimg.src = someImage
            newImage = new Image()
            newImage.src = someImage
            document.theShoeimg.height = newImage.height
            document.theShoeimg.width=newImage.width            
            htow = newImage.height / newImage.width
            wtoh =newImage.width / newImage.height
            if (newImage.height > 360) {
                document.theShoeimg.height = 360
                document.theShoeimg.width = 360 * wtoh                
            }
            if (document.theShoeimg.width > 360) {
                document.theShoeimg.width = 360
                document.theShoeimg.height = 360 * htow
            }            
        } else {
            currentX = 0
            currentY = 0
            theHeight = 360
            thepic = someImage
            dispImage(360)
        }
    }
    function dispImage(someHeight) {
       theHeight=someHeight
       img.src=thepic+"&height=" + theHeight
       x=0       
       if ((curimgsrc!=thepic || curheight!=someHeight) && !img.complete) {          
          //document.getElementById("theShoeImage").innerHTML="<table width=100% height=100%><tr><td width=100% height=100% align=center valign=center><img src=/images/pleasewait.gif></td></tr></table>"
          curimgsrc=thepic
          curheight=someHeight
       }

    }
    function changeBkgrnd() {
        theShoe=document.getElementById("theShoeImage") 
        theImage=document.getElementById("theShoeImg")        
	theImage.src=thepic+"&height=" + theHeight
	divW=theShoe.style.width
	divW=divW.replace("px","")
	divH=theShoe.style.height
	divH=divH.replace("px","")
	centerX=divW/2-img.width/2
	centerY=divH/2-img.height/2
	theX=centerX+currentX	
	theImage.style.marginLeft=theX+"px"
	theImage.style.marginTop = centerY+currentY +"px"
    }
    function zoomIn(howmuch) {
         theHeight=theHeight+howmuch
         dispImage(theHeight)
    }
    function zoomMouseDown(event) {
        if (!event) {
            event=window.event
        }
        
        if (event.pageX) {
            startX=event.pageX
            startY=event.pageY
        } else  if (event.clientX) {
            startX=event.clientX
            startY=event.clientY
        } else {
            return
        }
        inDrag=true
        this.style.cursor="crosshair"

    }
    function zoomMouseUp(event) {
        if (!event) {
            event=window.event
        }
        if (inDrag) {
            inDrag=false
            theShoe.style.cursor=""
        } 
    }
    function zoomMove(event) {
        if (!event) {
           event=window.event
        }
        if (inDrag) {
            var eventX
            var eventY
            if (event.pageX) {
               eventX=event.pageX
               eventY=event.pageY
            } else if (event.clientX) {
               eventX=event.clientX
               eventY=event.clientY
            } else {
               return false
            }

            currentX+=eventX-startX
            currentY+=eventY-startY
            startX=eventX
            startY=eventY
            redisplay()
            return false
        }
    }
    function setUpZoom() {
        theShoe=document.getElementById("theShoeImage")
        theShoe.onmousedown=zoomMouseDown
        document.onmouseup=zoomMouseUp
        document.onmousemove=zoomMove        
        dispImage(360)
    }
    function resetZoom() {
        currentX=0
        currentY=0
        theHeight=360
        thepic=orgpic
        dispImage(360)       
    }
    function redisplay() {
        theShoe=document.getElementById("theShoeImg")
        theShoe.style.marginLeft=centerX+currentX+"px"
        theShoe.style.marginTop=centerY+currentY+"px"
        
    }
    function killDrag() {
        //inDrag=false
        //theShoe.style.cursor=theShoe.savedCursor
    }