// JavaScript for ArtistAU
// by Karl Williams
function waiter(timeout, callback, done, t) {
	done = 0
	if (done !== 1) {
		t = setTimeout(callback, timeout)
		done++
	} else {
		clearTimeout(t)
	}
}
function karlTest(alertstring){
	if (alertstring) {
		alert(alertstring)
	} else {
		waiter(1000, "karlTest('testing this mofo')")
	}
}
function fadeIn(itemid, opac){
	if (opac < 100) {
		 if (navigator.appName.indexOf("Netscape")!=-1 && parseInt(navigator.appVersion)>=5) {
			document.getElementById(itemid).style.opacity = opac/100
			opac+=10
		 }
		 else if (navigator.appName.indexOf("Microsoft")!=-1 && parseInt(navigator.appVersion)>=4) {
			document.getElementById(itemid).filters.alpha.opacity = opac
			opac+=10
		 }
		 waiter(60, "fadeIn('"+itemid+"', "+opac+")")
	}
}
function fadeOut(itemid, opac, i){
	if (opac >= 0) {
		 if (navigator.appName.indexOf("Netscape")!=-1 && parseInt(navigator.appVersion)>=5) {
			document.getElementById(itemid).style.opacity = opac/100
			opac-=10
		 }
		 else if (navigator.appName.indexOf("Microsoft")!=-1 && parseInt(navigator.appVersion)>=4) {
			document.getElementById(itemid).filters.alpha.opacity = opac
			opac-=10
		 }
		waiter(60, "fadeOut('"+itemid+"', "+opac+", "+i+")")
	} else {
		slideShow(itemid, i)
	}
}

srcArray = Array('img1.jpg', 'img2.jpg', '3.jpg', '4.jpg', '5.jpg'); // these should be populated by PHP
linkArray = Array('Number 1', 'Number 2', 'Number 3', 'Number 4', 'Number 5');

//var i = 0
/*
 To allow multiple slideShow's to run at once, i should be changed to a local variable,
 and the starting position (ie. value of i) should be randomised for each time the 
 slideShow function is called on an element. This should limit the possibility of 
 3 of the same images being displayed at once
 For this to work, fadeOut will need to accept the extra variable of i, so it can
 be passed when slideShow is called back after the fade.
 Loading could be staggered by passing each slideShow function to a waiter() onLoad
 each with a different delay value.
*/
function slideShow(itemid, i) {
	var img = new Image(120, 120)
	img.src = srcArray[i]
	if (i < srcArray.length) {
		fadeIn(itemid, 0)
		document.getElementById(itemid).src = img.src
		i++
		waiter(6000, "fadeOut('"+itemid+"', 100, " + i + ")")
		img.src = srcArray[i]
	} else {
		i = 0
		img.src = srcArray[0]
		slideShow(itemid, i)
	}
}
function moveObj(itemid) {
	if (state == 1) {
		document.getElementById(itemid).style.top = mouseY - 30 + 'px'
		document.getElementById(itemid).style.left = mouseX - 30 + 'px'
		waiter(30, "moveObj('"+itemid+"')")
	}
}
var mouseX = 10
var mouseY = 10
function getMousePos(e) {
	// get the (true?) mouseX/Y coordinates for use in other functions
	// declare them in global variables
	// extra code can/will be added to make screenX == pageX
	if (navigator.appName.indexOf("Netscape")!=-1 && parseInt(navigator.appVersion)>=5) {
		mouseX = e.clientX+window.scrollX;
		mouseY = e.clientY+window.scrollY;
	}
	else if (navigator.appName.indexOf("Microsoft")!=-1 && parseInt(navigator.appVersion)>=4) {
		mouseX = e.offsetX - 20;
		mouseY = e.offsetY + 200;
	}
	//mouseX = e.clientX
	//mouseY = e.clientY
	/*if (e.clientX > mouseX) {
		if (e.clientX - mouseX >= 10) {
			mouseX = e.clientX
		}
	}
	if (e.clientY > mouseY) {
		if (e.clientY - mouseY >= 10) {
			mouseY = e.clientY
		}
	}
	if (e.clientX < mouseX) {
		if (e.clientX - mouseX <= -10) {
			mouseX = e.clientX
		}
	}
	if (e.clientY < mouseY) {
		if (e.clientY - mouseY <= -10) {
			mouseY = e.clientY
		}
	}	*/
	document.getElementById('mouseX').innerHTML = mouseX + ", "
	document.getElementById('mouseY').innerHTML = mouseY
}
var state = 0
var selectedElement = 0
function toggleState(itemid) {
	if (state == 0){
		selectedElement = itemid
		document.getElementById(itemid).style.border = "1px dotted #ff0000"
		document.getElementById(itemid).style.zIndex = '2'
		state = 1
		moveObj(itemid)
	} else {
		document.getElementById(itemid).style.border = "none"
		document.getElementById(itemid).style.zIndex = '1'
		state = 0
		selectedElement = 0
	}
}
function changeState(itemid, s) {
	if (s == 1){
		selectedElement = itemid
		document.getElementById(itemid).style.border = "1px dotted #ff0000"
		document.getElementById(itemid).style.zIndex = '2'
		state = 1
		moveObj(itemid)
	} else if (s == 0) {
		document.getElementById(itemid).style.border = "none"
		document.getElementById(itemid).style.zIndex = '1'
		state = 0
		selectedElement = 0
	}
}
function showKeyCode(e) {
	/*
		Will need to sort out some browser detection, because event.which 
		is NS specific, whereas IE only accepts event.keyCode.
		NS/Moz also accepts event.charCode.
	*/
	//document.getElementById("whichkey").value = e.which
	//document.getElementById("whichkey").value = document.getElementById(selectedElement).style.width
	//document.getElementById("whichkey1").value = document.getElementById(selectedElement).style.height
	//document.getElementById("movebox").innerHTML = e.keyCode
}
function resizeDiv(itemid, e) {
	if (e.which == 43 || e.keyCode == 43) {
		//re = /([0-9]*?)px/
		//var widthMatch = re.exec("'" + document.getElementById(itemid).style.width + "'");
		//var heightMatch = re.exec("'" + document.getElementById(itemid).style.height + "'");
		//alert(widthMatch[1] + ' ' + heightMatch[1])
		//document.getElementById(itemid).style.width = parseInt(widthMatch[1])+1 + 'px';
		//document.getElementById(itemid).style.height = parseInt(heightMatch[1])+1 + 'px';
		document.getElementById(itemid).width =	document.getElementById(itemid).width + 1
	} else if (e.which == 45 || e.keyCode == 45) {
		document.getElementById(itemid).width =	document.getElementById(itemid).width - 1		
	}
}
function changeZindex(itemid, e) {
	switch (e.which) {
		case 48:
		document.getElementById(itemid).style.zIndex = "1"
		break
		case 49:
		document.getElementById(itemid).style.zIndex = "2"
		break
		case 50:
		document.getElementById(itemid).style.zIndex = "3"
		break
		case 51:
		document.getElementById(itemid).style.zIndex = "4"
		break
	}
	//alert(document.getElementById(itemid).style.zIndex)
}
function showImageData(data, i) {
	data = " "
	boxes = Array('movebox_0', 'movebox_1', 'movebox_2', 'movebox_3', 'movebox_4', 'movebox_5', 'movebox_6', 'movebox_7', 'movebox_8', 'movebox_9', 'movebox_10', 'movebox_11')
	for (i = 0; i<boxes.length; i++) {
		box = document.getElementById(boxes[i])
		if(box) {
			toppos = box.style.top
			if(!toppos) {
				toppos = 'NULL'
			}
			leftpos = box.style.left
			if(!leftpos == '-1') {
				leftpos = 'NULL'
			}
			data = data + i + ", "
			data = data + box.width + ", "
			data = data + toppos + ", "
			data = data + leftpos + ", "
			data = data + box.src + ", "
			data = data + box.alt + "\r\n"
		} else {
			data = data + i + ", "
			data = data + "NULL" + ", "
			data = data + "NULL" + ", "
			data = data + "NULL" + ", "
			data = data + "NULL" + ", "
			data = data + "NULL" + "\r\n"
		}
	}
	//document.getElementById("msgbox").innerHTML = data;
	document.getElementById("datafield").value = data
}

// Let's try it another way
var dragO = 0;
function engageDrag(o, e) {
	dragO = o;
	coords = getCoords(e);
		e.cancelBubble = true;
		o.style.left = coords[0] + 'px';
		o.style.top = coords[1] + 'px';
}
function dragObj(e) {
	e.cancelBubble = true;
	document.getElementById('dragobject').value = dragO.id + ' -- X: ' + dragO.style.left + ' Y: ' + dragO.style.top + ' -- ' + e.clientX + ' :: ' + e.clientY;
	o = document.getElementById(dragO.id);
		coords = getCoords(e);
		o.style.left = coords[0] + 'px';
		o.style.top = coords[1] + 'px';
}
function disengageDrag() {
	dragO = 0;
	document.getElementById('dragobject').value = dragO;
}
function getCoords(e) {
	e.cancelBubble = true;
		//if (typeof e == 'undefined') e = window.event;
		//if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
		//if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
	oDiv = document.getElementById(dragO.id);
	if (navigator.appName.indexOf("Netscape")!=-1 && parseInt(navigator.appVersion)>=5) {
		x = e.clientX+window.scrollX - 10;
		y = e.clientY+window.scrollY - 10;
	}
	else if (navigator.appName.indexOf("Microsoft")!=-1 && parseInt(navigator.appVersion)>=4) {
		x = e.clientX + document.documentElement.scrollLeft - document.body.scrollLeft - 10;
		y = e.clientY + document.documentElement.scrollTop - document.body.scrollTop - 10;
		//x = Dx;
		//y = Dy;
	}
	//oDiv.innerHTML = document.body.scrollLeft +  ' -- ' + document.documentElement.scrollTop + '<br />' + e.offsetX + ' -- ' + e.offsetY;
		//x = e.layerX;
		//y = e.layerY;
		coords = Array(x, y);
		return coords;
}