var homeOffsetX = 0;
var imagesFolder = '../images/sticker_visuals/';
function createVisual(nCoordX, nCoordY, nImage){
	var oVisual;
	oVisual = document.createElement('div');
	oVisual.className = 'visual';
	oVisual.style.left	= nCoordX.toString() + 'px';
	oVisual.style.top	= nCoordY.toString() + 'px';
	oVisual.innerHTML = '<img src="../images/sticker_visuals/vv' + nImage + '.gif" border="0" />';
	oVisual.onmouseover = function() {
		var oRoot = document.getElementById('visuals');
		oRoot.appendChild(createOutline(nImage));
		moveOutline();
	}
	oVisual.onmousemove = function() {
		moveOutline();
	}
	oVisual.onmouseout = function() {
		var oRoot = document.getElementById('visuals');
		oRoot.removeChild(document.getElementById('outline'));
	}
	return oVisual;
}

function moveOutline(){
	document.getElementById('outline').style.top = ((curMouseY + curOffset) - document.getElementById('visuals').offsetTop) + "px";
	document.getElementById('outline').style.left = ((curMouseX + curOffset - curOffsetX) - document.getElementById('visuals').offsetLeft - homeOffsetX) + "px";	
}

function createOutline(nImage){
	var oOutline;
	oOutline = document.createElement('div');
	oOutline.className = 'outline';
	oOutline.id = 'outline';
	oOutline.innerHTML = '<img src="../images/sticker_thumbs/ve' + nImage + '.gif" border="0" />';
	return oOutline;
}

function loadVisuals(){
	var oRoot = document.getElementById('visuals');
	oRoot.appendChild(createVisual(70, 20, 1));
	oRoot.appendChild(createVisual(170, 10, 2));
	oRoot.appendChild(createVisual(270, 5, 3));
	oRoot.appendChild(createVisual(365, 5, 5));
	oRoot.appendChild(createVisual(465, 10, 7));
	oRoot.appendChild(createVisual(565, 20, 13));
	oRoot.appendChild(createVisual(615, 110, 8));
	oRoot.appendChild(createVisual(260, 294, 4));
	oRoot.appendChild(createVisual(360, 302, 6));
	
	oRoot.appendChild(createVisual(505, 237, 10));
	oRoot.appendChild(createVisual(20, 110, 11));
	oRoot.appendChild(createVisual(600, 235, 12));
	oRoot.appendChild(createVisual(120, 240, 9));
}

window.onload = function(){
	loadVisuals();
	document.getElementById('linking').onclick = function(){
		document.location.href = "../instructions/index.php";
	}
	if(typeof(document.all) == 'undefined') {
		document.captureEvents(Event.MOUSEMOVE);
	}
	document.onmousemove = GetMouseCoords;
}