var featureInfo = [
  {
    image: "favorites.png",
    title: "Favorites",
    description: "Mark your most frequently-used stations as favorites for easy access. Setting a favorite is as quick as a single tap."
  },
  {
    image: "metroMap.png",
    title: "Metro Map",
    description: "Don't get lost! Tunnels includes a copy of the WMATA metro map for easy reference."
  },
  {
    image: "phone.png",
    title: "Mobile Phone Signal",
    description: "Wondering whether you'll be able to talk on the phone or go online during that 19-minute wait for the next train? Tunnels lets you know which stations have mobile phone service and which don't."
  },
  {
    image: "satellite.png",
    title: "Satellite View",
    description: "Tunnels isn't limited to the standard map view. Scope out nearby landmarks with satellite and hybrid views."
  },
  {
    image: "nearMe.png",
    title: "Near Me",
    description: "Find nearby Metro stations using the iPhone's built-in GPS."
  },
  {
    image: "predictions.png",
    title: "Accurate Predictions",
    description: "Tunnels uses real WMATA data to show you when trains will be arriving at Metro stations."
  },
  {
    image: "entrances.png",
    title: "Station Entrances",
    description: "Tunnels displays actual station entrances, not generic locations. Need to know where a station elevator is? Looking for the closest exit to your destination? Tunnels has you covered."
  },
  {
    image: "outages.png",
    title: "Escalators & Elevators",
    description: "Every Metro rider knows that station elevators and escalators can break down with alarming frequency. Tunnels shows you outages for each station and the whole system, so you'll never be caught unaware."
  },
];

function dataForImage(imageURL) {
  var foundItem = null;

  $.each(featureInfo, function(index, item) {
    if(imageURL.indexOf(item.image) >= 0) {
      foundItem = item;
      return false;
    }
  });
  
  return foundItem;
}

function showItemDetails(imageURL) {  
  var item = dataForImage(imageURL);

  if(item) {
    $('.featureTitle').text(item.title);
    $('p.featureText').text(item.description);
  }
}

$(function() {
  var image = $('#screenContainer img:first-child').attr('src');
  showItemDetails(image);

  $("#screenContainer").carouFredSel({
    width: 246,
    height: 369,
    pagination: "#pager",
    items: {
      visible: 1,
      width: 246,
      height: 369
    },
    scroll: {
      onBefore: function(oldItems, newItems, newSizes, duration) {
        var imageURL = $(newItems[0]).attr('src');
        showItemDetails(imageURL);
      }
    }
  });
});