//the script for handling a drag and drop (with images)

// global variables
var offsetX = 0
var offsetY = 0
var selectedObj
var draggables = new Array()
var draggablesIndexList = new Array()

// object constructer for the concept of a "draggable"
// the x and y here is relative to the background image
// and represent the x and y of the target area.
function draggable(code, origX, origY, width, height) {
	this.code = code
	this.origX = origX
	this.origY = origY
	this.width = width
	this.height = height
	this.midX = (0.5*width)+origX
	this.midY = (0.5*height)+origY
	this.done = false
	assignEvents(this)
	draggablesIndexList[draggablesIndexList.length] = code
}

// assigns event handlers to each map layer
function assignEvents(layer) {
	var obj
	if (document.layers) {
		obj = document.layers[layer.code]
		obj.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
	} else if (document.all) {
		obj = document.all(layer.code)
	} else if (document.getElementById) {
		obj = document.getElementById(layer.code)
	}
	if (obj) {
		obj.onmousedown = engage
		obj.onmousemove = dragIt
		obj.onmouseup = release
	}
}

// set a global reference to the object being dragged
// this also ensures that the object is an image - necessary to drag?
function setSelectedMap(evt) {
	var target = (evt.target) ? evt.target : evt.srcElement
	var code = (target.name && target.src) ? target.name.slice(0,-3) : ""
	if (code) {
		if (document.layers) {
			selectedObj = document.layers[code]
		} else if (document.all) {
			selectedObj = document.all(code)
		} else if (document.getElementById) {
			selectedObj = document.getElementById(code)
		}
		setZIndex(selectedObj, 100)
		return
	}
	selectedObj = null
	return
}

// this function reacts to one of the draggable items being selected
// it sorts out a bunch of stuff to do with offsets, taking into account scrolling
function engage(evt) {
	evt = (evt) ? evt : event
	setSelectedMap(evt)

	if (selectedObj) {
		if (evt.pageX) {
			offsetX = evt.pageX - ((selectedObj.offsetLeft) ? 
							selectedObj.offsetLeft : selectedObj.left)
			offsetY = evt.pageY - ((selectedObj.offsetTop) ? 
							selectedObj.offsetTop : selectedObj.top)
		} else if (evt.offsetX || evt.offsetY) {
			offsetX = evt.offsetX - ((evt.offsetX < -2) ?
							0 : document.body.scrollLeft)
			offsetY = evt.offsetY - ((evt.offsetY < -2) ?
							0 : document.body.scrollTop)
		}
		return false
	}
}
		
// actually move the object when the mouse moves
function dragIt(evt) {
	evt = (evt) ? evt : event
	if (selectedObj) {
		if (evt.pageX) {
			shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
		} else if (evt.clientX || evt.clientY) {
			shiftTo(selectedObj, (evt.clientX - offsetX), (evt.clientY - offsetY))
		}
		evt.cancelBubble = true
		return false
	}
}

// what happens when the user "drops" the object?
function release(evt) {
	evt = (evt) ? evt : event
	var target = (evt.target) ? evt.target : evt.srcElement
	var code = (target.name && target.src) ? target.name.slice(0,-3) : ""
	if (code && selectedObj) {
		// necessary to set the z-index?
		setZIndex(selectedObj, 0)
		// want to move all the feedback layers to the same position
		for (i=0; i<draggablesIndexList.length; i++) {
			if (evt.pageX) {
				shiftTo(draggablesIndexList[i], (evt.pageX - offsetX), (evt.pageY - offsetY))
			} else if (evt.clientX || evt.clientY) {
				shiftTo(draggablesIndexList[i], (evt.clientX - offsetX), (evt.clientY - offsetY))
			}
		}
	} 
	selectedObj = null
}

// is the draggable object over a legitimate target?
// onTarget function deleted for this version

// called when all the pieces are in place
// function isDone is deleted for this version

// called when page loads - initialises the application
function draginit() {
	initArray()
	document.onmousemove = dragIt
}