var isNav, isIE
var offsetX, offsetY
var selectedObj 

var dragimg_width=64
var dragimg_height=64

var dragimg_startx=617
var dragimg_starty=89

var clipLeft=dragimg_startx
var clipTop=dragimg_starty

var clipRight=clipLeft+dragimg_width
var clipBottom=clipTop+dragimg_height

if (parseInt(navigator.appVersion) >= 4) {
	if (navigator.appName == "Netscape") {
		isNav = true
	} else {
		isIE = true
	}
}

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


function shiftTo(obj, x, y) {
	if (isNav) {
		obj.moveTo(x,y)
		document.bgimage.clip.top=y
		document.bgimage.clip.left=x
		document.bgimage.clip.bottom=y+dragimg_height
		document.bgimage.clip.right=x+dragimg_width	
	
	}
	else {
		clipTop=y
		clipLeft=x
		clipBottom=y+dragimg_height
		clipRight=x+dragimg_width
		document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
		obj.pixelLeft = x
		obj.pixelTop = y
	}
}

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) && (testObj.name=="picture1")) {
					selectedObj = testObj
					setZIndex(selectedObj, 100)
					return
			}
		}
	} else {
		var imgObj = window.event.srcElement
		if (imgObj.parentElement.id.indexOf("picture") != -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)
	}
}

function init() {
	if (isNav) {
		setNavEventCapture()
	}
	document.onmousedown = engage
	document.onmousemove = dragIt
	document.onmouseup = release
	if (document.all) {
		clipTop=dragimg_starty
		clipLeft=dragimg_startx
		clipBottom=clipTop+dragimg_height
		clipRight=clipLeft+dragimg_width
		document.all.picture1.style.posLeft=dragimg_startx
		document.all.picture1.style.posTop=dragimg_starty
		document.all.bgimage.style.posLeft=0
		document.all.bgimage.style.posTop=0
		document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
	}
	
	if (document.layers) {
		document.bgimage.clip.left=dragimg_startx
		document.bgimage.clip.right=clipLeft+dragimg_width
		document.bgimage.clip.top=dragimg_starty
		document.bgimage.clip.bottom=clipTop+dragimg_height
		document.picture1.left=dragimg_startx
		document.picture1.top=dragimg_starty
		document.bgimage.left=0
		document.bgimage.top=0
	}
}