jQuery.easing.def = "easeOutExpo";

var axeant = function() {
	var a = this;
	this.anime = false;
	this.ctnr = $('#wrapper');
	this.elts = $('#projects li').not('li li');
	this.childs = this.elts.length;
	this.zoom = false;
	this.grid = [];
	this.nLine = Math.ceil(this.childs/4);
	this.currentElt = 0;
	this.currentLine = 0;

	for (var j=0 ; j<this.nLine ; j++){
		for (var i=0 ; i<4 ; i++){
			var point = {x:i, y:j};
			this.grid.push(point);
		}
	}
	a.init();
	a.initEvents();
}

axeant.prototype.init = function () {
	var self = this;
	self.ctnr.parent().css('overflow', 'hidden');
	self.ctnr.css({
		'width': $(window).width(),
		'height': self.nLine*($(window).height()/2)+'px'
	});
	var h = 100/self.nLine+'%';
	self.elts.css ('height', h);
	var scroller = '<div id="scroller" style="top:0;height:'+h+';"></div>';
	self.ctnr.parent().append(scroller);
	var images = self.elts.find('.list-visus');
	images.each(function(){
		$(this).find('li').eq(0).addClass('on');						 
	})
}

axeant.prototype.initEvents = function() {
	var self = this;
	
	$(window).resize(function(){
		self.resize();
	})
	
	$(document).bind('mousewheel', function(event, delta) {
		if(self.zoom == false){
			event.preventDefault();
			if (delta >= 1 && self.currentLine > 0){
				self.scrollin(1);
			}
			else if (delta <= -1 && self.currentLine < self.nLine-2){
				self.scrollin("-1");
			}
		}
	});
	
	$(document).bind('keydown', function(event){
		var listImgs = self.elts.eq(self.currentElt).find('.list-visus li');
		if (event.keyCode == 38 && self.currentLine > 0 && self.zoom==false){
			self.scrollin(1);
			self.elts.parent().find('.hover').removeClass('hover');
			self.currentElt -=4;
			self.elts.eq(self.currentElt).addClass('hover');
		} else if(event.keyCode == 40 && self.currentLine < self.nLine-2 && self.zoom==false){
			self.scrollin(-1);
			self.elts.parent().find('.hover').removeClass('hover');
			self.currentElt +=4;
			self.elts.eq(self.currentElt).addClass('hover');
		}
		if (event.keyCode == 37 && self.zoom == true && listImgs.length>1){
			var currentImg = listImgs.parent().find('.on').index();
			var previousImg = currentImg-1;
			if(currentImg==0){
				previousImg = listImgs.length-1;
			}
			navImage(previousImg);
		} else if(event.keyCode == 39 && self.zoom == true && listImgs.length>1){
			var currentImg = listImgs.parent().find('.on').index();
			var previousImg = currentImg+1;
			if(currentImg==listImgs.length-1){
				previousImg = 0;
			}
			navImage(previousImg);
		}
		if (event.keyCode == 13 && self.zoom == false){
			self.grow(self.elts.eq(self.currentElt));
		} else if(event.keyCode == 27 && self.zoom == true){
			self.shrink(self.elts.eq(self.currentElt));
		}
		if (event.keyCode == 37 && self.zoom == false && self.currentElt > 0){
			self.elts.parent().find('.hover').removeClass('hover');
			self.currentElt --;
			self.elts.eq(self.currentElt).addClass('hover');
			if(self.currentElt%4 == 3){
				self.scrollin(1);
			}
		} else if(event.keyCode == 39 && self.zoom == false && self.currentElt < self.childs-1){
			self.elts.parent().find('.hover').removeClass('hover');
			self.currentElt ++;
			self.elts.eq(self.currentElt).addClass('hover');
			if(self.currentElt%4 == 0){
				self.scrollin(-1);
			}
		}
		
	})

	self.elts.find('.figure').click(function(event) {
		event.preventDefault();
		self.currentElt = $(this).parent().index();
		if (self.anime == false && self.ctnr.is('.small')){
			self.grow($(this).parent());
		} else if (self.anime == false && !self.ctnr.is('.small')){
			$(this).find('img').css({
				top: 0,
				left: 0
			});
			$(this).parent().toggleClass('expand');
		}
	});
	
	self.elts.mousemove(function(e){
		if(!$(this).is('.expand')){
			var position = $(this).offset();
			var mouseX = e.pageX-position.left;
			var mouseY = e.pageY-position.top;
			var eltW = $(this).width();
			var imgW = $(this).find('img').width();
			var eltH = $(this).height();
			var imgH = $(this).find('img').height();
			$(this).find('img').css({
				top: -((imgH-eltH)/eltH)*mouseY,
				left: -((imgW-eltW)/eltW)*mouseX
			})
		}
	}).mouseenter(function(event) {
		if(self.ctnr.is('.small')){
			self.elts.parent().find('.hover').removeClass('hover');
			$(this).addClass('hover');
			self.currentElt = $(this).index();
		}
	}).mouseleave(function(){
		$(this).find('img').animate({
			top: 0,
			left: 0
		}, 125)
	});
	
	self.elts.find('.list-visus a').click(function(event) {
		event.preventDefault();
		var nextImg = $(this).parent().index();
		navImage(nextImg);		
	});
	
	self.elts.find('.prev').click(function(event) {
		event.preventDefault();
		var listImgs = self.elts.eq(self.currentElt).find('.list-visus li');
		var currentImg = listImgs.parent().find('.on').index();
		var previousImg = currentImg-1;
		if(currentImg==0){
			previousImg = listImgs.length-1;
		}
		navImage(previousImg);
	});
	
	self.elts.find('.next').click(function(event) {
		event.preventDefault();
		var listImgs = self.elts.eq(self.currentElt).find('.list-visus li');
		var currentImg = listImgs.parent().find('.on').index();
		var previousImg = currentImg+1;
		if(currentImg==listImgs.length-1){
			previousImg = 0;
		}
		navImage(previousImg);
	});
	
	function navImage(nextImg){
		var listImgs = self.elts.eq(self.currentElt).find('.list-visus li');
		var currentImg = listImgs.parent().find('.on').index();
		var image = self.elts.eq(self.currentElt).find('.figure img');
		var loader = '<p id="loader">loading&hellip;</p>';
		if($('#loader').length == 0){
			self.elts.eq(self.currentElt).append(loader);
		}
		image.load(function(){
			$('#loader').remove();
		}).attr({
			'src': listImgs.eq(nextImg).find('a').attr('href'),
			'data-original': listImgs.eq(nextImg).find('a').attr('data-rel')
		})
		listImgs.eq(currentImg).removeClass('on');
		listImgs.eq(nextImg).addClass('on');
	}
}

axeant.prototype.resize = function () {
	var self = this;
	var offset = self.ctnr.position();
	if(self.zoom == true){
		self.ctnr.css({
			'height': (self.nLine*$(window).height())+'px',
			'width': $(window).width()*4,
			'top': - self.grid[self.currentElt].y * $(window).height(),
			'left': - self.grid[self.currentElt].x * $(window).width()
		});
	}else {
		self.ctnr.css({
			'height': self.nLine*($(window).height()/2)+'px',
			'width': $(window).width(),
			'top': -self.currentLine*($(window).height()/2)
		});
	}
	self.elts.css({top: 0, left:0});
}

axeant.prototype.switchSrc = function (elt) {
	var currentSrc = elt.find('img').attr('src');
	elt.find('img').attr('src', elt.find('img').attr('data-original'));
	elt.find('img').attr('data-original', currentSrc);
}

axeant.prototype.shrink = function (elt) {
	var self = this;
	self.anime = true;
	elt.removeClass('expand');
	elt.find('img').css({top:0, left:0});
	self.ctnr.stop(1,1).animate({
		width: $(window).width(),
		height: (self.nLine*$(window).height()/2)+'px',
		top: - (self.currentLine * $(window).height()/2),
		left: 0
	}, 250, function(){
		elt.find('.nav').hide();
		self.ctnr.addClass('small');
		if(elt.is('.lab')){
			elt.find('.figure').fadeIn(350);
			elt.find('iframe').removeAttr('src').hide();
		} else {
			self.switchSrc(elt);
		}
		self.zoom = false;
		self.anime = false;
	})
}

axeant.prototype.grow = function (elt) {
	var self = this;
	self.anime = true;
	self.currentElt = elt.index();
	elt.find('img').css({top:0, left:0})
	self.ctnr.stop(1,1).animate({
		width: $(window).width()*4,
		height: self.nLine * $(window).height(),
		left: -(self.currentElt%4)*($(window).width()),
		top: -self.grid[self.currentElt].y * $(window).height()
	}, 250, function(){
		if(elt.is('.lab')){
			elt.find('.figure').fadeOut(350);
			var isrc = elt.find('iframe').attr('data-src');
			elt.find('iframe').attr('src', isrc).show();
		} else {
			self.switchSrc(elt);
		}
		var optionNav = elt.find('.nav .prev, .nav .next, .nav .list-visus');
		if(elt.find('.list-visus li').length<=1){
			optionNav.hide();
		}else {
			optionNav.show();
		}
		elt.find('.nav').show().find('.closer').click(function(event){
			event.preventDefault();
			self.shrink(elt);
		});
		self.ctnr.removeClass('small');
		self.anime = false;
		self.zoom = true;
	})
}

axeant.prototype.scrollin = function (sens) {
	var self = this;
	self.anime = true;
	self.currentLine -= sens;
	self.ctnr.stop(1,1).animate({
		top: - self.currentLine*($(window).height()/2)
	}, 250, function(){
		self.anime = false;
		$('#scroller').css('top', (100/self.nLine) * self.currentLine + '%').show().fadeOut(500);
	})
}


$(document).ready(function(){
	var ax = new axeant();
})