$(document).ready(function() {
  var spacing = 140;

  function createControl(src) {
    return $('<img/>')
      .attr('src', src)
      .addClass('control')
      .css('opacity', 0.6)
      .css('display', 'none');
  }
      
  var $leftRollover = createControl('images/left.gif');
  var $rightRollover = createControl('images/right.gif');
  var $enlargeRollover = createControl('images/enlarge.gif');
  var $enlargedCover = $('<img/>')
    .addClass('enlarged')
    .hide()
    .appendTo('body');
  var $closeButton = createControl('images/close.gif')
    .addClass('enlarged-control')
    .appendTo('body');
  var $priceBadge = $('<div/>')
    .addClass('enlarged-price')
    .css('opacity', 0.6)
    .css('display', 'none')
    .appendTo('body');
  var $waitThrobber = $('<img/>')
    .attr('src', 'images/wait.gif')
    .addClass('control')
    .css('z-index', 4)
    .hide();
  
  $('#featured-books').css({
    'width': spacing * 3,
    'height': '166px',
    'overflow': 'hidden'
  }).find('.covers a').css({
    'float': 'none',
    'position': 'absolute',
    'left': 1000
  });

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

    $covers.unbind('click mouseenter mouseleave');

    // Левое изображение - сдвинуть вправо
    // (чтобы просмотреть изображения слева).
    $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();
      });

    // Правое изображение - сдвинуть влево
    // (чтобы просмотреть изображения справа).
    $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();
      });

    // Центральное изображение; увеличенная версия.
    $covers.eq(1)
      .css('left', spacing)
      .click(function(event) {
        $waitThrobber.appendTo(this).show();
        alert('1');
        var price = $(this).find('.price').text();
        var startPos = $(this).offset();
        startPos.width = $(this).width();
        startPos.height = $(this).height();
        var endPos = {};
        endPos.width = startPos.width * 3;
        endPos.height = startPos.height * 3;
        endPos.top = 100;
        endPos.left = ($('body').width() - endPos.width) / 2;

        $enlargedCover.attr('src', $(this).attr('href'))
          .css(startPos)
          .show();

        var performAnimation = function() {
          $waitThrobber.hide();
          $enlargedCover.animate(endPos, 'normal',
              function() {
            $enlargedCover.one('click', function() {
              $closeButton.unbind('click').hide();
              $priceBadge.hide();
              $enlargedCover.fadeOut();
            });
            $closeButton
              .css({
                'left': endPos.left,
                'top' : endPos.top
              })
              .show()
              .click(function() {
                $enlargedCover.click();
              });
            $priceBadge
              .css({
                'right': endPos.left,
                'top' : endPos.top
              })
              .text(price)
              .show();
          });
        };
        if ($enlargedCover[0].complete) {
          performAnimation();
        }
        else {
          $enlargedCover.bind('load', performAnimation);
        }

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

  setUpCovers();
});