var frameRate = 1000 / 30;
var slides = [];

$(document).ready( function()
{
  init();
  setInterval( "update()", frameRate );
});

function init()
{
  slides[0] = createSlide( 0 );
  slides[1] = createSlide( 1 );
}

function createSlide( id )
{
  var s = {};
  s.id = "cat_" + id;
  s.x = 1146 * id; 
  s.y = 0;
  s.width = 1146;
  
  $("#imgConveyor").append( "<img id=" + s.id + " src='_img/sliding_logos.jpg' alt='' />");
  
  $('#' + s.id).css( 'position', 'absolute');
  $('#' + s.id).css( 'width', s.width + 'px');
  $('#' + s.id).css( 'height', s.height + 'px');
  
  s.update = function()
  {
    this.x --;
    
    if ( this.x < -1146 )
    {
      this.x = 1146;
    }
  
    $( '#' + this.id ).css( 'left', this.x + "px" );
    $( '#' + this.id ).css( 'top', this.y + "px" );
  }
  
  return s;
}

function update()
{
  slides[0].update();
  slides[1].update();
}