$(document).ready(function() {
  
  $.ajax({
    url: "/rooms/rollover",
    success: function(html) {
      $(html).appendTo('#rollovers');
      roomsRollover();
    },
    error: function() {
      if (window.console && window.console.log) { console.log('error: rollover images cannot be loaded');}
    }
  });

  function roomsRollover() {
    $('#floorplan').bind('mouseover', function(event) {
      var tgt = event.target, nName = tgt.nodeName.toLowerCase();
      if (/span|a/.test(nName)) {
        $('#rollovers div img').hide();
        
        // ignore the first link ("overview") so we get index - 1, but not the first span
        var i = nName == 'a' ? $(this).find(nName).index(tgt) - 1 : $(this).find(nName).index(tgt);
        if (i >= 0) {
          $('#rollovers div img:eq(' + i + ')').show();
        }
      }
    }).bind('mouseleave', function(event) {
      $('#rollovers div img').hide();
    });
  }
});