var application = new Application();

$(document).ready(function() {
  application.init();
});

function Application() {
	
  this.init = function() {
    application.carousel(".carousel");
  }

  this.carousel = function(selector) {
    var speed = 200;
    var visibleElements = 5;

    var large = {
      height: 158,
      width: 298,
      marginTop: 16,
      pFontSize: 11,
      hFontSize: 17,
      hMarginTop: 10
    };
    var small = {
      height: 124,
      width: 250,
      marginTop: 43,
      pFontSize: 11,
      hFontSize: 12,
      hMarginTop: 2,
      margin: 36
    };

    var $carousel = $(selector);
    var $elements = $carousel.find('li');
    

    var makeAbsolute = function($elements) {
      var left = 14;
      return $elements.each(function() {
        var el = $(this);
        el.css({position: "absolute", left: left, 'margin-left': 0, 'margin-right': 0});
        left += el.outerWidth() + 14;
      });
    }

    var makeCenter = function($element, $elements, animate) {
      var index = $elements.index($element)
      var width = $element.outerWidth() + 14;
      var left = - index * width + width + width * 3/12;
      var position = { 'left' : (left + 'px') }
      if (animate == null || animate)
        $element.parent().animate(position, speed);
      else
        $element.parent().css(position);
      moveElements(index);
    }

    var moveElements = function(index) {
    }

    var makeBigger = function($element, animate) {
      var size = $element.data('size');
      if (size && size == 'big')
        return;
      $element.css('z-index', 2);
      var newLeft = $element.position().left - small.margin + 12;

      if (animate == null || animate) {
        $element.animate({
          width: large.width,
          height: large.height,
          'margin-top': large.marginTop,
          left: newLeft
        }, speed);
        $element.find("p").animate({
          'font-size': large.pFontSize
        }, speed);
        $element.find("h3").animate({
          'font-size': large.hFontSize,
          'margin-top': large.hMarginTop
        }, speed);
      }
      else {
        $element.css({
          width: large.width,
          height: large.height,
          'margin-top': large.marginTop,
          left: newLeft
        });
        $element.find("p").css({
          'font-size': large.pFontSize
        });
        $element.find("h3").css({
          'font-size': large.hFontSize,
          'margin-top': large.hMarginTop
        });

      }
      $element.data('size', 'big');
    }

    var makeSmaller = function($element) {
      var size = $element.data('size');
      if (!size || size == 'small')
        return;
      var newLeft = $element.position().left + small.margin - 12
      $element.animate({
        width: small.width,
        height: small.height,
        'margin-top': small.marginTop,
        left: newLeft
      }, speed);
      $element.find("p").animate({
        'font-size': small.pFontSize
      }, speed);
      $element.find("h3").animate({
        'font-size': small.hFontSize,
        'margin-top': small.hMarginTop
      }, speed);
      $element.data('size', 'small');
      $element.css('z-index', 1);
    }

    var makeInitialSmall = function($elements) {
      $elements.each(function() {
        var $element = $(this);
        var elLeft = $element.position().left;
        var newLeft = elLeft + (small.margin / 2)
        $element.css({
          width: small.width,
          height: small.height,
          'margin-top': small.marginTop,
          left: newLeft
        }, speed);
        $element.find("p").css({
          'font-size': small.pFontSize
        }, speed);
        $element.find("h3").css({
          'font-size': small.hFontSize,
          'margin-top': small.hMarginTop
        }, speed);
        $element.data('size', 'small');
        $element.css('z-index', 1);
      });
    }

    var count = $elements.length;
    if (count > 1) {
      makeInitialSmall($elements);
      makeAbsolute($elements);
      var middle = Math.floor(count / 2);
      var $middleElement = $($elements.get(middle));
      makeCenter($middleElement, $elements, false);
      makeBigger($middleElement, false);
      $elements.each(function(){
        $(this).css('cursor', 'pointer');
      });
      $elements.click(function(e) {
        e.preventDefault();
        var $this = this;
        var selfClick = false;
        $elements.each(function() {
          if ($this != this)
            makeSmaller($(this));
          else {
            var size = $(this).data('size');
            if (size && size == 'big')
              selfClick = true;
          }
        });
        var $element = $(this);
        if (!selfClick) {
          makeCenter($element, $elements);
          makeBigger($element);
          var index = $elements.index($element);
        }
        else {
          window.location = $element.find("a").attr('href');
        }
        return false;
      });
    }
  }
}