function clearSizes() {
	var el=document.getElementById("choose-size");
	el.options.length = 0;
	el.options[0] = new Option("S\xe9lectionner une dimension", "null");
	el.disabled = "true";
}

function clearPositions() {
	var el=document.getElementById("choose_position");
	el.options.length = 0;
	el.options[0] = new Option("S\xe9lectionner la position", "null");
	el.disabled = "true";
}

function getPositions()
{
	if (document.getElementById) 
	{
		var posX = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
		if(posX)
		{
			posX.onreadystatechange = function() 
			{
				if (posX.readyState==4 && posX.status==200) 
				{
					var elS=document.getElementById("choose-size");
					var el=document.getElementById("choose_position");
					el.disabled = true;
					var arr = eval(posX.responseText);
					if(arr) 
					{
						el.options[0] = new Option('S\xe9lectionner la position','null');
						for(i=0; i<arr.length; i++) 
						{
							el.options[i+1] = new Option(arr[i].name,arr[i].code);
						}
						el.disabled = "";
						elS.disabled = true;
					}
				}
			}
			var vehType = document.getElementById("choose_application").value;
			var chooseapp = document.getElementById("choose_application");
	
			var el = document.getElementById("choose_position");
			el.options.length = 0;		
			if(chooseapp.selectedIndex == 0) {			
				el.options[0] = new Option("S\xe9lectionner la position", "null");
			} else {
				el.options[0] = new Option("LOADING ...","null");
			}
			// Context name must be defined in the calling JSP!!!
			var req = "/"+contextName+"/sizesByTypeAndVeh.do?veh_type="+vehType;
	
			posX.open("GET", req, true);
			posX.send(null);
		}
	}

}
function getSizes() {
	if (document.getElementById) {
		var sizeX	=(window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
		if (sizeX) {
			sizeX.onreadystatechange = function() {
				if (sizeX.readyState==4 && sizeX.status==200) {
					var el=document.getElementById("choose-size");
					el.disabled = true;
					var arr = eval(sizeX.responseText);
					if(arr) {
						el.options[0] = new Option('S\xe9lectionner une dimension','null');
						for(i=0; i<arr.length; i++) {
							el.options[i+1] = new Option(arr[i],arr[i]);
						}
					el.disabled = "";
					}
				}
			}
		}
		var vehType = document.getElementById("choose_application").value;
		var chooseapp = document.getElementById("choose_application");

		var position = document.getElementById("choose_position").value;
		var chooseposition = document.getElementById("choose_position");
		
		var el = document.getElementById("choose-size");
		el.options.length = 0;		
		if(chooseapp.selectedIndex == 0 || chooseposition.selectedIndex == 0) {			
			el.options[0] = new Option("S\xe9lectionner une dimension", "null");
			clearSizes();
			return;
		} else {
			el.options[0] = new Option("LOADING ...","null");
		}

		// Context name must be defined in the calling JSP!!!
		var req = "/"+contextName+"/sizesByTypeAndVeh.do?position="+position+"&veh_type="+vehType;

		sizeX.open("GET", req, true);
		sizeX.send(null);
	}
}

function wireChangeEvents() {
	var elms = new Array("choose_position");
	Event.addEvent(elms,"change", getSizes);
	var elms = new Array("choose_application");
	Event.addEvent(elms,"change", getPositions);
	
	for(i=0;i<elms.length;i++) {
		document.getElementById(elms[i]).selectedIndex = 0;
	}
}

Event.addEvent(window,"load", clearSizes);
Event.addEvent(window,"load", clearPositions);
Event.addEvent(window,"load", wireChangeEvents);


var bubbleMagic = new function() {
	this.init = function() {
		//find bubble_anchors on the page and wire them up
		var anchors = document.getElementsByTagName("a");
		var match = /bubble_anchor/;
		for(var i=0;i<anchors.length;i++) {
			if(match.test(anchors[i].className)) {
				anchors[i].onclick = bubbleMagic.bubble;
			}
		}
	}
	
	this.bubble = function() {
		bubbleMagic.destroy();
		
		//get the title of the img inside "this"
		var image = this.getElementsByTagName("img");
		image = image[0];
		var bubbleContent = image.title;
		var bubbleTitle = this.title;

		//build a bubble 
		
		//a bubble is just a DIV with an h2 and a paragraph in it
		//pretty simple
		var bubbleContainer = document.createElement("div");
		bubbleContainer.className = "selector_bubble";
		bubbleContainer.id = bubbleTitle;
		bubbleContainer.style.display="none";
		
		var title = document.createElement("h2");
		title.innerHTML = bubbleTitle;
		title.onclick = bubbleMagic.destroy;
		
		bubbleContainer.appendChild(title);
		
		var content = document.createElement("p");
		content.innerHTML = bubbleContent;
		
		bubbleContainer.appendChild(content);
		
		var topDoc = document.getElementById("main-content");
		topDoc.appendChild(bubbleContainer);
		topDoc.style.position = "relative";
		
		Effect.Appear(bubbleContainer, {duration:0.3});

		
	}
	
	this.destroy = function() {
		//destroy everything!!!
		var bubbles = document.getElementsByTagName("div");
		var match = /selector_bubble/;
		for(var i=0;i<bubbles.length;i++) {
			if(match.test(bubbles[i].className)) {
				bubbles[i].parentNode.removeChild(bubbles[i]);
			}
		}
	}
}

/* TIRE SELECTOR VALIDATION */
var selectorForm = new function() {	
	this.init = function() {
		//hide the error bubble
//		Event.addEvent("tire-selector-ok","click",selectorForm.submit);
		var errBubble = document.getElementById("selector_bubble");
		errBubble.style.display="none";
	}
	
	this.hideBubble = function() {
		var errBubble = document.getElementById("selector_bubble");
		errBubble.style.display="none";
		errBubble.innerHTML = "";
	}
	
	this.submit = function() {
		//nclick="document.forms[0].submit()"
		var theForm = document.getElementById("tire_selector_form");
		//make sure none of the selects in the form are set to index 0
		var selects = theForm.getElementsByTagName("select");
		var errorArr = new Array();
		var errBubble = document.getElementById("selector_bubble");
		
		//reset the error
		errBubble.innerHTML = "";
		
		for(var i=0;i<selects.length;i++) { 
			if(selects[i].selectedIndex == 0) {
				errorArr[errorArr.length] = selects[i].title;
				selects[i].onclick = selectorForm.hideBubble;
			}
		}
		
		if(errorArr.length>0) {
			var errList = document.createElement("ul");
			for(i=0;i<errorArr.length;i++){
				var errItem = document.createElement("li");
				errItem.innerHTML = errorArr[i];
				errList.appendChild(errItem);				
			}
			
			errBubble.appendChild(errList);
			Effect.Appear(errBubble, {duration:0.5});
			return false;
			
		} else {
			theForm.submit();
		}

	}
}
Event.addEvent(window,"load",selectorForm.init)