// CREDITS:
// MapBlaster by Urs Dudli and Peter Gehrig
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com
// info@24fun.com
// 03/07/2001

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.24fun.com on the webpage
// where this script will be running.

//This copy modified to support NN6
//see http://www.24fun.com for original script

// CONFIGURATION:
// Go to www.24fun.com, open category 'utility' and download
// the full-version of this script as ZIP-file with
// step-by-step instructions for non-programmers.

var isNav, isIE, isNav6
var offsetX, offsetY
var selectedObj

var thumbwidth = Math.floor(largewidth/shrinkfactor)
var thumbheight = Math.floor(largeheight/shrinkfactor)

var dragimgwidth = Math.floor(clipwidth/shrinkfactor)
var dragimgheight = Math.floor(clipheight/shrinkfactor)
var dragimgleft = thumbleft+198
var dragimgtop = thumbtop+95

var difleft= largeleft-thumbleft
var diftop= largetop-thumbtop

var clippoints

var cliptop=0
var clipbottom=cliptop+clipheight
var clipleft=0
var clipright=clipleft+clipwidth

isIE = document.all;
isNav = document.layers;
isNav6 = document.getElementById;

function setZIndex(obj, zOrder) {
	obj.zIndex = zOrder
}

function shiftTo(obj, x, y) {
	if (isNav) {
        if(x<=document.thumb.left) {x=document.thumb.left}
		if(x>=(document.thumb.left+thumbwidth-dragimgwidth-2)) {x=document.thumb.left+thumbwidth-dragimgwidth-2}
		if(y<=document.thumb.top) {y=document.thumb.top}
		if(y>=(document.thumb.top+thumbheight-dragimgheight-2)) {y=document.thumb.top+thumbheight-dragimgheight-2}
		obj.moveTo(x,y)
	} else {
		if(x<=document.all.thumb.style.posLeft) {x=document.all.thumb.style.posLeft}
		if(x>=(document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2)) {x=document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2}
		if(y<=document.all.thumb.style.posTop) {y=document.all.thumb.style.posTop}
		if(y>=(document.all.thumb.style.posTop+thumbheight-dragimgheight-2)) {y=document.all.thumb.style.posTop+thumbheight-dragimgheight-2}
		obj.pixelLeft = x
		obj.pixelTop = y
	}
	cliptop = (y-thumbtop)*shrinkfactor
	clipbottom = cliptop+clipheight
	clipleft = (x-thumbleft)*shrinkfactor
	clipright = clipleft+clipwidth


	if (document.all) {
		clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.large.style.posTop=largetop-cliptop
		document.all.large.style.posLeft=largeleft-clipleft
		document.all.large.style.clip=clippoints
	}
	if (document.layers) {
		document.large.top=largetop-cliptop
		document.large.left=largeleft-clipleft
		document.large.clip.left = clipleft
		document.large.clip.right = clipright
		document.large.clip.top = cliptop
		document.large.clip.bottom = clipbottom
	}
}

function setSelectedElem(evt) {
	if (isNav) {
		var testObj
		var clickX = evt.pageX
		var clickY = evt.pageY
		for (var i = document.layers.length - 1; i >= 0; i--) {
			testObj = document.layers[i]
			if ((clickX > testObj.left) &&
				(clickX < testObj.left + testObj.clip.width) &&
				(clickY > testObj.top) &&
				(clickY < testObj.top + testObj.clip.height && document.layers[i].id=="dragimg")) {
					selectedObj = testObj
					setZIndex(selectedObj, 100)
					return
			}
		}
	} else {
		var imgObj = window.event.srcElement
		if (imgObj.parentElement.id.indexOf("dragimg") != -1) {
			selectedObj = imgObj.parentElement.style
			setZIndex(selectedObj,100)
			return
		}
	}
	selectedObj = null
	return
}

function dragIt(evt) {
	if (selectedObj) {
		if (isNav) {
			shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
		} else {
			shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
			return false
		}
	}
}

function engage(evt) {
	setSelectedElem(evt)
	if (selectedObj) {
		if (isNav) {
			offsetX = evt.pageX - selectedObj.left
			offsetY = evt.pageY - selectedObj.top
		} else {
			offsetX = window.event.offsetX
			offsetY = window.event.offsetY
		}
	}
	return false
}

function release(evt) {
	if (selectedObj) {
		setZIndex(selectedObj, 0)
		selectedObj = null
	}
}

function setNavEventCapture() {
	if (isNav) {
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
	}
}

// Nav 6 section begins here ########################################################

function doDrag(e) {

        // Calculates the difference from the last stored position to
        // the current position.
        //
        var difX=e.clientX-window.lastX;
        var difY=e.clientY-window.lastY;

        // Retrieves the X and Y position (left and top style properties)
        // of dragimg div element.
        //
        var newX = parseInt(document.getElementById("dragimg").style.left)+difX;
        var newY = parseInt(document.getElementById("dragimg").style.top)+difY;

        // Sets the new position for the dragimg div element.
        // if inside thumb dix

        if(newX<=parseInt(document.getElementById("thumb").style.left)) {
          newX=document.getElementById("thumb").style.left
        }
        else if(newX>=(parseInt(document.getElementById("thumb").style.left)+thumbwidth-dragimgwidth-2)) {
          newX=(parseInt(document.getElementById("thumb").style.left)+thumbwidth-dragimgwidth-2)+"px"
        }
        else {
          window.lastX=e.clientX;
        }

        if(newY<=parseInt(document.getElementById("thumb").style.top)) {
          newY=document.getElementById("thumb").style.top
        }
        else if(newY>=(parseInt(document.getElementById("thumb").style.top)+thumbheight-dragimgheight-2)) {
          newY=(parseInt(document.getElementById("thumb").style.top)+thumbheight-dragimgheight-2)+"px"
        }
        else {
          window.lastY=e.clientY;
        }

        document.getElementById("dragimg").style.left=newX;
        document.getElementById("dragimg").style.top=newY;

        cliptop = (parseInt(newY)-thumbtop)*shrinkfactor;
        clipbottom = cliptop+clipheight;
        clipleft = (parseInt(newX)-thumbleft)*shrinkfactor;
        clipright = clipleft+clipwidth;
        document.getElementById("large").style.clip = "rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px )";
        document.getElementById("large").style.top=(largetop-cliptop)+"px"
        document.getElementById("large").style.left=(largeleft-clipleft)+"px"
}

//----------------------------------------------------------------------------
// When drag begins, this function is called.
// This event handler was registered in the table constructor function (dd_dynatable).
//
function beginDrag(e) {

        // Stores the current mouse position
        window.lastX=e.clientX;
        window.lastY=e.clientY;

        // Register doDrag event handler to receive onmousemove events.
        window.onmousemove=doDrag;

        // Register endDrag event handler to receive onmouseup events.
        window.onmouseup=endDrag;
}

//----------------------------------------------------------------------------
// Called when the mouse button is released.
// This event handler was registered in beginDrag function.
//
function endDrag(e) {
        // Release doDrag event handler assignment.
        window.onmousemove=null;
}

// Nav 6 section ends here (+ last section of init function) ################

function init() {
 if ( isIE||isNav ) {
  if (document.layers) {
    imageurl=document.large.document.largepic.src
    largewidth=document.large.document.width
		largeheight=document.large.document.height
		thumbwidth = Math.floor(largewidth/shrinkfactor)
		thumbheight = Math.floor(largeheight/shrinkfactor)
    document.thumb.document.write("<IMG NAME='thumbpic' SRC='vorschau.jpg' width='300  height='165'>")
    document.thumb.document.close()
    document.dragimg.document.write("<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width='30' height='30'>")
    document.dragimg.document.close()
		document.large.left=largeleft
		document.large.top=largetop

		document.thumb.left=thumbleft
		document.thumb.top=thumbtop

		document.dragimg.left=dragimgleft
		document.dragimg.top=dragimgtop

		document.large.clip.left=clipleft
		document.large.clip.right=clipright
		document.large.clip.top=cliptop
		document.large.clip.bottom=clipbottom
		document.large.visibility="visible"

		setNavEventCapture()
	}
  else if (document.all) {
    imageurl=document.largepic.src
		largewidth=document.all.large.offsetWidth
		largeheight=document.all.large.offsetHeight
		thumbwidth = Math.floor(largewidth/shrinkfactor)
		thumbheight = Math.floor(largeheight/shrinkfactor)
    thumb.innerHTML="<IMG NAME='thumbpic' SRC='vorschau.jpg' width='300  height='165'>"
    dragimg.innerHTML="<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width='30' height='30'>"

		document.all.large.style.posLeft=largeleft
		document.all.large.style.posTop=largetop

		document.all.thumb.style.posLeft=thumbleft
		document.all.thumb.style.posTop=thumbtop

		document.all.dragimg.style.posLeft=dragimgleft
		document.all.dragimg.style.posTop=dragimgtop
		clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.large.style.clip=clippoints
		document.all.large.style.visibility="visible"
	}

	document.onmousedown = engage
	document.onmousemove = dragIt
	document.onmouseup = release

  cliptop = (95-thumbtop)*shrinkfactor
  clipbottom = cliptop+clipheight
  clipleft = (200-thumbleft)*shrinkfactor
  clipright = clipleft+clipwidth


  if (document.all) {
    clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
    document.all.large.style.posTop=largetop-cliptop
    document.all.large.style.posLeft=largeleft-clipleft
    document.all.large.style.clip=clippoints
  }
  else if (document.layers) {
    document.large.top=largetop-cliptop
    document.large.left=largeleft-clipleft
    document.large.clip.left = clipleft
    document.large.clip.right = clipright
    document.large.clip.top = cliptop
    document.large.clip.bottom = clipbottom
  }



 }
 else if (isNav6) {
    largepic=document.createElement("img");
    largepic.setAttribute("src",""+imageurl+"");
    largepic.setAttribute("width",""+largewidth+"px"+"");
    largepic.setAttribute("height",""+largeheight+"px"+"");
    document.getElementById("large").appendChild(largepic);

    thumbwidth = Math.floor(largewidth/shrinkfactor)
    thumbheight = Math.floor(largeheight/shrinkfactor)

    thumbpic=document.createElement("img");
    thumbpic.setAttribute("src","vorschau.jpg");
    thumbpic.setAttribute("width","300px");
    thumbpic.setAttribute("height","165px");
    document.getElementById("thumb").appendChild(thumbpic);

    dragimgpic=document.createElement("img");
    dragimgpic.setAttribute("src","dragimg.gif");
    dragimgpic.setAttribute("border","2px");
    dragimgpic.setAttribute("width","30px");
    dragimgpic.setAttribute("height","30px");
    document.getElementById("dragimg").appendChild(dragimgpic);

    document.getElementById("large").style.left=largeleft
    document.getElementById("large").style.top=largetop

    document.getElementById("thumb").style.left=thumbleft
    document.getElementById("thumb").style.top=thumbtop

    document.getElementById("dragimg").style.left=dragimgleft
    document.getElementById("dragimg").style.top=dragimgtop

    document.getElementById("large").style.clip = "rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px )"
    document.getElementById("large").style.visibility="visible"

    dragimg=document.getElementById("dragimg");
    dragimg.addEventListener("mousedown",beginDrag, false);

    cliptop = (95-thumbtop)*shrinkfactor
    clipbottom = cliptop+clipheight
    clipleft = (200-thumbleft)*shrinkfactor
    clipright = clipleft+clipwidth

    document.getElementById("large").style.clip = "rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px )";
    document.getElementById("large").style.top=(largetop-cliptop)+"px"
    document.getElementById("large").style.left=(largeleft-clipleft)+"px"
 }
}

window.onload=init