// JavaScript Document

// This object stores all needed data for a single product record.
function Product(){
	this.id = null;
	this.name = null;
	this.description = null;
	this.skill_focus = null;
	this.sort_grade = null;
	this.grade_range = null;
	this.price_value = null;
	this.price_display = null;
	this.image_sm = null;
	this.image_bg = null;
	this.overview_link = null;
}

// These booleans control the toggling of the sorting order.
var gradeDescending = false;
var nameDescending = false;
var priceDescending = true;

// These booleans control which column is hilighted.
var gradeSelected = false;
var nameSelected = false;
var priceSelected = true;


// Sort products array by the name.
function sortByName(a, b){
	if(!nameDescending){
		var x = a.name;
		var y = b.name;
	}else{
		var x = b.name;
		var y = a.name;
	}
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
// Adjust the header styles to display sorting arrow or not.
function setNameHeaderClass(){
	if(!nameDescending){
		document.getElementById("product_header").setAttribute(document.all ? "className" : "class", "product selected up");
	}else{
		document.getElementById("product_header").setAttribute(document.all ? "className" : "class", "product selected down");
	}
	document.getElementById("price_header").setAttribute(document.all ? "className" : "class", "price");
	document.getElementById("grade_header").setAttribute(document.all ? "className" : "class", "grade");
}




// Sort products array by the grade.
function sortByGrade(a, b){
	if(!gradeDescending){
		var x = a.sort_grade;
		var y = b.sort_grade;
	}else{
		var x = b.sort_grade;
		var y = a.sort_grade;
	}

    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
// Adjust the header styles to display sorting arrow or not.
function setGradeHeaderClass(){
	document.getElementById("product_header").setAttribute(document.all ? "className" : "class", "product");
	document.getElementById("price_header").setAttribute(document.all ? "className" : "class", "price");
	if(!gradeDescending){
		document.getElementById("grade_header").setAttribute(document.all ? "className" : "class", "grade selected up");
	}else{
		document.getElementById("grade_header").setAttribute(document.all ? "className" : "class", "grade selected down");
	}
}




// Sort products array by the price.
function sortByPrice(a, b){
	if(!priceDescending){
		var x = a.price_value;
		var y = b.price_value;
	}else{
		var x = b.price_value;
		var y = a.price_value;
	}
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
// Adjust the header styles to display sorting arrow or not.
function setPriceHeaderClass(){
	document.getElementById("product_header").setAttribute(document.all ? "className" : "class", "product");
	if(!priceDescending){
		document.getElementById("price_header").setAttribute(document.all ? "className" : "class", "price selected up");
	}else{
		document.getElementById("price_header").setAttribute(document.all ? "className" : "class", "price selected down");
	}
	document.getElementById("grade_header").setAttribute(document.all ? "className" : "class", "grade");
}




// Given the products array build the html for displaying the table.
function renderTable(products){
	/* This array of strings is created for the easy reading and writing of the HTML. */
	var html_string = "";
	
	html_string = html_string + "<table cellpadding='0' cellspacing='0'>";
	html_string = html_string + "<tr>";
	html_string = html_string + "<th id='product_header' class='product'>";
	html_string = html_string + "<div class='wrap'>";
	html_string = html_string + "<a href='javascript: void(0);' onclick='javascript: nameSelected=true; gradeSelected=false; priceSelected=false; products.sort(sortByName); renderTable(products); setNameHeaderClass(); nameDescending = !nameDescending;'><img src='/images/categories/txt-table_head_product.gif' alt='Product'></a>";
	html_string = html_string + "</div>";
	html_string = html_string + "</th>";
	html_string = html_string + "<th id='skill_header' class='skill'>";
	html_string = html_string + "<div class='wrap'>";
	html_string = html_string + "<img src='/images/categories/txt-table_head_skills.gif' alt='Skill Focus'>";
	html_string = html_string + "</div>";
	html_string = html_string + "</th>";
	html_string = html_string + "<th id='grade_header' class='grade'>";
	html_string = html_string + "<div class='wrap'>";
	html_string = html_string + "<a href='javascript: void(0);' onclick='javascript: nameSelected=false; gradeSelected=true; priceSelected=false; products.sort(sortByGrade); renderTable(products); setGradeHeaderClass(); gradeDescending = !gradeDescending;'><img src='/images/categories/txt-table_head_grade.gif' alt='Grade'></a>";
	html_string = html_string + "</div>";
	html_string = html_string + "</th>";
	html_string = html_string + "<th id='price_header' class='price selected down'>";
	html_string = html_string + "<div class='wrap'>";
	html_string = html_string + "<a href='javascript: void(0);' onclick='javascript: nameSelected=false; gradeSelected=false; priceSelected=true; products.sort(sortByPrice); renderTable(products); setPriceHeaderClass(); priceDescending = !priceDescending;'><img src='/images/categories/txt-table_head_pric.gif' alt='Starting Price'></a>";
	html_string = html_string + "</div>";
	html_string = html_string + "</th>";
	html_string = html_string + "</tr>";
	
	for (i=0; i < products.length; i++){
		if((i % 2) == 0){
			html_string = html_string + "<tr>";
		} else {
			html_string = html_string + "<tr class='even'>";
		}
		
		if(nameSelected){
			html_string = html_string + "<td class='product selected'>";
		} else {
			html_string = html_string + "<td class='product'>";
		}
		
		html_string = html_string + "<div class='wrap'>";
		html_string = html_string + "<img src='" + products[i].image_sm + "' class='thumbnail'/>";
		html_string = html_string + "<div class='popup small_image' style='display:none;'>";
		html_string = html_string + "<h3><a href='" + products[i].overview_link + "'>" + products[i].name + "</a></h3>";
		html_string = html_string + "<div class='photo'>";
		html_string = html_string + "<img src='" + products[i].image_bg + "' />";
		html_string = html_string + "</div>";
		html_string = html_string + "<p>";
		html_string = html_string + products[i].description;
		html_string = html_string + "</p>";
		html_string = html_string + "<a href='" + products[i].overview_link + "'>Learn More</a>";
		html_string = html_string + "</div>";
		html_string = html_string + "<h3><a href='" + products[i].overview_link + "' class='strong'>" + products[i].name + "</a></h3>";
		html_string = html_string + "<a href='" + products[i].overview_link + "' class='regular'>Learn more</a>";
		html_string = html_string + "</div>";
		html_string = html_string + "</td>";
		html_string = html_string + "<td class='skill'>";
		html_string = html_string + "<div class='wrap'>";
		html_string = html_string + products[i].skill_focus;
		html_string = html_string + "</div>";
		html_string = html_string + "</td>";
		
		if(gradeSelected){
			html_string = html_string + "<td class='grade selected'>";
		} else {
			html_string = html_string + "<td class='grade'>";
		}
		
		html_string = html_string + "<div class='wrap'>";
		html_string = html_string + products[i].grade_range;
		html_string = html_string + "</div>";
		html_string = html_string + "</td>";
		
		if(priceSelected){
			html_string = html_string + "<td class='price selected'>";
		} else {
			html_string = html_string + "<td class='price'>";
		}
		
		html_string = html_string + "<div class='wrap'>";
		html_string = html_string + products[i].price_display;
		html_string = html_string + "</div>";
		html_string = html_string + "</td>";
		html_string = html_string + "</tr>";
	}

	html_string = html_string + "<tr class='bottom'>";
	html_string = html_string + "<td colspan='4'>";
	html_string = html_string + "<div class='wrap'>";
	html_string = html_string + "&nbsp;";
	html_string = html_string + "</div>";
	html_string = html_string + "</td>";
	html_string = html_string + "</tr>";
	html_string = html_string + "</table>";

	document.getElementById('product_rows').innerHTML = html_string;
}