String.prototype.toTitle = function() {
  result = this.replace(/-/g, " ").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
  return result;
}

function loadMovie(movie) {
  selectPanel(movie);
  replaceContent($("#feed .content"), "/movies/" + movie + "?content=posts&count=15&mincount=2&sidebar=true");
}

function revealIntro() {
  $("#hpprojects").find(".reveal").each(function(index) {
    $(this).delay(1500+1200*(index)).fadeIn('slow');
  });
}

function preparePanels() {
  $("#panels .panel").each(function(index) {
    $(this).css('top', $(this).outerHeight(true) * index);
  });
  $("#panelswrapper").css('height', ($("#panels .panel").size() * $("#panels .panel").outerHeight(true)));
}

function selectPanel(id) {
  /* 
   * This function works quite reliably, but isn't self-correcting;
   * once panels get in funny places, they'll continue to be in funny places.
   * An alternative implementation would be to put the panels in
   * order in the DOM (using insertAfter) and then to use their
   * index to position them.  This is hard, because the loop over the
   * panels tends to get a bit muddled when they are changing position.
   */
  selectedPanel = $("#panel-"+id);
  selectedIndex = selectedPanel.index();
  $("#panels .panel").each(function() {
    if ($(this).index() == selectedPanel.index()) {
      $(this).animate({top: 0});
    } else if ($(this).position().top < selectedPanel.position().top) {
      $(this).animate({top: "+="+$(this).outerHeight(true)});
    }
  });
}

function highlight(element) {
  $("#projectthumbs").find("a").removeClass("chosen");
  $(element).addClass("chosen");
}

function replaceContent (container, url) {
  container.fadeOut(function() {container.load(url, function() {container.fadeIn()})});
}