$(function () {
  //index of current item
  var current = 0;
  //speeds / ease type for animations
  var fadeSpeed = 400;
  var animSpeed = 600;
  var easeType = 'easeOutCirc';
  //caching
  var $thumbScroller = $('#thumbScroller');
  var $scrollerContainer = $thumbScroller.find('.container');
  var $scrollerContent = $thumbScroller.find('.content');
  var $pg_title = $('#pg_title');
  var $pg_preview = $('#pg_preview');
  var $pg_desc1 = $('#pg_desc1');
  var $pg_desc2 = $('#pg_desc2');
  var $overlay = $('#overlay');
  //number of items
  var scrollerContentCnt = $scrollerContent.length;
  //var sliderHeight = $(window).height();
  var sliderHeight = 600;
  //we will store the total height
  //of the scroller container in this variable
  var totalContent = 0;
  //one items height
  var itemHeight = 0;

  //First let's create the scrollable container,
  //after all its images are loaded
  var cnt = 0;
  $thumbScroller.find('img').each(function () {
    var $img = $(this);
    $('<img/>').load(function () {
      ++cnt;
      if (cnt == scrollerContentCnt) {
        //one items height
        itemHeight = $thumbScroller.find('.content:first').height()+56;
        buildScrollableItems();
        //show the scrollable container
        $thumbScroller.stop().animate({ 'left': '0px' }, animSpeed);
      }
    }).attr('src', $img.attr('src'));
  });

  //when we click an item from the scrollable container
  //we want to display the items content
  //we use the index of the item in the scrollable container
  //to know which title / image / descriptions we will show
  $scrollerContent.bind('click', function (e) {
    var $this = $(this);

    var idx = $this.index();
    //if we click on the one shown then return
    if (current == idx) return;

    //if the current image is enlarged,
    //then we will remove it but before
    //we animate it just like we would do with the thumb
    var $pg_large = $('#pg_large');
    if ($pg_large.length > 0) {
      $pg_large.animate({ 'left': '150px', 'opacity': '0' }, animSpeed, function () {
        $pg_large.remove();
      });
    }

    //get the current and clicked items elements
    var $currentTitle = $pg_title.find('h1:nth-child(' + (current + 1) + ')');
    var $nextTitle = $pg_title.find('h1:nth-child(' + (idx + 1) + ')');
    var $currentThumb = $pg_preview.find('img.pg_thumb:eq(' + current + ')');
    var $nextThumb = $pg_preview.find('img.pg_thumb:eq(' + idx + ')');
    var $currentDesc1 = $pg_desc1.find('div:nth-child(' + (current + 1) + ')');
    var $nextDesc1 = $pg_desc1.find('div:nth-child(' + (idx + 1) + ')');
    var $currentDesc2 = $pg_desc2.find('div:nth-child(' + (current + 1) + ')');
    var $nextDesc2 = $pg_desc2.find('div:nth-child(' + (idx + 1) + ')');

    //the new current is now the index of the clicked scrollable item
    current = idx;

    //animate the current title up,
    //hide it, and animate the next one down
    $currentTitle.stop().animate({ 'top': '-50px' }, animSpeed, function () {
      $(this).hide();
      $nextTitle.show().stop().animate({ 'top': '25px' }, animSpeed);
    });

    //show the next image,
    //animate the current to the left and fade it out
    //so that the next gets visible
    $nextThumb.show();
    $currentThumb.stop().animate({ 'left': '250px', 'opacity': '0' }, animSpeed, function () {
      $(this).hide().css({
        'left': '100px',
        'opacity': 1,
        'z-index': 1
      });
      $nextThumb.css({ 'z-index': 9999 });
    });

    //animate both current descriptions left / right and fade them out
    //fade in and animate the next ones right / left
    $currentDesc1.stop().animate({ 'left': '205px', 'opacity': '0' }, animSpeed, function () {
      $(this).hide();
      $nextDesc1.show().stop().animate({ 'left': '150px', 'opacity': '1' }, animSpeed);
    });
    $currentDesc2.stop().animate({ 'left': '295px', 'opacity': '0' }, animSpeed, function () {
      $(this).hide();
      $nextDesc2.show().stop().animate({ 'left': '200px', 'opacity': '1' }, animSpeed);
    });
    e.preventDefault();
  });

  //when we click a thumb, the thumb gets enlarged,
  //to the sizes of the large image (fixed values).
  //then we load the large image, and insert it after
  //the thumb. After that we hide the thumb so that
  //the large one gets displayed
  //$pg_preview.find('.pg_thumb').bind('click', showLargeImage);

  //enlarges the thumb
  function showLargeImage() {
    //if theres a large one remove
    $('#pg_large').remove();
    var $thumb = $(this);
    $thumb.unbind('click');
    var large_src = $thumb.attr('alt');

    $overlay.fadeIn(200);
    //animate width to 600px,height to 500px
    $thumb.stop().animate({
      'width': '600px',
      'height': '500px'
    }, 500, function () {
      $('<img id="pg_large"/>').load(function () {
        var $largeImg = $(this);
        $largeImg.insertAfter($thumb).show();
        $thumb.hide().css({
          'left': '150px',
          'opacity': 1,
          'z-index': 1,
          'width': '360px',
          'height': '300px'
        });
        //when we click the large image
        //we revert the animation
        $largeImg.bind('click', function () {
          $thumb.show();
          $overlay.fadeOut(200);
          $(this).stop().animate({
            'width': '360px',
            'height': '300px'
          }, 500, function () {
            $(this).remove();
            $thumb.css({ 'z-index': 9999 });
            $thumb.bind('click', showLargeImage);
          });

        });
      }).attr('src', large_src);
    });
  }

  //resize window event:
  //the scroller container needs to update
  //its height based on the new windows height
  $(window).resize(function () {
    var w_h = $(window).height();
    $thumbScroller.css('height', w_h);
    sliderHeight = w_h;
  });

  //create the scrollable container
  //taken from Manos :
  //http://manos.malihu.gr/jquery-thumbnail-scroller
  function buildScrollableItems() {
    totalContent = (scrollerContentCnt - 1) * itemHeight;
    $thumbScroller.css('height', sliderHeight)
					.mousemove(function (e) {
					  if ($scrollerContainer.height() > sliderHeight) {
					    var mouseCoords = (e.pageY - this.offsetTop);
					    var mouseCoords = (e.pageY - 108);
					    var mousePercentY = mouseCoords / sliderHeight;
					    var destY = -(((totalContent - (sliderHeight - itemHeight)) - sliderHeight) * (mousePercentY));
					    var thePosA = mouseCoords - destY;
					    var thePosB = destY - mouseCoords;
					    if (mouseCoords == destY)
					      $scrollerContainer.stop();
					    else if (mouseCoords > destY)
					      $scrollerContainer.stop()
							.animate({
							  top: -thePosA
							},
							animSpeed,
							easeType);
					    else if (mouseCoords < destY)
					      $scrollerContainer.stop()
							.animate({
							  top: thePosB
							},
							animSpeed,
							easeType);
					  }
					}).find('.thumb')
					.fadeTo(fadeSpeed, 0.6)
					.hover(
					function () { //mouse over
					  $(this).fadeTo(fadeSpeed, 1);
					},
					function () { //mouse out
					  $(this).fadeTo(fadeSpeed, 0.6);
					}
				);
  }
});