Hi, I'm trying to create an app for the Palm Pre. It is a prayer app (if you're Catholic, it is a Rosary app). A rosary is kind of like a necklace on which you count beads. What I'm trying to do:
1. You click on one of 4 buttons to select one of 4 sets of "mysteries".
2. The page then displays a) the title of the set of mysteries (except in a few cases), the title of the individual mystery, the prayer that goes with it, and the bead you are on.
3. Each page has a button, "Next Bead", which you click to advance to the next prayer and bead.

The routine goes like this:
1. Before the mysteries - Apostles Creed, Our Father, three Hail Marys, Glory Be, and Fatima prayer
2. Then, for each individual mystery - Our Father, ten Hail Marys, Glory Be, and Fatima prayer - this cycle will repeat 5 times for each of 5 mysteries.
3. After the mysteries - Hail Holy Queen

Concerns - First, I'm not sure I have the best set up for the buttons at the beginning. With the phone SDK, the phone will have to 'listen' for which button is pressed. Did I set this up right?

Second, I have all of these if statements set up to pick which prayer occurs with which bead. Is this the most efficient way to do this?

All thoughts are appreciated. Thanks!

Code JavaScript:
    <script type="text/javascript">
 
    var chaplet=new Array("The Joyful Mysteries","The Luminous Mysteries","The
                           Sorrowful Mysteries","The Glorious Mysteries");
    var mystery=new Array();
    mystery[0]=new Array("Annunc","Visit","The Nativ","Present","Temple");
    mystery[1]=new Array("Baptism","Wedding", "Kingdom","Transfig","Eucharist");
    mystery[2]=new Array("Agony","Scourging","Crowning","Carrying", "Crucif");
    mystery[3]=new Array("Resurr","Ascension","Spirit","Assumption","Coronation");
    var creed="I believe..."
    var ourFather="Hallowed be"
    var hailMary="Blessed are thou"
    var gloryBe="As it was"
    var fatima="Oh my Jesus"
    var hailHolyQueen="To thee do we cry"
    var dec=0;
    var beadCount=0;
    var mys=0;
    var bead=0;
 
    function nextBead()
    {
	eventSrcID=(event.srcElement)?event.srcElement.id:'undefined';
	if (eventSrcID=='joy') mys=0;
	if (eventSrcID=='lum') mys=1;
	if (eventSrcID=='sor') mys=2;
	if (eventSrcID=='glo') mys=3;
 
	if (beadCount==0)
		{
		div1.innerHTML="Apostles Creed";
		div2.innerHTML="";
		div3.innerHTML="<p>"+creed+"</p>";
		div4.innerHTML="Cross";
		}
	else if (beadCount==1)
		{
		div1.innerHTML="Our Father";
		div2.innerHTML="";
		div3.innerHTML="<p>"+ourFather+"</p>";
		div4.innerHTML="Decade 0 Bead "+beadCount;
		};
 
	else if (beadCount<=4)
		{
		div1.innerHTML="For Faith, Hope and Charity";
		div2.innerHTML="";
		div3.innerHTML="<p>"+hailMary+"</p>";
		div4.innerHTML="Decade 0 Bead "+beadCount;
		};
 
	else if (beadCount==5)
		{
		div1.innerHTML="Glory Be";
		div2.innerHTML="";
		div3.innerHTML="<p>"+gloryBe+"</p>";
		div4.innerHTML="Decade 0 Bead "+beadCount;
		};
 
	else if (beadCount==6)
		{
		div1.innerHTML="Fatima Prayer";
		div3.innerHTML="<p>"+fatima+"</p>";
		div4.innerHTML="Decade 0 Bead "+(beadCount-1);
		};
 
	else if (beadCount==72)
		{
		div1.innerHTML="Hail Holy Queen";
		div2.innerHTML="";
		div3.innerHTML="<p>"+hailHolyQueen+"</p>";
		div4.innerHTML="Medal";
		};
 
	else if (beadCount>6 && beadCount<72)	
		{
 
		div1.innerHTML="<p>"+chaplet[mys]+"</p>";
		div2.innerHTML="<p>"+mystery[mys][dec]+"</p>";
 
		if (bead==0)
			{ 
			div3.innerHTML="<p>"+ourFather+"</p>";
			div4.innerHTML="<p>Decade "+(dec+1)+" Bead "+bead+"</p>";
			};
 
		else if (bead<=10) 
			{
			div3.innerHTML="<p>"+hailMary+"</p>";
			div4.innerHTML="<p>Decade "+(dec+1)+" Bead "+bead+"</p>";
			};
 
		else if (bead==11) 
			{
			div3.innerHTML="<p>"+gloryBe+"</p>";
			div4.innerHTML="<p>Decade "+(dec+1)+" Bead "+bead+"</p>";
			};
 
		else if (bead==12)
			{
			div3.innerHTML="<p>"+fatima+"</p>";
			div4.innerHTML="<p>Decade "+(dec+1)+" Bead "+(bead-1)+"</p>";
			};
 
		bead++;
 
		if (bead==13) bead=0;
 
		if (bead==0) dec=dec+1;
 
	};
	beadCount++;
	div5.innerHTML="<input type='button' value='Next Bead' onclick='nextBead()' />";
    };
    </script>
    </head>
    <body>
    <div id="div1">
    <input type="button" id="joy" value="The Joyful Mysteries" onclick="nextBead
    ()" /><br />
    </div>
    <div id="div2">
    <input type="button" id="lum" value="The Luminous Mysteries" onclick="nextBead
    ()" /><br />
    </div>
    <div id="div3">
    <input type="button" id="sor" value="The Sorrowful Mysteries" onclick="nextBead
    ()" /><br />
    </div>
    <div id="div4">
    <input type="button" id="glo" value="The Glorious Mysteries" onclick="nextBead
    ()" /><br />
    </div>
    <div id="div5">
    </div>
    </body>