function ElectricityOverview(tableId)
{
	this.table = document.getElementById(tableId);
	
	var overview = this;
	var supplierColumn = this.getElementByName("SupplierColumn");
	var productColumn = this.getElementByName("ProductColumn");
	var durationColumn = this.getElementByName("DurationColumn");
	var priceColumn = this.getElementByName("PriceColumn");
	var sourceColumn = this.getElementByName("SourceColumn");
	
	supplierColumn.sortFunction = function(a,b)
	{
		return (a.product.company.name < b.product.company.name) ? -1 : (a.product.company.name == b.product.company.name) ? 0 : 1;
	}

	productColumn.sortFunction = function(a,b)
	{
		return (a.product.name < b.product.name) ? -1 : (a.product.name == b.product.name) ? 0 : 1;
	}

	durationColumn.sortFunction = function(a,b)
	{
		if(b.product.contractDuration == 0 && b.product.contract.fixedDuration) return -1;
		if(a.product.contractDuration == 0 && a.product.contract.fixedDuration) return 1;
		if(a.product.contractDuration == b.product.contractDuration) return priceColumn.sortFunction(a,b);
		return a.product.contractDuration - b.product.contractDuration;
	}
	
	priceColumn.sortFunction = function(a,b)
	{
		return a.product.price.single - b.product.price.single;
	}
	
	sourceColumn.sortFunction = function(a,b)
	{
		if(a.product.isGreen == b.product.isGreen) return priceColumn.sortFunction(a,b);
		return a.product.isGreen ? -1 : 1;
	}
	
	this.addSortHandler(supplierColumn);
	this.addSortHandler(productColumn);
	this.addSortHandler(durationColumn);
	this.addSortHandler(priceColumn);
	this.addSortHandler(sourceColumn);
}

ElectricityOverview.prototype = new ProductOverview();

ElectricityOverview.prototype.addRow = function(product, parameters)
{
	var row = this.createRow(product);
	var price = (parameters["metertype"] == "SingleMeter") ? product.price.single : product.price.double;
		
	if(this.showRadioButtons)
	{
		this.addRadioButton(row, product.id == parameters["selectedProductId"]);
	}
	else
	{
		this.addEmptyCell(row);
	}
		
	this.addLogo(row);
	this.addProductName(row);
	this.addSourceInfo(row);
	this.addContractDuration(row);
	this.addPrice(row, price, parameters["price"]);
	
	if(this.showImageButtons)
	{
		this.addImageButton(row);
	}
	else
	{
		this.addInfo(row);
	}
}

ElectricityOverview.prototype.addSourceInfo = function(row)
{
	var sourceCell = row.insertCell(-1);
	
	if(row.product.isGreen)
	{
		sourceCell.style.color = "#00AA00";

		var sourceDiv = document.createElement("div");
		sourceDiv.style.fontWeight = "bold";
		sourceDiv.appendChild(document.createTextNode("groen"));
		
		sourceCell.appendChild(sourceDiv);
		
		if(row.product.comment != "")
		{
			sourceCell.appendChild(document.createTextNode("("+row.product.comment+")"));
		}
	}
	else
	{
		sourceCell.appendChild(document.createTextNode("grijs"));
		sourceCell.style.color = "#808080";
		sourceCell.style.fontWeight = "bold";
	}
}

function GasOverview(tableId)
{
	this.table = document.getElementById(tableId);
	
	var overview = this;
	var supplierColumn = this.getElementByName("SupplierColumn");
	var productColumn = this.getElementByName("ProductColumn");
	var durationColumn = this.getElementByName("DurationColumn");
	var priceColumn = this.getElementByName("PriceColumn");
	
	supplierColumn.sortFunction = function(a,b)
	{
		return (a.product.company.name < b.product.company.name) ? -1 : (a.product.company.name == b.product.company.name) ? 0 : 1;
	}

	productColumn.sortFunction = function(a,b)
	{
		return (a.product.name < b.product.name) ? -1 : (a.product.name == b.product.name) ? 0 : 1;
	}

	durationColumn.sortFunction = function(a,b)
	{
		if(b.product.contractDuration == 0 && b.product.contract.fixedDuration) return -1;
		if(a.product.contractDuration == 0 && a.product.contract.fixedDuration) return 1;
		if(a.product.contractDuration == b.product.contractDuration) return priceColumn.sortFunction(a,b);
		return a.product.contractDuration - b.product.contractDuration;
	}
	
	priceColumn.sortFunction = function(a,b)
	{
		return a.product.price.calculatedPrice - b.product.price.calculatedPrice;
	}
		
	this.addSortHandler(supplierColumn);
	this.addSortHandler(productColumn);
	this.addSortHandler(durationColumn);
	this.addSortHandler(priceColumn);
}

GasOverview.prototype = new ProductOverview();

GasOverview.prototype.addRow = function(product, parameters)
{
	var row = this.createRow(product);

	if(this.showRadioButtons)
	{
		this.addRadioButton(row, product.id == parameters["selectedProductId"]);
	}
	else
	{
		this.addEmptyCell(row);
	}
		
	this.addLogo(row);
	this.addProductName(row);
	this.addContractDuration(row);
	this.addPrice(row, product.price.calculatedPrice, parameters["price"]);
	
	if(this.showImageButtons)
	{
		this.addImageButton(row);
	}
	else
	{
		this.addInfo(row);
	}
}

function WarmthOverview(tableId)
{
	this.table = document.getElementById(tableId);
}

WarmthOverview.prototype = new ProductOverview();

WarmthOverview.prototype.addRow = function(product, parameters)
{
	var row = this.createRow(product);

	if(this.showRadioButtons)
	{
		this.addRadioButton(row, product.id == parameters["selectedProductId"]);
	}
	else
	{
		this.addEmptyCell(row);
	}
		
	this.addLogo(row);
	this.addProductName(row);
}

function WaterOverview(tableId)
{
	this.table = document.getElementById(tableId);
}

WaterOverview.prototype = new ProductOverview();

WaterOverview.prototype.addRow = function(product, parameters)
{
	var row = this.createRow(product);

	if(this.showRadioButtons)
	{
		this.addRadioButton(row, product.id == parameters["selectedProductId"]);
	}
	else
	{
		this.addEmptyCell(row);
	}
		
	this.addLogo(row);
	this.addProductName(row);
	this.addContractDuration(row);
	this.addPrice(row, product.price.fixedCharge, null);
	this.addPrice(row, product.price.rate, null);
	this.addInfo(row);
}

function RtvOverview(tableId)
{
	this.table = document.getElementById(tableId);
}

RtvOverview.prototype = new ProductOverview();

RtvOverview.prototype.addRow = function(product, parameters)
{
	var row = this.createRow(product);

	if(this.showRadioButtons)
	{
		this.addRadioButton(row, product.id == parameters["selectedProductId"]);
	}
	else
	{
		this.addEmptyCell(row);
	}
		
	this.addLogo(row);
	this.addProductName(row);
	this.addType(row);
	this.addContractDuration(row);
	this.addPrice(row, product.price.rate, null);
	this.addInfo(row);
}

RtvOverview.prototype.addType = function(row)
{
	var cell = row.insertCell(-1);
	
	if(row.product.isDigital)
	{
		cell.appendChild(document.createTextNode("Digitaal"));
	}
	else
	{
		cell.appendChild(document.createTextNode("Analoog"));
	}
}

function ProductOverview()
{
	this.selectedRow = null;
	this.showRadioButtons = false;
	this.showImageButtons = false;
	this.onclick = null;
	this.onclickImageButton = null;
	this.onShowPriceInfo = null;
	this.onShowProductInfo = null;
	
	// Sort related fields
	this.sortColumn = null;
	this.sortDirection = "asc";
}

ProductOverview.prototype.addSortHandler = function(column)
{
	var overview = this;
	
	column.style.cursor = "pointer";

	column.onclick = function()
	{
		if(column == overview.sortColumn) 
		{
			overview.sortDirection = (overview.sortDirection == "asc") ? "desc" : "asc";
		}
		else
		{
			if(overview.sortColumn != null) overview.sortColumn.className = "";
			
			overview.sortColumn = column;
			overview.sortDirection = "asc";
		}
		
		column.className = "sort-"+overview.sortDirection;

		overview.sort();
		overview.createAlternatingBackground();			
	}
}

ProductOverview.prototype.sort = function()
{
	if(this.sortColumn == null) return;

	var sortColumn = this.sortColumn; // Allow closure on sortColumn.
	var rows = [];
		
	for(var i=1; i<this.table.rows.length; i++)
	{
		rows.push(this.table.rows[i]);
	}

	if(this.sortDirection == "asc")
	{
		var sortfunction = sortColumn.sortFunction;
	}	
	else
	{
		var sortfunction = function(a,b) { return sortColumn.sortFunction(b,a); };
	}
		
	rows.sort(sortfunction);
	
	var tBody = (this.table.childNodes[1] == null) ? this.table.childNodes[0] : this.table.childNodes[1];
	
	for(var i=0; i<rows.length; i++)
	{
		tBody.appendChild(rows[i]);
	}
}

ProductOverview.prototype.databind = function(products, parameters)
{
	while(this.table.rows.length > 1)
	{
		this.table.deleteRow(1);
	}
	
	for(var i=0; i<products.length; i++)
	{
		var product = products[i];
		this.addRow(product, parameters);
	}
	
	this.sort();
	this.createAlternatingBackground();
}

ProductOverview.prototype.createRow = function(product)
{
	var row = this.table.insertRow(-1);
	row.overview = this;
	row.product = product;
	
	// Only show a hover effect if the products are selectable, that is, if the
	// radiobuttons are visible
	
	row.onmouseover = function()
	{
		if((this.overview.showRadioButtons || this.overview.showImageButtons) && this != this.overview.selectedRow) 
		{ 
			this.className = 'hover';
		}
	}
	
	row.onmouseout = function()
	{
		if((this.overview.showRadioButtons || this.overview.showImageButtons) && this != this.overview.selectedRow) 
		{ 
			this.className = this.originalClassName; 
		}
	}
	
	row.onclick = function()
	{
		if(this.overview.showRadioButtons)
		{
			var selectedRow = this.overview.selectedRow;
			
			if(this != selectedRow)
			{
				if(selectedRow != null)
				{
					selectedRow.className = selectedRow.originalClassName; 
				}
						
				this.radioButton.checked = true;
				this.className = 'selected'; 
				this.overview.selectedRow = this; 			
				
				if(this.overview.onclick != null)
				{
					this.overview.onclick(this.product);
				}
			}
		}
	}
	
	return row;
}

ProductOverview.prototype.addEmptyCell = function(row)
{
	var cell = row.insertCell(-1);
	cell.innerHTML = "&nbsp;";
}

ProductOverview.prototype.addRadioButton = function(row, selected)
{
	var cell = row.insertCell(-1);
	
	try
	{
		var radioButton = document.createElement("<input name=\"ProductChoice\">");
	}
	catch(error)
	{
		var radioButton = document.createElement("input");
		radioButton.name = "ProductChoice";
	}
	
	row.radioButton = radioButton;

	radioButton.type = "radio";
	radioButton.value = row.product.id;
	radioButton.row = row;

	radioButton.onclick = function() 
	{
		this.row.onclick();
	} 
	
	if(row.product.available == false)
	{
		radioButton.disabled = true;
	}
	
	cell.appendChild(radioButton);

	if(selected)
	{
		radioButton.checked = true;
		this.selectedRow = row;
	}
}

ProductOverview.prototype.addLogo = function(row)
{
	var cell = row.insertCell(-1);
	
//	var companyLink = document.createElement("a");
//	companyLink.href = row.product.company.website;
//	companyLink.target = "_blank";
	
	var companyImage = document.createElement("img");
	companyImage.src = row.product.logo;
	companyImage.border = 0;
	companyImage.width = 85;
	companyImage.height = 46;
	
//	companyLink.appendChild(companyImage);
	cell.appendChild(companyImage);
}

ProductOverview.prototype.addProductName = function(row)
{
	var cell = row.insertCell(-1);
	
	var productDiv = document.createElement("div");
	productDiv.className = "product";
	productDiv.appendChild(document.createTextNode(row.product.name));
	cell.appendChild(productDiv);

/*  This feature is disabled, since we only show available products now.	
	if(row.product.available == false)
	{
		var notAvailable = document.createElement("div");
		notAvailable.className = "not-available";
		notAvailable.appendChild(document.createTextNode("Niet beschikbaar via NutSelect"));
		cell.appendChild(notAvailable);
	}
*/
	if(row.product.offer != "")
	{
		var offerDiv = document.createElement("div");
		offerDiv.className = "offer";
		offerDiv.appendChild(document.createTextNode(row.product.offer));
		cell.appendChild(offerDiv);
	}
}

ProductOverview.prototype.addContractDuration = function(row)
{
	var cell = row.insertCell(-1);

	if(row.product.contract.fixedDuration)
	{
		if(row.product.contractDuration == 0)
		{
			cell.appendChild(document.createTextNode("Onbekend"));
		}
		else
		{
			cell.appendChild(document.createTextNode(row.product.contractDuration+" maanden"));
		}
	}
	else
	{
		cell.appendChild(document.createTextNode("Vrij opzegbaar"));
	}
}

ProductOverview.prototype.addPrice = function(row, price, referencePrice)
{
	var priceCell = row.insertCell(-1);
	var priceLink = document.createElement("a");

	priceLink.href = "javascript:this.focus()"; 
	priceLink.className = "pricelink";
	priceLink.row = row;
	priceLink.innerHTML = toEuro(price);
	
	priceLink.onclick = function() 
	{ 
		if(this.row.overview.onShowPriceInfo != null)
		{
		    this.row.overview.onShowPriceInfo(this.row.product); 
		}
	}

	priceCell.appendChild(priceLink);

	if(referencePrice != null && referencePrice > 0)
	{
		var savings = referencePrice - price;
			
		if(savings != 0)
		{
			var savingsDiv = document.createElement("div");
				
			if(savings > 0)
			{
				savingsDiv.className = "lower-price";
				savingsDiv.innerHTML = toEuro(savings);
			}
			else
			{
				savingsDiv.className = "higher-price";
				savingsDiv.innerHTML = toEuro(-savings);
			}
			
			priceCell.appendChild(savingsDiv);
		}
	}
}

ProductOverview.prototype.addInfo = function(row)
{
	var cell = row.insertCell(-1);
	
	var infoDiv = document.createElement("div");
	infoDiv.className = "info";
	infoDiv.appendChild(document.createTextNode("info"));
	infoDiv.row = row;

	infoDiv.onclick = function() 
	{ 
		if(this.row.overview.onShowProductInfo != null)
		{
		    this.row.overview.onShowProductInfo(this.row.product); 
		}
	}
	
	cell.appendChild(infoDiv);
}

ProductOverview.prototype.addImageButton = function(row)
{
	var cell = row.insertCell(-1);
	
	var buttonDiv = document.createElement("div");
	buttonDiv.className = "imagebutton";

	buttonDiv.onclick = function()
	{
		if(row.overview.onClickImageButton != null)
		{
			row.overview.onClickImageButton(row.product);
		}
	}	

	cell.appendChild(buttonDiv);	
}

ProductOverview.prototype.createAlternatingBackground = function()
{
	for(var i=1; i < this.table.rows.length; i++)
	{
		var row = this.table.rows[i];
		var rowType = ((i+1)%2)+1;
		
		// A selected row has a different background.		
		if(row == this.selectedRow) 
		{
			row.className = "selected"; 
		}
		else if(row.product.isPrefered)
		{
			row.className = "prefered";
		}
		else 
		{
			row.className = "row"+rowType;
		}
		
		// Store the className a second time, so it can be restored after the row color was changed.
		row.originalClassName = (row.product.isPrefered ? "prefered" : "row"+rowType);
	}
}

ProductOverview.prototype.hide = function()
{
	this.table.style.display = "none";
}

ProductOverview.prototype.show = function()
{
	this.table.style.display = "block";
}

ProductOverview.prototype.getElementByName = function(name, element)
{
	if(element == null)
	{
		return this.getElementByName(name, this.table);
	}

	if(element.getAttribute && element.getAttribute("name") == name) return element;
	
	for(var i=0; i<element.childNodes.length; i++)
	{
		var subEl = this.getElementByName(name, element.childNodes[i]);
		if(subEl != null) return subEl;
	}
	
	return null;
}

function toEuro(number)
{
	if(number == -1)
	{
		return "onbekend";
	}
	
	var price = "&euro; ";

	var euros = Math.floor(number);
	var cents = Math.round(100 * (number - euros));
	cents = "," + cents + "00";
	cents = cents.substring(0,3);

	return "&euro; "+euros+cents;
}