$(function(){
	
	var searchbox = $('#searchbox');
	var searchboxpos = searchbox.position();
	var searchpanel = $('<div id="searchpanel"><b style="display:block;padding:3px 8px;float:left;">Search Results</b><button style="float:right;margin-right:5px;" onclick="$(\'#searchpanel\').hide();">Close</button><br style="clear:both;"><div id="searchpanelresults"></div></div>');
	$('body').append(searchpanel);
	searchpanel.css({
		position: 'absolute',
		zIndex: 999,
		top: searchboxpos.top + searchbox.height() + 15,
		left: searchboxpos.left + 3,
		width: searchbox.width() + 15,
		height: '400px',
		overflow: 'auto',
		border: '1px solid #CCC',
		background: '#F5F5F5',
		display: 'none',
		paddingTop: '5px',
		'box-shadow': '1px 1px 4px #444',
		'-moz-box-shadow': '1px 1px 4px #444',
		'-webkit-box-shadow': '1px 1px 4px #444'
	});
	var searchpanelresults = $('#searchpanelresults');
	searchpanelresults.css({
		padding: '10px',
		background: '#FFF',
		minHeight: '330px',
		fontSize: '12px'
	});
	searchbox.children('form').submit(function(){
		var frm = $(this);
		$.getJSON('/products.asp?ajax=1', frm.serialize(), function(data){
			searchpanel.show();
			searchpanelresults.html('');
			if(data){
				var counter = 0;
				var rows = '';
				for(var a = 0; data[a]; a += 1){
					var shippingmode = parseInt(data[a].shippingmode),
						price = parseFloat(data[a].price).toFixed(2),
						shippingprice = parseFloat(data[a].shippingprice).toFixed(2),
						shippingpair = parseFloat(data[a].shippingpair).toFixed(2),
						displayprice = 0;
					if(shippingmode === 0 || shippingmode === 2){
						displayprice = parseFloat(parseFloat(price) + parseFloat(shippingpair)).toFixed(2);
					}else{
						displayprice = price;
					}
					searchpanelresults.append('<a onmouseover="this.style.backgroundColor=\'#F4F9FF\'" onmouseout="this.style.backgroundColor=\'#FFF\'" style="border-top:1px dotted #CCC;display:block;padding:5px;" href="/details.asp?SKU=' + data[a].sku + '"><img src="/products/' + data[a].image + '" style="width:23%;vertical-align:middle;margin-right:10px;border:1px solid #999;float:left;" alt="' + data[a].sku + '"><div style="float:left;width:23%;text-align:center;">' + data[a].sku + '</div><div style="float:left;text-align:center;width:23%;">Pairs Per Case: ' + data[a].pairspercase + '</div><div style="float:left;text-align:center;width:23%;">$' + displayprice + '</div><br style="clear:both;"></a>');
					counter += 1;
				}
				if(counter === 0){
					searchpanelresults.append('No results.');
				}
			}
		});
		return false;
	});
});