$(document).ready(function() {
  // make sure we start by displaying the overlay
  /*$(".ticker .description .reveal").show();
  // rotateBanner function - this function tells us what we want to action for each call of the
  rotateBanner = function(){
    // string the animations together so they wait their turn
    $(".ticker .description .reveal").animate( { width:"0px" }, { queue:true, duration:8000 }).animate( { width:"648px" }, { queue:true, duration:0 });
  }
  setInterval("rotateBanner()",1000);*/

  rotateBanner = function() {
    $(".ticker .current .reveal").show();
    $('.ticker .current').show();
    
    // animate the current item
    $('.ticker .current .reveal').animate({width: '-=500' }, 20000, function() {
      // get the next item
      var id=this.parentNode.id;
      var current=$('.ticker #'+id);
      var currentReveal=$('.ticker #'+id+' .reveal');
      id++;
      
      this.parentNode.className = 'description tickerItem';
      currentReveal.css('width','648px');
      current.hide();
      currentReveal.hide();

      var next = $('.ticker #'+id);

      if(document.getElementById(id)) {
        next.addClass('current');
        rotateBanner();
      } else {
        next = $('.ticker #0');
        next.addClass('current');
        rotateBanner();
      }
      
      
    });
  }
  //rotateBanner();
  $(".ticker .current .reveal").show();
  $('.ticker .current').show();
  setTimeout("rotateBanner()",1000);

});