/***************************************
   =IMAGE CAROUSEL
-------------------------------------- */

$(document).ready(function() {
  var spacing = 102;
  
  function createControl(src) {
    return $('<img/>')
      .attr('src', src)
      .addClass('control')
      .css('opacity', 0.6)
      .css('display', 'none');
  }
      
  var $leftRollover = createControl('wp-content/themes/sport/images/left.gif');
  var $rightRollover = createControl('wp-content/themes/sport/images/right.gif');
  var $enlargeRollover = createControl('wp-content/themes/sport/images/enlarge.gif');
  var $enlargedCover = $('<img/>')
    .addClass('enlarged')
    .hide()
    .appendTo('body');
  var $closeButton = createControl('wp-content/themes/sport/images/close.gif')
    .addClass('enlarged-control')
    .appendTo('body');
  var $priceBadge = $('<div/>')
    .addClass('enlarged-price')
    .css('opacity', 0.95)
    .css('display', 'none')
    .appendTo('body');
  var $igoBadge = $('<div/>')
    .addClass('igo')
    .css('opacity', 0.95)
    //.css('display', 'none')
    .appendTo('enlarged-price');
  var $goBadge = $('<div/>')
    .addClass('igo')
    .css('opacity', 0.95)
    //.css('display', 'none')
    .appendTo('enlarged-price');
  var $waitThrobber = $('<img/>')
    .attr('src', 'wp-content/themes/sport/images/wait.gif')
    .addClass('control')
    .css('z-index', 4)
    .hide();

  $('#featured-books').css({
    'width': spacing * 3,
    'height': '120px',
    'overflow': 'hidden'
  }).find('.covers a').css({
    'float': 'none',
    'position': 'absolute',
    'left': 300
  });

  var setUpCovers = function() {
    var $covers = $('#featured-books .covers a');

    $covers.unbind('click').unbind('mouseover').unbind('mouseout');

    // Left image; scroll right (to view images on left) when clicked.
    $covers.eq(0).css('left', 0).click(function(event) {
      $covers.eq(0).animate({'left': spacing}, 'fast');
      $covers.eq(1).animate({'left': spacing * 2}, 'fast');
      $covers.eq(2).animate({'left': spacing * 3}, 'fast');
      $covers.eq($covers.length - 1).css('left', -spacing).animate({'left': 0}, 'fast', function() {
        $(this).prependTo('#featured-books .covers');
        setUpCovers();
      });

      event.preventDefault();
    }).hover(function() {
      $leftRollover.appendTo(this).show();
    }, function() {
      $leftRollover.hide();
    });

    // Right image; scroll left (to view images on right) when clicked.
    $covers.eq(2).css('left', spacing * 2).click(function(event) {
      $covers.eq(0).animate({'left': -spacing}, 'fast', function() {
        $(this).appendTo('#featured-books .covers');
        setUpCovers();
      });
      $covers.eq(1).animate({'left': 0}, 'fast');
      $covers.eq(2).animate({'left': spacing}, 'fast');
      $covers.eq(3).css('left', spacing * 3).animate({'left': spacing * 2}, 'fast');

      event.preventDefault();
    }).hover(function() {
      $rightRollover.appendTo(this).show();
    }, function() {
      $rightRollover.hide();
    });

    // Center image; enlarge cover when clicked.
    $covers.eq(1).css('left', spacing).click(function(event) {
      $waitThrobber.appendTo(this).show();

      var price = $(this).find('.price').text();
      var igo = $(this).find('.igo').text();
      var go = $(this).find('.go').text();


      var element = $(this).find('img').get(0);
      var coverLeft = 0;
      var coverTop = 0;
      var coverWidth = element.width;
      var coverHeight = element.height;
      while (element.offsetParent) {
        coverLeft += element.offsetLeft;
        coverTop += element.offsetTop;
        element = element.offsetParent;
      }

      $enlargedCover.attr('src', $(this).attr('href')).css({
        'left': coverLeft,
        'top' : coverTop,
        'width': coverWidth,
        'height': coverHeight
      });
      var animateEnlarge = function() {
        $waitThrobber.hide();
        $enlargedCover.animate({
          'left': ($('body').width() - coverWidth * 2) / 2.99,
          'top' : 170,
          'width': coverWidth * 6,
          'height': coverHeight * 2
        }, 'normal', function() {
          $enlargedCover.one('click', function() {
            $closeButton.unbind('click').hide();
            $priceBadge.hide();
            $enlargedCover.fadeOut();
          });

          $closeButton.css({
            'left': ($('body').width() - coverWidth * 5.51) / 2,
            'top' : 170
          }).click(function() {
            $enlargedCover.click();
          }).show();

          $priceBadge.css({
            'right': ($('body').width() - coverWidth * 6.8) / 1.9,
            'top' : 199
          }).text(price).show();
          $igoBadge.css({
            'right': ($('body').width() - coverWidth * 6.8) / 1.9,
            'top' : 199
          }).text(igo).show();
        });
        
      };

      if ($enlargedCover[0].complete) {
        animateEnlarge();
      }
      else {
        $enlargedCover.bind('load', animateEnlarge);
      }

      event.preventDefault();
    }).hover(function() {
      $enlargeRollover.appendTo(this).show();
    }, function() {
      $enlargeRollover.hide();
    });
  };

  setUpCovers();
});