var api;

function hideIntro() {
  $('#stage-intro').fadeOut('slow', function() {
    $('#portfolio-slideshow').show();
    $('#stage-wrapper').fadeIn('slow');
  });
};

function addActiveClass(curr, next, opts) {
  var dst_id = $(next).attr('id');
  var dst = $("#"+dst_id);
  if (dst.find('.content').length == 0) {
    load_remote_page(dst, dst_id, './who-we-work-with/portfolio/');
  }

  $(curr).addClass('active');
 };

 function activate_slide(dst_id, is_landing) {
   var dst = $('#'+dst_id);
   location.hash = dst_id;

   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, { duration: 500, easing: 'easeInOutExpo'});

   $('#portfolio-slideshow').show();

   // Check to see if the desired item is loaded in the DOM
   // If not, then load it in
   if (dst.find('.content').length == 0) {
     load_remote_page(dst, dst_id, './who-we-work-with/portfolio/');
   }

   var dst_index = $('#portfolio-slideshow > li').index(dst);
   $('#portfolio-slideshow').cycle(dst_index);
	
   // Cycle to the first panel	
   var cur_content = dst.find(".content");
   cur_content.cycle(0);
	
   // Set the first pagination item to be active
   dst.find('.pagination li').removeClass('active');
   dst.find('.pagination li:first-child').addClass('active');
	
   var dst_thumb_id = '#thumb-'+dst_id;
   var dst_thumb = $('#thumb-'+dst_id);
	
   if (is_landing)
   {
     $('#portfolio-list li').removeClass('active')
     dst_thumb.addClass('active');	
     $('#portfolio-list li:not(.active)').trigger('mouseout');
     $(dst_thumb).find(".info").animate({bottom:'0'},{queue:false,duration:500});
     apilanding.click($('#portfolio-list li').index(dst_thumb));
   }
   else
   {
     $('.thumb').removeClass('active')
     dst_thumb.addClass('active');
     $('.thumb:not(.active)').trigger('mouseout');
     $(dst_thumb).find(".info").animate({bottom:'0'},{queue:false,duration:500});
     api.click($('#portfolio-list li').index(dst_thumb.parent()));
   }
   
   return false;
 }

 function load_remote_page(dst, dst_id, path) {

   dst.load(path+dst_id, null, function() {

     $(this).find('.content').cycle({
       width: '785',
       height: '399',
       fx: 'scrollUp',
       timeout: 0,
       speed: '120000'
     });

     // We have to re-activate the pagination
     $(this).find('.pagination li').click(function() {
       var parent_id = $(this).parent().parent().attr('id');
       var page_index = $('#'+parent_id+' .pagination li').index(this);
       $(this).parent().parent().find('.content').cycle(page_index);
     });

     $(this).find('.pagination li:first-child').addClass('active');
     $(this).find('.pagination li').click(function(){
       $(this).siblings().removeClass('active');
       $(this).addClass('active');
     });

     $(this).find('.content li.case-study-content .quote blockquote').append('<img src="images/portfolio/icon-quotemark.png" class="quote-mark" />');

     $(this).find('.scrollable').scrollable({
       vertical: true,
       size: 1,
       loop: true
    });
   });
 };


$(document).ready(function() {

    $(window).bind( 'hashchange', function(e) {
      url = $.param.fragment();
      activate_slide(url);
      return false;
    });

    $('#portfolio-start a').click(function() {
      hideIntro();
      return false;
    });

      // ------ Portfolio Slideshow

    $('#portfolio-slideshow').cycle({
      width: '785',
      height: '399',
      fx: 'fade',
      timeout: 0,
      speed: '2000',
      easing: 'easeInOutCirc',
      before: addActiveClass
    });

    $('#portfolio-slideshow li .content').cycle({
      width: '960',
      height: '100',
      fx: 'scrollHoriz',
      timeout: 0,
      speed: '120000'
    });


    $('body.who-we-work-with #portfolio-list').after('<div class="navi"></div>')

    api = $('body.who-we-work-with #portfolio-list').scrollable({
      size: 4,
      next: "span#next",
      prev: "span#previous",
      activeClass: 'activeCol',
      clickable: 'true'
    }).navigator({
      api: true,
      navi: '.navi'
    });

    $('.navi').css('width', $('.navi a').length * 14);

      $('body.who-we-work-with #portfolio-list li .thumb').live('click', function() {
        var dst_id_raw = $(this).attr('id');
        if (dst_id_raw.length == 0) { return false; }

        // Find the appropriate portfolio item, and cycle to it.
        var dst_id = dst_id_raw.substr(6);
        activate_slide(dst_id);
        if ($('#stage-intro').css('display') != 'none') {
          hideIntro();
        }

        $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, { duration: 500, easing: 'easeInOutExpo'});

        index = $('#portfolio-list li').index($(this).parent());
        api.click(index);
      });


      $("body.who-we-work-with #portfolio-list li .thumb").live('mouseover', function() {
          $(this).find(".info").animate({bottom:'0'},{queue:false,duration:500});
      });
      $("body.who-we-work-with #portfolio-list li .thumb").live('mouseout', function(){
         if (!$(this).hasClass('active')) {
           $(this).find(".info").animate({bottom:'-50px'},{queue:false,duration:500});
         }
      });

    // Previous Project Button
    $('body.who-we-work-with #portfolio-previous').click(function() {

      var srcDiv = $('#portfolio-list li div.active');
      var srcLi = srcDiv.parent();
      var dst;

      if (srcDiv.prev('.thumb').length > 0) {
        dst = srcDiv.prev();
      } else if (srcLi.prev().length > 0) {
        dst = srcLi.prev().find('.thumb:last-child');
      } else {
        dst = $('#portfolio-list li:last-child .thumb:last-child');
      }

      dst_id = dst.attr('id').substr(6);
      activate_slide(dst_id);

      return false;
    });

    // Next Project Button
    $('body.who-we-work-with #portfolio-next').click(function() {

      var srcDiv = $('#portfolio-list li div.active');
      var srcLi = srcDiv.parent();
      var dst;

      if (srcDiv.next('.thumb').length > 0) {
        dst = srcDiv.next();
      } else if (srcLi.next().length > 0) {
        dst = srcLi.next().find('.thumb');
      } else {
        dst = $('#portfolio-list li:first-child .thumb');
      }

      dst_id = dst.attr('id').substr(6);
      activate_slide(dst_id);

      return false;
    });

});