closeSwatch = function(attribute_id) {
	formInputs = document.getElementsByTagName("select");
	for(var i=0; i < formInputs.length; i++) {
		formInputs.item(i).style.display = "block";
	}
	document.getElementById("swatch_popup_" + attribute_id).style.display = "none";
	document.getElementById("swatch_popup_background_" + attribute_id).style.display = "none";
	priceUpdate();
	if(typeof variants != "undefined") {
		for (i in attrs) {
			if (attrs[i][2] == attribute_id) {
				var el_id = attrs[i][0]+'_options_swatch_'+attribute_id+'_'+attrs[i][1];
				var val_el = document.getElementById(el_id);
				if (val_el) {
					if (val_el.value != "novalue" && val_el.value != "") {
						update_selections(el_id); 
						//alert("don't forget about closeSwatch in swatch_popup.v2.js");
						//clear_attribute_select_class(el_id,'att_table_'+attribute_id);
					}
				}
			}
		}
	}
}
selectSwatch = function(attribute_id, width) {
	if(typeof variants != "undefined") {
		eval("fill_default_options_content"+attribute_id+"();");
	}
	//document.getElementById("swatch_search_term_" + attribute_id).value = "";
	document.getElementById("filtered_search_term_" + attribute_id).value = "";
	formInputs = document.getElementsByTagName("select");
	for(var i=0; i < formInputs.length; i++) {
		formInputs.item(i).style.display = "none";
	}
	document.getElementById("swatch_popup_background_" + attribute_id).style.width = getDocumentWidth() + "px";
	document.getElementById("swatch_popup_background_" + attribute_id).style.height = getDocumentHeight() + "px";
	document.getElementById("swatch_popup_background_" + attribute_id).style.display = "";
	document.getElementById("swatch_popup_" + attribute_id).style.display = "";
	document.getElementById("swatch_popup_" + attribute_id).style.top =(posTop() + 20) + "px";
	var left = (pageWidth()-width)/2;
	if (left < 0) {
		left = 0;
	}
	document.getElementById("swatch_popup_" + attribute_id).style.left = left + "px";
}
pageWidth = function() { return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null; }
pageHeight = function() { return	window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?	document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null; }
posLeft = function() { return typeof window.pageXOffset != "undefined" ? window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0; }
posTop = function() { return typeof window.pageYOffset != "undefined" ?	window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0; }
posRight = function() { return posLeft()+pageWidth(); }
posBottom = function() { return posTop()+pageHeight(); }
getDocumentWidth = function() {
	if (document.body.scrollWidth) {
		return document.body.scrollWidth;
	}
	var w = document.documentElement.offsetWidth;
	if (window.scrollMaxX) {
		w += window.scrollMaxX;
	}
	return w;
};
getDocumentHeight = function() {
	if (document.body.scrollHeight) {
		return document.body.scrollHeight;
	}
	return document.documentElement.offsetHeight;
};
fill_default_options_content = function(attribute_id, attribute_name, width, el_id, container) {
	var voptions = eval("options_" + attribute_id);
	var nvoptions = new Array();
	if(typeof variants != "undefined") {
		var attr_data = el_id.split("_");
		var pwc_id = attr_data[0];
		var attr_id = attr_data[3];
		var prod_type = attr_data[4];
		for(i in voptions) {
			if (voptions[i].group_name) {
				if (find_option_variant(pwc_id, prod_type, i)) {
					if (voptions[i].use == '1') {
						nvoptions[i] = voptions[i];
					}
				}
			}
		}
		voptions = nvoptions;
	}
	build_options_view(voptions, attribute_id, attribute_name, container, width, el_id);
}
filter_by_group = function(group_name, attribute_id, container, attribute_name, el_id, width, reset_page) {
	if (reset_page) {
		document.getElementById("filtered_page_"+attribute_id).value = "1";
	}
	if (group_name == "see_all") {
		document.getElementById("filtered_general_color_" + attribute_id).value = "";
		document.getElementById("filtered_group_" + attribute_id).value = "";
		document.getElementById("filtered_page_" + attribute_id).value = "1";
	}
	else {
		document.getElementById("filtered_group_" + attribute_id).value = group_name;
	}
	var voptions = eval("options_" + attribute_id);
	var new_options = new Array();
	var filtered_general_color = document.getElementById("filtered_general_color_"+attribute_id).value;
	for(i in voptions) {
		if (voptions[i]["group_name"] == group_name || group_name == "see_all") {
			if (filtered_general_color != "") {
				if (filtered_general_color == voptions[i]["general_color"]) {
					new_options[i] = voptions[i];
				}
			}
			else {
				new_options[i] = voptions[i];
			}
		}
	}
	build_options_view(new_options, attribute_id, attribute_name, container, width, el_id);
	document.getElementById('swatch_search_term_'+attribute_id).value = "";
	document.getElementById('filtered_search_term_'+attribute_id).value = "";
}
filter_by_general_color = function(general_color, attribute_id, container, attribute_name, el_id, width, reset_page) {
	if (reset_page) {
		document.getElementById("filtered_page_"+attribute_id).value = "1";
	}
	if (general_color == "see_all") {
		document.getElementById("filtered_general_color_" + attribute_id).value = "";
		document.getElementById("filtered_group_" + attribute_id).value = "";
		document.getElementById("filtered_page_" + attribute_id).value = "1";
	}
	else {
		document.getElementById("filtered_general_color_" + attribute_id).value = general_color;
	}
	var voptions = eval("options_" + attribute_id);
	var new_options = new Array();
	var filtered_group = document.getElementById("filtered_group_"+attribute_id).value;
	for(i in voptions) {
		if (voptions[i]["general_color"] == general_color || general_color == "see_all") {
			if (filtered_group != "") {
				if (filtered_group == voptions[i]["group_name"]) {
					new_options[i] = voptions[i];
				}
			}
			else{
				new_options[i] = voptions[i];
			}
		}
	}
	build_options_view(new_options, attribute_id, attribute_name, container, width, el_id);
	document.getElementById('swatch_search_term_'+attribute_id).value = "";
	document.getElementById('filtered_search_term_'+attribute_id).value = "";
}
filter_by_search_term_reset = function(attribute_id, attribute_name, container, el_id, width, reset_page) {
	document.getElementById('swatch_search_term_'+attribute_id).value = "";
	document.getElementById('filtered_search_term_'+attribute_id).value = "";
	document.getElementById("filtered_general_color_" + attribute_id).value = "";
	document.getElementById("filtered_group_" + attribute_id).value = "";
	document.getElementById("filtered_page_" + attribute_id).value = "1";
	filter_by_search_term(attribute_id, attribute_name, container, el_id, width, reset_page);
}
filter_by_search_term = function(attribute_id, attribute_name, container, el_id, width, reset_page) {
	var search_term = document.getElementById('swatch_search_term_'+attribute_id).value;
	search_term = (search_term+'').replace(/([\\"'])/g, "\\$1").replace(/\u0000/g, "\\0");//addslashes
	document.getElementById("filtered_general_color_" + attribute_id).value = "";
	populate_general_colors(new_options, attribute_id, attribute_name, el_id, width);
	if (reset_page) {
		document.getElementById("filtered_page_"+attribute_id).value = "1";
	}
	document.getElementById("filtered_search_term_" + attribute_id).value = search_term;
	document.getElementById('swatch_search_term_'+attribute_id).value = search_term;
	var voptions = eval("options_" + attribute_id);
	var new_options = new Array();
	for(i in voptions) {
		var obj_vals = new Array("name","general_color","price","general_color","description","contents","surface_abrasion","break_strength","flammability");
		var found = false;
		if (search_term == "") {
			found = true;
		}
		else {
			for (x in obj_vals) {
				if (voptions[i][obj_vals[x]]) {
					var test = voptions[i][obj_vals[x]].toLowerCase();
					if (test.indexOf(search_term.toLowerCase()) != -1) {
						found = true; 
					}
				}
			}
		}
		if (found == true) {
			new_options[i] = voptions[i];
		}
	}
	build_options_view(new_options, attribute_id, attribute_name, container, width, el_id);
	if (new_options.length == 0) {
		container_el = document.getElementById(container);
		container_el.innerHTML = "No results.";
	}
}
build_options_view = function(voptions, attribute_id, attribute_name, container, width, el_id) {
	var count = 1;
	var current_page = document.getElementById("filtered_page_"+attribute_id).value;
	var low_count = null;
	var high_count = null;
	if (current_page) {
		if (current_page == 1) {
			low_count = 1;
			high_count = 12;
		}
		else {
			low_count = 12 *(current_page-1) + 1;
			high_count = (12 * current_page);
		}
	}
	var output = "";
	output += "<table border=0 width=\"" + (width-25) + "px\"><tr>";
	for(i in voptions) {
		if (voptions[i]["group_name"]) {
			if ((low_count == null || count >= low_count) &&(high_count == null || count <= high_count)) {
				output += "<td align=\"center\" valign=\"top\" width=\"16%\" style=\"border: 1px #ccc solid;\">";
				output += "<img src=\""+voptions[i]["filesid"] + "\">";
				output += "<br><a href=# onclick='showDetails(\""+ container + "\",\"" + attribute_id + "\", \"" + i + "\", \"" + el_id +"\", \"" + striphtmlspecialchars(voptions[i]["name"]) + "\", \"" + width + "\", \"" + attribute_name + "\"); return false;'>more details</a>";
				output += "<br><input type=\"button\" onclick='setSwatchPopupValue(\"" + attribute_id + "\", \"" + i + "\", \"" + el_id +"\", \"" + striphtmlspecialchars(voptions[i]["name"]) + "\", \"" + attribute_name + "\", \"" + voptions[i]["filesid"] + "\" ); return false;' value='Select'>";
				output += "<br>"+voptions[i]["name"];
				output += "<br>"+voptions[i]["group_name"];
				output += "<br>"+voptions[i]["price"];
				if (voptions[i]["backorder_date"] != "") {
					output += "<br><span style='color:#800000;'>Backordered until:<br>"+voptions[i]["backorder_date"]+"</span>";
				}
				output += "</td>";
				if (count % 6 == 0) {
					output += "</tr><tr><td style=\"height: 4px;\"></td></tr><tr>";
				}
			}
			count++;
		}
	}
	output += "</tr></table>";
	container_el = document.getElementById(container);
	populate_search_term(attribute_id, attribute_name, el_id, width);
	populate_groups(voptions, attribute_id, attribute_name, el_id, width);
	populate_general_colors(voptions, attribute_id, attribute_name, el_id, width);
	populate_pagination(voptions, attribute_id, attribute_name, el_id, current_page,(count - 1), container, width);
	container_el.innerHTML = output;
}
setSwatchPopupValue = function(attribute_id, option_id, el_id, option_name, attribute_name, image) {
	if (option_id == "undefined" || option_id == "") {
		alert("There was an error and we're very sorry. Please refresh your page.	If this continues please call our customer support line.");
		return false;
	}
	document.getElementById(el_id).value = option_id;
	document.getElementById("select_swatch_label_"+attribute_id).innerHTML = "<div align=\"center\">" + option_name + "<br><image src=\"" + image + "\"></div>";
	document.getElementById("select_swatch_label_"+attribute_id).style.padding = "5px";
	document.getElementById("select_swatch_label_"+attribute_id).style.display = "";
	var old_button = document.getElementById("select_swatch_button_"+attribute_id).innerHTML;
	document.getElementById("select_swatch_button_"+attribute_id).innerHTML = old_button.replace("Choose " + attribute_name, "Change " + attribute_name);
	closeSwatch(attribute_id);
	document.getElementById("att_table_"+attribute_id).className = "";
}
populate_general_colors = function(voptions, attribute_id, attribute_name, el_id, width) {
	var general_colors_el = document.getElementById("general_colors_header_" + attribute_id);
	var general_colors = new Array();
	var filtered_color = document.getElementById("filtered_general_color_" + attribute_id).value;
	if (filtered_color != "") {
		general_colors.push(filtered_color);
		general_colors.push("see_all");
	}
	else {
		for(i in voptions) {
			general_colors.push(voptions[i]["general_color"]);
		}
		general_colors = array_unique(general_colors);
	}
	if (general_colors.length > 0) {
		if (general_colors.length > 2 || general_colors.length <= 2 && general_colors[0] != "") {
			var output = "<table><tr><td style=\"border-right: 1px #ccc solid; width: 100px\" align=\"right\"><b>General Colors:</b></td><td> ";
			for(x=0; x<general_colors.length; x++) {
				if (general_colors[x]) {
					output += "<a href=# onclick='filter_by_general_color(\"" + general_colors[x] + "\", \"" + attribute_id + "\", \"options_content_" + attribute_id + "\", \"" + attribute_name + "\", \"" + el_id + "\", \"" + width + "\", 1); return false;'";
					if (general_colors[x] == "see_all") {
						output += " style=\"color: #800000;\">[See All]</a>";
					}
					else {
						output += ">" + general_colors[x] + "</a>";
					}
					if ((general_colors.length - 1) != x) {
						if (general_colors[x+1]) {
							output += ", ";
						}
					}
				}
			}
			output += "</td></tr></table>";
			general_colors_el.innerHTML = output;
		}
	}
}
populate_search_term = function(attribute_id, attribute_name, el_id, width) {
	var general_search_term_el = document.getElementById("general_search_term_" + attribute_id);
	var search_results = new Array();
	var filtered_term = document.getElementById("filtered_search_term_" + attribute_id).value;
	
	var output = "<table><tr><td style=\"border-right: 1px #ccc solid; width: 100px\" align=\"right\"><b>Search:</b></td><td><input id='swatch_search_term_"+attribute_id+"' value='"+filtered_term+"' size='30'><button onclick='filter_by_search_term(\""+attribute_id+"\", \"" + attribute_name + "\", \"options_content_" + attribute_id + "\", \""+el_id+"\", \""+width+"\", 1); return false;'>go</button> <button onclick='filter_by_search_term_reset(\""+attribute_id+"\", \"" + attribute_name + "\", \"options_content_" + attribute_id + "\", \""+el_id+"\", \""+width+"\", 1); return false;'>reset</button>";
	output += "</td></tr></table>";
	general_search_term_el.innerHTML = output;
}
populate_groups = function(voptions, attribute_id, attribute_name, el_id, width) {
	var group_el = document.getElementById("groups_header_" + attribute_id);
	var groups = new Array();
	var filtered_group = document.getElementById("filtered_group_" + attribute_id).value;
	if (filtered_group != "") {
		groups.push(filtered_group);
		groups.push("see_all");
	}
	else {
		for(i in voptions) {
			groups.push(voptions[i]["group_name"]);
		}
		groups = array_unique(groups);
	}
	if (groups.length > 0) {
		if (groups.length > 2 || groups.length <= 2 && groups[0] != "Other") {
			var output = "<table><tr><td style=\"border-right: 1px #ccc solid; width: 100px\" align=\"right\"><b>" + attribute_name + " Group:<br>Addtional Cost:</b></td><td><table border=0><tr>";
			for(x=0; x<groups.length; x++) {
				if (groups[x]) {
					var prices = new Array();
					var price = "";
					for(j in voptions) {
						if (voptions[j]["group_name"] == groups[x]) {
							if (prices.toString().indexOf(voptions[j]["price"]) === -1) {
								prices.push(voptions[j]["price"]);
							}
						}
					}
					prices.sort();
					if (prices.length > 1) {
						price = prices[0] + " - " + prices[(prices.length - 1)];
					}
					else {
						price = prices[0];
					}
					output += "<td valign=\"top\" align=\"center\" style=\"padding: 3px; border-right: 1px #ccc solid;\">";
					output += "<a href=# onclick='filter_by_group(\"" + groups[x] + "\", \"" + attribute_id + "\", \"options_content_" + attribute_id + "\", \"" + attribute_name + "\", \"" + el_id + "\", \"" + width + "\", 1); return false;'";
					if (groups[x] == "see_all") {
						output += " style=\"color: #800000;\">[See All]</a>";
					}
					else {
						output += ">" + groups[x] + "</a>";
					}
					output += "<br>";
					if (groups[x] != "see_all") {
						output += price;
					}
					output += "</a></td>";
				}
			}
			output += "</tr></table></td></tr></table>";
			group_el.innerHTML = output;
		}
	}
}
array_unique = function(arr) {
	var newArray = [];
	var existingItems = {};
	var prefix = String(Math.random() * 9e9);
	for(var ii = 0; ii < arr.length; ++ii) {
		if (!existingItems[prefix + arr[ii]]) {
			newArray.push(arr[ii]);
			existingItems[prefix + arr[ii]] = true;
		}
	}
	newArray.sort();
	return newArray;
}
showDetails = function(container, attribute_id, option_id, el_id, option_name, width, attribute_name) {
	var opt = eval("options_" + attribute_id + "[" + option_id + "]");
	
	var output = "<table border=0 cellpadding=4 cellspacing=0 width=\"100%\">";
	output += "<tr>";
	output += "<td align=\"left\" valign=\"top\">";
	output += "<table>";
	output += "<tr>";
	output += "<td align=\"center\" valign=\"top\" width=300 height=270>";
	output += "<b>" + attribute_name + ": " + opt["name"] + "</b><br><br>";
	output += "<img src=\"" + opt["filesid_lg"] + "\">";
	
	var filtered_group = document.getElementById("filtered_group_" + attribute_id).value;
	var filtered_color = document.getElementById("filtered_general_color_" + attribute_id).value;
	
	var on_click = "";
	if (filtered_group != "") {
		on_click = "filter_by_group(\"" + filtered_group + "\", \"" + attribute_id + "\", \"" + container + "\", \"" + attribute_name + "\", \"" + el_id + "\", \"" + width + "\"); return false;";
	}
	else if (filtered_color != "") {
		on_click = "filter_by_general_color(\"" + filtered_color + "\", \"" + attribute_id + "\", \"" + container + "\", \"" + attribute_name + "\", \"" + el_id + "\", \"" + width + "\"); return false;";
	}	
	else {
		on_click = "fill_default_options_content(\"" + attribute_id + "\", \"" + attribute_name + "\", \"" + width + "\", \"" + el_id + "\", \"" + container + "\"); return false;";
	}
	
	output += "<table>";
	output += "<tr>";
	output += "<td align=\"left\" valign=\"top\">";
	output += "<input type=\"button\" onclick='" + on_click + "' value=\"<- Back\">";
	output += "</td>";
	output += "<td align=\"right\" valign=\"top\">";
	output += "<input type=\"button\" onclick='setSwatchPopupValue(\"" + attribute_id + "\", \"" + option_id + "\", \"" + el_id +"\", \"" + striphtmlspecialchars(opt["name"]) + "\", \"" + attribute_name + "\", \"" + opt["filesid"] + "\"); return false;' value=\"Add " + attribute_name + "\">";
	output += "</td>";
	output += "</tr>";
	output += "</table>";
	output += "</td>";
	output += "</tr>";
	output += "</table>";
	output += "</td>";
	output += "<td valign=\"top\" align=\"left\" width=\"100%\"><br>";
	output += "<table width=\"100%\">";

	if (opt["pattern_name"] != "") {
		output += "<tr>";
		output += "<td><br><b>Pattern:</b><br>" + opt["pattern_name"] + "</td>";
		output += "</tr>";
	}

	if (opt["contents"] != "") {
		output += "<tr>";
		output += "<td><br><b>Contents:</b><br>" + opt["contents"] + "</td>";
		output += "</tr>";
	}

	if (opt["surface_abrasion"] != "") {
		output += "<tr>";
		output += "<td><br><b>Surface Abrasion:</b><br>" + opt["surface_abrasion"] + "</td>";
		output += "</tr>";
	}

	if (opt["break_strength"] != "") {
		output += "<tr>";
		output += "<td><br><b>Break Strength:</b><br>" + opt["break_strength"] + "</td>";
		output += "</tr>";
	}

	if (opt["flammability"] != "") {
		output += "<tr>";
		output += "<td><br><b>Flammability:</b><br>" + opt["flammability"] + "</td>";
		output += "</tr>";
	}

	if (opt["treatments"] != "") {
		output += "<tr>";
		output += "<td><br><b>Treatments:</b><br>" + opt["treatments"] + "</td>";
		output += "</tr>";
	}

	if (opt["description"] != "") {
		output += "<tr>";
		output += "<td><br><b>Description:</b><br>" + opt["description"] + "</td>";
		output += "</tr>";
	}

	output += "</table>";
	output += "</td>";
	output += "</tr>";
	output += "</table>";
	
	document.getElementById("groups_header_"+attribute_id).innerHTML = "";
	document.getElementById("general_colors_header_"+attribute_id).innerHTML = "";
	document.getElementById("general_search_term_"+attribute_id).innerHTML = "";
	document.getElementById("swatch_pagination_"+attribute_id).innerHTML = "";
	document.getElementById("swatch_pagination_"+attribute_id).style.width = "0px";
	document.getElementById("swatch_pagination_"+attribute_id).style.padding = "0px";
	document.getElementById("swatch_pagination_"+attribute_id).style.border = "0px";
	document.getElementById("swatch_pagination_"+attribute_id).style.borderColor = "";
	document.getElementById("swatch_pagination_"+attribute_id).style.borderStyle = "";
	
	container_el = document.getElementById(container);
	container_el.innerHTML = output;
}

populate_pagination = function(voptions, attribute_id, attribute_name, el_id, current_page, total_options, container, width) {
	var current_page = parseInt(current_page);
	var total_pages = Math.ceil(total_options / 12);
	var output = "";
	for(i=1; i<=total_pages; i++) {
		if (i != current_page) {
			output += "<a href=# onclick='setPage(" + i + ", \"" + attribute_id + "\", \"" + container + "\", \"" + attribute_name + "\", \"" + el_id + "\", \"" + width + "\"); return false;'>" + i + "</a> ";
		}
		else {
			output += " " + i + " ";
		}
		if (i != total_pages) {
			output += "|";
		}
	}
	if (total_pages == 1) {
		output = "Page 1 of 1";
	}
	if (total_pages > 1 && current_page != 1) {
		var prev_page = current_page-1;
		output = "<a href=# onclick='setPage(" + prev_page + ", \"" + attribute_id + "\", \"" + container + "\", \"" + attribute_name + "\", \"" + el_id + "\", \"" + width + "\"); return false;'><<<</a> | " + output;
	}
	if (total_pages > 1 && current_page != total_pages) {
		output = output + " | <a href=# onclick='setPage(" +(current_page+1) + ", \"" + attribute_id + "\", \"" + container + "\", \"" + attribute_name + "\", \"" + el_id + "\", \"" + width + "\"); return false;'>>>></a>";
	}
	document.getElementById("swatch_pagination_"+attribute_id).innerHTML = output;
	document.getElementById("swatch_pagination_"+attribute_id).style.width = "98%";
	document.getElementById("swatch_pagination_"+attribute_id).style.padding = "5px";
	document.getElementById("swatch_pagination_"+attribute_id).style.border = "1px";
	document.getElementById("swatch_pagination_"+attribute_id).style.borderColor = "#ccc";
	document.getElementById("swatch_pagination_"+attribute_id).style.borderStyle = "solid";
}

setPage = function(page, attribute_id, container, attribute_name, el_id, width) {
	document.getElementById("filtered_page_"+attribute_id).value = page;
	var filtered_group = document.getElementById("filtered_group_" + attribute_id).value;
	var filtered_color = document.getElementById("filtered_general_color_" + attribute_id).value;
	var search_term = document.getElementById("filtered_search_term_" + attribute_id).value;
	
	var on_click = "";
	if (search_term != "") {
		filter_by_search_term(attribute_id, attribute_name, container, el_id, width);
		return false;
	}
	else if (filtered_group != "") {
		filter_by_group(filtered_group , attribute_id, container, attribute_name, el_id, width);
		return false;
	}
	else if (filtered_color != "") {
		filter_by_general_color(filtered_color, attribute_id, container, attribute_name, el_id, width);
		return false;
	}
	else {
		fill_default_options_content(attribute_id, attribute_name, width, el_id, container);
		return false;
	}
}

function striphtmlspecialchars(str) {
	str = str.replace(/&quot;/g, "");
	return str;
}