// categoryColums custom layout mode
$.extend( $.Isotope.prototype, {

	_categoryColumsReset : function() {
		this.categoryColums = {
			y : 0,
			x : 0,
			width : 0,
			currentCategory : null
		};
	},

	_categoryColumsLayout : function( $elems ) {
		var instance = this,
		containerHeight = this.element.height(),
		sortBy = this.options.sortBy,
		props = this.categoryColums;

		$elems.each( function() {
			var $this = $(this),
			atomW = $this.outerHeight(true),
			atomH = $this.outerWidth(true),
			category = $.data( this, 'isotope-sort-data' )[ sortBy ], 
			y, x;

			if ( category !== props.currentCategory ) {
				// new category, new row
				props.y = 0;
				props.width += props.currentCategory ? instance.options.categoryColums.gutter : 0;
				props.x = props.width;
				props.currentCategory = category;
			} else if ( props.y !== 0 && atomW + props.y > containerHeight ) {
				// if this element cannot fit in the current row
				props.y = 0;
				props.x = props.width;
			}     

			// position the atom
			instance._pushPosition( $this,props.x ,props.y  );

			props.width = Math.max( props.x + atomH, props.width );
			props.y += atomW;

		});
	},

	_categoryColumsGetContainerSize : function () {
		return { width : this.categoryColums.width };
	},

	_categoryColumsResizeChanged : function() {
		return true;
	}

});

$(function(){

	var current_time    = 0;
	var time_to_execute = 3000;

	var $container = $('#container');

	$container.isotope({
		itemPositionDataEnabled: true,
		itemSelector : '.element',
		layoutMode : 'categoryColums',
		resizable : false,
		resizesContainer: true,
		categoryColums : {
			gutter : 0
		},
		getSortData : {
			category : function( $elem ) {
				return $elem.attr('data-category');
			},
			name : function( $elem ) {
				return $elem.attr('data-symbol');
			},
			date : function( $elem ) {
				return $elem.attr('data-date');
			},
			status : function( $elem ) {
				return $elem.attr('data-status');
			}
		},
		sortBy: 'category'
	});


	var $optionSets = $('#options .option-set'),
	$optionLinks = $optionSets.find('a');

	$optionLinks.click(function(){
		var $this = $(this);
		// don't proceed if already selected
		if ( $this.hasClass('selected') ) {
			return false;
		}
		var $optionSet = $this.parents('.option-set');
		$optionSet.find('.selected').removeClass('selected');
		$this.addClass('selected');

		// make option object dynamically, i.e. { filter: '.my-filter-class' }
		var options = {},
		key = $optionSet.attr('data-option-key'),
		value = $this.attr('data-option-value');
		// parse 'false' as false boolean
		value = value === 'false' ? false : value;
		options[ key ] = value;
		if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
			// changes in layout modes need extra logic
			changeLayoutMode( $this, options )
		} else {
			// otherwise, apply new options
			$container.isotope( options );
		}

		return false;
	});

	$container.delegate( '.element', 'mouseenter', function(event){ 

		
		var area = $(this).attr('data-area');
		var symbol = $(this).attr('data-symbol');
		var soporte = $(this).children('ul').children('li.soporte').html();
		var cliente = $(this).children('ul').children('li.client').html();
		var color = $(this).css('background-color');

		//$('#' + area).stop().animate({"opacity": "0"}, 0 , function(){
		$('#' + area).html('<span class="arrow_projects" style="line-height: 16px; padding-left:12px; font-size: 12px; color: ' + color + ';">' + soporte + '</span>');
		//   $('#' + area).animate({"opacity": "1"}, 200);
		//});

		$('#symbol_' + symbol).animate({"opacity": "0"}, 0 , function(){
			$('#symbol_' + symbol).html('<span style="line-height: 11px; bottom:2px; font-size: 11px; color: ' + color + ';">' + cliente + '</span>');
			$('#symbol_' + symbol).animate({"opacity": "1"}, 250);
		});
		
		
		if($(this).hasClass("click") == false)
		{
			return;
		}
		
		var current_id = $(this).attr("id");

		if(typeof window["timeout_id_" + current_id] != undefined)
		{
			clearTimeout(window["timeout_id_" + current_id])
		}
	});

	$container.delegate( '.element', 'mouseleave', function(event){

		var area   = $(this).attr('data-area');
		var symbol = $(this).attr('data-symbol');

		
		$('.unidad_item').html(''); 
		$('#' + area).parent().css('color','#222');

		$('#symbol_' + symbol).stop().animate({"opacity": "0"}, 150 , function(){
			$('#symbol_' + symbol).html(symbol.toUpperCase());  
			$('#' + symbol).parent().css('color','#222'); 
			$('#symbol_' + symbol).animate({"opacity": "1"}, 250); 
		});
		
		
		
		if($(this).hasClass("click") == false)
		{
			return;
		}
		
		var current_id = $(this).attr("id");
		var element    = $(this);
		var timer_name = "timeout_id_" + current_id;


		if(typeof timer_name != undefined)
		{
			clearTimeout(timer_name)
		}

		window["timeout_id_" + current_id] = setTimeout(function(){
			hideElement(element, timer_name);   
		}, 350);

	}); 

	// change size of clicked element
	$container.delegate( '.element', 'click', function(event){

		var current_id = $(this).attr("id");

		if(typeof window["timeout_id_" + current_id] != undefined)
		{
			clearTimeout(window["timeout_id_" + current_id])
		}

		var area = $(this).attr('data-area');
		var symbol = $(this).attr('data-symbol');
		var soporte = $(this).children('ul').children('li.soporte').html();
		var cliente = $(this).children('ul').children('li.client').html();
		var color = $(this).css('background-color');
		var position = $(this).data('isotope-item-position');
		var max_width = $container.width(); 
		var max_height = $container.height();               
		var clase = 'large';

		$(this).addClass('click');

		if((position.y+120)>=max_height)
			{
			clase = clase + '_out_y';  
		}

		if((position.x+200)>=max_width)
			{
			clase = clase + '_out_x';
		} 

		$(this).toggleClass(clase); 

		$('#' + area).html('<span class="arrow_projects" style="padding-left:12px; font-size: 12px; color: ' + color + ';">' + soporte + '</span>');
		$('#symbol_' + symbol).html('<span style="line-height: 11px; bottom:2px; font-size: 11px; color: ' + color + ';">' + cliente + '</span>');
	});

	function hideElement(element, timer)
	{
		clearTimeout(timer);

		element.removeClass('click');
		element.removeClass('large');
		element.removeClass('large_out_y');
		element.removeClass('large_out_x');
		element.removeClass('large_out_y_out_x');

	}
});