var dropdown =  { "id1" :	{	"Category" : "Set-up",
														"Options" : { "id1_1" : "Cannot Install 3DVIA Shape",
																					"id1_2" : "Download of 3DVIA Shape Failed",
																					"id1_3" : "Other"
																				}
													},
									"id2" : {	"Category" : "Login on 3DVIA Shape",
														"Options" : {	"id2_1" : "Cannot Login to through 3DVIA Shape Panel",
																					"id2_2" : "Login Failed",
																					"id2_3" : {	"Category" : "Cannot Launch 3DVIA Shape",
																											"Options" : {	"id2_3_1" : "Launched from Desktop",
																																		"id2_3_2" : "Launched from My 3DVIA Account"
																																	}
																										},
																					"id2_4" : "I Do Not Access the Registration Form",
																					"id2_5" : "Other"					
																				}
													},
									"id3"	: {	"Category" : "Modeling",
														"Options" : {	"id3_1" : {	"Category" : "Cannot Draw on a Surface",
																											"Options" :	{	"id_3_1_1" : "To Draw Wireframe in 3D",
																																		"id_3_1_2" : "To Draw Rectangle",
																																		"id_3_1_3" : "To Draw Circle",
																																		"id_3_1_4" : "To Draw Arcs"
																																	}
																										},
																					"id3_2" : "Duplicated",
																					"id3_3" : "Cannot Create a Volume",
																					"id3_4" : "Cannot Select Direction on a Push/Pull Function",
																					"id3_5" : "Cannot See Dimensions of My Model",
																					"id3_6" : "Moving, Resizing or Stretching Cannot Be Done in a Given Direction",
																					"id3_7" : "Other"
																				}
													},
									"id4" : {	"Category" : "Visualization",
														"Options" :	{	"id4_1" : "Texture Cannot Be Zoomed In/Out",
																					"id4_2" : "Rendering Is Not as Expected",
																					"id4_3" : "Cannot Apply a Texture on a Certain Shape",
																					"id4_4" : "Cannot Add a New Texture",
																					"id4_5" : "Other"
																				}
													},
									"id5"	: {	"Category" : "Performance",
														"Options" : {	"id5_1" : "Visualization Is Not as Expected",
																					"id5_2" : "Cannot Use Due to Performance Issue",
																					"id5_3" : "Other"
																				}
													},
									"id6" : {	"Category" : "Publish/Remix",
														"Options" : {	"id6_1" : "Error as No Account on 3dvia.com",
																					"id6_2" : "Does Not Allow to Publish Models",
																					"id6_3" : "Cannot Access Model on 3dvia.com",
																					"id6_4" : "Other"
																				}
													},
									"id7" : {	"Category" : "Website Error",
														"Options" : {	"id7_1" : "ActiveX and Scripting Errors",
																					"id7_2" : "\"Error on Page\" Message",
																					"id7_3" : "Page Loads Slowly",
																					"id7_4" : "Page Won\'t Load",
																					"id7_5" : {	"Category" : "My 3DVIA Access",
																											"Options" : {	"id7_1_1" : "Cannot Remember My Password",
																																		"id7_1_2" : "Login Failed",
																																		"id7_1_3" : "Mail for Registration Was Not Received",
																																		"id7_1_4" : "Other"
																																	}
																										},
																					"id7_6" : "Cannot Access to Help",
																					"id7_7" : "Cannot Edit or Remix Model from 3dvia.com",
																					"id7_8" : "Other"
																				}
													}
								}

function fillForm1(selectdata){
	var select1 = new Element('select',{name:'mail[cat1]',id:'mail[cat1]'});																		// Create Select Box 1
	$('field1').down('div.input-container').insert({'top':select1});																						// Insert Select Box 1 onto page
	var option0 = new Element('option',{value:'0'});																														// Create Blank Option for SB1
	$('mail[cat1]').insert(option0);																																						// Insert Blank Option into SB1
	var selectfield;																																														// Declare selectfield for option insertion into SB1
	for(var key in selectdata){																																									// Loop through Primary JSON branch
		if(key == selectedId1)
			selectfield = new Element('option',{value:key,selected:'selected'}).update(selectdata[key].Category);													// Create selected option for SB1
		else
			selectfield = new Element('option',{value:key}).update(selectdata[key].Category);													// Create option for SB1
		$('mail[cat1]').insert(selectfield);																																			// Insert option for SB1
	}
	Event.observe('mail[cat1]','change',function(){																															// Create Observe for SB1 change
		if($F('mail[cat1]') != 0) {																																									// If option IS NOT blank
			fillForm2(dropdown);																																												// Fill SB2
		} else {																																																		// If option IS blank
			Effect.Fade('field2');																																											// Fade Field 2
		}
	});
}

function fillForm2(selectdata){
	Effect.Appear('field2');																																										// Show Field 2
	var selectkey = $F('mail[cat1]');
	var select2 = new Element('select',{name:'mail[cat2]',id:'mail[cat2]'});																		// Create new Select Box 2
	if($('mail[cat2]'))																																													// If SB2 already exists
		$('mail[cat2]').update();																																										// Update it with new Select Box 2
	else																																																				// If SB2 DOES NOT exist
		$('field2').down('div.input-container').insert({'top':select2});																						// Insert new SB2 onto page
	var option0 = new Element('option',{value:''});																															// Create Blank Option for SB2
	$('mail[cat2]').insert(option0);																																						// Insert Blank Option for SB2
	var selectfield;																																														// Declare selectfield for option insertion into SB2
	for(var key in selectdata[selectkey].Options){																															// Loop through Secondary JSON branch
		if(selectdata[selectkey].Options[key].Category){																														// If the Second Branch is 3 Deep
			if(key == selectedId2)
				selectfield = new Element('option',{value:key,selected:'selected'}).update(selectdata[selectkey].Options[key].Category);	// Choose the 3 Deep Category Name, Selected
			else
				selectfield = new Element('option',{value:key}).update(selectdata[selectkey].Options[key].Category);											// Choose the 3 Deep Category Name
			$('mail[cat2]').insert(selectfield);																																				// Insert option for SB2
		}
		else{
			if(key == selectedId2)																																											// If the Second Branch is 2 Deep
				selectfield = new Element('option',{value:key,selected:'selected'}).update(selectdata[selectkey].Options[key]);						// Choose the 2 Deep Option, Selected
			else
				selectfield = new Element('option',{value:key}).update(selectdata[selectkey].Options[key]);																// Choose the 2 Deep Option
			$('mail[cat2]').insert(selectfield);																																											// Insert option for SB2
		}
	}

	if(selectkey == 'id3')
		$('field2').addClassName('field-long');
	else
		$('field2').removeClassName('field-long');

	Event.observe('mail[cat2]','change',function(){																															// Create Observe for SB2 change
		if($F('mail[cat2]') != 0) {																																									// If option IS NOT blank
			fillForm3(dropdown);																																												// Fill SB3
		} else {																																																		// If option IS blank
			Effect.Fade('field3');	
			if(document.getElementById("mail[cat2]") != undefined)
				document.getElementById("mail[cat2]").value = 0;																																										// Fade Field 3
		}
		if(document.getElementById("mail[cat3]") != undefined)
			document.getElementById("mail[cat3]").value = 0;
	});
	Event.observe('mail[cat1]','change',function(){																															// Create Observe for SB1 change
		Effect.Fade('field3');																																												// Fade Field 3
		if(document.getElementById("mail[cat3]") != undefined)
			document.getElementById("mail[cat3]").value = 0;
	});
}

function fillForm3(selectdata){
	var selectkey1 = $F('mail[cat1]');																																						// Declare first category ID
	var selectkey2 = $F('mail[cat2]');																																						// Declare second category ID
	if(selectdata[selectkey1].Options[selectkey2].Category){																											// If the cats selected go 3 Deep
		Effect.Appear('field3');																																											// Show Field 3
		var select3 = new Element('select',{name:'mail[cat3]',id:'mail[cat3]'});																			// Create new Select Box 3
		if($('mail[cat3]'))																																														// If SB3 already exists
			$('mail[cat3]').update();																																											// Update it with new Select Box 3
		else																																																					// If SB3 DOES NOT exist
			$('field3').down('div.input-container').insert({'top':select3});																							// Insert new SB3 onto page
		var option0 = new Element('option',{value:''});																																// Create Blank Option for SB3
		$('mail[cat3]').insert(option0);																																							// Insert Blank Option for SB3
		var selectfield;																																															// Declare selectfield for option insertion into SB3
		for(var key in selectdata[selectkey1].Options[selectkey2].Options){																						// Loop through Tertiary JSON branch
			if(key == selectedId3)
				selectfield = new Element('option',{value:key,selected:'selected'}).update(selectdata[selectkey1].Options[selectkey2].Options[key]);	// Choose the 3 Deep Options
			else
				selectfield = new Element('option',{value:key}).update(selectdata[selectkey1].Options[selectkey2].Options[key]);	// Choose the 3 Deep Options
			$('mail[cat3]').insert(selectfield);																																							// Insert option for SB3
		}
	}
	else																																																						// If the cats don't go 3 Deep
		Effect.Fade('field3');																																													// Fade Field 3
}

function getIdString1(selectdata,supportId){
	if(selectdata[supportId].Category != null){																																			// If the category for the passed ID exists
		var catstring1 = new Element('input',{type:'hidden',name:'mail[cat1]',id:'mail[cat1]',value:selectdata[supportId].Category});		// Create a hidden field for the cat name
		$('support_form_feedback').insert(catstring1);																																									// Insert the hidden field
	}
}

function getIdString2(selectdata,supportId2,supportId1){
	if(selectdata[supportId1].Options[supportId2].Category != null){																								// If the category for the passed IDs exists
		var catstring2 = new Element('input',{type:'hidden',name:'mail[cat2]',id:'mail[cat2]',value:selectdata[supportId1].Options[supportId2].Category});	//Create hidden field for the cat name
		$('support_form_feedback').insert(catstring2);																																																			// Insert the hidden field
	}
	else{																																																						// If the category doesn't exist for the passed ID
		var catstring2 = new Element('input',{type:'hidden',name:'mail[cat2]',id:'mail[cat2]',value:selectdata[supportId1].Options[supportId2]});		//Create the hidden field for the option
		$('support_form_feedback').insert(catstring2);																																															// Insert the hidden field
	}
}

function getIdString3(selectdata,supportId3,supportId2,supportId1){
	if(selectdata[supportId1].Options[supportId2].Options[supportId3] != undefined){																// If the option exists for the passed IDs
		var catstring3 = new Element('input',{type:'hidden',name:'mail[cat3]',id:'mail[cat3]',value:selectdata[supportId1].Options[supportId2].Options[supportId3]});		//Create the hidden field for the option
		$('support_form_feedback').insert(catstring3);																																																									// Insert the hidden field
	}
}

Event.observe(window, 'load', function() {																																													// When the window loads
	Event.observe('support_form_feedback','submit',function(){																																					// When the form is submitted
		var selValue1 = document.getElementById("mail[cat1]").options[document.getElementById("mail[cat1]").selectedIndex].value;						// Declare the category id
		if(document.getElementById("mail[cat2]").value != undefined && document.getElementById("mail[cat2]").value != 0)																																							// If it exists
			var selValue2 = document.getElementById("mail[cat2]").options[document.getElementById("mail[cat2]").selectedIndex].value;						// Declare the sub-cat id
		if(document.getElementById("mail[cat3]") != undefined) {
			if(document.getElementById("mail[cat3]").value != undefined && document.getElementById("mail[cat3]").value != 0)																																							// If it exists
			{
				var selValue3 = document.getElementById("mail[cat3]").options[document.getElementById("mail[cat3]").selectedIndex].value;						// Declare the issue id
			}
		}
		if(selValue1 != 0){																																																								// If a cat was chosen
			getIdString1(dropdown,selValue1);																																					// Creates hidden field for cat
			var catId1 = new Element('input',{type:'hidden',name:'catId1',id:'catId1',value:selValue1});							// Creates hidden field for cat[id]
			$('support_form_feedback').insert(catId1);																																// Inserts hidden field for [cat]id
		}
		if(selValue2){																																														// If a sub-cat id was declared
			getIdString2(dropdown,selValue2,selValue1);																																// Creates hidden field for sub-cat
			var catId2 = new Element('input',{type:'hidden',name:'catId2',id:'catId2',value:selValue2});							// Creates hidden field for sub-cat[id]
			$('support_form_feedback').insert(catId2);																																// Inserts hidden field for sub-cat[id]
		}
		if(selValue3){																																														// If an issue id was declared
			getIdString3(dropdown,selValue3,selValue2,selValue1);																											// Creates hidden field for issues
			var catId3 = new Element('input',{type:'hidden',name:'catId3',id:'catId3',value:selValue3});							// Creates hidden field for issue[id]
			$('support_form_feedback').insert(catId3);																																// Inserts hidden field for issue[id]
		}
	});
});

document.observe("dom:loaded",function(){
	fillForm1(dropdown);
	if(selectedId1)
		fillForm2(dropdown);
	if(selectedId2)
		fillForm3(dropdown);
});