(function($)
{
	$.fn.cafe = function()
	{
		var opts = {
			filter_length: 0,
			radio_flag: false
		};
		
		//Toca hacer esto para que el plugin Masonry se aprenda todas las cajitas
		var initIsotope = function()
		{
			//antes que nada hay que guardar el número de filtros
			opts.filter_length = $('#filter input').length;
			
			$('#main-wrapper').isotope({
				itemSelector: 'div.box-wrapper',
				masonry: {
					columnWidth: 148
				},
				getSortData : {
					normal : function ( $elem ) {
						return parseInt( $elem.attr('data-order') );
					},
					filtered : function ( $elem ) {
						return parseInt( $elem.attr('data-filtorder') );
					}
				}
			});
			
			$('#filtered-out').isotope({
				itemSelector: 'div.box-wrapper',
				masonry: {
					columnWidth: 148
				},
				getSortData : {
					normal : function ( $elem ) {
						return parseInt( $elem.attr('data-order') );
					},
					filtered : function ( $elem ) {
						return parseInt( $elem.attr('data-filtorder') );
					}
				}
			});
		}
		
		var applyFilters = function()
		{
			
			var active_filters = getActiveFilters();
			
			addFilterClass(active_filters);			
			sortElements(active_filters);
			
			moveArticles(active_filters);
			
			$('#main-wrapper').isotope( 'reLayout' );
			$('#filtered-out').isotope( 'reLayout' );
		}
		
		var getActiveFilters = function()
		{
			var active_filters = new Array();
			$('#filter input:checked').each(function() {
				active_filters.push($(this).val());
			});
			
			//Hace lo mismo si todos o ningun filtro está activo, los muestra todos en main-wrapper
			if (active_filters.length == opts.filter_length){
				active_filters = new Array();
			}
			//console.log(active_filters);
			return active_filters;
		}
		
		var addFilterClass = function(active_filters)
		{
			if (active_filters.length != 0){

				//remuevo las clases para luego asignar las apropiadas
				$('#top-wrapper .box-wrapper').removeClass('filter-main');
				for (x in active_filters){
					$('#top-wrapper div.category-'+active_filters[x]).addClass('filter-main');
				}
				
				$('#filtered-out').show();
			}else{
				$('#top-wrapper .box-wrapper').removeClass('filter-main').addClass('filter-main');
				//oculto el div #filtered-out para que no ocupe espacio
				$('#filtered-out').hide();
			}
		}
		
		var moveArticles = function(active_filters)
		{
			var $main_filt_els = $('#filtered-out .box-wrapper.filter-main').clone(true);
			$('#filtered-out').isotope( 'remove', $('#filtered-out .box-wrapper.filter-main'));
			$('#main-wrapper').isotope( 'insert', $main_filt_els );
			
			var $filtered_out_els = $('#main-wrapper .box-wrapper:not(.filter-main)').clone(true);
			$('#main-wrapper').isotope( 'remove', $('#main-wrapper .box-wrapper:not(.filter-main)'));
			$('#filtered-out').isotope( 'insert', $filtered_out_els );
		}			
		
		var sortElements = function(active_filters)
		{
			if (active_filters.length != 0){
				$('#main-wrapper').isotope('option', { sortBy : 'filtered' });
				$('#filtered-out').isotope('option', { sortBy : 'filtered' });
			}else{
				$('#main-wrapper').isotope('option', { sortBy : 'normal' });
				$('#filtered-out').isotope('option', { sortBy : 'normal' });
			}
		}
		
		var bindEvents = function()
		{
			$('#filter input').change(function(){
				filterBoxes($(this));
			});
			
			$('#filter input').mousedown(function(){
				checkRadio($(this));
			});
			$('#filter input').click(function(){
				changeRadio($(this));
			});
			
			$('#filter label').mousedown(checkLabel);
			$('#filter label').click(changeLabel);
		}
		
		var checkRadio = function(radio_clicked)
		{
			//si el radio button está activo, se activa la bandera al presionar el boton
			if (radio_clicked.is(':checked')){
				opts.radio_flag = true;
			}
		}
		
		var changeRadio = function(radio_clicked)
		{
			//al finalizar el click, si la bandera está activa se apaga el boton.
			//despues de este evento ya no se dispara el change
			if ( opts.radio_flag ){
				radio_clicked.attr('checked', false);
				opts.radio_flag = false;
				filterBoxes(radio_clicked);
			}
		}
		
		var checkLabel = function(e)
		{
			var input_id = $(this).attr('for');
			checkRadio( $('#'+input_id) );
		}
		
		var changeLabel = function(e)
		{
			//en el caso de los labels, al hacer click siempre se apaga el boton y se deja al evento onchange manejar el resto
			var input_id = $(this).attr('for');
			$('#'+input_id).attr('checked', false);
		}
		
		var filterBoxes = function(filter)
		{
			//solo debe entrar a este if, despues de haber hecho click en un label
			//cuando el click en el label se habia hecho en un boton activo, la bandera tambien debe estar activa.
			if ( opts.radio_flag ){
				filter.attr('checked', false);
				opts.radio_flag = false;
			}
			applyFilters();
		}
		
		initIsotope();
		applyFilters();
		bindEvents();
	};
	
	$.fn.articlehover = function()
	{
		var showHover = function(e)
		{
			var target = $(e.currentTarget);
			target.find('.hover-wrapper').fadeIn();
		}
		
		var hideHover = function(e)
		{
			var target = $(e.currentTarget);
			target.find('.hover-wrapper').fadeOut();
		}
		
		$('#top-wrapper .box-wrapper').hover(showHover, hideHover);
	}
	
	$(function()
	{
		new $.fn.cafe();
		new $.fn.articlehover();
	});
})(jQuery);