var ToysBy = {
	config: {
		constant: {
			controller: '/fp.aspx',
			state: '4330'
		}
	},

	initialize: function () {
		this.cacheSelectors();
		
		this.Age.initialize();
		this.Category.initialize();
		this.Brand.initialize();
		
		this.CategorySearch.initialize();
		this.ProductSearch.initialize();
	
		this.UI.initialize();
	
		this.attachEvents();
	},

	cacheSelectors: function () {
		this.Age.$container = $(this.Age.config.selector.container);
		this.Category.$container = $(this.Category.config.selector.container);
		this.Brand.$container = $(this.Brand.config.selector.container);
		
		this.Age.$items = $(this.Age.config.selector.items, this.Age.$container);
		this.Age.$allages = $(this.Age.config.selector.allages, this.Age.$container);
		this.Category.$items = $(this.Category.config.selector.items, this.Category.$container);
		this.Category.$viewall = $(this.Category.config.selector.viewall, this.Category.$container);
		this.Brand.$items = $(this.Brand.config.selector.items, this.Brand.$container);
		
		this.Category.$reset = $(this.Category.config.selector.reset, this.Category.$container);
		
		this.ProductSearch.$sort = $(this.ProductSearch.config.selector.sort.container);
		this.ProductSearch.$sort_items = $(this.ProductSearch.config.selector.sort.items, this.ProductSearch.$sort);
		
		this.ProductSearch.$page = $(this.ProductSearch.config.selector.page.container);
		this.ProductSearch.$page_items = $(this.ProductSearch.config.selector.page.items, this.ProductSearch.$page);
		
		this.ProductSearch.$view_all = $(this.ProductSearch.config.selector.view_all);
	},
	
	attachEvents: function () {
		var self = this;
	
		this.Age.$items.click(function (e) { 				
			if(typeof Tracker != 'undefined') Tracker.track({name:'Age - ' + $(this).attr(ToysBy.Age.config.attribute.name) ,campaign:CAMPAIGN.NONE,channel:CHANNEL.TOYSBY,contenttype:CONTENTTYPE.BUTTON,action:ACTION.CLICK});
			self.filter(self.Age, this); 
		});
		
		this.Category.$items.click(function (e) { 
			if(typeof Tracker != 'undefined') Tracker.track({name:'Category - ' + jQuery.trim($(this).text()) ,campaign:CAMPAIGN.NONE,channel:CHANNEL.TOYSBY,contenttype:CONTENTTYPE.BUTTON,action:ACTION.CLICK});
			self.filter(self.Category, this);
		});
		
		this.Brand.$items.click(function (e) { 
			if(typeof Tracker != 'undefined') Tracker.track({name:'Brand - ' + $(this).attr(ToysBy.Brand.config.attribute.name) ,campaign:CAMPAIGN.NONE,channel:CHANNEL.TOYSBY,contenttype:CONTENTTYPE.BUTTON,action:ACTION.CLICK});
			self.filter(self.Brand, this); 
		});
		
		$(this.ProductSearch.config.selector.sort.container + ' ' + this.ProductSearch.config.selector.sort.items).live('click', function (e) {
			if(typeof Tracker != 'undefined') Tracker.track({name:'Sort by - ' + jQuery.trim($(this).text()) ,campaign:CAMPAIGN.NONE,channel:CHANNEL.TOYSBY,contenttype:CONTENTTYPE.BUTTON,action:ACTION.CLICK});
			self.ProductSearch.setSortOrder(this);
		});
		
		$(this.ProductSearch.config.selector.page.container + ' ' + this.ProductSearch.config.selector.page.items).live('click', function (e) {
			e.preventDefault();
			self.ProductSearch.setPage(this);
		});
			
		$(this.ProductSearch.config.selector.view_all).live('click', function (e) {
			if(typeof Tracker != 'undefined') Tracker.track({name:'View All' ,campaign:CAMPAIGN.NONE,channel:CHANNEL.TOYSBY,contenttype:CONTENTTYPE.BUTTON,action:ACTION.CLICK});
			self.ProductSearch.setPageSize(this);
		});
		
		this.Category.$reset.click(function (e) { 
			if(typeof Tracker != 'undefined') Tracker.track({name:'Category - All Categories' ,campaign:CAMPAIGN.NONE,channel:CHANNEL.TOYSBY,contenttype:CONTENTTYPE.BUTTON,action:ACTION.CLICK});
			self.Category.reset(); self.ProductSearch.search(); 
		});
		
		$('#reset').click(function (e) {
			if(typeof Tracker != 'undefined') Tracker.track({name:'Reset all' ,campaign:CAMPAIGN.NONE,channel:CHANNEL.TOYSBY,contenttype:CONTENTTYPE.BUTTON,action:ACTION.CLICK});
			self.Age.reset(); 
			self.CategorySearch.search();
			self.ProductSearch.initialize();
		});
	},
	
	filter: function (type, obj) {
		ToysBy.ProductSearch.page = ToysBy.ProductSearch.config.initial.page;
		
		var filter = type.filter(obj);
	
		if (filter) {
			if (type != ToysBy.Category) {
				this.CategorySearch.search();
			}
			
			this.ProductSearch.search();
		}
	}
};

ToysBy.CategorySearch = {
	config: {
		constant: {
			event: 'categories',
			parent_category: 'ToyFinder',
			timer: 'false'
		}
	},
	
	initialize: function () {
	
	},

	search: function () {
		if (ToysBy.Category.value.length == 0) {
			ToysBy.Category.reset();
		}
	
		$.getJSON(ToysBy.config.constant.controller, {
			st:	ToysBy.config.constant.state,
			e: this.config.constant.event,
			catparcode: this.config.constant.parent_category,
			cminage: ToysBy.Age.value.min,
			cmaxage: ToysBy.Age.value.max,
			timer: this.config.constant.timer
		}, function (data, status) {
			ToysBy.Category.$items.each(function () {
				var $item = $(this);
				var code = $item.attr(ToysBy.Category.config.attribute);
			
				if ($.inArray(code, data) == -1) {
					if (!$item.hasClass('disabled')) {
						$item.addClass('disabled');
						$item.removeClass('click-active');
						
						var index = $.inArray(code, ToysBy.Category.value);
						
						if (index != -1) {
							ToysBy.Category.value.splice(index, 1);
						}	
					}
				} else {
					if ($item.hasClass('disabled')) {
						$item.removeClass('disabled');
						
						if (ToysBy.Category.filtered == false) {
							ToysBy.Category.value.push(code);
						}
					}
				}
			});
		});
	}
};

ToysBy.ProductSearch = {
	config: {
		constant: {
			event: 'thumbnail',
			default_sort_value: 'price',
			default_sort_direction: 'desc'
		},
		
		initial: {
			sort: {
				value: 'price',
				direction: 'desc'
			},
			page: 1,
			page_size: 12,
			row_size: 4
		},
		
		attribute: {
			sort: {
				value: 'data-sort',
				direction: 'data-sort-direction'
			}
		},
		
		selector: {
			sort: {
				container: '#sort',
				items: 'li'
			},
			
			page: {
				container: 'div.pagination',
				items: 'a'
			},
			
			view_all: '#view'
		}
	},

	$sort: null,
	$sort_items: null,
	
	$page: null,
	$page_items: null,
	
	$view_all: null,

	sort: null,
	page: null,
	page_size: null,
	row_size: null,
	
	
	initialize: function () {
		this.sort = this.config.initial.sort;
		this.sort.value = this.config.constant.default_sort_value;
		this.sort.direction = this.config.constant.default_sort_direction;
		this.page = this.config.initial.page;
		this.page_size = this.config.initial.page_size;
		this.row_size = this.config.initial.row_size;
		
		this.search();
	},
	
	setPage: function (obj) {
		var $obj = $(obj);
		var page = $obj.text();
		
		if (page == 'Previous') {
			this.page--;
		} else if (page == 'Next') {
			this.page++;
		} else {
			this.page = page;
		}
		
		this.search();
	},
	
	setPageSize: function (obj) {
		var $obj = $(obj);
		
		this.page_size = $obj.attr(this.config.attribute.page_size);
		
		this.search();
	},
	
	setSortOrder: function (obj) {
		var $obj = $(obj);
	
		this.sort.value = $obj.attr(this.config.attribute.sort.value);
		this.sort.direction = $obj.attr(this.config.attribute.sort.direction);
		
		this.search();
	},
	
	search: function () {	
		if (ToysBy.Category.value.length < 1) {
			ToysBy.UI.Category.reset();
		}
			
		var cat = ToysBy.Category.value.join(',');
	
		if (ToysBy.Brand.value.code != null) {
			cat = ToysBy.Category.value.join('*' + ToysBy.Brand.value.code + ',');
			cat = cat + '*' + ToysBy.Brand.value.code;
		}
		
		$('#thumb-container').hide();
		$('#loading').show();
		
		var query = ToysBy.config.constant.controller +
			'?st=' + ToysBy.config.constant.state +
			'&e=' + this.config.constant.event;
			
		var data = { 
			pminage: ToysBy.Age.value.min, 
			pmaxage: ToysBy.Age.value.max,
			pcat:  cat,
			psort: this.sort.value,
			psortdirection: this.sort.direction,
			ppage: this.page,
			ppagesize: this.page_size
		};
			
		$.post(query, data, function (html, status) { 
			$('#loading').hide(); 
			$('#thumb-container').html(html);
			$('#thumb-container').show();
			SiteHelper.detectPopups();
			if(typeof Tracker != 'undefined') Tracker.track({name: ToysBy.Age.value.name + ' - Brand '+ ToysBy.Brand.value.name + ' - '+ ToysBy.Category.name.join('/') +' - Sort by '+ ToysBy.ProductSearch.sort.value + ' ' + ToysBy.ProductSearch.sort.direction,campaign:CAMPAIGN.NONE,channel:CHANNEL.TOYSBY,contenttype:CONTENTTYPE.THUMBNAIL,action:ACTION.VIEW});
			
			// set thumbail height
			var rowSize = ToysBy.ProductSearch.row_size;
			var $thumbs = $('#thumbs > div > div.product');
			for(var i=0; i < $thumbs.length; i = i + rowSize) {
				var rowMaxHeight = 0;
				$thumbs.slice(i, i + rowSize).each( function() {
					var $item = $(this);
					rowMaxHeight = Math.max($item.height(), rowMaxHeight);			
				});
				$thumbs.slice(i, i + rowSize).height(rowMaxHeight);
			}

			
			
		}, 'html');
	}
};

ToysBy.Age = {
	config: {
		initial: {
			value: { 
				min: 0, 
				max: 72,
				name: 'All Ages'
			}
		},
		
		attribute: {
			min: 'data-min-age',
			max: 'data-max-age',
			name: 'data-age-name'
		},
		
		selector: {
			container: '#age',
			items: 'li',
			allages: 'li.void'
		}
	},
	
	$container: null,
	$items: null, 
	$allages: null,
	
	value: null,
	
	initialize: function () {
		this.value = this.config.initial.value;
	},
	
	filter: function (obj) {
		var $obj = $(obj);
		
		ToysBy.Category.reset();
		ToysBy.Brand.reset();
		
		this.value = {
			min: $obj.attr(this.config.attribute.min),
			max: $obj.attr(this.config.attribute.max),
			name: $obj.attr(this.config.attribute.name)
		};
		
		ToysBy.Category.$container.attr('class', $obj.attr('id'));
		
		return true;
	},
	
	reset: function () {
		ToysBy.Category.reset();
		ToysBy.Brand.reset();
		this.value = this.config.initial.value;
		ToysBy.UI.Age.reset();
		ToysBy.Category.$container.attr('class', this.$allages.attr('id'));
	}
};

ToysBy.Category = {
	config: {
		initial: {
			value: []
		},
		
		attribute: 'data-cat-code',
		
		selector: {
			container: '#category',
			items: 'li:not(.void)',
			reset: '#view-all',
			viewall: 'li.void'
		}
	},
	
	filtered: false,
	
	$container: null,
	$items: null,
	$viewall: null,
	
	$reset: null,
	
	value: null,
	
	name: null,
	
	initialize: function () {
		this.reset();
	},

	filter: function (obj) {
		var $obj = $(obj);
		
		if (!$obj.hasClass('disabled')) {
			if (this.filtered == false) {
				this.value = [];
				this.name = [];
				this.filtered = true;
			}
		
			this.value = $.toggleArrayValue($obj.attr(this.config.attribute), this.value);
			
			this.name = $.toggleArrayValue(jQuery.trim($obj.text()), this.name);
			
			if (this.value.length < 1) {
				this.reset();
			} else {
				if(this.$viewall.hasClass('click-active')) {
					this.$viewall.removeClass('click-active');
				}
			}		
			
			return true;
		} else {
			return false;
		}
	},
	
	reset: function () {
		this.value = [];
		this.name = [];
		
		this.$items.each(function () {
			ToysBy.Category.value.push($(this).attr(ToysBy.Category.config.attribute));
		});
		ToysBy.Category.name = ['All Categories'];
		
		this.filtered = false;
		
		ToysBy.UI.Category.reset();
	}
};

ToysBy.Brand = {
	config: {
		initial: {
			value: { 
				code: null, 
				name: 'All Brands'
			}
		},
		
		attribute: {
			code: 'data-brand-code',
			name: 'data-brand-name'
		},
		
		selector: {
			container: '#brand',
			items: 'li'
		}
	},

	value: null,
	
	initialize: function () {
		this.reset();
	},

	filter: function (obj) {
		var $obj = $(obj);
		
		this.value = {
			code: $obj.attr(this.config.attribute.code),
			name: $obj.attr(this.config.attribute.name)
		};
		
		return true;
	},
	
	reset: function () {
		this.value = this.config.initial.value;
		
		ToysBy.UI.Brand.reset();
	}
};

ToysBy.UI = {
	initialize: function () {
		this.CategorySearch.initialize();
		this.ProductSearch.initialize();
		
		this.Age.initialize();
		this.Category.initialize();
		this.Brand.initialize();
	}
};

ToysBy.UI.CategorySearch = {
	initialize: function () {
		this.attachEvents();
	},
	
	attachEvents: function () {}
};

ToysBy.UI.ProductSearch = {
	initialize: function () {
		this.attachEvents();
	},
	
	attachEvents: function () {
		$(ToysBy.ProductSearch.config.selector.sort.container).live('mouseover', function (e) {
			$(this).addClass('hover-active');
		});
		
		$(ToysBy.ProductSearch.config.selector.sort.container).live('mouseout', function (e) {
			$(this).removeClass('hover-active');
		});
	}
};

ToysBy.UI.Age = {
	initialize: function () {
		this.attachEvents();
	},
	
	attachEvents: function () {
		ToysBy.Age.$items.uniqueClickState();
	},
	
	reset: function () {
		ToysBy.Age.$items.removeClass('click-active');
		if(!ToysBy.Age.$allages.hasClass('click-active')) {
			ToysBy.Age.$allages.addClass('click-active');
		}
	}
}

ToysBy.UI.Category = {
	config: {
		images: [
			'/content/v5/us/toysby/img/arrow-inverse.gif', 
			'/content/v5/us/toysby/img/checkedbox.gif', 
			'/content/v5/us/toysby/img/checkbox-inactive.gif'
		]
	},
	
	initialize: function () {
		$.preloadImages(this.config.images);
		$('ul:not(.void)', ToysBy.Category.$container).matchHeight();
		$('ul:odd', ToysBy.Category.$container).addClass('alt');
	
		this.attachEvents();
	},
	
	attachEvents: function () {
		var self = this;
	
		ToysBy.Category.$items.click(function () {
			var $obj = $(this);
				
			if (!$obj.hasClass('disabled')) {
				if ($obj.hasClass('click-active')) {
					$obj.removeClass('click-active');
				} else {
					$obj.addClass('click-active');
				}
			}
		});
		
		ToysBy.Category.$viewall.click(function () {
			var $obj = $(this);
				
			if (!$obj.hasClass('disabled')) {
				if ($obj.hasClass('click-active')) {
					$obj.removeClass('click-active');
				} else {
					$obj.addClass('click-active');
				}
			}
		});
	},
	
	reset: function () {
		ToysBy.Category.$items.removeClass('click-active');
		if(!ToysBy.Category.$viewall.hasClass('click-active')) {
			ToysBy.Category.$viewall.addClass('click-active');
		}
	}
};

ToysBy.UI.Brand = {
	config: {
		plugin: {
			jcarousel: {
				scroll: 6
			}
		}
	},
	
	initialize: function () {
		$('ul', ToysBy.Brand.$container).jcarousel({ 
			size: ToysBy.Brand.$items.length, 
			scroll: this.config.plugin.jcarousel.scroll
		});
		
		ToysBy.Brand.$items.addHoverState();
		
		$('ul', ToysBy.Brand.$container).click(function () { $(this).addClass('click-active') });
		ToysBy.Brand.$items.uniqueClickState();
		
		this.attachEvents();
	},
	
	attachEvents: function () {
		ToysBy.Brand.$items.uniqueClickState();
	},
	
	reset: function () {
		$('ul', ToysBy.Brand.$container).removeClass('click-active');
		ToysBy.Brand.$items.removeClass('click-active');
	}
};

$(function () {
	ToysBy.initialize();
});