/*
 * @Chris Baigorri
 * productFilter.js
 *
 */
var P = objProducts;
var G = objGrid;
filterTypeStack = [];
filterAttrStack = [];

var ProdFilters = Class.create();
ProdFilters.prototype = {
	
	// initialize function
	initialize: function() {		
		// root element
		this.filterDIV = $A(document.getElementsByClassName("narrowCategory"))[0];
		if(this.filterDIV) {
			// grab the filter categories init each
			this.filterCategories = $A(document.getElementsByClassName("filterCatBox", this.filterDIV));
			(this.filterCategories).each (function(div) {
				// initialize category/subcategory links
				this.filters = $A(document.getElementsByClassName("fCat", div)); // get the filter categories
				(this.filters).each (function(liEl) {
					this.cLink = $A(liEl.getElementsByTagName("a")); // reference to the category links
					(this.cLink).each (function(link) { // main category links cat and sub cat links
						if(link.className == "fCatLink") Event.observe(link, "click", function(e) { this.handleFilterClick(e); }.bindAsEventListener(this));
						else Event.observe(link, "click", function(e) { this.handleSubFilterClick(e); }.bindAsEventListener(this) );
					}.bind(this));
				}.bind(this));
				// end
			}.bind(this));
		}
	},
	    
	// filter the results
	filterResults : function(type, attr) {
		var prods = P.clone(); // clone the product array
		if(type) filterTypeStack.push(type); // push new values if they exist
		if(attr) filterAttrStack.push(attr);
		(filterAttrStack).each (function(arrayItem, index) {
			var newProds = prods.Products.findAll(function(product) {
				if(product) return product[filterTypeStack[index]] == arrayItem;
			});
			prods.Products = newProds;
		});	
		this.alterGridState(prods.Products); 
	},
	
	// find the unique blocks
	alterGridState : function(obj) {
		var blocksToShow = [];
		var tipsToShow = [];
		var colorsToShow = [];		
		(obj).each (function(objItem) { // go through each item passed
			tipsToShow.push(objItem.tip); // tips // add tips to an array
			colorsToShow.push(objItem.colorName); // colors // add colors to an array
			G.Blocks.detect(function(block) { // blocks // go thourgh all the blocks 
				block.refIDs.detect(function(id, index) { // find the id in the id array key of the block
					if(objItem.id == id) blocksToShow.push(block.objID); // add to an array	
				});
			});
		});
		var ut = tipsToShow.uniq(); // tips //strip duplicate values - display
		this.displayTips(ut);
		var uc = colorsToShow.uniq(); // colors
		this.displayColors(uc);
		var ub = blocksToShow.uniq(); // blocks
		this.displayBlocks(ub);
	},
	
	// show hide tips
	displayTips : function(tArray) {
		if(!filterTypeStack.include("tip")){
			var tipsContainer = $("catFilter2");
			var tips = $A(tipsContainer.getElementsByTagName("li"));
			(tips).each (function(liEl, index) { // go through all tips in the nav
				var aEl = $(liEl.getElementsByTagName("a"))[0]; // reference the link
				Element.hide(liEl); // hide them all
				(tArray).each (function(tItem) { // go through the returned array
					if(aEl && aEl.innerHTML == tItem) Element.show(liEl);
				});
			});
		}
	},

	// show hide tips
	displayColors : function(cArray){
		var filter1 = $("filter1");
		var filterUl = $(document.getElementsByClassName("fsCatList", filter1));
		(filterUl).each (function(ulEl, index){			
			var lists = $A(ulEl.getElementsByTagName("li"));
			var counter = 0;
			(lists).each (function(listEl){
				var aLink = $(listEl.getElementsByTagName("a"))[0];
				// this is used to identify which elements to show when using display first x amount of elements - remove them all
				if(Element.hasClassName(listEl,"showit")) Element.removeClassName(listEl,"showit");
				if(cArray.include(aLink.innerHTML.stripTags())){
					Element.show(listEl);
					counter++;
				}else{
					Element.hide(listEl);
				}
			});			
			// show all 
			Element.show(ulEl.parentNode);
			if(filterTypeStack.include("colorFamily") && !filterTypeStack.include("tip")){
				Element.show(ulEl.parentNode);
			}else if(!filterTypeStack.include("colorFamily") && filterTypeStack.include("tip")){
				if(counter == 0) Element.hide(ulEl.parentNode);
			}			
		}.bind(this));
		this.showFirstFive();
	},
	
	// show hide blocks
	displayBlocks : function(bArray) {
		var blockContainer = $("blocksContainer");
		var blocks = $A(blockContainer.getElementsByTagName("li"));		
		(blocks).each (function(liEl, index) {
			Element.hide(liEl);
			(bArray).each (function(bItem) {
				if(Element.hasClassName(liEl, bItem)) Element.show(liEl);
			});	
		});
	},
	
	// delete items from the filter stack based on attr
	delSearchAttr : function(attr) {
		(filterAttrStack).each (function(arrayItem, index) {
			if(arrayItem == attr) {
				filterAttrStack.splice(index,1);
				filterTypeStack.splice(index,1);
			}
		});
	},
	
	// delete items from the filter stack based on type
	delSearchType : function(type) {
		(filterTypeStack).each (function(arrayItem, index) {
			if(arrayItem == type) {
				filterAttrStack.splice(index,1);
				filterTypeStack.splice(index,1);
			}
		});
	},
	
	// handles the main filter clicks
	handleFilterClick : function(e) {
		var bThisUl = Event.findElement(e,"ul"); // some vars
		var bThisNode = Event.findElement(e,"li"); // some vars
		var cFil = Event.findElement(e, "a");		
		var childList = $A(bThisNode.getElementsByTagName("ul"));
		
		// close all the other ones before opening another
		var allCatNodes = $A(bThisUl.getElementsByClassName("fsCatList"));
		(allCatNodes).each (function(ulItem) {
			if(Element.hasClassName(ulItem, "stateVisible")) {
				Element.removeClassName(ulItem, "stateVisible");
				Element.addClassName(ulItem, "stateHidden");
			}
		});//alert(allCatNodes.length);//Event.findElement(e,"ul"));
		// show the current one
		if(Element.hasClassName(childList[0],"fsCatList")) { // has children to display
			if(Element.hasClassName(childList[0], "stateHidden")) { // show
				Element.removeClassName(childList[0], "stateHidden");
				Element.addClassName(childList[0], "stateVisible");
			}
			this.delSearchType("colorFamily"); // filter results
			this.filterResults();
		} else if(!Element.hasClassName(childList[0],"fsCatList")) { // no children to display
			this.filterResults("tip", cFil.innerHTML); // filter results
			this.displayFilterSelection(0, cFil);  // display selection
		}
		Event.stop(e);
		return false;
	},
	
	// handle sub filter link clicks
	handleSubFilterClick : function(e) {
		var aEl = Event.findElement(e, "a");
		if(Element.hasClassName(aEl, "more")) { // show more link
			var ShowMoreText = "Show More..."; // text for show more/less links
			var ShowLessText = "Show Less...";
			
			if(aEl.innerHTML == ShowMoreText){
				this.showAll();
				aEl.innerHTML = ShowLessText; // switch what the show more link says
			}else if(aEl.innerHTML == ShowLessText){
				this.showFirstFive();
				aEl.innerHTML = ShowMoreText;
			}
		} else { // sub category filter links
			var filterColor = aEl.innerHTML;
			this.displayFilterSelection(1, aEl); // display and filter results
			this.filterResults("colorName", filterColor.stripTags());
		}
		Event.stop(e);
		return false;
	},
	
	// handle the display of a filter selection
	displayFilterSelection : function(filterType, elem) {		
		if(filterType == 0) { // main filter - tip
			var NewList = document.createElement("ul");
			NewList.id = "filterDisplay2";
			var NewListItem1 = document.createElement("li");
			var NewListItem2 = document.createElement("li");
			NewListItem2.className = "returnLink";
			var selectionText = "<span class='navSelected'>" + elem.innerHTML + "</span>";
			var aBack = document.createElement("a");
			aBack.href = "#";
			aBack.innerHTML = "Change Tip";
			Event.observe(aBack, "click", function(e) { this.changeFilter2(e, elem); }.bindAsEventListener(this) );
			NewListItem1.innerHTML = selectionText;
			NewListItem2.appendChild(aBack);
			NewList.appendChild(NewListItem1);
			NewList.appendChild(NewListItem2);
			var container = $(elem.parentNode.parentNode.parentNode);
			//alert(container.className);
			this.displayDivs = $A(container.getElementsByTagName("div"));
			(this.displayDivs).each (function(div, index) {
				if(div.className == "filterCatDisplay") {
					div.innerHTML = "";
					div.appendChild(NewList);
				}
			}.bind(this));
		} else if(filterType == 1) { // sub filter - color family
			var NewList = document.createElement("ul");
			NewList.id = "filterDisplay1";
			var NewListItem1 = document.createElement("li");
			var NewListItem2 = document.createElement("li");
			NewListItem2.className = "indent";
			var NewListItem3 = document.createElement("li");
			NewListItem3.className = "returnLink";
			var parentLinkItem = elem.parentNode.parentNode.parentNode;
			var linkName = $A(parentLinkItem.getElementsByTagName("a"));
			// get hex value based on color name
			var hex = P.Products.findAll(function(product) {
				if(product) return product["colorName"] == elem.innerHTML.stripTags();
			});
			var ta = elem.innerHTML;
			var selectionText1 = "<span class='navSelected'>" + linkName[0].innerHTML + "</span>";
			var selectionText2 = "<div class='navColorBox' style='background:"+ hex[0].color +";margin:0 0 0 10px;'></div><span class='navSelected' style='padding:0 0 0 5px;margin:0;'>" + ta.stripTags() + "</span>";//document.createTextNode(ta.stripTags());
			
			var aBack = document.createElement("a");
			aBack.href = "#";
			aBack.innerHTML = "Change Color";
			Event.observe(aBack, "click", function(e) { this.changeFilter1(e, elem); }.bindAsEventListener(this) );
			NewListItem1.innerHTML = selectionText1;
			NewListItem2.innerHTML = selectionText2; //appendChild(selectionText2);
			NewListItem3.appendChild(aBack);
			NewList.appendChild(NewListItem1);
			NewList.appendChild(NewListItem2);
			NewList.appendChild(NewListItem3);
			var container = $(elem.parentNode.parentNode.parentNode.parentNode.parentNode);
			this.displayDivs = $A(container.getElementsByTagName("div"));
			(this.displayDivs).each (function(div, index) {
				if(div.className == "filterCatDisplay") {
					div.innerHTML = "";
					div.appendChild(NewList);
				}
			}.bind(this));
		}
		this.ToggleCategoryNav(elem); // hide the category nav
	},
	
	// turn on/off main category navigation
	ToggleCategoryNav : function(elem) {
		var catUl = elem.parentNode.parentNode;
		if(Element.hasClassName(catUl, "fsCatList")) var catUl = elem.parentNode.parentNode.parentNode.parentNode;
		
		if(Element.hasClassName(catUl, "stateVisible")) {
			Element.removeClassName(catUl, "stateVisible");
			Element.addClassName(catUl, "stateHidden");
		} else if(Element.hasClassName(catUl,"stateHidden")) {
			Element.removeClassName(catUl, "stateHidden");
			Element.addClassName(catUl, "stateVisible");
		}
	},
	
	ToggleCategoryUl : function(elem) {
		if(Element.hasClassName(elem, "stateVisible")) {
			Element.removeClassName(elem, "stateVisible");
			Element.addClassName(elem, "stateHidden");
		} else if(Element.hasClassName(elem,"stateHidden")) {
			Element.removeClassName(elem, "stateHidden");
			Element.addClassName(elem, "stateVisible");
		}
	},
	
	ShowCategoryUl : function(elem) {
		Element.removeClassName(elem, "stateHidden");
		Element.addClassName(elem, "stateVisible");
	},
	
	HideCategoryUl : function(elem) {
		Element.removeClassName(elem, "stateVisible");
		Element.addClassName(elem, "stateHidden");
	},

	// close the sub navigations
	CloseCategoryNavs : function(elem) {
		if(!elem.className) {
			var currentCat = elem.parentNode.parentNode.parentNode.parentNode;
			this.catNavList = $A(document.getElementsByClassName("fsCatList", currentCat));
			(this.catNavList).each (function(theUl) {
				if(Element.hasClassName(theUl, "stateVisible")) { // hide them if they arent already hidden
					Element.removeClassName(theUl, "stateVisible");
					Element.addClassName(theUl, "stateHidden");
				}
			});
		}
	},
	
	showFirstFive : function(){
		var filter1 = $("filter1");
		var filterUl = $(document.getElementsByClassName("fsCatList", filter1));
		(filterUl).each (function(ulEl){
			var lists = $A(ulEl.getElementsByTagName("li"));
			var counter = 0;
			(lists).each (function(listEl, index){
				//alert();
				//Element.removeClassName(listEl,"showit");
				if(Element.visible(listEl)){
					Element.addClassName(listEl,"showit");
					if(counter < 5){
						Element.show(listEl);
					}else{
						Element.hide(listEl);
					}
					counter++;					
				}
				if(Element.hasClassName(listEl, "more")){
					if(counter > 5){
						Element.show(listEl);
						var moreLink = $(listEl.getElementsByTagName("a"))[0];
						moreLink.innerHTML = "Show More...";
					}else{
						Element.hide(listEl);
					}
				}				
			});

		});
	},
	
	showAll : function(){
		var filter1 = $("filter1");
		var filterUl = $(document.getElementsByClassName("fsCatList", filter1));
		(filterUl).each (function(ulEl){
			var lists = $A(ulEl.getElementsByTagName("li"));
			(lists).each (function(listEl, index){
				if(Element.hasClassName(listEl,"showit")){
					Element.show(listEl);
				}
			});
		});
	},
	
	changeFilter2 : function(e,elem) {
		var typeEl = Event.findElement(e, "a");
		// parent
		var parents = typeEl.parentNode.parentNode.parentNode;
		var filterType1 = $(parents.getElementsByTagName("li"))[0];
		this.delSearchAttr(filterType1.innerHTML.stripTags());
		
		// Category 2 - tips
		var cat2 = $("catFilter2");
		var cat2Ul = $(document.getElementsByClassName("fCatList", cat2))[0];
		
		this.ToggleCategoryUl(cat2Ul);
		this.CloseCategoryNavs(elem); // close the category navs
		
		var aEl = Event.findElement(e, "a");
		var displayEl = aEl.parentNode.parentNode.parentNode;
		displayEl.innerHTML = ""; // erase current selection display
				
		this.filterResults(); // filter results
		Event.stop(e);
		return false;
	},
	
	changeFilter1 : function(e,elem) {
		var typeEl = Event.findElement(e, "a");
		
		// delete all filters
		filterAttrStack = [];
		filterTypeStack = [];
		
		// Category 1 - color family
		var cat1 = $("catFilter1");
		var cat1Ul = $(document.getElementsByClassName("fCatList", cat1))[0];
		
		// Category 2 - tips
		var cat2 = $("catFilter2");
		var cat2Ul = $(document.getElementsByClassName("fCatList", cat2))[0];
				
		this.ToggleCategoryUl(cat1Ul); // show the category nav
		this.ShowCategoryUl(cat2Ul); // show the category nav
		this.CloseCategoryNavs(elem); // close the category navs
		
		var aEl = Event.findElement(e, "a");
		var displayEl = aEl.parentNode.parentNode.parentNode;		
		displayEl.innerHTML = ""; // erase current selection display*/
		
		this.filterResults(); // filter results
		Event.stop(e);
		return false;
	}
	
}; // end class

// Event.observe(window, 'load', new ProductFilters);
Event.observe(window, 'load', function() { new ProdFilters; }, false);