/*
This is the javascript file for the Garage Cam for The Junction, Inc. - KJP
Created January 13, 2009
*/

/* objectives:
1. clear center area
2. build DOM structure for specific images
3. Show images
*/


function showMakes(folder,level,category,make,model,year) {
	var categoryName = category;
	//if they clicked on the same category then close the list

	var listExists = document.getElementById("makeHolder");

	if (listExists==null){
		removeMakeList();
		var ulElement = createMakeElements(category);

		var liElement = document.createElement("li"); //this holds the model list ul
		liElement.setAttribute("id","makeHolder");
		liElement.appendChild(ulElement);
			
		var listBase = document.getElementById('garageCategory');
		var currentSpot = folder-(-1);
		listBase.insertBefore(liElement,document.getElementById(currentSpot));
	
	} else {
		if (listExists.previousSibling.id==folder){
			removeMakeList();
		} else {
			removeMakeList();
			var ulElement = createMakeElements(category);

			var liElement = document.createElement("li"); //this holds the model list ul
			liElement.setAttribute("id","makeHolder");
			liElement.appendChild(ulElement);
			
			var listBase = document.getElementById('garageCategory');
			var currentSpot = folder-(-1);
			listBase.insertBefore(liElement,document.getElementById(currentSpot));
		
		}
	
	}
	
}

function showModels(folder,level,category,make,model,year) {
	var categoryName = category;
	//if they clicked on the same category then close the list

	var listExists = document.getElementById("modelHolder");

	if (listExists==null){
		removeModelList();
		var ulElement = createModelElements(category,make);

		var liElement = document.createElement("li"); //this holds the model list ul
		liElement.setAttribute("id","modelHolder");
		liElement.appendChild(ulElement);
			
		var listBase = document.getElementById('makeList');
		var currentSpot = folder-(-1);
		listBase.insertBefore(liElement,document.getElementById(currentSpot));
	
	} else {
		if (listExists.previousSibling.id==folder){
			removeModelList();
		} else {
			removeModelList();
			var ulElement = createModelElements(category,make);

			var liElement = document.createElement("li"); //this holds the model list ul
			liElement.setAttribute("id","modelHolder");
			liElement.appendChild(ulElement);
			
			var listBase = document.getElementById('makeList');
			var currentSpot = folder-(-1);
			listBase.insertBefore(liElement,document.getElementById(currentSpot));
		
		}
	
	}
	
}

function showYears(folder,level,category,make,model,year) {
	var categoryName = category;
	//if they clicked on the same category then close the list

	var listExists = document.getElementById("yearHolder");

	if (listExists==null){
		removeYearList();
		var ulElement = createYearElements(category,make,model);

		var liElement = document.createElement("li"); //this holds the year list ul
		liElement.setAttribute("id","yearHolder");
		liElement.appendChild(ulElement);
			
		var listBase = document.getElementById('modelList');
		var currentSpot = folder-(-1);
		listBase.insertBefore(liElement,document.getElementById(currentSpot));
	
	} else {
		if (listExists.previousSibling.id==folder){
			removeYearList();
		} else {
			removeYearList();
			var ulElement = createYearElements(category,make,model);

			var liElement = document.createElement("li"); //this holds the year list ul
			liElement.setAttribute("id","yearHolder");
			liElement.appendChild(ulElement);
			
			var listBase = document.getElementById('modelList');
			var currentSpot = folder-(-1);
			listBase.insertBefore(liElement,document.getElementById(currentSpot));
		
		}
	
	}
	
}


function createMakeElements(category){

	var categoryName = category;
	var ulElement = document.createElement("ul");
	ulElement.setAttribute("id","makeList");
	var numModels = 0;
	var prevModel = "";
	for (var ew=0;ew<indexArray.length;ew++){
		var modelCount = ew;
		if (indexArray[modelCount][1] == categoryName){
			if (indexArray[modelCount][2]!=prevModel){

				var listElement = document.createElement("li");
				listElement.setAttribute("id",(50+numModels));
				linkText = document.createTextNode(indexArray[modelCount][2]);
				aElement = document.createElement("a");
				aElement.setAttribute("href","javascript:showModels('"+(50+numModels)+"','1','"+indexArray[modelCount][1]+"','"+indexArray[modelCount][2]+"','0','0');");
				aElement.appendChild(linkText);
				listElement.appendChild(aElement);
			
				ulElement.appendChild(listElement);
				numModels++;
			}
			prevModel = indexArray[modelCount][2];
		}
	}	

	return ulElement;
}

function createModelElements(category,make){

	var categoryName = category;
	var categoryMake = make
	var ulElement = document.createElement("ul");
	ulElement.setAttribute("id","modelList");
	var numModels = 0;
	var prevModel = "";
	for (var ew=0;ew<indexArray.length;ew++){
		var modelCount = ew;
		if (indexArray[modelCount][1] == categoryName && indexArray[modelCount][2] == categoryMake){
			if (indexArray[modelCount][3]!=prevModel){

				var listElement = document.createElement("li");
				listElement.setAttribute("id",(100+numModels));
				linkText = document.createTextNode(indexArray[modelCount][3]);
				aElement = document.createElement("a");
				aElement.setAttribute("href","javascript:showYears('"+(100+numModels)+"','2','"+indexArray[modelCount][1]+"','"+indexArray[modelCount][2]+"','"+indexArray[modelCount][3]+"','0');");
				aElement.appendChild(linkText);
				listElement.appendChild(aElement);
			
				ulElement.appendChild(listElement);
				numModels++;
			}
			prevModel = indexArray[modelCount][3];
		}
	}	

	return ulElement;
}

function createYearElements(category,make,model){

	var categoryName = category;
	var categoryMake = make;
	var categoryModel = model;
	var ulElement = document.createElement("ul");
	ulElement.setAttribute("id","yearList");
	var numModels = 0;
	var prevModel = "";
	for (var ew=0;ew<indexArray.length;ew++){
		var modelCount = ew;
		if (indexArray[modelCount][1] == categoryName && indexArray[modelCount][2] == categoryMake && indexArray[modelCount][3] == categoryModel){
			if (indexArray[modelCount][4]!=prevModel){

				var listElement = document.createElement("li");
				listElement.setAttribute("id",(150+numModels));
				linkText = document.createTextNode(indexArray[modelCount][4]+"  ("+indexArray[modelCount][6]+"pics)");
				linkText = document.createTextNode(indexArray[modelCount][4]);
				aElement = document.createElement("a");
				aElement.setAttribute("href","javascript:garageCam1('"+(150+numModels)+"','"+indexArray[modelCount][0]+"');");
				aElement.appendChild(linkText);
				listElement.appendChild(aElement);
			
				ulElement.appendChild(listElement);
				numModels++;
			}
			prevModel = indexArray[modelCount][4];
		}
	}	

	return ulElement;
}

function removeMakeList(){
	var listItem = document.getElementById('garageCategory');

	try {
		var listHolderNode = document.getElementById("makeHolder");
		listItem.removeChild(listHolderNode);
	}catch (e){}
}

function removeModelList(){
	var listItem = document.getElementById('makeList');

	try {
		var listHolderNode = document.getElementById("modelHolder");
		listItem.removeChild(listHolderNode);
	}catch (e){}
}

function removeYearList(){
	var listItem = document.getElementById('modelList');

	try {
		var listHolderNode = document.getElementById("yearHolder");
		listItem.removeChild(listHolderNode);
	}catch (e){}
}



function garageCam1(something,modelLine){
	//clear center area
	clearCenterArea()
	//build DOM model

	//clear out the car details descriptors on top
	document.getElementById("viewingCategory").innerHTML = indexArray[modelLine][1];
	document.getElementById("viewingMake").innerHTML = indexArray[modelLine][2]+", "+indexArray[modelLine][3]+", "+indexArray[modelLine][4].substring(0,4);

	var imageViewBox = document.createElement("div"); //this is for the big image in the center
	imageViewBox.setAttribute("id","imageView");

	var ul2Box = document.createElement("ul");
	ul2Box.setAttribute("id","largePic");

	var lastInSeries = "";
	for (u=0;u<imageArray.length;u++){
		if (imageArray[u][0]== modelLine){
			if (imageArray[u][1]!="800x600"){
				lastInSeries = imageArray[u][1];
			}
		}
	}
	
	var addImage = createLargeImage(modelLine,lastInSeries);
	ul2Box.appendChild(addImage);

	imageViewBox.appendChild(ul2Box)

	//get images
	document.getElementById('centerArea').appendChild(imageViewBox);



	//go through the array to see what images there are

	var modelPicsBox = document.createElement("div"); //this is for the smaller thumbs
	modelPicsBox.setAttribute("id","modelPics");

	var ulBox = document.createElement("ul");
	ulBox.setAttribute("id","thumbPics");
	
	var nextInSeries = "";
	for (u=0;u<imageArray.length;u++){
		if (imageArray[u][0]== modelLine){
			if (imageArray[u][1]!="800x600"){
				nextInSeries = imageArray[u][1];
				var addImage = createListElement(modelLine,nextInSeries);
				ulBox.appendChild(addImage);
			}
		}
	}
	modelPicsBox.appendChild(ulBox)


	//get images
	document.getElementById('centerArea').appendChild(modelPicsBox);

	//send data to server
	var postData = "category="+indexArray[modelLine][1]+"&make="+indexArray[modelLine][2]+"&model="+indexArray[modelLine][3]+"&year="+indexArray[modelLine][4];
	postInfo("http://www.thejunctioninc.com/servlet/ajaxGarageMonitor",postData);

	
}



function clearCenterArea(){

	var spanArea = document.getElementById("centerArea");

	//see if the drop down is displaying
	try {
		var dropp = document.getElementById("picArea");
		if (dropp!=null){
			//remove all rows
			spanArea.removeChild(dropp);
		}
	} catch (e) {}

	try {
		var dropp = document.getElementById("modelPics");
		if (dropp!=null){
			//remove all rows
			spanArea.removeChild(dropp);
		}
	} catch (e) {}
	try {
		var dropp = document.getElementById("imageView");
		if (dropp!=null){
			//remove all rows
			spanArea.removeChild(dropp);
		}
	} catch (e) {}

	//clear out the car details descriptors on top
	document.getElementById("viewingCategory").innerHTML = "";
	document.getElementById("viewingMake").innerHTML = "";
	
	
}

function createListElement(masterCount,image){
	var listElement = document.createElement("li");
	var imageName = image;
	var imageLink = "../garageCam/"+indexArray[masterCount][1]+"/"+indexArray[masterCount][2]+"/"+indexArray[masterCount][3]+"/"+indexArray[masterCount][4]+"/"+imageName;

	image = document.createElement("img");
	image.setAttribute("src",imageLink);
	image.setAttribute("width","300");
	image.width = "300";
	image.setAttribute("height","225");
	image.height = "225";
	image.setAttribute("border","1");

	aElement = document.createElement("a");
	showLink = "javascript:showLargePic('"+masterCount+"','"+imageName+"');";
	aElement.setAttribute("href",showLink);
	aElement.appendChild(image);

	listElement.appendChild(aElement);
	
	return listElement;

}

function createLargeImage(masterCount,image){
	var listElement = document.createElement("li");
	var imageLink = "../garageCam/"+indexArray[masterCount][1]+"/"+indexArray[masterCount][2]+"/"+indexArray[masterCount][3]+"/"+indexArray[masterCount][4]+"/"+image;
	
	image = document.createElement("img");
	image.setAttribute("src",imageLink);
	image.setAttribute("width","640");
	image.width = "640";
	image.setAttribute("height","480");
	image.height = "480";
	image.setAttribute("border","2");

	listElement.appendChild(image);
	
	return listElement;

}

function showLargePic(masterCount,image){
	//clear large image in center
	var spanArea = document.getElementById("imageView");
	try {
		var dropp = document.getElementById("largePic");
		if (dropp!=null){
			//remove all rows
			spanArea.removeChild(dropp);
		}
	} catch (e) {}

	//now rebuild with new image
	var ul2Box = document.createElement("ul");
	ul2Box.setAttribute("id","largePic");
	
	var addImage = createLargeImage(masterCount,image);
	ul2Box.appendChild(addImage);

	//get images
	document.getElementById('imageView').appendChild(ul2Box);

}


function createMessageRequest(){
	if (window.ActiveXObject){
		xmlMessageHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest){
		xmlMessageHttp = new XMLHttpRequest();
    }
}

function postInfo(sURL,query){
	createMessageRequest();
	if (!xmlMessageHttp) return null;
	//change the page status
	
	try {
		xmlMessageHttp.open("POST", sURL, true);
		xmlMessageHttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
		xmlMessageHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlMessageHttp.onreadystatechange = function handleMessageStateChange()	{
			if (xmlMessageHttp.readyState == 4) {
				if (xmlMessageHttp.status == 200) {
					
				}
			}
		};
		xmlMessageHttp.send(query);
	} catch(z) 
	
	{alert(z);
	return false;}
}