jQuery(document).ready(function() {

  $('.hero-slide-pane li > div').css('right', '-388px');

	$('.project-image-nav').jcarousel();

  function mycarousel_initCallback(carousel) {
      $('.hero-nav li > h1 a').bind('click', function() {
      			var thisSlide = $(this).attr('href');
      			$('.hero-slide-pane li > div').stop().animate({
      				right: '-388px'
      			}, 1050, function() {
  						carousel.scroll(jQuery.jcarousel.intval(thisSlide));
      			});
  	       
  	        return false;
      });
  };

  /**
   * This is the callback function which receives notification
   * when an item becomes the first one in the visible range.
   */
  function mycarousel_itemFirstInCallbackAfter(carousel, item, idx, state) {

  	$('.hero-slide-pane li:eq('+((carousel.first)-1)+') > div').delay(1400).animate({
      right: '0px'
    }, 1050, function() {
      $(this).delay(3500).animate({
      	right: '-388px'
    	}, 1050);
    });
  };
  
  function mycarousel_itemFirstInCallbackBefore(carousel, item, idx, state) {
  	$('.hero-nav li').removeClass('current');
  	$('.hero-nav').find('a[href='+idx+']').parent().parent().addClass('current');
  };

	$('.hero-slide-pane').jcarousel({
		animation: 1400,
    auto: 7,
    initCallback: mycarousel_initCallback,
    // This tells jCarousel NOT to autobuild prev/next buttons
    buttonNextHTML: null,
    buttonPrevHTML: null,
    scroll: 1,
    visible: 1,
    wrap: 'last',
  	itemFirstInCallback: {
  		onBeforeAnimation: mycarousel_itemFirstInCallbackBefore,
  	  onAfterAnimation: mycarousel_itemFirstInCallbackAfter
  	}
  });
	
	$('.project-image-nav a').click(function(){
  	var thisImage = $(this).attr('href');
		$('.project-image-pane').html('<img src="'+thisImage+'"/>');
		return false;
	});
	
});