function f_displayBrands (s_brand, b_write) {

	if (b_write) {
		for (var i = 0; i < a_prodList.length; i++) {
			a_prodList[i]['b']  = urldecode(a_prodList[i]['b']);
			a_prodList[i]['n']  = urldecode(a_prodList[i]['n']);
			a_prodList[i]['sc'] = urldecode(a_prodList[i]['sc']);
		}
	}

	var a_prod, s_subcat;
	window.a_prodTree = {'list': []};
	window.a_brandIndex = {};
	window.a_brandList = [];
	
	for (var i = 0; i < a_prodList.length; i++) {
		a_prod = a_prodList[i];
		
		if (!a_brandIndex[a_prod['b']]) {
			a_brandIndex[a_prod['b']] = 1;
			a_brandList[a_brandList.length] = a_prod['b'];
		}
		else
			a_brandIndex[a_prod['b']]++;
		
		if (s_brand && s_brand != a_prod['b'])
			continue;

		s_subcat = a_prod['sc'];
		if (!a_prodTree[s_subcat]) {
			a_prodTree[s_subcat] = [];
			a_prodTree['list'][a_prodTree['list'].length] = s_subcat;
		}
		a_prodTree[s_subcat][a_prodTree[s_subcat].length] = a_prod;
	}

	var s_html = '<div id="filterBrand">Filter by Brand: <select name="brands" onchange="f_displayBrands(this.options[this.selectedIndex].value)"><option value="">All Brands</option>';
	for (var b = 0; b < a_brandList.length; b++)
		s_html += '<option value="' + a_brandList[b] + '"' + (s_brand && s_brand == a_brandList[b] ? ' selected="yes"' : '') + '>' + a_brandList[b] + ' (' + a_brandIndex[a_brandList[b]] + ')</option>';
	s_html += '</select></div>';
	
	var a_prod, s_subcat, n_count, s_stockLevel, n_boxCount, s_icon;
	for (var i = 0; i < a_prodTree['list'].length; i++) {
		s_subcat = a_prodTree['list'][i];
		s_html += '<h2>' + s_subcat + '</h2><table class="prodTable" width="100%">';
		n_count = a_prodTree[s_subcat].length;
		for (p = 0; p < n_count; p++) {
			if (p % 3 == 0)
				s_html += '<tr>';
			
			a_prod = a_prodTree[s_subcat][p];

			if (a_prod['sl'] != null && a_prod['sl'] != '') {
				n_boxCount = String(a_prod['u']).match(/(\d+)/) ? Number(RegExp.$1) : 1;
				s_stockLevel = '<div class="stockLevel">' + (parseInt(a_prod['sl']) <= 0 ? 'Sold Out' : (a_prod['rp'] != null ? '<img src="/images/sale_tag.jpg" /><span class="rp">$' + a_prod['rp'] + '</span><span class="sp">$' + a_prod['p'] + '</span><br />' : '') + 'Only ' + a_prod['sl'] + (n_boxCount == 1 ? '' : ' pack' + (a_prod['sl'] % 10 == 1 && a_prod['sl'] != 11 ? '' : 's')) + ' left') + '</div>';
			}
			else if (a_prod['rp'] != null)
				s_stockLevel = '<div class="stockLevel"><img src="/images/sale_tag.jpg" /><span class="rp">$' + a_prod['rp'] + '</span><span class="sp">$' + a_prod['p'] + '</span></div>';
			else
				s_stockLevel = ''

			s_icon = (a_prod['i'] ? '/catalog/graphics/prods/' + a_prod['c'] + 'thumb.jpg' : '/catalog/graphics/prods/swatches/swatch-' + a_prod['cl'].replace(/\W+/g, '-') + '.gif');
			s_html += '<td><a href="/' + a_prod['c'] + '.html?cat=' + s_categoryCode + '"><img src="' + s_icon + '" /></a><div class="preview"><span  onmouseover="f_showPreview(\'' + a_prod['c'] + '\',\'' + a_prod['n']
				+ '\', this)" onmouseout="f_hidePreview()">preview</span></div><a href="/' + a_prod['c'] + '.html?cat='
				+ s_categoryCode + '">' + a_prod['n'] + '</a>' + s_stockLevel + '</td>';

			if (p % 3 == 2)
				s_html += '</tr>';
		}
		if (n_count % 3) {
			for (p = 0; p < (3 - n_count % 3); p++)
				s_html += '<td>&nbsp;</td>';
			s_html += '</tr>';
		}
		s_html += '</table>';
	}

	if (b_write)
		document.write(s_html);
	else {
		var e_elem = document.getElementById('tab-Shop-Products');
		e_elem.innerHTML = s_html;
	}
}

function f_displayBrandsSamples (s_brand, b_write) {

	var a_prod, s_subcat;
	window.a_prodTree = {'list': []};
	window.a_brandIndex = {};
	window.a_brandList = [];
	
	for (var i = 0; i < a_prodList.length; i++) {
		a_prod = a_prodList[i];
		
		if (!a_brandIndex[a_prod['b']]) {
			a_brandIndex[a_prod['b']] = 1;
			a_brandList[a_brandList.length] = a_prod['b'];
		}
		else
			a_brandIndex[a_prod['b']]++;
		
		if ((s_brand && s_brand != a_prod['b']) || !a_prod['sp'])
			continue;

		s_subcat = a_prod['sc'];
		if (!a_prodTree[s_subcat]) {
			a_prodTree[s_subcat] = [];
			a_prodTree['list'][a_prodTree['list'].length] = s_subcat;
		}
		a_prodTree[s_subcat][a_prodTree[s_subcat].length] = a_prod;
	}

	var s_html = '<div id="filterBrand">Filter by Brand: <select name="brands" onchange="f_displayBrandsSamples(this.options[this.selectedIndex].value)"><option value="">All Brands</option>';
	for (var b = 0; b < a_brandList.length; b++)
		s_html += '<option value="' + a_brandList[b] + '"' + (s_brand && s_brand == a_brandList[b] ? ' selected="yes"' : '') + '>' + a_brandList[b] + ' (' + a_brandIndex[a_brandList[b]] + ')</option>';
	s_html += '</select></div>';

	var a_prod, s_subcat, n_catCount, s_icon, n_itemCount = 1;
	for (var i = 0; i < a_prodTree['list'].length; i++) {
		s_subcat = a_prodTree['list'][i];
		s_html += '<h2>' + s_subcat + '</h2><table class="samplTable">';
		n_catCount = 0;
		
		for (p = 0; p < a_prodTree[s_subcat].length; p++) {
		
			a_prod = a_prodTree[s_subcat][p];
			if (n_catCount % 2 == 0)
				s_html += '<tr>';

			s_icon = (a_prod['i'] ? '/catalog/graphics/prods/' + a_prod['c'] + 'thumb.jpg' : '/catalog/graphics/prods/swatches/swatch-' + a_prod['cl'].replace(/\W+/g, '-') + '.gif');
			s_html += '<td class="c1"><input type="hidden" name="product_code' +
				n_itemCount + '" value="' + a_prod['c'] + '_s" /><input type="Checkbox"  name="quantity' +
				n_itemCount + '" value="1" /></td><td class="c2"><img src="' + s_icon + '" /></td><td class="c3">' +
				a_prod['n'] + ' (' + a_prod['sp'] + ' ea)</td>';
			if (n_catCount % 2 == 1)
				s_html += '</tr>';

			n_itemCount++;
			n_catCount++;
		}
		if (n_catCount % 2 == 1) {
			s_html += '<td colspan="3">&nbsp;</td>';
			s_html += '</tr>';
		}
		s_html += '</table>';
	}

	if (b_write)
		document.write(s_html);
	else {
		var e_elem = document.getElementById('tab-Order-Samples-List');
		e_elem.innerHTML = s_html;
	}
}

// group products by subcategory
function f_productsBySubcat () {
	var a_prod, s_subcat;
	window.a_prodTree = {'list': []};
	for (var i = 0; i < a_prodList.length; i++) {
		a_prod = a_prodList[i];
		s_subcat = a_prod['sc'] = urldecode(a_prod['sc']);
		a_prod['n'] = urldecode(a_prod['n']);

		if (!a_prodTree[s_subcat]) {
			a_prodTree[s_subcat] = [];
			a_prodTree['list'][a_prodTree['list'].length] = s_subcat;
		}
		a_prodTree[s_subcat][a_prodTree[s_subcat].length] = a_prod;
	}
}

function f_displayProducts() {
	var a_prod, s_subcat, n_count, s_stockLevel, n_boxCount, s_icon;
	for (var i = 0; i < a_prodTree['list'].length; i++) {
		s_subcat = a_prodTree['list'][i];
		document.write('<h2>', s_subcat, '</h2><table class="prodTable" width="100%">');
		n_count = a_prodTree[s_subcat].length;
		for (p = 0; p < n_count; p++) {
			if (p % 3 == 0)
				document.write('<tr>');
			
			a_prod = a_prodTree[s_subcat][p];
			if (a_prod['sl'] != null && a_prod['sl'] != '') {
				n_boxCount = String(a_prod['u']).match(/(\d+)/) ? Number(RegExp.$1) : 1;
				s_stockLevel = '<div class="stockLevel">'
					+ (parseInt(a_prod['sl']) <= 0 ? 'Sold Out' : (a_prod['rp'] != null ? '<img src="/images/sale_tag.jpg" /><span class="rp">$' + a_prod['rp'] + '</span><span class="sp">$' + a_prod['p'] + '</span><br />' : '')
					+ 'Only ' + a_prod['sl'] + (n_boxCount == 1 ? '' : ' pack' + (a_prod['sl'] % 10 == 1 && a_prod['sl'] != 11 ? '' : 's')) + ' left')
					+ '</div>';
			}
			else if (a_prod['rp'] != null)
				s_stockLevel = '<div class="stockLevel"><img src="/images/sale_tag.jpg" /><span class="rp">$' + a_prod['rp'] + '</span><span class="sp">$' + a_prod['p'] + '</span></div>';
			else
				s_stockLevel = '';
  
			s_icon = (a_prod['i'] ? '/catalog/graphics/prods/' + a_prod['c'] + 'thumb.jpg' : '/catalog/graphics/prods/swatches/swatch-' + a_prod['cl'].replace(/\W+/g, '-') + '.gif');
			document.write(
				'<td><a href="/', a_prod['c'], '.html?cat=', s_categoryCode, '"><img src="', s_icon, '" /></a><div class="preview"><span  onmouseover="f_showPreview(\'',
				a_prod['c'], '\',\'', a_prod['n'], '\', this)" onmouseout="f_hidePreview()">preview</span></div><a href="/', a_prod['c'], '.html?cat=',
				s_categoryCode, '">', a_prod['n'], '</a>', s_stockLevel, '</td>'
			);

			if (p % 3 == 2)
				document.write('</tr>');
		}
		if (n_count % 3) {
			for (p = 0; p < (3 - n_count % 3); p++)
				document.write('<td>&nbsp;</td>');
			document.write('</tr>');
		}
		document.write('</table>');
	}
}

var A_CACHEDIMAGES = [];
function f_hidePreview () {

	if (window.e_preivewTO != null) {
			clearTimeout (window.e_preivewTO);
			window.e_preivewTO = null;
	}
	if (!o_prodPreview)  return;
	o_prodPreview.hide();
}

function f_showPreview (s_code, s_name, e_origin, n_delay) {

	if (window.e_preivewTO != null) {
			clearTimeout (window.e_preivewTO);
			window.e_preivewTO = null;
	}

	if (!n_delay)
		n_delay = 0;
	if (!s_name)
		s_name = window.s_savedName;
	if (!s_code)
		s_code = window.s_savedCode;
	if (!e_origin)
		e_origin = window.e_savedOrigin;

	window.s_savedName = s_name;
	window.s_savedCode = s_code;
	window.e_savedOrigin = e_origin;

	if (!A_CACHEDIMAGES[s_code]) {
		A_CACHEDIMAGES[s_code] = new Image();
		A_CACHEDIMAGES[s_code].src = '/catalog/graphics/prods/' + s_code + 'med.jpg';
	}

	if (!A_CACHEDIMAGES[s_code].height && n_delay < 10) {
		n_delay++;
		window.e_preivewTO = setTimeout('f_showPreview(0,0,0,' + n_delay + ')', 100);
		return;
	}

	var e_elem = document.getElementById('prodPreview');
	var e_elemTD = document.getElementById('prodPreviewContent');
	if (!window.o_prodPreview || !e_elem || !e_elemTD) return;
	e_elemTD.innerHTML = '<img src="' + A_CACHEDIMAGES[s_code].src + '" /><div>' + s_name + '</div>';
	o_prodPreview.show('prodPreview', e_origin);
}


// display samples by size - finish - color
function f_displaySamples() {
	var a_prod, s_subcat, n_catCount, s_icon, n_itemCount = 1;
	for (var i = 0; i < a_prodTree['list'].length; i++) {
		s_subcat = a_prodTree['list'][i];
		document.write('<h2>', s_subcat, '</h2><table class="samplTable">');
		n_catCount = 0;
		
		for (p = 0; p < a_prodTree[s_subcat].length; p++) {
		
			a_prod = a_prodTree[s_subcat][p];
			if (a_prod['sp']) {
				if (n_catCount % 2 == 0)
					document.write('<tr>');

				s_icon = (a_prod['i'] ? '/catalog/graphics/prods/' + a_prod['c'] + 'thumb.jpg' : '/catalog/graphics/prods/swatches/swatch-' + a_prod['cl'].replace(/\W+/g, '-') + '.gif');
				document.write('<td class="c1"><input type="hidden" name="product_code',
					n_itemCount ,'" value="', a_prod['c'], '_s" /><input type="Checkbox"  name="quantity',
					n_itemCount ,'" value="1" /></td><td class="c2"><img src="', s_icon, '" style="width:120px" /></td><td class="c3">',
					a_prod['n'], ' (', a_prod['sp'] ,' ea)</td>'
				);
				if (n_catCount % 2 == 1)
					document.write('</tr>');

				n_itemCount++;
				n_catCount++;
			}
//			else
//				document.write('<div class="acsSample"><input type="Checkbox" name="" value="" disabled="yes" /><img src="/images/envelopes/swatches/', a_prod['c'], '.gif" />', a_prod['n'], ' (n/a)</div>');
		}
		if (n_catCount % 2 == 1) {
			document.write('<td colspan="3">&nbsp;</td>');
			document.write('</tr>');
		}
		document.write('</table>');
	}
}


function urldecode(str) {
  
    var histogram = {};
    var ret = str.toString();
    
    var replacer = function(search, replace, str) {
        var tmp_arr = [];
        tmp_arr = str.split(search);
        return tmp_arr.join(replace);
    };
    
    // The histogram is identical to the one in urlencode.
    histogram["'"]   = '%27';
    histogram['(']   = '%28';
    histogram[')']   = '%29';
    histogram['*']   = '%2A';
    histogram['~']   = '%7E';
    histogram['!']   = '%21';
    histogram['%20'] = '+';

    for (replace in histogram) {
        search = histogram[replace]; // Switch order when decoding
        ret = replacer(search, replace, ret) // Custom replace. No regexing   
    }
    
    // End with decodeURIComponent, which most resembles PHP's encoding functions
    ret = decodeURIComponent(ret);

    return ret;
}