var _cacheImage = $H({});
function cacheImage(src) {
  if (!_cacheImage.get(src)) {
    var img = new Image();
    img.src = src;
    _cacheImage.set(src, img);
  }
}
function getMediaContent(element) {
  element = $(element);
  var mediaElement = element.next("a[rel=flickr-media-content]");
  if (mediaElement) {
  }
  return mediaElement;
}

function doMoveToFlickrPhoto() {
  window.FlickrScroller.doMoveToElement(this);

  // Cache next item
  if ($(this).next()) {
    var preload = getMediaContent($(this).next().down("a"));
    if (preload) cacheImage(preload.href);
  }

  // Cancel if this item doesn't have an image
  var element = this.down("a");
  if (!element.down("img")) {
    return true;
  }

  var description = $("pFlickrDescription1");
  var href = element.href;
  var title = element.title.split(" | ");

  if (description) {
    description.hide();
    description.update(
      '<a href="'+href+'" target="_blank">'+title[0]+'</a><br />' +
      '<span class="spanFlickrDate">'+title[1]+'</span>'
    );
    new Effect.Appear(description);
  }

  var mediaElement = getMediaContent(element);
  var contentElement = $("divFlickrPhotoLarge1").down("div");

  if (mediaElement && contentElement) {
    cacheImage(mediaElement.href);
    new Effect.Fade(contentElement, {
      duration: 0.25,
      afterFinish: function() {
        contentElement.setStyle("background: url("+mediaElement.href+") no-repeat center center");
        contentElement.title = title[0];
        contentElement.update('<a href="'+href+'" style="float: left; border-bottom: 0px; width: 100%; height: 100%" target="_blank"></a>');
        new Effect.Appear(contentElement, { duration: 0.5 });
      }
    });
  }

  return false; /* to cancel a[href] */
}
    
document.observe("dom:loaded", function() {
  var element = $("divFlickrScroller1");

  window.FlickrScroller = new HM.NewsScroller(element.down(".divFlickrScroller"), {
    direction: "horizontal",
    interval: 1500,
    isDraggable: false,
    autostart: false,
    autorewind: false
  });

  Event.observe(element.down(".divFlickrScrollLeft"), "click", window.FlickrScroller.doMovePrevious.bind(window.FlickrScroller, { elements: 4 }));
  Event.observe(element.down(".divFlickrScrollRight"), "click", window.FlickrScroller.doMoveNext.bind(window.FlickrScroller, { elements: 4 }));

  // Get items
  var items = element.select("div.divFlickrPhoto");

  // Attach onclick handler
  items.each(function(element) {
    element.onclick = doMoveToFlickrPhoto;
  });

  // Move to first item
  doMoveToFlickrPhoto.bind(items.first())();
});