faith: Bahá'í prayer of the day

1. include bahaiprayeroftheday.js in your page

The bahaiprayer.js script file contains the Bahá'í dates, prayer titles and short quotes, image and prayer links, along with the code that makes it all work. All the images and prayers live on the bahaiprayers.org website, only this little bit of code lives on your server. You'll want to include it somewhere in the head section of your page, like this:

<script type="text/javascript" src="bahaiprayeroftheday.js"></script>

2. include a bit of HTML in your page

You'll want to include this bit of HTML in your page. It displays an image and a link to a prayer. This lets visitors who have JavaScript turned off see something. If you have really sharp eyes, you might notice that there's no date visible - that's because it would only be right about one day out of the year.

<!-- prayer of the day -->
<div id="prayer">
  <div id="prheader">Bah&aacute;'&iacute; Prayer of the Day</div>
  <div id="prdate"> </div>
  <div id="prpixdiv"><a id="prlink" 
    title="Bah&aacute;'&iacute; Prayer of the Day at bahaiprayers.org" 
    href="http://www.bahaiprayers.org/assist6.htm"><img 
      src="http://www.bahaiprayers.org/images/assist6_sm.jpg" 
      alt="Bah&aacute;'&iacute; Prayer of the day at bahaiprayers.org" 
      width="80" height="90" 
      id="prpix" /></a></div>
  <div id="prtitlediv"><a id="prtitle" 
    title="Bah&aacute;'&iacute; Prayer of the Day at bahaiprayers.org" 
    href="http://www.bahaiprayers.org/assist6.htm">O Lord! 
      Thou art the Remover of every anguish...</a></div>
</div>
<!-- end prayer of the day -->

You'll see some special characters included as HTML character entity references. This is how the accented á and í characters are displayed in the word Bahá'í.

3. style the HTML

It's a bit harder to pass along the definitive way to style the Bahá'í prayer of the day. You'll want it to match your site, not mine. That said, here is how the little prayer block gets styled in the default deep gray sea personality of this site:

/* Baha'i Prayer of the day */
#prayer {border: 1px dotted #aaa;
  margin: 0 15px 15px 0;
  width: 156px;
  vertical-align: middle;
  position: relative;
  background-color: #fff;
  float: left;}
#prheader {font-weight: bold;
  margin: 10px 15px 0 15px;
  text-align: center;}
#prdate {font-style: italic;
  margin: 0 15px 10px 15px;
  text-align: center;}
#prpixdiv {margin: 0 15px;}
#prlink {}
#prpix {margin: 0 0 0 22px;
  border: 1px solid #0D2D40;
  z-index: 10;
  display: block;}
#prtitlediv {margin: 2px 15px 15px 15px;
  text-align: center;}

You'll perhaps notice that I don't include font sizes. That's because layout and font size are set in different style sheets on this site. This lets personality and text size be adjusted independently. So let's add another little bit of styling that catches up some missing pieces:

body {font: normal 10px Arial, Helvetica, sans-serif;}
div, span {color: #000;}
a {color: #050588;
  text-decoration: none;
  position: relative;
  z-index: 10;
  letter-spacing: 0.1em;}
a:hover {text-decoration: underline;}

You can add these style statements to an existing stylesheet on your site, or in a style block in the head section of your page. You'll want to tweak this until you're either happy with it or tired of messing with it :-)

4. initialize the image, date, text and link

The showPrayerOfTheDay() function does all the work. You can have an onload handler fire the function, or can simply add a little script block at the bottom of your page. It's important though for this code to execute after the HTML loads - otherwise you might see errors. Since the onload functions do other stuff on this site, I chose to add a small script block at the bottom of the page. Looks like this:

<script type="text/javascript">
  setTimeout("showPrayerOfTheDay()",100);
</script>

The setTimeout is helpful to prevent Internet Exploder from getting confused and crashing sometimes. Sigh.

how does it work? part 1: the data

You don't really have to know all this stuff to get it working, only if you're interested. But if you're still here, let's take a look under the hood.

Most of the bahaiprayeroftheday.js file is a big 'ol JavaScript array. Actually, it's an array of arrays of arrays - goes in three levels deep. Here's a sample from the start of the file:

var bp = new Array();
// January - JavaScript months begin with zero
bp[0] = new Array();
bp[0][1] = ["2 Sharaf/Honor","","All praise, O my God...","praise_sm","praise1"];
bp[0][2] = ["3 Sharaf/Honor","","O Thou Whose face is the object of my adoration...","aid_sm","aid1"];

What's happening here is that first an array called bp is declared. Then the first item in the array, bp[0] is itself declared as an array. Finally, an item bp[0][1] is initialized, also as an array.

There are two little JavaScript quirks going on here. The first one is sure proof that the JavaScript language was invented by demonic goat-worshipers: in the Date object's getMonth() function, January is returned as month 0. That's right, not the first month in the year, but the zeroeth month in the year. What were these people thinking? Ok, I'll stop griping now, but what this means is that if you're planning to grab the current date and then use the numeric month to index an array with, you need to number the months from 0 to 11. The second little lesson is that JavaScript arrays can be "sparse". This means you can leave gaps in them. So the second-level array of days starts with 1 instead of zero. Thank goodness the first day of the month isn't zero, probably they meant to do that but had a tight deadline.

There's an array for each day of the year. They are all consistently structured, kind of like a little midget database. The entries for January 1st, bp[0][1] in the array, are shown below:

• bp[0][1][0] is "2 Sharaf/Honor", the date in the Bahá'í calendar.
• bp[0][1][1] is "", on special days this field has a value.
• bp[0][1][2] is "O Thou Whose face is the object of my adoration...", the first few words of the prayer of the day.
• bp[0][1][3] is "aid_sm", this is the file name minus extension of the image that will be displayed.
• bp[0][1][4] is "aid1", this is the file name minus extension of the HTML page the prayer appears on.

how does it work? part 2: the function

The showPrayerOfTheDay() function puts all the pieces together:

function showPrayerOfTheDay() {
  var today = new Date();
  var mo = today.getMonth();
  var day = today.getDate();
  var year = today.getFullYear();
  var linkprefix = "http://www.bahaiprayers.org/";
  var linksuffix = ".htm";
  var imgprefix = "images/";
  var imgsuffix = ".jpg";
  
  // leap year computation for intercalary days
  var isLeap = new Date(year,1,29).getDate() == 29;

  // compute year in Badi calendar
  var badiyear;
  if (mo < 2) {badiyear = year - 1844;}
  else if (mo > 2) {badiyear = year - 1843;}
  else {
    if (day < 21) {badiyear = year - 1844;}
    else {badiyear = year - 1843;}
  }
	
  // assemble date string
  var badidate = bp[mo][day][0] + " " + badiyear + " B.E.";
  if (bp[mo][day][1] > "") {badidate += ", " + bp[mo][day][1];}

  // special March 1st date handling for leap years
  if (isLeap && mo == 2 && day == 1) {
    badidate = "5 Ayy\341m-i-H\341, Intercalary Days";
  }

  // replace page values
  var bpdate = document.getElementById("prdate"); // date
  if (bpdate) {bpdate.firstChild.nodeValue = badidate;}

  var prlink = document.getElementById("prlink"); // image link
  if (prlink) {prlink.href = linkprefix + bp[mo][day][4] + linksuffix;}

  var prpix = document.getElementById("prpix"); // image
  if (prpix) {prpix.src = linkprefix + imgprefix + bp[mo][day][3] + imgsuffix;}
  
  var prtitle = document.getElementById("prtitle"); // text link
  if (prtitle) {
    prtitle.href = linkprefix + bp[mo][day][4] + linksuffix;
    prtitle.firstChild.nodeValue = bp[mo][day][2];
  }
}

The function starts out by initializing some text strings that get used later to construct the URLs and so on. It also obtains the current date, including the zero-based month (sigh). Then the Bahá'í year is computed. Since Naw-Rúz (New Years) falls on March 21st, there is a little bit of code to test for the year boundary, plus special handling for leap years. Then the various strings are assembled and used to replace text nodes or links in the HTML.

Bahá'í prayer of the day iGoogle Gadget

The iGoogle Gadget version uses very similar code to compute the Bahá'í date, but instead of doing a lookup within a Javascript array, the gadget grabs a different XML file directly from the bahaiprayers.org website each day. iGoogle Gadgets are designed to process XML data, so this works pretty well and can scale to support many users without requiring a large Javascript download. If you have a personalized iGoogle home page, you can add the Bahá'í prayer of the day gadget and enjoy a little spiritual moment whenever you start up your web browser.