var lastElement = null;

$(function() {
	positionTemplate();

	$(window).resize(positionTemplate);

	if($.browser.msie == true && parseInt($.browser.version) < 9) {
	} else {
		$('#Content').css('opacity', 0);
			var m = $('#Content');
			$(m).masonry({
				itemSelector	: '.gridable',
				columnWidth		: 1
			});
			setTimeout(function() {
				$('#Content').css('opacity', 1);	
			}, 300);

		$('#Content').imagesLoaded(function() {
		});	
	}

	$('img').mousedown(function(e) {
		e.preventDefault();
	});

	$('.jLink').click(function(e) {
		e.preventDefault();

		if ($(this).attr('data-action') == 'description') {
			$('#Description').show();
			$('#About').hide();
			$('#MenuRight ul .selected').removeClass('selected');
			$(this).addClass('selected');
		}

		if ($(this).attr('data-action') == 'about') {
			$('#Description').hide();
			$('#About').show();
			$('#MenuRight ul .selected').removeClass('selected');
			$(this).addClass('selected');
		}

		if ($(this).attr('data-action') == 'filter') {
			lastElement = $(this);

			selectItems($(this));
			filter();
		}		
	});

	$('.image').mouseover(function() {
		if ($(this).attr('data-project-type') == undefined) return;

		$('#type_'+$(this).attr('data-project-type')).addClass('selected');
		$('#date_'+$(this).attr('data-project-date')).addClass('selected');
		$('#status_'+$(this).attr('data-project-status')).addClass('selected');
		$('#name_'+$(this).attr('data-project-name')).addClass('selected');
		$('#client_'+$(this).attr('data-project-client')).addClass('selected');

		var materials = $(this).attr('data-project-materials').split(',');
		for (var i = 0; i < materials.length; i++) {
			$('#material_'+materials[i]).addClass('selected');
		}

		var technologies = $(this).attr('data-project-technologies').split(',');
		for (var i = 0; i < technologies.length; i++) {
			$('#technology_'+technologies[i]).addClass('selected');
		}

		var colors = $(this).attr('data-project-colors').split(',');
		for (var i = 0; i < colors.length; i++) {
			$('#color_'+colors[i]).addClass('selected');
		}
	}).mouseout(function() {
		$('#Description .selected').removeClass('selected');	
	});

	$('.image > img').click(function() {
		var w 	= 0;
		var h 	= 0;
		var elm = this;

		if ($(this).attr('src').search(/\/small\//) != -1) {
			$(this).parent().addClass('large');
			w = $(this).attr('data-width-large');
			h = $(this).attr('data-height-large');			
		} else {
			$(this).parent().removeClass('large');
			w = $(this).attr('data-width-small');
			h = $(this).attr('data-height-small');
		}

		$(this).attr('src', $(this).attr('src').replace(/uploads\/[a-z]+\//, (($(this).attr('src').search(/\/small\//) != -1) ? 'uploads/large/' : 'uploads/small/')));

		($(this).attr('src').search(/\/small\//) != -1) ? $(this).prev('.infos').hide() : $(this).prev('.infos').fadeIn(500);

		$('#Content').imagesLoaded(function() {
			$(elm).css({'width' : w, 'height' : h})
			if($.browser.msie == true && parseInt($.browser.version) < 9) {
			} else {
				$(this).masonry( 'reload' );
			}
		});
	});

	$('.image').mouseover(function() {
		($(this).find('img').attr('src').search(/\/small\//) != -1) ? $(this).find('.infos').hide() : $(this).find('.infos').show();
	}).mouseout(function() {
		$(this).find('.infos').hide();
	});
});

function positionTemplate() {
	var templateWidth = $(window).width();

	$('#Content').css('width', templateWidth - 30 - 466);
}

function selectItems(elm) {
	if (elm.attr('data-mode-select') == 'single') {
		var selected = elm.hasClass('checked');
		elm.parent().children().removeClass('checked');
		if (!selected) elm.addClass('checked');
	} else {
		(elm.hasClass('checked')) ? elm.removeClass('checked') : elm.addClass('checked');
	}
}

function filter() {
	var type 		= $('#listType .checked').first().attr('data-id');
	var date 		= $('#listDate .checked').first().attr('data-id');
	var status 		= $('#listStatus .checked').first().attr('data-id');
	var name 		= $('#listName .checked').first().attr('data-id');
	var client 		= $('#listClient .checked').first().attr('data-id');
	var materials 	= new Array();
	$('#listMaterial .checked').each(function() { materials.push($(this).attr('data-id')); });

	var technologies 	= new Array();
	$('#listTechnology .checked').each(function() { technologies.push($(this).attr('data-id')); });

	var colors 	= new Array();
	$('#listColor .checked').each(function() { colors.push($(this).attr('data-id')); });

	$('.image').each(function() {
		$(this).addClass('gridable');

		if ($(this).attr('data-project-type') != type && type != undefined) $(this).removeClass('gridable');
		if ($(this).attr('data-project-date') != date && date != undefined) $(this).removeClass('gridable');
		if ($(this).attr('data-project-status') != status && status != undefined) $(this).removeClass('gridable');
		if ($(this).attr('data-project-name') != name && name != undefined) $(this).removeClass('gridable');
		if ($(this).attr('data-project-client') != client && client != undefined) $(this).removeClass('gridable');

		var m = $(this).attr('data-project-materials').split(',');
		var f = 0;
		for (var i = 0; i < materials.length; i++) {
			if ($.inArray(materials[i], m) != -1) f++;
		}
		if (f != materials.length && materials.length > 0) $(this).removeClass('gridable');

		var t = $(this).attr('data-project-technologies').split(',');
		var f = 0;
		for (var i = 0; i < technologies.length; i++) {
			if ($.inArray(technologies[i], t) != -1) f++;
		}
		if (f != technologies.length && technologies.length > 0) $(this).removeClass('gridable');

		var c = $(this).attr('data-project-colors').split(',');
		var f = 0;
		for (var i = 0; i < colors.length; i++) {
			if ($.inArray(colors[i], c) != -1) f++;
		}
		if (f != colors.length && colors.length > 0) $(this).removeClass('gridable');
	});
	
	if($('.image').filter(':visible').length == 0) {
		selectItems(lastElement);
		filter();
	} else {
		filterList($('#listType a'), 'data-project-type');
		filterList($('#listDate a'), 'data-project-date');
		filterList($('#listStatus a'), 'data-project-status');
		filterList($('#listName a'), 'data-project-name');
		filterList($('#listClient a'), 'data-project-client');
		filterList($('#listMaterial a'), 'data-project-materials', true);
		filterList($('#listTechnology a'), 'data-project-technologies', true);
		filterList($('#listColor a'), 'data-project-colors', true);
	}

	if($('.image').filter(':visible').length == $('.image').length) {
		$('.back').hide();	
	} else {
		$('.back').show();
	
	}
	
	$('#Content').masonry( 'reload' );
}

function filterList(element, property, isList) {
	if (isList == undefined) isList = false;

	element.show().each(function() {
		$(this).next().show();
		var id  	= $(this).attr('data-id');
		var found 	= false;

		$('.image').filter(':visible').each(function() {
			if (isList) {
				var data = $(this).attr(property).split(',');
				for (var i = 0; i < data.length; i++) {
					if (data[i] == id) found = true;
				} 
			} else {
				if ($(this).attr(property) == id) found = true;
			}
		});

		if (!found) {
			$(this).hide().next().hide();
		}
	})
		
	element.filter(':visible').last().next().hide();		
}