$.contentHeights =  new Array();
$.actionImageHeight = '';
function showHiddenContent(storyLink) {
  target = $('#'+$(storyLink).attr('href'));
  if (target.hasClass('hidden')) {
    //slide up sidenavs
    $(target).find('.sidenav').slideUp('fast');
    //change active links
    $('#storynav li.activeLink').removeClass('activeLink');
    $(storyLink).parent().addClass('activeLink'); 
    //show action image
    targetImage = $('#action-image #action-'+$(storyLink).attr('href'));
    showActionImage(targetImage);
    //animate main content
    $('#main .active').fadeOut(500).removeClass('active').addClass('hidden');
    newHeight = $.actionImageHeight + $.contentHeights[target.attr('id')] + 'px';
    $('#main').animate({height: newHeight}, 500, showTarget(target));        
  }
}
function expandSidenav() {
  $(target).find('.sidenav').slideDown(800);
}
function showTarget(target) {
  target.animate({
      opacity: "show" 
    }, 
    500, 
    'swing', 
    expandSidenav(target)
  );
  target.removeClass('hidden').addClass('active'); 
}
function showActionImage(targetImage) {
  defaultImage = $('#action-image img.default').length ? $('#action-image img.default').eq(0) : $('#action-image img').eq(0);
  defaultImageIsActive = defaultImage.hasClass('activeImage');
  targetIsActive = targetImage.hasClass('activeImage');
  if (targetImage.length && !targetIsActive) {
    $('#action-image .activeImage').fadeOut(500);
    targetImage.fadeIn(500, setActiveImage(targetImage));
  }
  else if(!defaultImageIsActive) {
    $('#action-image .activeImage').fadeOut(500);
    defaultImage.fadeIn(500, setActiveImage(defaultImage));
  }
}
function setActiveImage(targetImage) {
  $('#action-image .activeImage').removeClass('activeImage');
  targetImage.addClass('activeImage');
}

$(document).ready(function() { 
	PEPS.rollover.init();
    $('#main .content').each(function() {
      $(this).show().css('position', 'absolute').css('left', '0');
      $.contentHeights[$(this).attr('id')] = $(this).height();
      $(this).filter('.hidden').hide();
    });

    //get action image height for later
    $.actionImageHeight = $('#action-image').height();
    //set main content height
    activeContent = $('#main .content').filter('.active');
    mainHeight = $('#main').height() + activeContent.height()+'px';
    $('#main').css('height', mainHeight);
    
    /*storynav content switcher*/
    $('#storynav a').click( function() {
      showHiddenContent(this); 
      return false;
    });

});

PEPS = {};
      
      PEPS.rollover =
      {
         init: function()
         {
            this.preload();
            
            $(".ro").hover(
               function () { $(this).attr( 'src', PEPS.rollover.newimage($(this).attr('src')) ); },
               function () { $(this).attr( 'src', PEPS.rollover.oldimage($(this).attr('src')) ); }
            );
         },
         
         preload: function()
         {
            $(window).bind('load', function() {
               $('.ro').each( function( key, elm ) { $('<img>').attr( 'src', PEPS.rollover.newimage( $(this).attr('src') ) ); });
            });
         },
         
         newimage: function( src ) { return src.substring( 0, src.search(/(\.[a-z]+)/) ) + '_o' + src.match(/(\.[a-z]+)/)[0]; },
         oldimage: function( src ){ return src.replace(/_o/, ''); }
      };