$(function(){
	function GridController() {
		var __this = this;
		__this.areas = [];
		__this.availablePhotos = [
			[0,0], [0,1], [0,2], [0,3], [0,4],
			[1,0], [1,1], [1,2], [1,3], [1,4]
		];
		__this.availableImages = [
			[0,0], [0,1], [0,2], [0,3], [0,4],
			[1,0], [1,1], [1,2], [1,3], [1,4]
		];
		__this.introCount = 0;
		
		__this.__constructor = function() {
			$('.mosaico-area').show();
			
			__this.photoOffsetX = 0;
			__this.photoOffsetY = 848;
			__this.imageOffsetX = 0;
			__this.imageOffsetY = 1060;
			
			$('.area-over').css('opacity',0);
			
			__this.getAreaSize();
			__this.createAreas();
			__this.introIn();
		}
		
		__this.introIn = function() {
			$('.area-over, .area-item').hide();
			$('.area-out').css('opacity', 0);
			for (var i = 0; i < 20; i++) {
				$('.area-out:eq(' + i + ')').animate({
					opacity: 1
				}, {
					duration: Math.random() * 2000,
					complete: function() {
						if (++__this.introCount == 19)
							__this.introOut();
					}
				});
			}
		}
		
		__this.introOut = function() {
			$('.area-over, .area-item').show();
			__this.createEvents();
		}
		
		__this.createEvents = function() {
			$('.mosaico-area').hover(function(){
				$('.area-over').animate({
					opacity: 1
				}, {
					queue: false
				});
				$(this).find('.area-item').animate({
					opacity: 1
				}, {
					queue: false
				});
			}, function(){
				$('.area-over').animate({
					opacity: 0
				}, {
					queue: false
				});
				$(this).find('.area-item').animate({
					opacity: 0
				}, {
					queue: false
				});
			});
		}
		
		__this.getAreaSize = function() {
			__this.areaWidth = $('.mosaico-area:first').width();
			__this.areaHeight = $('.mosaico-area:first').height();
		}
		
		__this.createAreas = function() {
			for (var i = 0; i < 20; i++) {
				__this.areas[i] = $('.area-item:eq(' + i + ')');
				var index = [0,0];
				var pos = [0,0];
				if (i % 2 == 0) {
					index = __this.getRandomImage();
					pos = __this.getImagePosition(index);
				} else {
					index = __this.getRandomPhoto();
					pos = __this.getPhotoPosition(index);
				}
				__this.areas[i].css({
					backgroundPosition: '-' + pos[0] + 'px -' + pos[1] + 'px',
					opacity: 0
				});
			}
		}
		
		__this.getPosition = function(row, col, offsetX, offsetY) {
			return [(row * __this.areaWidth) + offsetX, (col * __this.areaHeight) + offsetY];
		}
		
		__this.getPhotoPosition = function(pos) {
			return __this.getPosition(pos[1], pos[0], __this.photoOffsetX, __this.photoOffsetY);
		}
		
		__this.getImagePosition = function(pos) {
			return __this.getPosition(pos[1], pos[0], __this.imageOffsetX, __this.imageOffsetY);
		}
		
		__this.getRandomPhoto = function() {
			__this.availablePhotos = __this.availablePhotos.sort(__this.sortRandom);
			return __this.availablePhotos.shift();
		}
		
		__this.getRandomImage = function() {
			__this.availableImages = __this.availableImages.sort(__this.sortRandom);
			return __this.availableImages.shift();
		}
		
		__this.sortRandom = function() {
			return 0.5 - Math.random();
		}
	
		if ($.isFunction(__this.__constructor))
			__this.__constructor.apply(__this, arguments);
	}
	
	$('.mosaico-area').hide();
	var img = $('<img>');
	img.load(function(){
		var grid = new GridController();
	});
	img.attr('src', 'wp-content/themes/larocca/_images/banner-home/bg-home-01.jpg');
});