// Dynamic Headlines
// http://www.readytogophp.com

// usage:
// <div class="headline">
//    <span>First Headline</span>
//    <span>Next headline</span>
//    <span>and so on...</span>
// </div>

// <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
// <script type="text/javascript" src="headlines.js"></script>

$(document).ready(function() {
   // Hide all SPAN tags within the "headline" layer...
   $(".headline > span").hide();

   // Run the "stepLayer" function against each of those layers.
   $(".headline").each(stepLayer);
});

// Rotate this particular layer
function stepLayer(num) {
   // Get all the SPAN tags inside this layer.
   var children = $(this).children("span");

   // Run the stepHeadline function for these tags.
   stepHeadline(children);
}

function stepHeadline(list, index) {
   // Are we showing headline 0, 1, 2, etc. in this "headline" DIV layer
   if (index == undefined) { index = 0; }

   // Which headline will we show when we are done?
   var nextIndex = (index+1) % list.length;

   // How many words are in this headline?
   var numberOfWords = list[index].innerHTML.split(/\s+/).length;
   if (numberOfWords <= 1) { numberOfWords = 10; }

   $(list[index])
      // Take half a second to fade the text in...
      .fadeIn(500)

      // Pause one second for each word in the message...
      .animate({opacity:'+=0'}, numberOfWords*1000)

      // Take half a second to fade out then move to the next step.
      .fadeOut(500, function() { stepHeadline(list, nextIndex); })
   ;
}