var nextNoteVerticalOffset = 5; // in pixels
var gBaseLineWidth = 250; // width of staff image
var gBaseLineHeight = 230; // height of staff image
var gNoteWidth = 16; // width of added notes w/o ledger lines
var gShadowNote;

// constants below may not be used
var a1VerticalLocation = 147; // in pixels, location of note a0
var gAddNotesIDCounter = 0;
var octaveVerticalOffset = 28; // in pixels

var gLedgerTop3, gLedgerTop2, gLedgerTop1;
var gLedgerBottom3, gLedgerBottom2, gLedgerBottom1;
var gLedgerMiddleBottom3, gLedgerMiddleBottom2, gLedgerMiddleBottom1;
var gLedgerMiddleTop3, gLedgerMiddleTop2, gLedgerMiddleTop1;




function createShadowNote()
{
	var shadowLayer = document.getElementById('shadowLayer'); 
	gShadowNote = new Image();
	gShadowNote.src='images/wholeNoteNewBlue.gif';
	gShadowNote.id = 'shadowNote';
	gShadowNote.style.position = "absolute";
	gShadowNote.style.left=0;
	gShadowNote.style.top=0;
	gShadowNote.style.display="none";  // initizialize Shadow note to not show, show the shadow if StaffAnswer in the data is greater than zero length
	gShadowNote.onmousedown = addNote; // if the shadow note is clicked add a note where it is located
	gShadowNote.onmousemove = moveShadowNote; // the shadow note is under the click so add the move event to this image
	shadowLayer.appendChild(gShadowNote); 
}


function moveShadowNote(e)
{
	var newY = (document.all) ? event.clientY : e.clientY; // get current Y location of mouse
	var newX = (document.all) ? event.clientX : e.clientX; // get current X location of mouse
	
	// offset location of mouse by scroll window scroll amount
	newY = newY + document.body.scrollTop;
	newX = newX + document.body.scrollLeft;
	
	// vertical height computation, offset by 5 so cannot add a note on the edge of the background staff image
	if ( (newY <= (gVertLocBaseline+gBaseLineHeight-5)) && (newY > (gVertLocBaseline+5) )&& (newX <= (gHorzLocBaseline + gBaseLineWidth)) && (newX >= gHorzLocBaseline) ) // only move the shadow if inside of baseLine area
	{
		var Yloc = (nextNoteVerticalOffset*Math.round(newY/nextNoteVerticalOffset) - nextNoteVerticalOffset + 1); // set to a multiple of the ledger lines
		var Xloc = newX - Math.floor(gNoteWidth/2);
		Yloc = Yloc - gVertLocBaseline;
		Xloc = Xloc - gHorzLocBaseline;
		gShadowNote.style.top = Yloc;
		gShadowNote.style.left = Xloc;
	}
	else
	{
		//hideShadowNote();
	}
    return false;
}


function showShadowNote()
{
	var shadowNote = document.getElementById('shadowNote');
	shadowNote.style.display = "block";
}


function hideShadowNote()
{
	
	var shadowNote = document.getElementById('shadowNote');
	shadowNote.style.display = "none";
}




// add a Note on the staff, set bDeleteable  to "true" if want the user to be able to remove the note
function addNoteByPosition(leftPos, topPos, bDeleteable)
{
	var dataLayer = document.getElementById('dataLayer');
	var tmpImage = new Image();
	tmpImage.src='images/wholeNoteNew.gif';
	tmpImage.style.position = "absolute";
	gAddNotesIDCounter = gAddNotesIDCounter + 1;
	tmpImage.id = "addedNote" + gAddNotesIDCounter;
	tmpImage.style.left = leftPos;
	tmpImage.style.top = topPos;
	
	if (bDeleteable == 'true')
	{
		tmpImage.onmousedown = function ()
		{
			removeNote(this); // "this" is the tmpImage
			showShadowNote();	
		};
		
		tmpImage.onmouseover = function ()
		{
			hideShadowNote();
		};
		tmpImage.onmouseout = function ()
		{
			showShadowNote();
		};	
	}
	
	dataLayer.appendChild(tmpImage);
	
}	


function addNote(e)
{
	var shadowNote = document.getElementById('shadowNote');

	var dataLayer = document.getElementById('dataLayer');
	var tmpImage = new Image();
	tmpImage.src='images/wholeNoteNew.gif';
	tmpImage.style.position = "absolute";
	gAddNotesIDCounter = gAddNotesIDCounter + 1;
	tmpImage.id = "addedNote" + gAddNotesIDCounter;
	
	var leftLoc = shadowNote.style.left;
	var topLoc = shadowNote.style.top;
	
	tmpImage.style.left = leftLoc; // set location of added note based on location of shadow note
	tmpImage.style.top = topLoc;//shadowNote.style.top;
	
	debug("Added Note Location:" + leftLoc + "," + topLoc);
	
	tmpImage.onmousedown = function ()
	{
		removeNote(this); // this is the tmpImage
		showShadowNote();	
	};
	
	tmpImage.onmouseover = function ()
	{
		hideShadowNote();
	};
	tmpImage.onmouseout = function ()
	{
		showShadowNote();
	};
	
	dataLayer.appendChild(tmpImage);
}

function removeNote(theImage)
{
		var dataLayer = document.getElementById('dataLayer');
		var tmpAddedNote = document.getElementById(theImage.id);
		dataLayer.removeChild(tmpAddedNote);
}

function removeAllNotes()
{
	var dataLayer = document.getElementById('dataLayer');
	dataLayer.innerHTML = "";
}

function createLedgerLines()
{
	// Add the top ledger lines (three, two and one lines)
	var ledgerLayer = document.getElementById('ledgerLayer'); 
	gLedgerTop3 = new Image();
	gLedgerTop3.src = 'images/LedgerThree.gif';
	gLedgerTop3.id = 'ledgerTop3';
	gLedgerTop3.style.position = "absolute";
	gLedgerTop3.style.left = gInitXLocOfNote-2;
	gLedgerTop3.style.top = 9;
	gLedgerTop3.style.display = "none";  
	ledgerLayer.appendChild(gLedgerTop3); 	
	
	gLedgerTop2 = new Image();
	gLedgerTop2.src = 'images/LedgerTwo.gif';
	gLedgerTop2.id = 'ledgerTop2';
	gLedgerTop2.style.position = "absolute";
	gLedgerTop2.style.left = gInitXLocOfNote-2;
	gLedgerTop2.style.top = 19;
	gLedgerTop2.style.display = "none";  
	ledgerLayer.appendChild(gLedgerTop2); 
	
	gLedgerTop1 = new Image();
	gLedgerTop1.src = 'images/LedgerOne.gif';
	gLedgerTop1.id = 'ledgerTop1';
	gLedgerTop1.style.position = "absolute";
	gLedgerTop1.style.left = gInitXLocOfNote-2;
	gLedgerTop1.style.top = 29;
	gLedgerTop1.style.display = "none"; 
	ledgerLayer.appendChild(gLedgerTop1); 
	
	// Add the bottom ledger lines (three, two and one lines)
	var ledgerLayer = document.getElementById('ledgerLayer'); 
	gLedgerBottom3 = new Image();
	gLedgerBottom3.src = 'images/LedgerThree.gif';
	gLedgerBottom3.id = 'ledgerBottom3';
	gLedgerBottom3.style.position = "absolute";
	gLedgerBottom3.style.left = gInitXLocOfNote-2;
	gLedgerBottom3.style.top = 199;
	gLedgerBottom3.style.display = "none";  
	ledgerLayer.appendChild(gLedgerBottom3); 	
	
	gLedgerBottom2 = new Image();
	gLedgerBottom2.src = 'images/LedgerTwo.gif';
	gLedgerBottom2.id = 'ledgerBottom2';
	gLedgerBottom2.style.position = "absolute";
	gLedgerBottom2.style.left = gInitXLocOfNote-2;
	gLedgerBottom2.style.top = 199;
	gLedgerBottom2.style.display = "none";  
	ledgerLayer.appendChild(gLedgerBottom2); 
	
	gLedgerBottom1 = new Image();
	gLedgerBottom1.src = 'images/LedgerOne.gif';
	gLedgerBottom1.id = 'ledgerBottom1';
	gLedgerBottom1.style.position = "absolute";
	gLedgerBottom1.style.left = gInitXLocOfNote-2;
	gLedgerBottom1.style.top = 199;
	gLedgerBottom1.style.display = "none"; 
	ledgerLayer.appendChild(gLedgerBottom1); 
	
	// Add the middle top ledger lines (three, two and one lines)
	var ledgerLayer = document.getElementById('ledgerLayer'); 
	gLedgerMiddleTop3 = new Image();
	gLedgerMiddleTop3.src = 'images/LedgerThree.gif';
	gLedgerMiddleTop3.id = 'ledgerMiddleTop3';
	gLedgerMiddleTop3.style.position = "absolute";
	gLedgerMiddleTop3.style.left = gInitXLocOfNote-2;
	gLedgerMiddleTop3.style.top = 90;
	gLedgerMiddleTop3.style.display = "none";  
	ledgerLayer.appendChild(gLedgerMiddleTop3); 	
	
	gLedgerMiddleTop2 = new Image();
	gLedgerMiddleTop2.src = 'images/LedgerTwo.gif';
	gLedgerMiddleTop2.id = 'ledgerMiddleTop2';
	gLedgerMiddleTop2.style.position = "absolute";
	gLedgerMiddleTop2.style.left = gInitXLocOfNote-2;
	gLedgerMiddleTop2.style.top = 90;
	gLedgerMiddleTop2.style.display = "none";  
	ledgerLayer.appendChild(gLedgerMiddleTop2); 
	
	gLedgerMiddleTop1 = new Image();
	gLedgerMiddleTop1.src = 'images/LedgerOne.gif';
	gLedgerMiddleTop1.id = 'ledgerMiddleTop1';
	gLedgerMiddleTop1.style.position = "absolute";
	gLedgerMiddleTop1.style.left = gInitXLocOfNote-2;
	gLedgerMiddleTop1.style.top = 90;
	gLedgerMiddleTop1.style.display = "none"; 
	ledgerLayer.appendChild(gLedgerMiddleTop1); 
	
	// Add the middle bottom ledger lines (three, two and one lines)
	var ledgerLayer = document.getElementById('ledgerLayer'); 
	gLedgerMiddleBottom3 = new Image();
	gLedgerMiddleBottom3.src = 'images/LedgerThree.gif';
	gLedgerMiddleBottom3.id = 'ledgerMiddleBottom3';
	gLedgerMiddleBottom3.style.position = "absolute";
	gLedgerMiddleBottom3.style.left = gInitXLocOfNote-2;
	gLedgerMiddleBottom3.style.top = 119;
	gLedgerMiddleBottom3.style.display = "none";  
	ledgerLayer.appendChild(gLedgerMiddleBottom3); 	
	
	gLedgerMiddleBottom2 = new Image();
	gLedgerMiddleBottom2.src = 'images/LedgerTwo.gif';
	gLedgerMiddleBottom2.id = 'ledgerMiddleBottom2';
	gLedgerMiddleBottom2.style.position = "absolute";
	gLedgerMiddleBottom2.style.left = gInitXLocOfNote-2;
	gLedgerMiddleBottom2.style.top = 129;
	gLedgerMiddleBottom2.style.display = "none";  
	ledgerLayer.appendChild(gLedgerMiddleBottom2); 
	
	gLedgerMiddleBottom1 = new Image();
	gLedgerMiddleBottom1.src = 'images/LedgerOne.gif';
	gLedgerMiddleBottom1.id = 'ledgerMiddleBottom1';
	gLedgerMiddleBottom1.style.position = "absolute";
	gLedgerMiddleBottom1.style.left = gInitXLocOfNote-2;
	gLedgerMiddleBottom1.style.top = 139;
	gLedgerMiddleBottom1.style.display = "none"; 
	ledgerLayer.appendChild(gLedgerMiddleBottom1); 
}


function showLedgerLine(YLocOfAddedNote)
{
	//debugA(YLocOfAddedNote);
	if (YLocOfAddedNote <= 5)
	{
		// show three line ledger, hide the two and one
		document.getElementById('ledgerTop3').style.display = "block";
		document.getElementById('ledgerTop2').style.display = "none";
		document.getElementById('ledgerTop1').style.display = "none";
	}
	else if (YLocOfAddedNote <= 15)
	{
		// show two line ledger, hide the three and one
		document.getElementById('ledgerTop3').style.display = "none";
		document.getElementById('ledgerTop2').style.display = "block";
		document.getElementById('ledgerTop1').style.display = "none";
	}
	else if (YLocOfAddedNote <= 25)
	{
		// show one line ledger, hide the two and three
		document.getElementById('ledgerTop3').style.display = "none";
		document.getElementById('ledgerTop2').style.display = "none";
		document.getElementById('ledgerTop1').style.display = "block";
	}
	else if (YLocOfAddedNote >= 195 & YLocOfAddedNote <= 200)
	{
		document.getElementById('ledgerBottom3').style.display = "none";
		document.getElementById('ledgerBottom2').style.display = "none";
		document.getElementById('ledgerBottom1').style.display = "block";
	}
	else if (YLocOfAddedNote >= 205 & YLocOfAddedNote <= 210)
	{
		document.getElementById('ledgerBottom3').style.display = "none";
		document.getElementById('ledgerBottom2').style.display = "block";
		document.getElementById('ledgerBottom1').style.display = "none";
	}
	else if (YLocOfAddedNote >= 215 & YLocOfAddedNote <= 220)
	{
		document.getElementById('ledgerBottom3').style.display = "block";
		document.getElementById('ledgerBottom2').style.display = "none";
		document.getElementById('ledgerBottom1').style.display = "none";
	}
	else if (YLocOfAddedNote >= 85 & YLocOfAddedNote <= 90) 
	{
		document.getElementById('ledgerMiddleTop3').style.display = "none";
		document.getElementById('ledgerMiddleTop2').style.display = "none";
		document.getElementById('ledgerMiddleTop1').style.display = "block";
	}
	else if (YLocOfAddedNote >= 95 & YLocOfAddedNote <= 100)
	{
		document.getElementById('ledgerMiddleTop3').style.display = "none";
		document.getElementById('ledgerMiddleTop2').style.display = "block";
		document.getElementById('ledgerMiddleTop1').style.display = "none";
	}
	else if (YLocOfAddedNote >= 105 & YLocOfAddedNote <= 110)
	{
		document.getElementById('ledgerMiddleTop3').style.display = "block";
		document.getElementById('ledgerMiddleTop2').style.display = "none";
		document.getElementById('ledgerMiddleTop1').style.display = "none";
	}
	else if (YLocOfAddedNote >= 130 & YLocOfAddedNote <= 135)
	{
		document.getElementById('ledgerMiddleBottom3').style.display = "none";
		document.getElementById('ledgerMiddleBottom2').style.display = "none";
		document.getElementById('ledgerMiddleBottom1').style.display = "block";
	}
	else if (YLocOfAddedNote >= 120 & YLocOfAddedNote <= 125)
	{
		document.getElementById('ledgerMiddleBottom3').style.display = "none";
		document.getElementById('ledgerMiddleBottom2').style.display = "block";
		document.getElementById('ledgerMiddleBottom1').style.display = "none";
	}
	else if (YLocOfAddedNote == 115)
	{
		document.getElementById('ledgerMiddleBottom3').style.display = "block";
		document.getElementById('ledgerMiddleBottom2').style.display = "none";
		document.getElementById('ledgerMiddleBottom1').style.display = "none";
	}
}

function hidleLedgerLines()
{
	// hide all ledger lines
	document.getElementById('ledgerTop3').style.display = "none";
	document.getElementById('ledgerTop2').style.display = "none";
	document.getElementById('ledgerTop1').style.display = "none";
	
	document.getElementById('ledgerBottom3').style.display = "none";
	document.getElementById('ledgerBottom2').style.display = "none";
	document.getElementById('ledgerBottom1').style.display = "none";
	
	document.getElementById('ledgerMiddleBottom3').style.display = "none";
	document.getElementById('ledgerMiddleBottom2').style.display = "none";
	document.getElementById('ledgerMiddleBottom1').style.display = "none";
	
	document.getElementById('ledgerMiddleTop3').style.display = "none";
	document.getElementById('ledgerMiddleTop2').style.display = "none";
	document.getElementById('ledgerMiddleTop1').style.display = "none";
}