var gVertLocBaseline = -1; // vertical location of staff image
var gHorzLocBaseline = -1; // horizontal location of staff image


function addBaseLineImage()
{
	var baseLayer = document.getElementById('baseLayer');
	var baselineImage = new Image();
	baselineImage.src = 'images/grandStaff.png';
	baselineImage.id = 'theStaff';
	baselineImage.onmousemove = moveShadowNote; // add this when adding notes on the, also need to show the Shadow Note
	baseLayer.appendChild(baselineImage);
}


function setLocations()
{
	getStageXY();
	setDataLocation();
}


function setDataLocation()
{	
	var dataDiv = document.getElementById('dataLayer');
	dataDiv.style.left = gHorzLocBaseline;
	dataDiv.style.top = gVertLocBaseline;
	
	var shadowLayer = document.getElementById('shadowLayer');
	shadowLayer.style.left = gHorzLocBaseline;
	shadowLayer.style.top = gVertLocBaseline;
	
	var ledgerLayer = document.getElementById('ledgerLayer');
	ledgerLayer.style.left = gHorzLocBaseline;
	ledgerLayer.style.top = gVertLocBaseline;
}


function getStageXY()
{
	var theElement = document.getElementById('baseLayer');
	
	gHorzLocBaseline=theElement.offsetLeft;
	gVertLocBaseline=theElement.offsetTop;
	theElement = theElement.offsetParent;
	while (theElement != null)
	{
		gHorzLocBaseline+=theElement.offsetLeft;
		gVertLocBaseline+=theElement.offsetTop;
		theElement=theElement.offsetParent;
	}
}