// Developed by Brian Wung, for a quicker Javascript solution to sorting/filtering

var itemsAssoc, columns, totalWidth, allCells = new Array(0), copylength = 0;

function displayItems(varType, varOrder) {
	var width = totalWidth / columns;
	var colspan = columns;
	var localContent = "";
	var length = itemsAssoc.length;
	var i = 0;
	var itemsAssocCopy = {};
	var cell = "";
	copylength = length;

	localContent += '<div id="sorting">Sort By:&nbsp;&nbsp;';
	
	if (allCells.length < 1 && length > 0) {
		var table = document.getElementById("contents-items-table");
		for (i = 0; i < table.rows.length; i++)
			for (x = 0; x < table.rows[i].cells.length; x++) {
				allCells.push(table.rows[i].cells[x].innerHTML);
			}
	}

	if (allCells.length > 0) {
		switch (varType) {
			case 'name':
				cell = 0;
				for (i = 0; i < length; i++)
					itemsAssocCopy[i] = itemsAssoc[i][cell];
				itemsAssocCopy = sortAssoc(itemsAssocCopy, varType, varOrder);
				if (varOrder == 'descending')
					localContent += '<a href="#products" onClick="javascript:displayItems(\'default\');">Default Sort</a>&nbsp;&nbsp;|&nbsp;&nbsp;<b><a href="#products" onClick="javascript:displayItems(\'name\', \'descending\');">Name</a></b> <span style="font-size:9px;">(<b>A-Z</b> | <a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Z-A</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Price</a> <span style="font-size:9px;">(<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'price\', \'descending\');">High to Low</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Rating</a> <span style="font-size:9px;">(<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'descending\');">High to Low</a>)</span>';
				else if (varOrder == 'ascending')
					localContent += '<a href="#products" onClick="javascript:displayItems(\'default\');">Default Sort</a>&nbsp;&nbsp;|&nbsp;&nbsp;<b><a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Name</a></b> <span>(<a href="#products" onClick="javascript:displayItems(\'name\', \'descending\');">A-Z</a> | <b>Z-A</b>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Price</a> <span>(<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'price\', \'descending\');">High to Low</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Rating</a> <span style="font-size:9px;">(<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'descending\');">High to Low</a>)</span>';
				break;
			case 'price':
				cell = 1;
				for (i = 0; i < length; i++)
					itemsAssocCopy[i] = itemsAssoc[i][cell];
				itemsAssocCopy = sortAssoc(itemsAssocCopy, varType, varOrder);
				if (varOrder == 'ascending')
					localContent += '<a href="#products" onClick="javascript:displayItems(\'default\');">Default Sort</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Name</a> <span>(<a href="#products" onClick="javascript:displayItems(\'name\', \'descending\');">A-Z</a> | <a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Z-A</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<b><a href="#products" onClick="javascript:displayItems(\'price\', \'descending\');">Price</a></b> <span>(<b>Low to High</b> | <a href="#products" onClick="javascript:displayItems(\'price\', \'descending\');">High to Low</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Rating</a> <span style="font-size:9px;">(<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'descending\');">High to Low</a>)</span>';
				else if (varOrder == 'descending')
					localContent += '<a href="#products" onClick="javascript:displayItems(\'default\');">Default Sort</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Name</a> <span>(<a href="#products" onClick="javascript:displayItems(\'name\', \'descending\');">A-Z</a> | <a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Z-A</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<b><a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Price</a></b> <span>(<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Low to High</a> | <b>High to Low</b>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Rating</a> <span style="font-size:9px;">(<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'descending\');">High to Low</a>)</span>';
				break;
            case 'pd-rating':
                cell = 6;
                for (i = 0; i < length; i++)
                    itemsAssocCopy[i] = itemsAssoc[i][cell];
                itemsAssocCopy = sortAssoc(itemsAssocCopy, varType, varOrder);
                if (varOrder == 'ascending')
                    localContent += '<a href="#products" onClick="javascript:displayItems(\'default\');">Default Sort</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Name</a> <span>(<a href="#products" onClick="javascript:displayItems(\'name\', \'descending\');">A-Z</a> | <a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Z-A</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'price\', \'descending\');">Price</a> <span>(<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'price\', \'descending\');">High to Low</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<b><a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'descending\');">Rating</a></b> <span style="font-size:9px;">(<b>Low to High</b> | <a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'descending\');">High to Low</a>)</span>';
                else if (varOrder == 'descending')
                    localContent += '<a href="#products" onClick="javascript:displayItems(\'default\');">Default Sort</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Name</a> <span>(<a href="#products" onClick="javascript:displayItems(\'name\', \'descending\');">A-Z</a> | <a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Z-A</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Price</a> <span>(<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'price\', \'descending\');">High to Low</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<b><a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Rating</a></b> <span style="font-size:9px;">(<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Low to High</a> | <b>High to Low</b>)</span>';
                break;
			case 'filter':
				for (i = 0; i < length; i++)
					itemsAssocCopy[i] = i;
				if (varOrder !== 'clear')
					itemsAssocCopy = filterAssoc(itemsAssocCopy);
				localContent += '<b>Default Sort</b>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Name</a> <span>(<a href="#products" onClick="javascript:displayItems(\'name\', \'descending\');">A-Z</a> | <a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Z-A</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Price</a> <span>(<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'price\', \'descending\');">High to Low</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Rating</a> <span style="font-size:9px;">(<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'descending\');">High to Low</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Rating</a> <span style="font-size:9px;">(<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'descending\');">High to Low</a>)</span>';
				break;
			default:
				varType = 'default';
				for (i = 0; i < length; i++)
					itemsAssocCopy[i] = i;
				localContent += '<b>Default Sort</b>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Name</a> <span>(<a href="#products" onClick="javascript:displayItems(\'name\', \'descending\');">A-Z</a> | <a href="#products" onClick="javascript:displayItems(\'name\', \'ascending\');">Z-A</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Price</a> <span>(<a href="#products" onClick="javascript:displayItems(\'price\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'price\', \'descending\');">High to Low</a>)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Rating</a> <span style="font-size:9px;">(<a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'ascending\');">Low to High</a> | <a href="#products" onClick="javascript:displayItems(\'pd-rating\', \'descending\');">High to Low</a>)</span>';
		}
	}
	localContent += '</div>';

	//document.write(itemsAssocCopy.toSource());

	i = 0;
	localContent += '<table cellpadding="0" cellspacing="0" id="contents-items-table" width="' + totalWidth + '">';

	if (copylength < 1) {
		localContent += '<tr><td colspan="' + colspan + '" align="center" style="color:red; font-weight:bold;">Your search result has returned no available items.</td></tr>';
	}
	else {
		for (var index in itemsAssocCopy) {
			if (i % columns == 0)
				localContent += '<tr>';
			localContent += '<td width="' + width + '"';
			if (copylength > columns) {
				if (i % columns == columns - 1) {
					if (i + 1 == copylength)
						localContent += ' style="border:none;"';
					else
						localContent += ' style="border-right:none;"';
				}
				else if (copylength % columns == 0) {
					if (i / columns >= (Math.ceil(copylength / columns)) - 1)
						localContent += ' style="border-bottom:none;"';
				}
				else {
					if (i / columns >= Math.ceil(copylength / columns))
						localContent += ' style="border-bottom:none;"';
				}
			}
			else
				localContent += ' style="border:none;"';
			localContent += '>' + allCells[index] + '</td>';
			if (i + 1 == copylength) {
				for (;i % columns < columns - 1; i++) {
					localContent += '<td width="' + width + '"';
					if (copylength > columns) {
						if (i % columns == columns - 2)
							localContent += ' style="border:none;">';
						else
							localContent += ' style="border-bottom:none;">';
					}
					else
						localContent += ' style="border:none;">';
					localContent += '</td>';
				}
			}
			i++;
		}
	}
	localContent += '</table>';
	document.getElementById("paging").innerHTML = localContent;
}

function sortAssoc(aInput, varType, varOrder) {
    var aTemp = [];
	if (varType == "name")
		for (var sKey in aInput)
	        aTemp.push([sKey, aInput[sKey].toLowerCase()]);
	else
	    for (var sKey in aInput)
	        aTemp.push([sKey, aInput[sKey]]);

	switch (varType) {
		case "name":
			aTemp.sort(function () {return arguments[0][1] < arguments[1][1]});
			break;
		case "price":
			aTemp.sort(function () {return arguments[0][1] - arguments[1][1]});
			break;
        case "pd-rating":
            aTemp.sort(function () {return arguments[0][1] - arguments[1][1]});
            break;
		default:
			break;
	}
	//document.write(aTemp.toSource());
	
	if (varOrder == "ascending")
		aTemp.reverse();

    var aOutput = {};
    for (var nIndex = aTemp.length-1; nIndex >=0; nIndex--)
        aOutput[aTemp[nIndex][0]] = aTemp[nIndex][1];

    return aOutput;
}

function filterAssoc(itemsAssocCopy) {
// types = armband, battery, case, cable, charger, dock, headset, speaker, skin, misc
	for (var i in itemsAssocCopy) {
		//check by model of product
		if (typeof(document.productFilter.models) !== "undefined" && document.productFilter.models.value !== "" && itemsAssoc[i][2].toLowerCase().search(document.productFilter.models.value) == -1) {
			delete itemsAssocCopy[i];
			copylength--;
		}
		//check by type of product
		else if (typeof(document.productFilter.types) !== "undefined" && document.productFilter.types.value !== "" && itemsAssoc[i][3].toLowerCase().search(document.productFilter.types.value) == -1) {
			delete itemsAssocCopy[i];
			copylength--;
		}
		// check by price of product
		else if (typeof(document.productFilter.prices) !== "undefined" && document.productFilter.prices.value !== "" && !(parseInt(itemsAssoc[i][1]) <= document.productFilter.prices.value || document.forms['productFilter'].prices.value == "all")) {
			delete itemsAssocCopy[i];
			copylength--;
		}
		// check by color of product
		else if (typeof(document.productFilter.colors) !== "undefined" && document.productFilter.colors.value !== "" && itemsAssoc[i][5].toLowerCase().search(document.productFilter.colors.value) == -1) {
			delete itemsAssocCopy[i];
			copylength--;
		}
	}
	return itemsAssocCopy;
}