﻿
var catalog = {
	products: {},
	filters: {},
	$showAllLink: null,
	
	applyFilters: function(product) {
		var _this = this;
		product = product || null;
		if ( product ) {
			var r = true;
			for ( var i in this.filters ) {
				if ( this.filters[i].state ) {
					r = r && this.filters[i].filter.call(product);
				}
			}
			if ( r && product.visible == false ) {
				product.visible = true;
				product.$node.show();
			}
			else if ( !r && product.visible == true ) {
				product.visible = false;
				product.$node.hide();
			}
		}
		else {
			$('.product-wrapper').fadeTo('fast', 0.01, function() {
				for ( var i in _this.products ) {
					_this.applyFilters(_this.products[i]);
				}
				_this.checkShowAll();
				$('.product-wrapper').fadeTo('fast', 1);
			});
		}
	},
	
	toggleFilter: function(name, ignoreGroup) {
		var ignoreGroup = ignoreGroup || false;
		var filter = this.filters[name];
		filter.state = !filter.state;
		if ( filter.state ) {
			// turn off the other filters in the same group
			if ( filter.group && !ignoreGroup ) {
				for ( var i in this.filters ) {
					if ( i != name && this.filters[i].group == filter.group && this.filters[i].state ) {
						this.toggleFilter(i, true);
					}
				}
			}
			if ( filter.group ) {
				this.findGroupLink(filter.$link).addClass('active');
				filter.$link.css('color', '#fff');
			}
			else {
				filter.$link.addClass('active');
			}
			
			// Extra GA tracking
			try {
				if ( filter.$link.attr('title') ) {
					pageTracker._trackEvent('Product-Filter', 'click', filter.$link.attr('title'));
				}
				else {
					pageTracker._trackEvent('Product-Filter', 'click', filter.$link.html());
				}
			}
			catch (err) {}
		}
		else {
			if ( filter.group ) {
				this.findGroupLink(filter.$link).removeClass('active');
				filter.$link.css('color', '');
			}
			else {
				filter.$link.removeClass('active');
			}
		}
		this.applyFilters();
	},
	
	addFilter: function(name, $link, filter, group) {
		var group = group || false;
		var _this = this;
		this.filters[name] = {
			'name': name,
			'filter': filter,
			'$link': $link,
			'state': false,
			'group': group
		};
		_this = this;
		$link.click(function() {
			// original code
			// _this.toggleFilter(name);
			// return false;
			
			// really quick and ugly way to allow only 1 filter to be selected
			_this.toggleFilter(name);
			if ( _this.filters[name].state ) {
				for ( var i in _this.filters ) {
					if ( i != name && _this.filters[i].state ) {
						_this.toggleFilter(i);
					}
				}
			}
			return false;
		});
		if ( group ) {
			$groupLink = this.findGroupLink($link);
			if ( $groupLink != $link ) {
				$groupLink.click(function() {
					_this.resetFilters(group);
					return false;
				});
			}
		}
	},
	
	removeFilter: function(name) {
		if ( this.filters[name] ) {
			delete this.filters[name];
		}
	},
	
	resetFilters: function(group) {
		group == group || false;
		for ( var i in this.filters ) {
			if ( this.filters[i].state ) {
				if ( !group || (group && this.filters[i].group == group) ) {
					this.toggleFilter(i);
				}
			}
		}
	},
	
	findGroupLink: function($link) {
		$parent = $link.parent();
		while ( ($parent = $parent.parent()).length ) {
			// this intentionally skips the first parent
			if ( $parent[0].nodeName == 'LI' ) {
				return $parent.children('a');
			}
		}
		return $link;
	},
	
	checkShowAll: function() {
		for ( var i in this.filters ) {
			if ( this.filters[i].state ) {
				this.$showAllLink.removeClass('active');
				return;
			}
		}
		this.$showAllLink.addClass('active');
	},
	
	init: function() {
		for ( var i in this.products ) {
			this.products[i].visible = true;
			this.products[i].$node = $('#product-' + i);
		}
		this.checkShowAll();
	}
};

$(document).ready(function() {
	// footwear links
	$sblinks = $('a[href^="/Lists/Footwear/View.aspx"]');
	if ( $sblinks.length ) {
		Shadowbox.setup($sblinks, {
			height: 373,
			width: 740
		});
	}
	
	catalog.$showAllLink = $('#filterShowAll').click(function() {
		catalog.resetFilters();
		return false;
	});
	catalog.addFilter('guys', $('#filterGuys'), function() {return this.BoysLowSize || this.BoysHighSize;});
	catalog.addFilter('girls', $('#filterGirls'), function() {return this.GirlsLowSize || this.GirlsHighSize;});
	catalog.addFilter('proSeries', $('#filterProSeries'), function() {return this.ProSeries == 1;});
	catalog.addFilter('topPicks', $('#filterTopPicks'), function() {return this.TopPicks == 1;});
	catalog.addFilter('mallRattling', $('#filterMallRattling'), function() {return this.MallRattling == 1;}, 'whatfor');
	catalog.addFilter('streetGrinding', $('#filterStreetGrinding'), function() {return this.StreetGrinding == 1;}, 'whatfor');
	catalog.addFilter('catwalking', $('#filterCatwalking'), function() {return this.Catwalking == 1;}, 'whatfor');
	//catalog.addFilter('wheelOriginal', $('#filterWheelOriginal'), function() {return this.WheelStyle.indexOf('Original') >= 0;}, 'wheelStyle');
	catalog.addFilter('wheelFats', $('#filterWheelFats'), function() {return this.WheelStyle.indexOf('Fats') >= 0;}, 'wheelStyle');
	catalog.addFilter('wheelMega', $('#filterWheelMega'), function() {return this.WheelStyle.indexOf('Mega') >= 0;}, 'wheelStyle');
	//catalog.addFilter('wheelBigDeuce', $('#filterWheelBigDeuce'), function() {return this.WheelStyle.indexOf('Big Deuce') >= 0;}, 'wheelStyle');
	
	$('.productFilters .colorPallette a').each(function() {
		var $this = $(this);
		var filterHex = '#' + rgbStringToHex($this.css('background-color'));
		catalog.addFilter('color' + filterHex, $this, function() {
			if ( this.PrimaryChip.toLowerCase().indexOf(filterHex) >= 0 || this.SecondaryChip.toLowerCase().indexOf(filterHex) >= 0 ) {
				return true;
			}
			return false;
		}, 'color');
	});
	
	catalog.init();
});
