/* gallery */

(function($) {
	
	var gallery = $('#gallery');
	var container = $('#gallery .wrapper');
	var items = container.find('.item');
	var totalItems = items.length;
	var zero;
	var positions = [];
	var parabolaLeft = {};
	var parabolaBottom = {};
	var parabolaWidth = {};

	construct();
	window.onresize = construct;
	init();
	setNav();

	//
	function construct() {
		setZero();
		parabolaLeft = {
			'convessita': 20,
			'posizione': 0,
			'intersezione': zero
		}
		parabolaBottom = {
			'convessita': 1,
			'posizione': 0,
			'intersezione': 0
		}
		parabolaWidth = {
			'convessita': -10,
			'posizione': 0,
			'intersezione': 500
		}
		setPositions();
	}

	//
	function init() {

		//primo pezzo dell'animazione intro
		gallery.css({left: -500}).show().animate({left: 0}, 1000, 'easeOutBack');

		items.each(function(i) {
			var $this = $(this);

			//intro animazione
			$this.css({
				left: zero + 500,
				bottom: 0,
				width: '1px'
			});

			//posiziono gli elementi
			$this
				.data({'n': i})
				.css(positions[i].position)
				.delay(200*i)
				.animate(positions[i].animation, 1500, 'easeOutBack')
				.click(function(event) {
					var toActivate = $(event.target).closest('.item').data('n');
					if(toActivate == 0) {
						toActivate = 1;
					}
					rotateItems(toActivate);
				});
		});

		$(items[0]).addClass('active');
	}

	//imposto il punto centrale della galleria
	function setZero() {
		zero = gallery.width() / 2 - 250;
	}

	function rotateItems(active) {
		items.each(function(i) {
			var $this = $(this);
			var n = $this.data('n');
			if(n < active) {
				//precede, quindi lo sposto in coda
				n = totalItems - active + n;
			} else {
				//segue, quindi scala
				n = n - active;
			}

			//salvo la posizione attuale nell'elemento
			$this.data('n', n);
			//animazione
			$this
				.css(positions[n].position)
				.animate(positions[n].animation, 500, 'easeOutBack');
			
			//callback solo per l'elemento attivo
			if(n == 0) {
				callback($(items[i]));
			}
		});
	}

	//imposto le posizioni di ogni elemento
	function setPositions() {
		var i = 0;
		while(i < totalItems) {
			var position = {}; //proprietà che non si possono animare
			var animation = {}; //proprietà da animare

			position.position = 'absolute';
			position.zIndex = totalItems - i;
			position.opacity = 1;
			
			animation.left = parabola(i, parabolaLeft);
			animation.bottom = parabola(i, parabolaBottom);
			animation.width = parabola(i, parabolaWidth);
			animation.opacity = 1 / i*4;

			//salvo i due oggetti nell'array globale
			positions[i] = {'position': position, 'animation': animation};
			i++;
		}
	}

	//data l'ascissa e l'oggetto di configurazione della parabola, ritorna l'ordinata
	function parabola(i, parabola) {
		return (parabola.convessita * (i+1) * (i+1)) + (parabola.posizione * (i+1)) + (parabola.intersezione - parabola.convessita);
	}

	//callback sull'elemento attivo, la uso per mostrare e nascondere il testo
	function callback(element) {

		//visualizzao automaticamente text nell'elemento attivo
//		element.addClass('active').find('.text').delay(600).slideDown('slow');
//		element.siblings().each(function() {
//			$(this).removeClass('active').find('.text').hide()
//		});

		//aggiungo la classe active all'elemento attivo (toglilo se usi le righe qui sopra!)
		element.addClass('active');
		element.siblings().removeClass('active').find('.text').hide();

		//imposto la voce attiva in nav
		var index = element.index();
		gallery.find('.nav div').eq(index).addClass('active').siblings().removeClass('active');
	}

	//imposto il menu di navigazione
	function setNav() {

		var galleryNav = gallery.find('.nav');
		
		items.each(function(i){
			var $this = $(this);
			var el = $('<div/>', {
				click: function() {
					rotateItems($this.data('n'))
				}})
				.addClass('navitem');
			galleryNav.append(el);
		});

	}

})(jQuery);