/*
----------------------------------------------- 
Toyota
author: Ryan O'Connell
studio:	hothouse interactive
website:www.hothouse.com.au
email: 	info@hothouse.com.au
----------------------------------------------- 
Colour Trims JS
This JS handles all the working functions the 
data is sparated into the velicle JS files.
The JS loads all the data writes the HTML to the
page then changes the page bases on events passed
back, like an image change
-----------------------------------------------
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 
----------------------------------------------- 
*/
//Sets up the page
function setUp(){
	var swatchList =""
	//Write swatches to page
	for (var i=0;i<colourName.length;i++){
		swatchList = swatchList + "<a href='javascript:changeVehicle("+i+")' onMouseOver='turnColourOn("+i+")' onMouseOut='turnColourOff("+i+")'><img src='"+pathSwatches+swatch[i]+".jpg' alt='"+colourName[i]+"' name='swatch_"+i+"'></a>"
	}
	writeDHTML(swatchList, 'swatchesText');
	//Selected selected colour
	eval("document.swatch_" + selectedColour + ".src = '" + pathSwatches + swatch[selectedColour] + "Selected.jpg'");
	writeDHTML(colourName[selectedColour], 'colorChosenText');
	//Write first car iamge to page
	var firstCar = "<img src='"+pathCars+swatch[selectedColour]+".jpg' alt='" + carImgAlt + "' name='car_ext_image'/>"
	writeDHTML(firstCar, 'carHTML');
	//Write trims to page
	var trimList =""
	for (var i=0;i<trimName.length;i++){
	trimList = trimList + "<a href='javascript:setTrimSelected("+i+")' onMouseOver='turnTrimOn("+i+")' onMouseOut='turnTrimOff("+i+")' id='trim_"+i+"'><img src='"+pathTrims+trim[i]+".jpg' alt='"+trimName[i]+"' name='trimIMG_"+i+"'/></a>"
	}
	writeDHTML(trimList, 'trimText');	
	updateTrimList(selectedColour);
	selectFirstTrim(selectedColour);
}
//Returns a images scr/
function newImage(arg) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
}
//Changes an images
function changeImages() {
	if (document.images) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1]).src;
		}
	}
}
//Writes html to page given an id and a string
function writeDHTML(htmlText, targetClass) {
 if (document.getElementById) {
  var target = document.getElementById(targetClass);
  target.innerHTML = htmlText;
 } else if (document.all) {
  var target = document.all[targetClass];
  target.innerHTML = htmlText;
 }
}
// this function performs all the steps necessary to swap vehicle colours
function changeVehicle(index) {
	// update the selected colour
	var oldColour = selectedColour;
	selectedColour = index;	
	// unselect the old colour
	turnColourOff(oldColour);			
	// swap the main image
	document.images['car_ext_image'].src = pathCars+swatch[selectedColour]+".jpg";		
	// update the 'your selection' for colour
	updateColourYourSelection(index);		
	//
	updateTrimList(index);
	selectFirstTrim(index);	
}
// Provides functionality to swap a swatch with its 'on' state
function turnColourOn(index) {
	if (selectedColour != index) {
		eval("document.swatch_" + index + ".src = '" + pathSwatches + swatch[index] + "Selected.jpg'");
	}
}	
// Provides functionality to swap a swatch with its 'off' state
function turnColourOff(index) {
	if (selectedColour != index) {
		eval("document.swatch_" + index + ".src = '" + pathSwatches + swatch[index] + ".jpg'");
	}
}
// Provides functionality to swap a trim with its 'on' state
function turnTrimOn(index) {
	if (selectedTrim  != index) {
		eval("document.trimIMG_" + index + ".src = '" + pathTrims + trim[index] + "Selected.jpg'");
		
	}
}	
// Provides functionality to swap a trim with its 'off' state
function turnTrimOff(index) {
	if (selectedTrim  != index) {
		eval("document.trimIMG_" + index + ".src = '" + pathTrims + trim[index] + ".jpg'");
	}
}
// updates the 'your colour selection' image
function updateColourYourSelection(index) {
	var cname=colourName[index]; 
	writeDHTML(cname, 'colorChosenText');
}
// Updates the trim selections availble
function updateTrimList(index) {
	var trimList
	for (var i=0; i<trimName.length; i++) {
		trimList="trim_"+i;		
		eval(document.getElementById(trimList)).className = 'hide';
	}
	for (var i=0; i<optionsArray[index].length; i++) {
		trimList="trim_"+optionsArray[index][i].material;		
		eval(document.getElementById(trimList)).className = 'linkImg';
	}
}
//Select the First trim in the Array 
function selectFirstTrim(index){
	//set selected item
	var firstTrim=optionsArray[index][0].material;
	setTrimSelected(firstTrim);	
}

//sets the select trim
function setTrimSelected(index) {	
	selectedTrim = index
	var tname=trimName[index]; 
	writeDHTML(tname, 'trimChosenText');
	updateVechileList(selectedColour,index)	
	updateTrimList(selectedColour)
	eval("document.trimIMG_" + oldTrimSelected + ".src = '" + pathTrims + trim[oldTrimSelected] + ".jpg'");
	oldTrimSelected = index;
	eval("document.trimIMG_" + index + ".src = '" + pathTrims + trim[index] + "Selected.jpg'");	
	
}
// Updates the vechile list of availble model for colour and trim selection
function updateVechileList(index,trimColour) {
	if (trimColour==null) {
			trimColour=optionsArray[index][0].material;
			
	}
	var vechicleList
	vechicleList="<ul class=\"arrowInfo\">";
	for (var i=0; i<optionsArray[index].length; i++) {
		if (optionsArray[index][i].material==trimColour) {		
			for (var e=0; e<optionsArray[index][i].vehicles.length; e++) {
			vechicleList=vechicleList+"<li>"+optionsArray[index][i].vehicles[e]+"</li>";		
			}
		}
	}
	vechicleList=vechicleList+"</ul>";
	writeDHTML(vechicleList, 'vechiclesAvailabilty');
}