"use strict";

/*globals $, jQuery, window, document */

(function ($) {
	var slides, activeClass = 'slide-active';

	function animateSlide(elem, img, imgstart, startWidth, toWidth, startLeft, toLeft) {
		return function () {
			if (elem.hasClass(activeClass)) {
				img.animate({left: imgstart}, 'normal');
				elem.animate({width : startWidth, left: startLeft}, 'normal', function () {
					elem.removeClass(activeClass);				
				});
			} else {
				elem.addClass(activeClass);
				img.animate({left: 0});
				elem.animate({width : toWidth, left: toLeft});
			}
		};		
	}

	function createFunction() {
		var elem = $(this), img, imgstart, startWidth, toWidth, startLeft, toLeft;
		img = elem.find('img');
		imgstart = img.css('left');
		startLeft = elem.css('left');
		toLeft = (parseInt(startLeft, 10) + parseInt(imgstart, 10)) + 'px';
		 
		startWidth = elem.css('width');
		toWidth = '486px';	
		
		elem.click(animateSlide(elem, img, imgstart, startWidth, toWidth, startLeft, toLeft));
	}

	$(document).ready(function () {
		slides = $('.slide');
		
		/* this is a hack, but is weirdly necessary since $().css('left') does not return the proper value */
		slides.eq(0).css('left', 0);
		slides.eq(1).css('left', '162px');
		slides.eq(2).css('left', '324px');
		slides.eq(3).css('left', '486px');
		
		slides.each(createFunction);
	});
	
}(jQuery));