// ---------------------------------------------
// =Home [Function]
// ---------------------------------------------
$(function(){
	new Home();
});

var Home = function()
{
	var homeClass = this;	
	
	var _project = $('#project');
	var _thumbsDiv = $('#thumbs > div');
	var _thumbs = _thumbs = $('#thumbs > div > a');
	var _navSeq = $('#nav-seq');
	var _navSeqLinks = null;
	var _html = $('html');
	
	var _currentRel = '';
	
	var _bgHome = $('#bg-color-top-home');
	
	var _thumbsGroup = null;
	var _navSeqGroup = null;
	
//	initialisation
	this.init = function()
	{
		removeTouchDouble();
		addNavSeq();
		removeUselessDouble();
		initButtonsGroup();
		setThumbsDivWidth();
		initSwipes();
		
		_bgHome.fadeIn();
	};
	
	this.kill = function() {
		_bgHome.fadeOut();
	};
	
	var setThumbsDivWidth = function()
	{
		var totalWidth = 0;
		_thumbs.each(function(){
			totalWidth += 248;
		});
		
		_thumbsDiv.width(totalWidth);
	};
	
	var removeTouchDouble = function()
	{
		var thumbsToRemove = [];
		if (Modernizr.touch) {
			_thumbs.each(function(){
				var thumb = $(this);
				var previous = thumb.prev('a');
				if (previous.size() > 0 && thumb[0].rel == previous[0].rel) {
					thumbsToRemove.push(thumb);
				}
			});
		}
		
		$.each(thumbsToRemove, function() {
      this.remove();
    });
		
		/*
		thumbsToRemove.forEach(function(elem){
			elem.remove();
		});
		*/
	};
	
	var removeUselessDouble = function()
	{
		var lastThumb = _thumbs.last();
		var previous = lastThumb.prev('a');
		if (previous.size() > 0 && lastThumb[0].rel == previous[0].rel) {
			lastThumb.remove();
			_navSeqLinks.last().remove();
		}
	};
	
	var addNavSeq = function()
	{
		_thumbs = $('#thumbs > div > a');
		
		var html = '';
		var pageQty = Math.ceil(_thumbs.size() / 4);
		if(pageQty == 1) return;
		
		for(var i=0; i < pageQty; i++){
			var selected = '';
			if (i==0) selected = 'class="selected"';
			html += '<a href="#" '+ selected +'></a>';
		}
		
		_navSeq.html(html);
		_navSeqLinks = $('#nav-seq > a');
	};
	
	var initButtonsGroup = function()
	{
		_thumbsGroup = new ButtonsGroup(_thumbsDiv);
		_navSeqGroup = new ButtonsGroup(_navSeq);
		
		_navSeqLinks.bind(TouchUtils.CLICK, onNavSeqClick);
		_thumbs.bind(TouchUtils.CLICK, onThumbClick);
	};
	
	var onThumbClick = function(e)
	{
		if (_thumbsGroup.locked()) return;
		
		var next = $(this).next('a');
		if (next.size() > 0 && next[0].rel == this.rel) {
			next.trigger('click');
			return;
		}
		
		var image = new Image();
			$(image).bind('load', onImageLoaded);
			image.src = this.rel;
		
		var navSeqButtonIndex = Math.floor($(this).index() / 4);
		if(_navSeq.children('.selected').index() != navSeqButtonIndex) {
			setTimeout(function(){
				_navSeq.children('a').eq(navSeqButtonIndex).trigger('click');
			}, 250);
		}
	};
	
	var onImageLoaded = function(e)
	{
		var increment = _thumbsGroup.increment();
		if (increment == 0) return;
		if (this.src == _currentRel) return;
		
		_currentRel = this.src;
		_thumbsGroup.lock();
		
		var pressLocaleFr = 'Appuyez pour découvrir l’oeuvre';
		var pressLocaleEn = 'Press to see the work';
		var lang = $('html').attr('lang');
		var pressLabel = (lang == 'fr') ? pressLocaleFr : pressLocaleEn;
		
		var url = _thumbsDiv.children('.selected')[0].id;
		var link = document.createElement('a');
			link.href = './portfolio?project='+url;
			
		$(link).html('<div>'+pressLabel+'</div>');
		$(link).append(this);
			
		_project.append(link);
		
		var destinationNew = {from: 984 * increment, to: 0};
		var destinationOld = {from: 0, to: -984 * increment};
		
		var lastProject = _project.children('a:first-child');
		var projectAdded = $(link);
			
		if (Modernizr.csstransforms3d) {
			projectAdded[0].style.webkitTransform = 'translate3d('+destinationNew.from+'px,0,0)';
			setTimeout(function(){
				projectAdded[0].style.webkitTransitionDuration = '500ms';
				projectAdded[0].style.webkitTransform = 'translate3d('+destinationNew.to+'px,0,0)';
				
				lastProject[0].addEventListener('webkitTransitionEnd', onAnimationComplete, false);
				lastProject[0].style.webkitTransitionDuration = '500ms';
				lastProject[0].style.webkitTransform = 'translate3d('+destinationOld.to+'px,0,0)';
			}, 100);
			
		} else {
			projectAdded.css('left', destinationNew.from + 'px');
			projectAdded.animate({'left': destinationNew.to + 'px'}, 500);
			lastProject.animate({'left': destinationOld.to+'px'}, 500, onAnimationComplete);
		}
	};
	
	var onAnimationComplete = function()
	{
		_thumbsGroup.unlock();
		
		var projectToKeep = _project.children('a:last-child')[0];
		_project.children('a').each(function(){
			if (this != projectToKeep) $(this).remove();
		});
	};
	
	var onNavSeqClick = function(e)
	{
		var index = $(this).index();
		var childAtIndex = _thumbs.eq(index * 4);
		var position = childAtIndex.position().left + 8;
		
		var duration = 300;
		if (Modernizr.touch) duration = 500;
		
		if (Modernizr.csstransforms3d) {
			_thumbsDiv[0].style.webkitTransitionDuration = duration+'ms';
			_thumbsDiv[0].style.webkitTransform = 'translate3d('+(-position)+'px,0,0)';
		}
		else _thumbsDiv.animate({'left': -position + 'px'}, duration);
		setTimeout(onNavSeqComplete, duration);
	};
	
	var onNavSeqComplete = function() {
		_navSeqGroup.unlock();
	};
	
	var initSwipes = function()
	{
		_project.initSwipe(null, onProjectSwipeRight, null, onProjectSwipeLeft);
		_thumbsDiv.initSwipe(null, onThumbsSwipeRight, null, onThumbsSwipeLeft);
	};
	
	var onProjectSwipeLeft = 	function(e) { _thumbsGroup.selectSwipeNext(); };
	var onProjectSwipeRight = 	function(e) { _thumbsGroup.selectSwipePrev(); };
	
	var onThumbsSwipeLeft = 	function(e) { _navSeqGroup.selectSwipeNext(); };
	var onThumbsSwipeRight = 	function(e) { _navSeqGroup.selectSwipePrev(); };
	
// 	Constructor
	(function() {
		homeClass.init();
    })();
};