Using Firebase to store Haiku's then randomly rotating the library on a web page.

FirebaseHaiku.js

// Juan Orozco

//   I love Firebase for its simplicity and power. It's great for applications that 
// need web socket functionality or live loading. I like to use the developer buckets
// for prototpying, learning, and, in some cases, simple storage. This is an example
// of that use case.

//  I have a page on my machine running as localhost that can post new Haiku. But anyone
// can read and display the list of Haiku I have stored there.

// Firebase Structure:
// Haiku
// -<Grouping Name> This is used to control where some Haiku are displayed.
// --<List of Haiku> using this structure:{haiku:"<The Haiku>"}



//The security settings on this bucket are set to read only, so it's perfectly safe to use this for read testing.
var haikus = new Firebase('https://juanshaikus.firebaseio.com/');

//gets a random haiku for specific website
function getRandomHaiku()
{
  var site_haikus, site_name;
  site_name = "juanorozco_com";//this is just in case I want haikus to show up on certain sites or even sections of a site.

  //get haiku count
  site_haikus = haikus.child(site_name + "/haikus");
  site_haikus.once("value", function(snapshot)
  {
    var i,haiku_count, random_haiku, random_haiku_obj;

    haiku_count = snapshot.numChildren();
    //pick a random number
    random_haiku = Math.floor(Math.random() * haiku_count);

    //   Because there is no "easy" way to get a random list item from a Firebase snapshot,
    //  we have to loop through each element until we find the right one.
    //  Perhaps we could use the priority but I coudn't think of a simple way of keeping track
    //  of the indexes as new entries are created.
    //  (Like I said, there's no easy way...)

    //get that haiku
    i = 0;
    snapshot.forEach(function(item)
    {
      if (i == random_haiku)
      {
        //output to screen
        printLatestHaiku( item );
      }
      
      //increment the index
      i = i +1;
    });

  });

}


// Simply gets the latest Haiku.
//   I only tested this with on Haiku. From what I understand, I should be getting the
// LAST created haiku with this code. Although, from what I understand, the "value"
// event sets the pointer at the FIRST item. I could be wrong and I'm not using this 
// on the page anymore.
function getLatestHaiku()
{
  var site_haikus, site_name;
  site_name = "juanorozco_com";
  site_haikus = haikus.child(site_name + "/haikus");
  
  site_haikus.once("value", function(item)
  {
    printLatestHaiku(item);
  });
}

function printLatestHaiku( fb_item )
{
  var haiku = fb_item.val();
  haiku = haiku.haiku;
  
  //Haikus are created in a textarea so need to replace line breaks with break tag.
  haiku = haiku.replace(/\n/g,"<br/>");


  //  I'd like to style this up the same way no matter what the site's template may look like
  // This means using a templating engine and script loader... too much for this simple example.
  
  //post haiku on screen
  document.getElementById("latest_haiku").innerHTML = haiku;
}

//get a random Haiku and print on the page.
getRandomHaiku();