var mouseX,mouseY,mouseDown,mouseEvent;
var enter = false;
var objectArray = new Array();

window.onload = function() { pageOnLoad(); }
document.onmousemove = getMouseXY;
document.onmousedown = function() { mouseDown = true; }
document.onmouseup = function() { mouseDown = false; getMouseXY;}

function pageOnLoad() {
	selectElement('toplayer').onmousemove = function() { moveScroller(selectElement('bottomlayer')); }
	selectElement('main').onmousemove = function() { 
		if (mouseY > selectElement('winnerscroller').offsetTop && mouseY < selectElement('winnerscroller').offsetTop+selectElement('winnerscroller').offsetHeight) {
			document.onmousedown = function() { mouseDown = true; return false;}
			document.onselectstart = function() {return false;}
			moveScroller(selectElement('bottomlayer'));	
			selectElement('main').style.cursor = 'move';
			if (!enter) {
				selectElement('toplayer').innerHTML = '<img src="i/raahausohje.png" id="guideImage" width="1" height="43" style="margin-left:690px;margin-top:100px;">';
				dragIn();
				enter = true;
			}	
		} else {
			document.onmousedown = function() { mouseDown = true; return true;}
			document.onselectstart = function() {return true;}
			selectElement('main').style.cursor = 'default';
		}
	}
}

function dragIn() {
	try {
	selectElement('guideImage').width = selectElement('guideImage').width+10;
	if (selectElement('guideImage').width < 190) setTimeout("dragIn();",1); else selectElement('guideImage').width = 190;
	} catch(e) { }
}

function dragOut() {
	try { 
	enter = true;
	selectElement('guideImage').width = selectElement('guideImage').width-10;
	if (selectElement('guideImage').width > 0) setTimeout("dragOut();",1); else selectElement('toplayer').innerHTML = '';
	} catch(e) { }
}

function moveScroller(prmId) {
	var mouseXOS = mouseX-prmId.offsetLeft;
	var mouseYOS = mouseY-prmId.offsetTop;
	if (mouseDown) {
		if (!mouseEvent) {
			setX = mouseXOS;
			setY = mouseYOS;			
			mouseEvent = true;
		}	
		positionObject(prmId,mouseXOS,mouseYOS);	
		dragOut();					
	}
	if (!mouseDown) {
		if (mouseEvent) {					
			storeObjectDragStatus(prmId,objectArray[objectId(prmId)][1]+(mouseXOS-setX),objectArray[objectId(prmId)][2]+(mouseYOS-setY));			
			mouseEvent = false;	
		}			
	}	
}

function positionObject(prmId,prmX,prmY,prmType) {
	try {
		prmId.style.backgroundPosition = (objectArray[objectId(prmId)][1]+(prmX-setX))+'px '+(objectArray[objectId(prmId)][2]+(prmY-setY))+'px';
		selectElement('winnerscroller').style.backgroundPosition = ((objectArray[objectId(prmId)][1]+(prmX-setX))/2)+'px '+((objectArray[objectId(prmId)][2]+(prmY-setY))/2)+'px';
	} catch(e) {
		prmId.style.backgroundPosition = (prmX-setX)+'px '+(prmY-setY)+'px';
		storeObjectDragStatus(prmId,prmX-setX,prmY-setY);
	}		
}

function storeObjectDragStatus(prmId,prmX,prmY) {
	objectArray[objectId(prmId)] = new Array(prmId.id,prmX,prmY);
}

function objectId(prmId) {
	var gotId = objectArray.length;
	for (var i = 0; i <= objectArray.length-1; i++) {
		if (prmId.id == objectArray[i][0]) gotId = i;
	}
	return gotId;
}

function selectElement(prmId) {
	var selection = null;
	if (prmId.style && !selection) {
		selection = prmId;	
	}
	if (document.getElementById(prmId) && !selection) {
		selection = document.getElementById(prmId);		
	}
	if (!selection) {
		selection = document.getElementsByTagName(prmId)
		if (!selection[0]) selection = null;	
	}
	return selection;	
}

function getMouseXY(e) {
	if (!e) var e = window.event||window.Event;
	if('undefined'!=typeof e.pageX) {
		mouseX = e.pageX;
		mouseY = e.pageY;
	} else {
		mouseX = e.clientX + document.body.scrollLeft;
		mouseY = e.clientY + document.body.scrollTop;
	}
}