$(document).ready(function() {
    rollover.init();
  });

rollover = function() {

  return {

    init: function() {

      // Show the first content box by default.
      content = $('.link').eq(0).parent().children('.morecontent').html();
      $('#showcontent').empty().append(content);
      $('img.activestate').css('display','none').eq(0).css('display','block').next().css('display','none');
      $('.link a').eq(0).addClass('current');

      // Attach click event handlers to the elements on the left to put content to the right.
      $('.link').each(function(i) {
          $(this).bind('click', function() {
              rollover.showContent($(this));
          });
      });

      // Attach event handlers to the images to change the image state when rolled over
      // if it's not the current selection.
      $('.link a, .link span').bind('mouseenter', function() {
          $(this).parent().children('a').children('img').eq(0).css('display','block');
          $(this).parent().children('a').children('img').eq(1).css('display','none');
        }).bind('mouseleave', function() {
            if (!$(this).parent().children('a').hasClass('current')) {
            $(this).parent().children('a').children('img').eq(1).css('display','block');
            $(this).parent().children('a').children('img').eq(0).css('display','none');
          }
        });
    },

    showContent: function(node) {

      // Set the active/inactive class for the styling of the overlay text on the images.
      $('.link').removeClass('active').addClass('inactive');
      $(node).removeClass('inactive').addClass('active link');

      // Reset the styles on all the images
      $('.link a').removeClass('current');
      $('.activestate').css('display','none');
      $('.inactivestate').css('display','block');

      // Set the styles on the affected element to show the activestate image
      $(node).children('a').children('img.activestate').css('display','block');
      $(node).children('a').children('img.inactivestate').css('display','none');
      $(node).children('a').addClass('current');

      // Copy the content from the content area over into the right column
      content = $(node).parent().children('.morecontent').html();
      $('#showcontent').empty().append(content);
    }
  }
}();