/*
----------------------------------------------- 
Toyota
author: Sam Baker
studio:	hothouse interactive
website:www.hothouse.com.au
email: 	info@hothouse.com.au
----------------------------------------------- 
Grade Comparison Tool: Renderer
This file includes functions that transform
business model objects, as declared in model.js,
into HTML, and event handlers to respond to
selection changes.
-----------------------------------------------
Copyright Hothouse Interactive
:: www.hothouse.com.au ::
Unauthorised modification / use is a 
criminal offence, and will be prosecuted 
to the fullest extent permitted by law.
All Rights Reserved 
----------------------------------------------- 
*/


// Initializes the Grade Comparison Tool code, creating a JavaScript
// array to store all the grades in. Must be called before addGrade.
function initGCT()
{
	document.gct = new Object();
	document.gct.grades = new Array();
	document.gct.hideID = 1;
}


// Returns a new ID to use in "hidden" section div's.
function getHideID()
{
	return document.gct.hideID++;
}


// Registers a grade for later rendering.
function addGrade(gradeID, grade)
{
	document.gct.grades[gradeID] = grade;
}


// Renders the header part of a grade.
function renderHeader(grade)
{
	var result = new TextBuf();
	
	result.addLine("<strong>" + grade.getTitle() + "</strong>");
	result.addLine(grade.getSummary());
	
	return result.toString();
}


// Renders the image part of the grade.
function renderImage(grade)
{
	var result = new TextBuf();
	
	result.addLine("<img src=\"" + grade.getImagePath() + "\" alt=\"\" />");
	
	return result.toString();
}


// Renders a single specification link, returning the HTML for the spec link.
function renderSpecLink(specLink)
{
	var result = new TextBuf();
	
	result.addLine("  <li>");
	result.addLine("    <a href=\"" + specLink.getLink() + "\">");
	result.addLine("      " + specLink.getTitle());
	result.addLine("      <strong>from " + specLink.getPrice() + "*</strong>");
	result.addLine("    </a>");
	result.addLine("  </li>");
	
	return result.toString();
}


// Renders the specs section of the grade. Returns HTML for all the
// specification links within this grade.
function renderSpecs(grade)
{
	var result = new TextBuf();
	var specLinks = grade.getSpecLinks();

    result.addLine("<ul class=\"specials\">");

    for (var i in specLinks) {
    	result.addLine(renderSpecLink(specLinks[i]));
    }
    
    result.addLine("</ul>");
	
	return result.toString();
}


// Renders a single feature list, including all its features.
function renderFeatureList(featureList)
{
	var result = new TextBuf();
	var features = featureList.getFeatures();
	var hideID = getHideID();
	
	if (featureList.getType() == "standard")
	{
		result.addLine("<h3>");
	}
	if (featureList.getType() == "extra")
	{
		result.addLine("<h4>");
	}
	if (featureList.getType() == "optional")
	{
		result.addLine("<h5>");
	}	
/*	result.addLine("  <a href=\"javascript:toggleHide("+hideID+");\" class=\"gctLink\">");*/
	result.addLine("    " + featureList.getTitle());
/*	result.addLine("  </a>");*/
	result.addLine("<br /><a href=\"javascript:void(0)\" onclick=\"dsp(this)\" class=\"expand arrowUp\">Close</a> ");
	if (featureList.getType() == "standard")
	{
		result.addLine("</h3>");
	}
	if (featureList.getType() == "extra")
	{
		result.addLine("</h4>");
	}
	if (featureList.getType() == "optional")
	{
		result.addLine("</h5>");
	}	
		result.addLine("<div class=\"dspcont\">");
/*	result.addLine("<div id=\"hide"+hideID+"\">");*/
	result.addLine("  <ul class=\"features\">");
	
    for (var i in features) {
    	result.addLine("    <li>"+features[i]+"</li>");
    }
	
	result.addLine("  </ul>");
	result.addLine("</div>");
	
	return result.toString();
}


// Renders the features section for this grade. Returns HTML for all the
// feature lists within this grade.
function renderFeatures(grade)
{
	var result = new TextBuf();
	var featureLists = grade.getFeatureLists();

    for (var i in featureLists) {
    	result.addLine(renderFeatureList(featureLists[i]));
    }
	
	return result.toString();

}


// Renders a grade into a column, placing the rendered HTML into each of the
// component markers for the column.
function renderGrade(columnID, gradeID)
{
	var grade = document.gct.grades[gradeID];
	
	// Find the container div's for each component:
	var header   = document.getElementById("header"+columnID);
	var image    = document.getElementById("image"+columnID);
	var specs    = document.getElementById("specs"+columnID);
	var features = document.getElementById("features"+columnID);
	var headerCol = document.getElementById("headerCol" + columnID);
	var imageCol = document.getElementById("imageCol" + columnID);
	var sfCol = document.getElementById("sfCol" + columnID);
		
	headerCol.className = "colClass" + columnID;
	imageCol.className = "colClass" + columnID;
	sfCol.className = "colClass" + columnID;
	header.style.display="block";
	
	// Perform the rendering:
	header.innerHTML   = renderHeader(grade);
	image.innerHTML    = renderImage(grade);
	specs.innerHTML    = renderSpecs(grade);
	features.innerHTML = renderFeatures(grade);
}


// Called when the selection on a grade select drop-down changes.
// Renders the grade if the user selected one.
function selectChanged(columnID)
{
	var select = document.getElementById("select"+columnID);
	if (select.value) {
	    renderGrade(columnID, select.value);
	}
}


// Toggles the hidden state of the given hide section.
function toggleHide(id)
{
	var section = document.getElementById("hide"+id);
	if (section) {
		if (section.className == "hidden") {
			section.className = "";
		} else {
			section.className = "hidden";
		}
	}
}

function dsp(loc){


if(document.getElementById){
// need to close all open elements before opening required element.
	var foc=loc.firstChild;
  foc=loc.firstChild.innerHTML?loc.firstChild:loc.firstChild.nextSibling;
	loc.innerHTML=loc.innerHTML=='Expand'?'Close':'Expand';
	if(loc.innerHTML=='Expand')
		loc.className='expand arrowDown'
	else
		loc.className='expand arrowUp';
  foc=loc.parentNode.nextSibling.style?loc.parentNode.nextSibling:loc.parentNode.nextSibling.nextSibling;
	if ((foc.style.display=='block')||(foc.style.display=='none')){	  
		foc.style.display=foc.style.display=='block'?'none':'block';
	}else{
		foc.style.display='none';
		}
	}
}

if(!document.getElementById)
	document.write('<style type="text/css"><!--\n'+'.dspcont{display:block;}\n'+'//--></style>');