var orderBy;
var fieldName;

// hides the non-javascript control and replaces with an anchor tag
function DisplayCarsListHeadersForAjax(common, extension, title)
{
	var element1 = document.getElementById(common + extension);
	var element2 = document.createElement("a");
	element2.appendChild(document.createTextNode(extension));
	element2.setAttribute("href", "#");
	element2.setAttribute("title", title);

	YAHOO.util.Event.addListener(element2, 'click', sortCars, {extension:extension,orderBy:"A"});
	
	// remove non-javascript controls
	element1.parentNode.appendChild(element2);
	element1.parentNode.removeChild(element1);
}

// define our success function
var handleSuccess = function(o)
{
	if(o.responseText != undefined)
	{
		var jsonObject = eval("(" + o.responseText + ")");
		if(jsonObject.error == null)
		{
			var responseValue = jsonObject.value;
			
			// resolve the sorting direction
			var direction = "A";
			var directionDescriptive = "Ascending";
			if(orderBy == "A")
			{
				direction = "D";
				directionDescriptive = "Descending";
			}
			
			// construct the same from the aspx page
			var div = document.getElementById('sortBy');
			var string;
			string = "<table id=\"carsList\"><thead>";
			
			// instead of buttons in the li's, we put anchor tags
			if(fieldName == "Car")
			{
				string += "<th><a href=\"#\" onclick=\"sortCars(null, {extension:'Car', orderBy:'" + direction + "'}); return false; \" title=\"Cars by Name " + directionDescriptive + "\">Car</a></th>";
				string += "<th><a href=\"#\" onclick=\"sortCars(null, {extension:'Description', orderBy:'A'}); return false; \" title=\"Cars by Description Ascending\">Description</a></th>";
				string += "<th><a href=\"#\" onclick=\"sortCars(null, {extension:'Price', orderBy:'A'}); return false; \" title=\"Cars by Price Ascending\">Price</a></th>";
			}
			if(fieldName == "Description")
			{
				string += "<th><a href=\"#\" onclick=\"sortCars(null, {extension:'Car', orderBy:'A'}); return false; \" title=\"Cars by Name Ascending\">Car</a></th>";
				string += "<th><a href=\"#\" onclick=\"sortCars(null, {extension:'Description', orderBy:'" + direction + "'}); return false; \" title=\"Cars by Description " + directionDescriptive + "\">Description</a></th>";
				string += "<th><a href=\"#\" onclick=\"sortCars(null, {extension:'Price', orderBy:'A'}); return false; \" title=\"Cars by Price Ascending\">Price</a></th>";
			}
			if(fieldName == "Price")
			{
				string += "<th><a href=\"#\" onclick=\"sortCars(null, {extension:'Car', orderBy:'A'}); return false; \" title=\"Cars by Name Ascending\">Car</a></th>";
				string += "<th><a href=\"#\" onclick=\"sortCars(null, {extension:'Description', orderBy:'A'}); return false; \" title=\"Cars by Description Ascending\">Description</a></th>";
				string += "<th><a href=\"#\" onclick=\"sortCars(null, {extension:'Price', orderBy:'" + direction + "'}); return false; \" title=\"Cars by Price " + directionDescriptive + "\">Price</a></th>";
			}
			
			string += "</thead>";

			// build up the list with the list items
			for(var index = 0; index < responseValue.length; index++)
			{
				if((index % 2) == 0)
				{
					string += "<tr class=\"carsListAlternate\">";
				}
				else
				{
					string += "<tr class=\"carsListNormal\">";
				}
				string += "<td style=\"width:200px\">" + responseValue[index].Name + "</td>";
				string += "<td style=\"width:300px\">" + responseValue[index].Description + "</td>";
				string += "<td style=\"width:50px\">&pound;" + responseValue[index].Price + "</td>";				
				string += "</tr>";
			}
			
			string += "</table>";
			div.innerHTML = string;
		}
	}
}

// define our failure function
var handleFailure = function(o)
{
	alert('ERROR: ' + o.responseText);
}

// define our callbacks
var callback = { success:handleSuccess, failure:handleFailure };

function sortCars(element, object)
{
	orderBy = object.orderBy;
	fieldName = object.extension;
	createCookie('field', fieldName);
	createCookie('orderBy', orderBy);

	showProgressImage('carsList');
	
	// kick off the request, specifying the url and the callback functions	
	YAHOO.util.Connect.asyncRequest('GET', '/Cars.ajax?field=' + object.extension + '&order=' + object.orderBy, callback);
}