var cache = [];
var wrapX;
var step = 1;

$(function() {
  // Double our props for seamless scrolling
  $('#scroller').append($('#scroller').html() );

  // Figure out the width of our props and screen
  var totalLeft = $('#scroller .prop:last').offset();
  var totalWidth = totalLeft.left + $('#scroller .prop:last').width();
  //var pageWidth = $('body').width();

  // This is when we wrap
  wrapX = (totalWidth / 2) * -1;

  $('.prop a img').mouseover(function() {
      var rollImg = 'gfx/props/' + $(this).attr('imgid') + '_roll.png';
      $(this).attr('src', rollImg);
    }).mouseout(function() {
      $(this).attr('src', 'gfx/x.gif');
    });

  // Start scrolling
  setInterval(scrollIt, 50);
});

function scrollIt()
{
  var offset = $('#scroller').offset();
  if (offset.left >= wrapX)
  {
    $('#scroller').css('left', offset.left - step + 'px');
  } else {
    $('#scroller').css('left', (step * -1) + 'px');
  }
}

// Arguments are image paths relative to the current page.
preLoadImages = function() {
  var args_len = arguments.length;
  for (var i = args_len; i--;) {
    var cacheImage = document.createElement('img');
    cacheImage.src = arguments[i];
    cache.push(cacheImage);
  }
}

preLoadImages('gfx/props/cityfront-420_roll.png', 'gfx/props/grande-south-1206_roll.png', 'gfx/props/harbor-club-3004_roll.png', 'gfx/props/jockey-club-7447_roll.png', 'gfx/props/jockey-club-7479_roll.png', 'gfx/props/meridian-1905_roll.png', 'gfx/props/meridian-2201_roll.png', 'gfx/props/meridian-2403_roll.png', 'gfx/props/meridian-504_roll.png', 'gfx/props/meridian-703_roll.png', 'gfx/props/meridian-708_roll.png', 'gfx/props/pinnacle-3103_roll.png', 'gfx/props/pinnacle-3402_roll.png');