count = 0;
secsFirst = 0;
secsPrevious = 0;
lastTappedButton = 4;

function InitCount()
{
  count = 0;
  setBPMValue(0);
  setTapsValue(0);
}

function ResetCount()
{
	old_count = count;
  count = 0;
  setBPMValue(0);
  setTapsValue(0);
  if(old_count>0)hideResetBPMButton();
}

function TapForBPM(e)
{
  timeSeconds = new Date;
  secs = timeSeconds.getTime();
  if ((secs - secsPrevious) > 1000 * 2)//document.BEATSPERMINUTE.WAIT.value)
  {
    count = 0;
  }

  if (count == 0)
  {
    setBPMValue(0);
	setTapsValue(1);
    secsFirst = secs;
    count = 1;
  }
  else
  {
    bpm = 60000 * count / (secs - secsFirst);
    //document.getElementById("bpmTextField").innerText = (Math.round(bpm * 100)) / 100;
	setBPMValue(Math.round(bpm));
    count++;
	setTapsValue(count);
	showResetBPMButton();
  }
  secsPrevious = secs;
  return true;
}

document.onkeydown = TapForBPM;

function tapped(i)
{
//	document.getElementById("tap1_button").innerText = "";
//	document.getElementById("tap2_button").innerText = "";
//	document.getElementById("tap3_button").innerText = "";
//	document.getElementById("tap4_button").innerText = "";
	
	if(lastTappedButton==1)
	{
		document.getElementById("tap2_button").innerText = "2";
		document.getElementById("tap2_button").style.color = "rgb(0, 0, 0)";
		document.getElementById("tap2_button").style.textShadow = "rgb(0, 0, 0) 0px 0px 0px";
	}
	else if(lastTappedButton==2)
	{
		document.getElementById("tap3_button").innerText = "3";
		document.getElementById("tap3_button").style.color = "rgb(0, 0, 0)";
		document.getElementById("tap3_button").style.textShadow = "rgb(0, 0, 0) 0px 0px 0px";
	}
	else if(lastTappedButton==3)
	{
		document.getElementById("tap4_button").innerText = "4";
		document.getElementById("tap4_button").style.color = "rgb(0, 0, 0)";
		document.getElementById("tap4_button").style.textShadow = "rgb(0, 0, 0) 0px 0px 0px";
	}
	else if(lastTappedButton==4)
	{
		document.getElementById("tap1_button").innerText = "1";
		document.getElementById("tap1_button").style.color = "rgb(0, 0, 0)";
		document.getElementById("tap1_button").style.textShadow = "rgb(0, 0, 0) 0px 0px 0px";
	}
	
	if(i==1)
	{
		document.getElementById("tap2_button").innerText = "Tap";
		document.getElementById("tap2_button").style.color = "rgb(255, 0, 0)";
		document.getElementById("tap2_button").style.textShadow = "rgb(255, 3, 0) 0px 0px 7px";
	}
	else if(i==2)
	{	
		document.getElementById("tap3_button").innerText = "Tap";
		document.getElementById("tap3_button").style.color = "rgb(255, 0, 0)";
		document.getElementById("tap3_button").style.textShadow = "rgb(255, 3, 0) 0px 0px 7px";
	}
	else if(i==3)
	{
		document.getElementById("tap4_button").innerText = "Tap";
		document.getElementById("tap4_button").style.color = "rgb(255, 0, 0)";
		document.getElementById("tap4_button").style.textShadow = "rgb(255, 3, 0) 0px 0px 7px";
	}
	else if(i==4)
	{
		document.getElementById("tap1_button").innerText = "Tap";
		document.getElementById("tap1_button").style.color = "rgb(255, 0, 0)";
		document.getElementById("tap1_button").style.textShadow = "rgb(255, 3, 0) 0px 0px 7px";
	}
	
	if(lastTappedButton!=i-1 && !(lastTappedButton==4 && i==1))
	{
		ResetCount();
	}
	
	lastTappedButton = i;	
}

function getHundreds(n)
{
	if(n<100) return 0;
	return Math.floor(n/100);
}

function getTens(n)
{
	if(n<10) return 0;
	return Math.floor(n/10);
}

function setBPMValue(bpm)
{
	bpm_100 = getHundreds(bpm);
	bpm_10 = getTens(bpm-bpm_100*100);
	bpm_1 = bpm-bpm_100*100-bpm_10*10;
	if(bpm_100==0)
	{
		document.getElementById("BPM_100").style.display = "none";
		document.getElementById("BPM_100").src = "Images/lcd_"+bpm_100+".png";
		//document.getElementById("resetBPM_button").style.left = "71px";
	}
	else
	{
		document.getElementById("BPM_100").style.display = "block";
		document.getElementById("BPM_100").src = "Images/lcd_"+bpm_100+".png";
		//document.getElementById("resetBPM_button").style.left = "16px";
	}
	
	if(bpm_10==0 && bpm_100==0)
	{
		document.getElementById("BPM_10").style.display = "none";
		document.getElementById("BPM_10").src = "Images/lcd_"+bpm_10+".png";
		//document.getElementById("resetBPM_button").style.left = "127px";
	}
	else
	{
		document.getElementById("BPM_10").style.display = "block";
		document.getElementById("BPM_10").src = "Images/lcd_"+bpm_10+".png";
	}

	document.getElementById("BPM_1").src = "Images/lcd_"+bpm_1+".png";
}

function setTapsValue(taps)
{
	taps_100 = getHundreds(taps);
	taps_10 = getTens(taps-taps_100*100);
	taps_1 = taps-taps_100*100-taps_10*10;
	if(taps_100==0)
	{
		document.getElementById("taps_100").style.display = "none";
		document.getElementById("taps_100").src = "Images/lcd_"+taps_100+"s.png";
	}
	else
	{
		document.getElementById("taps_100").style.display = "block";
		document.getElementById("taps_100").src = "Images/lcd_"+taps_100+"s.png";
	}
	
	if(taps_10==0 && taps_100==0)
		document.getElementById("taps_10").style.display = "none";
	else
	{
		document.getElementById("taps_10").style.display = "block";
		document.getElementById("taps_10").src = "Images/lcd_"+taps_10+"s.png";
	}
	
	document.getElementById("taps_1").src = "Images/lcd_"+taps_1+"s.png";
}

function hideResetBPMButton()
{
	var itemToFadeOut = document.getElementById("resetBPM_button");
	fadeElement("resetBPM_button", 0, 2, 100);
}

function showResetBPMButton()
{
	var itemToFadeIn = document.getElementById("resetBPM_button");

	if(itemToFadeIn.style.opacity<=0)
	{
		fadeElement("resetBPM_button", 0, -2, 100);
	}
}

//
// Function: load()
// Called by HTML body element's onload event when the web application is ready to start
//
function load()
{
	setBPMValue(0);
	document.getElementById("resetBPM_button").style.opacity = 0;
	setTimeout(function(){window.scrollTo(0, 1);}, 100);
	
		document.getElementById("tap2_button").innerText = "2";
		document.getElementById("tap2_button").style.color = "rgb(0, 0, 0)";
		document.getElementById("tap2_button").style.textShadow = "rgb(0, 0, 0) 0px 0px 0px";

		document.getElementById("tap3_button").innerText = "3";
		document.getElementById("tap3_button").style.color = "rgb(0, 0, 0)";
		document.getElementById("tap3_button").style.textShadow = "rgb(0, 0, 0) 0px 0px 0px";

		document.getElementById("tap4_button").innerText = "4";
		document.getElementById("tap4_button").style.color = "rgb(0, 0, 0)";
		document.getElementById("tap4_button").style.textShadow = "rgb(0, 0, 0) 0px 0px 0px";
	
	
	InitCount();
    setupParts();
}

// Fade: Do the fade. This function will call itself, modifying the parameters, so
// many instances can run concurrently. Can fade using opacity, or fade using a box-shadow.
// note: take from Cabel Sasser web site. Cheers!
var fadeTimer;

function fadeElement(theID, fadeCurrent, fadeAmount, fadeSteps)
{
	if (fadeCurrent == fadeSteps)
	{
		// We're done, so clear.
		clearInterval(fadeTimer);
		fadeTimer = false;
	}
	else
	{
		fadeCurrent++;
		// Set the opacity depending on if we're adding or subtracting (pos or neg)
		
		if (fadeAmount < 0)
		{
			setOpacity(Math.abs(fadeCurrent * fadeAmount), theID);
		}
		else
		{
			setOpacity(100 - (fadeCurrent * fadeAmount), theID);
		}
	}

	// Keep going, and send myself the updated variables
	clearInterval(fadeTimer);
	fadeTimer = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15);
}

function setOpacity(opacity, theID)
{
	document.getElementById(theID).style.opacity = (opacity / 100);
}