function initCommon(){
  // Auto open external links in a new window.
  // Use class name "stay" to prevent auto new window and class name "blank" to force a new window.
  $('a[href^="http://"]:not(a.stay), a.blank').live('click', function(e) {
    window.open($(this).attr("href"));
    e.preventDefault();
  });

  // Setting this in javascript to avoid an orange flicker on the page.
  $('body').css('backgroundColor', '#f58029');

  // Set up the top nav animations
  // Add the arrow. Some css is in the style sheet.
  
  
  $('#hd').prepend('<img id="nav-bg" src="media/img/nav-bg.png" alt="" width="25" height="40">');
  var currentNavItem = $('#nav .current');
  var haveCurrentNav = false;
  var navArrow = $('#nav-bg');
  var navArrowWidth = navArrow.width();

  if(currentNavItem.length){
    haveCurrentNav = true;
  }else{
    navArrow.css('display', 'none');
  }

  $('#nav li:not(.bios)').hover(function(e){   // Over
    var navPosition = $('#nav').position();
    var pos = $(this).position();
    var width = $(this).width();

    navArrow.css('display', 'block');
    navArrow.stop();
    navArrow.animate({
      left: navPosition.left + pos.left + (width / 2) - (navArrowWidth / 2)
    }, 300);
  },
  function(e){  // Out
    moveArrowToCurrentNavItem(300);
  });

  function moveArrowToCurrentNavItem(time){

    if(!haveCurrentNav){
      navArrow.css('display', 'none');
      currentNavItem = $('#nav .home');
    }
    
    if(currentNavItem.length){
      var navPosition = $('#nav').position();
      var currentNavItemPos = currentNavItem.position();
      var currentNavItemWidth = currentNavItem.width();

      time = time == undefined ? 0 : time;

      navArrow.stop();
      navArrow.animate({
        left: navPosition.left + currentNavItemPos.left + (currentNavItemWidth / 2) - (navArrowWidth / 2)
      }, time);
    }
  }

  $('#nav #about').tooltip({ target: '#nav #bios', positionTip: false});
  $('#nav .sub').css('display', 'none');

  moveArrowToCurrentNavItem();
}

// ===================================================================
// Social page methods start
// Note that these depend on the proper html structure.
// ===================================================================

var FLICKR_CHANGE_TIMEOUT = 5000;
var flickrContainer;
var flickrPhotos = [];

function randOrder(){
  return (Math.round(Math.random())-0.5);
}

// Randomly updates the photos
function updateFlickrPhotos(){

  var showing = flickrContainer.find('a:visible img');
  var hidden = flickrContainer.find('a:hidden img');
  var show = hidden.eq(Math.floor(Math.random() * hidden.length));
  var hide = showing.eq(Math.floor(Math.random() * showing.length));

  hide.fadeOut(1000, function(){
    var hideParent = hide.parent();

    show.parent().append(hide);

    hideParent.append(show);

    show.hide().fadeIn(1000);
    setTimeout(updateFlickrPhotos, FLICKR_CHANGE_TIMEOUT);
  });
}

function initSocial(){
  var newsContainer = $('#news');
  var kegContainer = $('#keg-name');
  var musicContainer = $('#music');

  flickrContainer = $('#flickr-pics');

  newsContainer.empty();
  kegContainer.empty();
  musicContainer.empty();
  flickrContainer.empty();

  // Load the homepage data
  $.getJSON('media/data/homepage.json', function(data){
    var i;
    var news = data.news;
    var music = data.music;
    var newsHtml = '';
    var musicHtml = '';

    for(i = 0; i < news.length; i++){
      newsHtml += '<p class="date">' + news[i].line1 + '</p>';
      newsHtml += '<p>' + news[i].body + '</p>';
    }
    newsContainer.append(newsHtml);

    $('#keg-pic').attr('src', data.ontappic);
    kegContainer.html(data.ontap);

    for(i = 0; i < music.length; i++){
      if(i % 4 < 2) {
        css_class = ' class="alt"';
      } else {
        css_class = '';
      }
      musicHtml += '<li' + css_class + '>' + music[i] + '</li>';
    }
    musicContainer.append('<ul>' + musicHtml + '</ul>');
  });

  // Get the tweets
  $('#tweets').tweet({
      username: "@stevibs",
      join_text: "auto",
      avatar_size: 32,
      count: 4,
      auto_join_text_default: "",
      auto_join_text_ed: "",
      auto_join_text_ing: "",
      auto_join_text_reply: "",
      auto_join_text_url: "",
      loading_text: "loading tweets..."
  });

  // Get the flickr photos.

  $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?id=50732760@N05&lang=en-us&format=json&jsoncallback=?', function dislayFlickrPhotos(data){
    var html = '';

    $.each(data.items, function(i, item){
      var p = {};
      var src = (item.media.m).replace("_m.jpg", "_s.jpg");

      p.link = item.link;
      p.src = src;
      p.title = item.title;

      flickrPhotos.push(p);
    });

    flickrPhotos.sort(randOrder);
    var len = flickrPhotos.length;

    for(i = 0; i < len; i++){
      html += '<a href="' + flickrPhotos[i].link + '"><img src="' + flickrPhotos[i].src + '" alt="' + flickrPhotos[i].title + '"></a>';
    }

    flickrContainer.append(html);
    flickrContainer.find('a:gt(7)').css('display', 'none');

    setTimeout(updateFlickrPhotos, FLICKR_CHANGE_TIMEOUT);
  });
} 

// ===================================================================
// Social page methods end
// ===================================================================

// ===================================================================
// Colorbox data page code start
// ===================================================================

var colorBoxMultiRelCount = 0;
var colorBoxFlowPlayerSrcIndex = 0;

/**
 * Sets up a page that uses colorbox to show video, audio, etc via a specific data structure.
 */
function initColorBoxDataPage(mulitSrcCheckSelector, colorboxOnLoadFunction){
  // Add the element used for inline colorbox display.
  $('#ct').append('<div style="display:none;" id="cb-inlines"><div id="player-inline"></div></div>');
  

  // Colorbox setup for MULTIPLE video and audio items.
  // Look for items with multiple src nodes for video, audio data.
  // This is not for swfs, or images.
  // For those items, set up the html so that colorbox will group them.
  $(mulitSrcCheckSelector).each(function(){
    var t = $(this);
    var sources = t.find('.src');

    if(sources.length > 1){
      var p = t.parent();
      var html = '';

      p.find('a').attr('rel', 'group' + colorBoxMultiRelCount);

      sources.each(function(i, e){
        html += '<a href="' + $.trim(e.innerHTML) + '" style="display: none;" rel="group' + colorBoxMultiRelCount + '" class="validSrc"></a>';
      });

      p.append(html);

      p.find('a[rel="group' + colorBoxMultiRelCount + '"]').colorbox({
        inline: true,
        href: "#player-inline",
        onOpen: colorBoxFlowPlayerOnOpen,
        onLoad: colorboxOnLoadFunction
      });
    }

    colorBoxMultiRelCount++;
  });
}

/**
 * Called when the colorbox opens for a flowplayer item.
 */
function colorBoxFlowPlayerOnOpen(){
  colorBoxFlowPlayerSrcIndex = 0;
}

/**
 * Called when the colorbox loads for a flowplayer item.
 * Adds the flowplayer to the colorbox inline on load. Also determines
 * if it is audio or video and if it has multiple src items, which one to play.
 */
function colorBoxFlowPlayerOnLoad(){
  var player;
  var c = $('#player-inline')
  var t = $(this);
  var p = t.parent();
  var data = p.find('.data');
  var still = $.trim(data.find('.still').text());
  var width = parseInt($.trim(data.find('.width').text()));
  var height = parseInt($.trim(data.find('.height').text()));
  var isAudio = p.hasClass('audio');
  var srcTags = data.find('.src');
  var src;
  var fpParams = {};

  // See if there are multiple src values to show.
  if(srcTags.length > 1){
    src = $.trim(srcTags.eq(colorBoxFlowPlayerSrcIndex).text());

    // Check to see if a common width and height were set.
    if(!width && !height){
      var classes = srcTags.eq(colorBoxFlowPlayerSrcIndex).attr('class');
      var parts = classes.split(' ');

      width = parseInt(getClassVal(parts, 'width'));
      height = parseInt(getClassVal(parts, 'height'));
    }

    colorBoxFlowPlayerSrcIndex++;

    if(colorBoxFlowPlayerSrcIndex >= srcTags.length){
      colorBoxFlowPlayerSrcIndex = 0;
    }
  }else{
    src = $.trim(srcTags.text());
  }

  // Clear the old inline.
  c.empty();
  
  fpParams.clip = {};
  fpParams.clip.url = src;
  fpParams.clip.autoBuffering = true;

  if(isAudio){
    height = 30;
    width = 720;

    fpParams.plugins = {
      controls: {
        fullscreen: false,
        height: 30,
        autoHide: false
      }
    };

    fpParams.clip.onBeforeBegin = function(){
      $f("player").close();
    };
  }

  c.append('<div id="flowplayer" style="display: block; width: ' + width + 'px; height: ' + height + 'px;">&nbsp;</div>');

  // See if there is an initial still image to show.
  if(still && still.length > 0){
    $('#flowplayer').empty().append('<img src="' + still + '" alt="">');
  }else{
    fpParams.clip.autoPlay = true;
  }

  player = $f('flowplayer', 'media/swf/flowplayer-3.2.2.swf', fpParams);
  player.play(src); // Need to manually call play for IE.
}

/**
 * Called when the colorbox loads for a swf.
 */
function colorBoxSwfOnLoad(){
  var c = $('#player-inline')
  var data = $(this).parent().find('.data');
  var still = $.trim(data.find('.still').text());
  var width = parseInt($.trim(data.find('.width').text()));
  var height = parseInt($.trim(data.find('.height').text()));
  var srcTags = data.find('.src');
  var src;

  c.empty();

  // See if there are multiple src values to show.
  if(srcTags.length > 1){
    src = $.trim(srcTags.eq(colorBoxFlowPlayerSrcIndex).text());

    // Check to see if a common width and height were set.
    if(!width && !height){
      var classes = srcTags.eq(colorBoxFlowPlayerSrcIndex).attr('class');
      var parts = classes.split(' ');

      width = parseInt(getClassVal(parts, 'width'));
      height = parseInt(getClassVal(parts, 'height'));
    }

    colorBoxFlowPlayerSrcIndex++;

    if(colorBoxFlowPlayerSrcIndex >= srcTags.length){
      colorBoxFlowPlayerSrcIndex = 0;
    }
  }else{
    src = $.trim(srcTags.text());
  }

  c.append('<div style="width: ' + width + 'px; height: ' + height + 'px;"><div id="swf-holder"></div></div>');

  if(still && still.length > 0){
    $('#swf-holder').append('<img src="' + still + '" alt="">');
  }

  var flashvars = {};
  var params = {};
  var attributes = {};

  swfobject.embedSWF(src, "swf-holder", width, height, "9.0.0", "expressInstall.swf", flashvars, params, attributes);
}

/**
 * Returns the value of a property placed as a class name in the format property:value.
 * @param classes An array of class names.
 * @param prop The property to find the value of.
 */
function getClassVal(classes, prop){
  var val;

  for(var i = 0; i < classes.length; i++){
    val = classes[i];

    if(val.indexOf(prop) > -1){
      return $.trim(val.split(':')[1]);
    }
  }

  return 0;
}

// ===================================================================
// Colorbox data page code end
// ===================================================================