serializeFilter = function () {

	var url = [];

	var fields = ['group',
	          	 'limit',
	          	 'brand',
	          	 'tag',
	          	 'filter_tags',
	          	 'list_type'];
	
	for (var i = 0; i < fields.length; i++) {
		key = fields[i];
		
		
		if ($('#' +fields[i]) == null) {
			continue;
		}
		
		if (key.indexOf('filter_') == 0) {
			key = "filter[" + key.substring(7, key.length) + "]";
		}
		if ($('#' + fields[i]).length > 0) {
			url.push(key + "=" + $('#' +fields[i]).val());
		}
	}

	return url.join("&");
}

filterProducts = function () {

	var filterQuery = serializeFilter();

	$('#list-container').html("Loading ...");
	
	$.get($('#filter_form').attr('action'),
		  filterQuery,
		  function (result) {
			 	document.location.hash = "#filter$" + filterQuery;
			 	$('#list-container').html(result);
		  },
		  'html');
}


parseFilter = function (str) {

	if (str.indexOf('filter$') == 1) {
		str = str.substring(8, str.length);
	
		var params = parseUrl(str);
	
		var mobileId = false;
		
		for (var key in params) {
			var fieldName = "";
			if (key.indexOf('filter') == 0) {
				fieldName = key.replace("[", "_").replace("]", "");
			} else {
				fieldName = key;
			}

			if ($('#' + fieldName).length > 0) {
				$('#' + fieldName).val(params[key]);
			}

			if (fieldName == 'filter_tags') {
		
				var tmp = params[key].split(',');
				for (var i = 0 ; i < tmp.length; i++) {
					var field = '#filter_tag_' + tmp[i];
					$(field).attr('checked', true);
					$(field).next('span').addClass("active");
				}
			}
			
			if (fieldName == "limit") {	
				setLimitLinks(params[key]);
			}
		}
		
		filterProducts();
	}
}

setLimitLinks = function (limitOption) {	

	$('#limit').val(limitOption);
		
	$('a[class=active_limit]').removeClass("active_limit");
	
	
	if ($('#limit-' + limitOption).length > 0) {
		$('#limit-' + limitOption).addClass("active_limit");
	}
	if ($('#limit-' + limitOption + "-2").length > 0) {
		$('#limit-' + limitOption + "-2").addClass("active_limit");
	}
	
}

setLimit = function (limitOption) {
	setLimitLinks(limitOption);
	filterProducts();	
}

if ($('#group').length > 0) {
	$('#group').bind('change', filterProducts);
}


if (document.location.hash.length > 0) {
	parseFilter(document.location.hash);
}

$(function () {

	$('#tag-filter input').bind('click', function () {
		var results = $('#tag-filter input:checked');
		
		
		var ids = [];
		var titles = [];
		for (var i = 0; i < results.length; i++) {
			ids.push($(results.get(i)).val());
			titles.push($(results.get(i)).attr('title'));
		}
		$('#filter_tags').val(ids.join(','));
		

		var items = $('#tag-filter input[type=checkbox]');
		items.each(function () {
			var checked = $(this).attr('checked') ? 1 : 0;
			if (checked) {
				$(this).next('span').addClass("active");
			} else {
				$(this).next('span').removeClass("active");
			}
		});

		var filterQuery = serializeFilter();

		$('#list-container').html("Loading ...");
		
		if (titles.length > 0) {
			woopraTracker.trackMultipleTagsSelected(titles.join(','));
		}
		$.post($('#filter_form').attr('action'),
			  filterQuery,
			  function (result) {
					document.location.hash = "#filter$" + filterQuery;
				 	$('#list-container').html(result);
			  },
			  'html');
	});
	

	$('.list-tag').each(function() {
	  // We make use of the .each() loop to gain access to each element via the "this" keyword...
	  $(this).qtip(
	  {
	     content: {
	        text: $(this).next('span').html(),
	        title: {
	           text: ' ', // Give the tooltip a title using each elements text
	           button: true
	        }
	     },
	     position: {
	        at: 'bottom center', // Position the tooltip above the link
	        my: 'top center',
	        viewport: $(window) // Keep the tooltip on-screen at all times
	     },
	     show: {
	        solo: true
	     },
	     hide: 'unfocus',
	     style: {
	        classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
	         }
	      })
	   });
	
	  $('.list_type_option').click(function (e) {
		  
		  e.preventDefault();
		  
		  var listType = "";
		  
		  $('.list_type_option').removeClass('active');
		  
		  if ($(this).hasClass('list_type_block')) {
			  listType = 'block';
		  } else if ($(this).hasClass('list_type_table')) {
			  listType = 'table';		  
		  }
		  $(this).addClass('active');
		  
		  $('#list_type').val(listType);
		  filterProducts();
	  });
});