/*
This is the javascript file for the ajax Garage Cam for The Junction, Inc. - KJP
Created July 15, 2009
*/

/* objectives:
stuff
*/

//globals
var xmlHttp;
var responseSet;
var sURL = "http://www.thejunctioninc.com/servlet/ajaxGaragePics";

var categoryName = "";
var categoryMake = "";
var categoryModel = "";
var categoryYear = "";

var selectedCategory = "";
var selectedMake = "";
var selectedModel = "";
var selectedYear = "";




function updateRequestLine(text){
	document.getElementById('requestLine').innerHTML = text;
}

function updateRequestStatus(text){
	document.getElementById('requestStatus').innerHTML = text;
}


function showMakes(folder,category) {
	var categoryName = category;
	
	updateRequestLine(categoryName);
	updateRequestStatus('Processing');
	
	//if they clicked on the same category then close the list

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

	if (listExists==null){
		removeMakeList();
		
		//this is where we initiate the method that uses ajax		
		var ulElement = createMakeElements(category);

		var liElement = document.createElement("li"); //this holds the model list ul
		liElement.setAttribute("id","makeHolder");
		liElement.style.backgroundColor="#CCC";
		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.style.backgroundColor="#CCC";		
			liElement.appendChild(ulElement);
			
			var listBase = document.getElementById('garageCategory');
			var currentSpot = folder-(-1);
			listBase.insertBefore(liElement,document.getElementById(currentSpot));
			
		}
		updateRequestLine('');
		updateRequestStatus('Standby');
	
	}
	
}

function showModels(folder,category,make) {
	var categoryName = category;
	var makeName = make;
		
	updateRequestLine(makeName);
	updateRequestStatus('Processing');
	
	//if they clicked on the same category then close the list

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

	if (listExists==null){
		removeModelList();

		//this is where we initiate the method that uses ajax		
		var ulElement = createModelElements(category,make);

		var liElement = document.createElement("li"); //this holds the model list ul
		liElement.setAttribute("id","modelHolder");
		liElement.style.backgroundColor="#BBB";		
		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.style.backgroundColor="#BBB";		
			liElement.appendChild(ulElement);
			
			var listBase = document.getElementById('makeList');
			var currentSpot = folder-(-1);
			listBase.insertBefore(liElement,document.getElementById(currentSpot));
		
		}
		updateRequestLine('');
		updateRequestStatus('Standby');
	
	}
	
}

function showYears(folder,category,make,model) {
	var categoryName = category;
	var makeName = make;
	var modelName = model;
	
	updateRequestLine(modelName);
	updateRequestStatus('Processing');
	
	//if they clicked on the same category then close the list

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

	if (listExists==null){
		removeYearList();

		//this is where we initiate the method that uses ajax		
		var ulElement = createYearElements(category,make,model);

		var liElement = document.createElement("li"); //this holds the year list ul
		liElement.setAttribute("id","yearHolder");
		liElement.style.backgroundColor="#AAA";		
		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.style.backgroundColor="#AAA";		
			liElement.appendChild(ulElement);
			
			var listBase = document.getElementById('modelList');
			var currentSpot = folder-(-1);
			listBase.insertBefore(liElement,document.getElementById(currentSpot));
		
		}
		updateRequestLine('');
		updateRequestStatus('Standby');
	
	}
	
}


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 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) {}

}



function createMakeElements(category){

	var categoryName = category;
	
	var ulElement = document.createElement("ul");
	ulElement.setAttribute("id","makeList");
	var numModels = 0;

	var sVars = "action=getMakeElements&user="+sess+"&category="+category;

	createRequest();
	count = 0;
	if (!xmlHttp) {
	 	return null;
	} else {
		try {
		xmlHttp.open("POST", sURL, true);
		xmlHttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function handleStateChange()	{
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {

					var errors = xmlHttp.responseXML.getElementsByTagName("numErrors")[0].firstChild.data;
					if (errors>0){
						//do something	
						updateRequestStatus('Response Error');
					} else {
						var numElements = xmlHttp.responseXML.getElementsByTagName("numItems")[0].firstChild.data;
						if (numElements>0){
							for (ew=0;ew<numElements;ew++){
								var itemName = xmlHttp.responseXML.getElementsByTagName("item")[ew].firstChild.data;
				
								var listElement = document.createElement("li");
								listElement.setAttribute("id",(50+numModels));
								linkText = document.createTextNode(itemName);
								aElement = document.createElement("a");
								aElement.setAttribute("href","javascript:showModels('"+(50+numModels)+"','"+categoryName+"','"+itemName+"');");
								aElement.appendChild(linkText);
								listElement.appendChild(aElement);
							
								ulElement.appendChild(listElement);
								numModels++;
				
							}
							updateRequestLine('');
							updateRequestStatus('Standby');
							
						} else {
							updateRequestStatus('No Results');
						}
					}

				}
			}
		};
		xmlHttp.send(sVars);
	} catch(z) {return false;}
	}

	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 = "";

	var sVars = "action=getModelElements&user="+sess+"&category="+categoryName+"&make="+categoryMake;

	createRequest();
	count = 0;
	if (!xmlHttp) {
	 	return null;
	} else {
		try {
		xmlHttp.open("POST", sURL, true);
		xmlHttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function handleStateChange()	{
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {

					var errors = xmlHttp.responseXML.getElementsByTagName("numErrors")[0].firstChild.data;
					if (errors>0){
						//do something	
						updateRequestStatus('Response Error');
					} else {
						var numElements = xmlHttp.responseXML.getElementsByTagName("numItems")[0].firstChild.data;
						if (numElements>0){
							for (ew=0;ew<numElements;ew++){
								var itemName = xmlHttp.responseXML.getElementsByTagName("item")[ew].firstChild.data;
				
								var listElement = document.createElement("li");
								listElement.setAttribute("id",(100+numModels));
								linkText = document.createTextNode(itemName);
								aElement = document.createElement("a");
								aElement.setAttribute("href","javascript:showYears('"+(100+numModels)+"','"+categoryName+"','"+categoryMake+"','"+itemName+"');");
								aElement.appendChild(linkText);
								listElement.appendChild(aElement);
							
								ulElement.appendChild(listElement);
								numModels++;
				
							}
							updateRequestLine('');
							updateRequestStatus('Standby');
						} else {
							updateRequestStatus('No Results');
						}
					}

				}
			}
		};
		xmlHttp.send(sVars);
	} catch(z) {return false;}
	}

	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 sVars = "action=getYearElements&user="+sess+"&category="+categoryName+"&make="+categoryMake+"&model="+categoryModel;

	createRequest();
	count = 0;
	if (!xmlHttp) {
	 	return null;
	} else {
		try {
		xmlHttp.open("POST", sURL, true);
		xmlHttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function handleStateChange()	{
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {

					var errors = xmlHttp.responseXML.getElementsByTagName("numErrors")[0].firstChild.data;
					if (errors>0){
						//do something	
						updateRequestStatus('Response Error');
					} else {
						var numElements = xmlHttp.responseXML.getElementsByTagName("numItems")[0].firstChild.data;
						if (numElements>0){
							for (ew=0;ew<numElements;ew++){
								var itemName = xmlHttp.responseXML.getElementsByTagName("item")[ew].firstChild.data;
				
								var listElement = document.createElement("li");
								listElement.setAttribute("id",(150+numModels));
								linkText = document.createTextNode(itemName);
								aElement = document.createElement("a");
								aElement.setAttribute("href","javascript:garageCam1('"+(150+numModels)+"','"+categoryName+"','"+categoryMake+"','"+categoryModel+"','"+itemName+"');");
								aElement.appendChild(linkText);
								listElement.appendChild(aElement);
							
								ulElement.appendChild(listElement);
								numModels++;
				
							}
							updateRequestLine('');
							updateRequestStatus('Standby');
						} else {
							updateRequestStatus('No Results');
						}
					}

				}
			}
		};
		xmlHttp.send(sVars);
	} catch(z) {return false;}
	}

	return ulElement;
}



function garageCam1(folder,category,make,model,year){
	//clear center area
	clearCenterArea();

	categoryName = category;
	categoryMake = make;
	categoryModel = model;
	categoryYear = year;

	//populate the car details descriptors on top
	document.getElementById("viewingCategory").innerHTML = categoryName;
	document.getElementById("viewingMake").innerHTML = categoryMake+", "+categoryModel+", "+categoryYear.substring(0,4);

	try {
		document.getElementById("emailRide").removeChild(document.getElementById("emailRideLink"));
	} catch (e) {}
	
	//make Email This Ride link
	var emailRideSpot = document.getElementById('emailRide');

	emailText = document.createTextNode("Email This Ride");
	aElement = document.createElement("a");
	aElement.setAttribute('id','emailRideLink');
	aElement.setAttribute("href","javascript:showSendTo();");
	aElement.appendChild(emailText);
	emailRideSpot.appendChild(aElement);
	
	selectedCategory = categoryName;
	selectedMake = categoryMake;
	selectedModel = categoryModel;
	selectedYear = categoryYear.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 modelPicsBox = document.createElement("div"); //this is for the smaller thumbs
	modelPicsBox.setAttribute("id","modelPics");

	var ulBox = document.createElement("ul");
	ulBox.setAttribute("id","thumbPics");

	var sVars = "action=getPicElements&user="+sess+"&category="+categoryName+"&make="+categoryMake+"&model="+categoryModel+"&year="+categoryYear;

	createRequest();
	count = 0;
	if (!xmlHttp) {
	 	return null;
	} else {
		try {
		xmlHttp.open("POST", sURL, true);
		xmlHttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function handleStateChange()	{
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {

					var errors = xmlHttp.responseXML.getElementsByTagName("numErrors")[0].firstChild.data;
					if (errors>0){
						//do something	
						updateRequestStatus('Response Error');
					} else {

						var numElements = xmlHttp.responseXML.getElementsByTagName("numItems")[0].firstChild.data;
						if (numElements>0){
							
							var lastPic = xmlHttp.responseXML.getElementsByTagName("lastItem")[0].firstChild.data;
							var listElement = document.createElement("li");
							var imageLink = "../garageCam/"+categoryName+"/"+categoryMake+"/"+categoryModel+"/"+categoryYear+"/"+lastPic;
							
							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);
							ul2Box.appendChild(listElement);						
							imageViewBox.appendChild(ul2Box)
						

							for (ew=0;ew<numElements;ew++){

								var itemName = xmlHttp.responseXML.getElementsByTagName("item")[ew].firstChild.data;

								var listElement = document.createElement("li");
								var imageName = itemName;
								var imageLink = "../garageCam/"+categoryName+"/"+categoryMake+"/"+categoryModel+"/"+categoryYear+"/"+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('"+categoryName+"','"+categoryMake+"','"+categoryModel+"','"+categoryYear+"','"+imageName+"');";
								aElement.setAttribute("href",showLink);
								aElement.appendChild(image);
							
								listElement.appendChild(aElement);
							
								ulBox.appendChild(listElement);


				
							}
							updateRequestLine('');
							updateRequestStatus('Standby');
						} else {
							updateRequestStatus('No Results');
						}
					}

				}
			}
		};
		xmlHttp.send(sVars);
	} catch(z) {return false;}
	}

	modelPicsBox.appendChild(ulBox)

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

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

	//send data to server
	var postData = "category="+categoryName+"&make="+categoryMake+"&model="+categoryModel+"&year="+categoryYear;
	postInfo("http://www.thejunctioninc.com/servlet/ajaxGarageMonitor",postData);

	
}




function showLargePic(category,make,model,year,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 listElement = document.createElement("li");

							var imageName = image;
							var imageBase = "../garageCam/"+category+"/"+make+"/"+model+"/"+year+"/";
							var imageLink = imageBase + imageName;

							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);

	ul2Box.appendChild(listElement);

	//get images
	document.getElementById('imageView').appendChild(ul2Box);
	
	itemLink = imageBase + "800x600/" + imageName;
	window.open(itemLink);
	
}


function createRequest(){
	if (window.ActiveXObject){
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	} else {
		window.alert("Your browser does not support the network connection necessary to complete this function.");	
	}
}


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;}
}