$(function() {
	var showcase = $('.sc__list');
	var items = showcase.find('.sc__item');
	var current = items.filter('.sc__set-active');

	if (!current.length) {
		current = items.first().next();
	}

	var bigWidth = 300;
	var bigHeight = 195;

	var smWidth = (bigWidth - current.width()) / 2;
	var smHeight = (bigHeight - current.height()) / 2;

	var animatePropBig = {
		width: bigWidth,
		height: bigHeight,
		left: -1 * smWidth,
		top: -1 * smHeight
	}

	var animatePropSmall = {
		width: '100%',
		height: '100%',
		left: 0,
		top: 0
	}

	var smElem = showcase.width() / 2 - current.width() / 2;

	$('.sc__button').click(function(event) {
		event.preventDefault();

		var toleft = $(this).hasClass('sc__toLeft');

		if (toleft) {
			var next = current.prev();
		} else {
			var next = current.next();
		}

		if (!next.length) {
			if (toleft) {
				next = items.last();
			} else {
				next = items.first();
			}
		}

		setActive(next, current);

		current = next;
	});

	$('.sc__item-wrapper').click(function() {
		if (!$(this).hasClass('sc__item-wrapper-active')) {
			var next = $(this).parent();

			setActive(next, current);
			current = next;
		}
	});

	function setActive(elem, cur) {

		var pos = showcase.scrollLeft() + elem.offset().left - showcase.offset().left - smElem;

		if (cur) {
			try {
				cur.find('.sc__item-flash').get(0).stopVideo();
			} catch (e) {}

			cur.children('.sc__item-wrapper').stop()
					.removeClass('sc__item-wrapper-active-flash')
					.animate(animatePropSmall, 200, function() {
						$(this).removeClass('sc__item-wrapper-active');
					});
		}



		showcase.stop().animate({scrollLeft: pos}, 500, function() {

			elem.children('.sc__item-wrapper').stop().addClass('sc__item-wrapper-active')
					.animate(animatePropBig, 200, function() {
						$(this).addClass('sc__item-wrapper-active-flash')
					});
		});

	}

	setActive(current);
});