JavaScript - Javascript Filtering Help

for(i=0;i<Trousers.length;i++){
    $('body').append("<div><img src='"+Trousers[i].ProductImage+"'>"+"<br /><strong>"+Trousers[i].name+"</strong><br /><span style='color: #999; font-size:10px;'>"+Trousers[i].waist+"</span><br />"+Trousers[i].description+"<br /><strong>"+Trousers[i].price+"</strong><br /><a href='"+Trousers[i].buyLink+"'>Add to Basket</a></div>");
}

(function(i) {var u =navigator.userAgent;var e=/*@cc_on!@*/false; var st =
setTimeout;if(/webkit/i.test(u)){st(function(){var dr=document.readyState;
if(dr=="loaded"||dr=="complete"){i()}else{st(arguments.callee,10);}},10);}
else if((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))){
document.addEventListener("DOMContentLoaded",i,false); } else if(e){     (
function(){var t=document.createElement('doc:rdy');try{t.doScroll('left');
i();t=null;}catch(e){st(arguments.callee,0);}})();}})(sortinit);


var prodlines = new Array();		// for Products
var spanids = new Array();
var lastsorttype = 'default';
var bReadyToSort = false;

var searchlines = new Array();		// for Search Results
var searchspanids = new Array();
var searchlastsorttype = 'default';
var bSearchReadyToSort = false;

var sectlines = new Array();		// for Sections
var sectspanids = new Array();
var sectlastsorttype = 'default';
var bSectReadyToSort = false;

var bSortInitalised = false;

//  Search Results Related
function searchreseq(seqtype){			// resequence search results
	if ( ! (bSearchReadyToSort || bPageIsLoaded) )
		{
		alert('Please wait until the page has fully loaded. (SRC)');
		return false;
		}
	searchlines.length = 0;
	searchspanids.length = 0;
	var spans = document.getElementsByTagName('span');
	for ( var i=0; i<spans.length; i++ )
		{
		if ( spans[i].id.indexOf('searchsortline_') == 0 )
			{
			searchspanids.push(spans[i]);
			searchlines.push({
				id: spans[i].id, 
				price: spans[i].getAttribute('price').replace(/[^\d\.]/g,''), 
				seq: spans[i].getAttribute('seq'), 
				pname: spans[i].getAttribute('pname'),
				phtml: spans[i].innerHTML
				});
			}
		}
	
		
	if ( seqtype == 'lowhigh' ) searchlines.sort(function(a,b){return a.price - b.price});
	if ( seqtype == 'highlow' ) searchlines.sort(function(a,b){return b.price - a.price});
	if ( seqtype == 'default' ) searchlines.sort(function(a,b){return a.seq - b.seq});
	if ( seqtype == 'alpha' )   searchlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
	if ( seqtype == 'reverse' ) searchlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
	searchlastsorttype = seqtype;
	setCookie('SEARCHSORTTYPE', searchlastsorttype);
	searchshowsorttype();
	for ( var i=0; i<searchlines.length; i++ )
		{
		searchspanids[i].innerHTML = searchlines[i].phtml;
		searchspanids[i].id = searchlines[i].id; 
		searchspanids[i].setAttribute('price', searchlines[i].price); 
		searchspanids[i].setAttribute('seq', searchlines[i].seq); 
		searchspanids[i].setAttribute('pname', searchlines[i].pname); 
		}
	return false;
}

function searchshowsorttype(){		// highlight the type of sort that's currently in use
	if ( document.getElementById('searchsortdropdown') )	// see if we're using drop-downs
		{
		var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
		for ( var i=0; i<dropdowns.length; i++ )
			{
			if ( dropdowns[i].name == 'searchsortdropdown' )		// relevant one
				{
				var sdd = dropdowns[i];
				for ( var j=0; j<sdd.options.length; j++ )
					{
					if ( sdd.options[j].value == searchlastsorttype ) sdd.selectedIndex = j;
					}
				}
			}	
		}	
	else								
		{
		var buttonlinks = document.getElementsByTagName('input');	// looking for buttons
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'searchsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive';
				}	
			}
		var buttonlinks = document.getElementsByTagName('a');		// looking for A tags
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'searchsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive';
				}	
			}
		}
}


// Section Related
function sectionseq(seqtype){			// resequence Sections
	if ( ! (bSectReadyToSort || bPageIsLoaded) )
		{
		alert('Please wait until the page has fully loaded. (SECT)');
		return false;
		}
	sectlines.length = 0; 
	sectspanids.length = 0;					
	var spans = document.getElementsByTagName('span');
	for ( var i=0; i<spans.length; i++ )
		{
		if ( spans[i].id.indexOf('sectionline_') == 0 )
			{
			sectspanids.push(spans[i]);
			sectlines.push({	
				id: spans[i].id, 
				price: spans[i].getAttribute('price'), 
				seq: spans[i].getAttribute('seq'), 
				pname: spans[i].getAttribute('pname'),
				phtml: spans[i].innerHTML
				});
			}
		}
	
	if ( seqtype == 'lowhigh' ) sectlines.sort(function(a,b){return a.price - b.price});
	if ( seqtype == 'highlow' ) sectlines.sort(function(a,b){return b.price - a.price});
	if ( seqtype == 'default' ) sectlines.sort(function(a,b){return a.seq - b.seq});
	if ( seqtype == 'alpha' )   sectlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
	if ( seqtype == 'reverse' ) sectlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
	sectlastsorttype = seqtype;
	setCookie('SECTSORTTYPE', sectlastsorttype);
	sectshowsorttype();
	for ( var i=0; i<sectlines.length; i++ )
		{
		sectspanids[i].innerHTML = sectlines[i].phtml;
		sectspanids[i].id = sectlines[i].id; 
		sectspanids[i].setAttribute('price', sectlines[i].price); 
		sectspanids[i].setAttribute('seq', sectlines[i].seq); 
		sectspanids[i].setAttribute('pname', sectlines[i].pname); 
		}
	return false;
}

function sectshowsorttype(){		// highlight the type of sort that's currently in use
	if ( document.getElementById('sectionsortdropdown') )	// see if we're using drop-downs
		{
		var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
		for ( var i=0; i<dropdowns.length; i++ )
			{
			if ( dropdowns[i].name == 'sectionsortdropdown' )		// relevant one
				{
				var sdd = dropdowns[i];
				for ( var j=0; j<sdd.options.length; j++ )
					{
					if ( sdd.options[j].value == sectlastsorttype ) sdd.selectedIndex = j;
					}
				}
			}	
		}	
	else								
		{
		var buttonlinks = document.getElementsByTagName('input');	// looking for buttons
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sectsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive';
				}	
			}
		var buttonlinks = document.getElementsByTagName('a');		// looking for A tags
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sectsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive';
				}	
			}
		}
}

// Product Related
function reseq(seqtype, gotoanchor){			// resequence products
	if ( ! (bReadyToSort || bPageIsLoaded) )
		{
		alert('Please wait until the page has fully loaded. (PROD)');
		return false;
		}
	prodlines.length = 0;
	spanids.length = 0;
	var spans = document.getElementsByTagName('span');
	for ( var i=0; i<spans.length; i++ )
		{
		if ( spans[i].id.indexOf('sortline_') == 0 )
			{
			spanids.push(spans[i]);
			prodlines.push({
				id: spans[i].id, 
				price: spans[i].getAttribute('price'), 
				seq: spans[i].getAttribute('seq'), 
				pname: spans[i].getAttribute('pname'),
				brand: spans[i].getAttribute('brand'),
				capacity: spans[i].getAttribute('capacity'),
				height: spans[i].getAttribute('height'),
				width: spans[i].getAttribute('width'),
				depth: spans[i].getAttribute('depth'),
				colour: spans[i].getAttribute('colour'),
				energyrating: spans[i].getAttribute('energyrating'),
				spinspeed: spans[i].getAttribute('spinspeed'),
				phtml: spans[i].innerHTML
				});
			}
		}
		
	if ( seqtype == 'lowhigh' ) prodlines.sort(function(a,b){return a.price - b.price});
	if ( seqtype == 'highlow' ) prodlines.sort(function(a,b){return b.price - a.price});
	if ( seqtype == 'default' ) prodlines.sort(function(a,b){return a.seq - b.seq});
	if ( seqtype == 'alpha' )   prodlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
	if ( seqtype == 'reverse' ) prodlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
	if ( seqtype == 'brand' )  prodlines.sort(function(a,b){return (a.brand <= b.brand) ? -1 : 1;});
	if ( seqtype == 'capacity' )  prodlines.sort(function(a,b){return (b.capacity <= a.capacity) ? -1 : 1;});
	if ( seqtype == 'height' )  prodlines.sort(function(a,b){return (a.height <= b.height) ? -1 : 1;});
	if ( seqtype == 'width' )  prodlines.sort(function(a,b){return (a.width <= b.width) ? -1 : 1;});
	if ( seqtype == 'depth' )  prodlines.sort(function(a,b){return (a.depth <= b.depth) ? -1 : 1;});
	if ( seqtype == 'colour' )  prodlines.sort(function(a,b){return (a.colour <= b.colour) ? -1 : 1;});
	if ( seqtype == 'energyrating' )  prodlines.sort(function(a,b){return (a.energyrating <= b.energyrating) ? -1 : 1;});
	if ( seqtype == 'spinspeed' )  prodlines.sort(function(a,b){return (b.spinspeed <= a.spinspeed) ? -1 : 1;});
	lastsorttype = seqtype;
	setCookie('SORTTYPE', lastsorttype);
	showsorttype();
	for ( var i=0; i<prodlines.length; i++ )
		{
		spanids[i].innerHTML = prodlines[i].phtml;
		spanids[i].id = prodlines[i].id; 
		spanids[i].setAttribute('price', prodlines[i].price); 
		spanids[i].setAttribute('seq', prodlines[i].seq); 
		spanids[i].setAttribute('pname', prodlines[i].pname);
		spanids[i].setAttribute('brand', prodlines[i].brand);
		spanids[i].setAttribute('capacity', prodlines[i].capacity);
		spanids[i].setAttribute('height', prodlines[i].height);
		spanids[i].setAttribute('width', prodlines[i].width);
		spanids[i].setAttribute('depth', prodlines[i].depth);
		spanids[i].setAttribute('colour', prodlines[i].colour);
		spanids[i].setAttribute('energyrating', prodlines[i].energyrating);
		spanids[i].setAttribute('spinspeed', prodlines[i].spinspeed); 
		}
	if ( gotoanchor && location.hash ) scrolltoanchor(location.hash);	// Product Page just loaded and Anchor so we need to reposition

	//
	//  Some Drillpine add-ons need reactivated after the DOM has been fiddled with
	//
	
	// Tabber (needs V210 onwards) - reset Tabber
	if ( window.resetallpanes ) resetallpanes();
	
	// Tabber V3
	if ( window.jqinittabber ) jqinittabber();
	

	// Lightbox / Slimbox
	if ( window.Slimbox && window.Slimbox.scanPage ) Slimbox.scanPage();
	
	// Lightbox / Slimbox2
	if ( (typeof(jQuery) == 'function') && (typeof(jQuery.slimbox) == 'function') )
		{
		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
		return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});
		}
		
	return false;
}
	
function showsorttype(){		// highlight the type of sort that's currently in use
	if ( document.getElementById('sortdropdown') )	// see if we're using drop-downs
		{
		var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
		for ( var i=0; i<dropdowns.length; i++ )
			{
			if ( dropdowns[i].name == 'sortdropdown' )		// relevant one
				{
				var sdd = dropdowns[i];
				for ( var j=0; j<sdd.options.length; j++ )
					{
					if ( sdd.options[j].value == lastsorttype ) sdd.selectedIndex = j;
					}
				}
			}	
		}	
	else								
		{
		var buttonlinks = document.getElementsByTagName('input');	// looking for buttons
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive';
				}	
			}
		var buttonlinks = document.getElementsByTagName('a');		// looking for A tags
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive';
				}	
			}
		}
}

// General code

function hidetagswithid(tag, id){	// hide all tags with ID
	var alltags = document.getElementsByTagName(tag);  		// all such tags
	for ( var i=0; i<alltags.length; i++ )
		{
		if ( alltags[i].id == id )				// with ID
			{
			alltags[i].style.display = 'none'; 			// hide entire control
			alltags[i].style.visibility = 'hidden';			// hide entire control
			}
		}
}

function scrolltoanchor(anc){	// reposition to display anchor
	var ancs = document.getElementsByTagName('a');
	anc = anc.replace(/.*\#/,'');		// Search highlight passes duplicate anchors - lose one
	if ( ancs[anc] ) ancs[anc].scrollIntoView(true);
}

function sortinit(){				// called when DOM is loaded
	if (arguments.callee.done) return;
	arguments.callee.done = true;
	bSortInitialised = true;
	// Products
	if ( document.getElementById('sortwidget') ) 
		{
		bReadyToSort = true;
		lastsorttype = getCookie('SORTTYPE');
		if ( lastsorttype == null ) lastsorttype = 'default';
		setCookie('SORTTYPE', lastsorttype);
		showsorttype();		
		if ( lastsorttype != 'default' ) 
			{
			reseq(lastsorttype, true);
			}
		}	

	// Search Results
	if ( document.getElementById('searchsortwidget') ) 
		{
		bSearchReadyToSort = true;
		searchlastsorttype = getCookie('SEARCHSORTTYPE');
		if ( searchlastsorttype == null ) searchlastsorttype = 'default';
		setCookie('SEARCHSORTTYPE', searchlastsorttype);
		searchshowsorttype();		
		if ( searchlastsorttype != 'default' ) 
			{
			searchreseq(searchlastsorttype);
			}
		}	
		
	// Sections
	if ( document.getElementById('sectsortwidget') ) 
		{
		// check for no prices available and hide buttons if so	
		var spans = document.getElementsByTagName('span');
		var rtot = 0;	
		for ( var i=0; i<spans.length; i++ )
			{
			if ( spans[i].id.indexOf('sectionline_') == 0 )
				{
				var price = spans[i].getAttribute('price');
				rtot += (price != null) ? price - 0 : 0;
				}
			}
		if ( rtot == 0 )
			{
			if ( SectionSortLinksFinalOnly )					// do we only show links on final Sections
				{
				hidetagswithid('span', 'sectsortwidget');			// hide all sort widgets
				}
			else
				{	
				if ( document.getElementById('sectpricelinks') )		// button or text links
					{
					hidetagswithid('span', 'sectpricelinks');
					}
				if ( document.getElementById('sectionsortdropdown') )		// drop-down list
					{
					var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
					for ( var i=0; i<dropdowns.length; i++ )
						{
						if ( dropdowns[i].id == 'sectionsortdropdown' )		// relevant one
							{
							var opts = dropdowns[i].options;
							for ( var j=opts.length; j>0; j-- )		// scan backwards as we're deleting items
								{
								if ( (opts[j - 1].value == "lowhigh") || (opts[j - 1].value == "highlow") )
									{
									opts[j - 1] = null;
									}
								}
							}
						}			
					}
				}	
			}			

		bSectReadyToSort = true;
		sectlastsorttype = getCookie('SECTSORTTYPE');
		if ( sectlastsorttype == null ) sectlastsorttype = 'default';
		setCookie('SECTSORTTYPE', sectlastsorttype);
		sectshowsorttype();
		// only resequence if button showing and we've a non default sequence		
		if ( (document.getElementById('sectsortwidget').style.display != 'none') && (sectlastsorttype != 'default') ) 
			{
			sectionseq(sectlastsorttype);
			}
			
		}
}

function onloadsortinit(){			// optionally called on onload
	if ( ! bSortInitalised ) sortinit();				// only init if it's not already run
}

// in case we cannot activate on DOM loaded
if (window.attachEvent) 						// IE 
	{ 
	window.attachEvent("onload", onloadsortinit); 
	} 
else 									// DOM
	{  
	window.addEventListener("load", onloadsortinit, false); 
	}