menuObject = {

		// User defined settings

		// The width of the left menuside of the table
	leftWidth : "160",
		// The height of a closed element
	elementCHeight : "5",
		// The height of a opened element
	elementOHeight : "20",
		// The count of the read in elements
	elementInit : Number(1),


	scriptVersion : "2.1",
		// Start elementcounter
	elementCount : 0,
		// Start elementList
	elementList : new Array(), // [x]="elementnr_rownr", []="0_0", "1_1", "2_2"
		// Clear space for inputXml name
	inputXml : "",

	initMenu : function ( dir, inputXml )
	{
		if ( dir == "services" )
		{
			var xmlFile = baseUrl+"services/config/formulieren/"+inputXml+".xml";
		} else
		{
			var xmlFile = baseUrl+"web/config/formulieren/"+inputXml+".xml";
		}

		xmlFile = xmlFile+"?"+Date();
		this.importXml(xmlFile);
	},
	processXml : function ( )
	{
	    for ( ei=0; ei<Number(this.elementInit); ei++ )
		{
			this.elementCount++;
			if ( !this.elementList.length )
			{
				this.elementList.push("0_0");
			}
			else
			{
				this.elementList.push(ei+"_"+ei);
			}
			this.addElement(ei, ei);
		}
		this.openRow("0");
	},
	addElement : function ( elementNr, rowNr)
	{

		newElement = document.getElementById('myMenu').insertRow(rowNr)
		newElement.height = this.elementCHeight
		firstCell = newElement.insertCell(0)
		secondCell = newElement.insertCell(1)
		firstCell.align = "left"
		firstCell.width = this.leftWidth
		firstCell.vAlign = "top"
		firstCell.bgColor="#F8F8F8"
		secondCell.vAlign = "top"

		firstCell.innerHTML = this.writefirstElement(elementNr)
		secondCell.innerHTML = this.writesecondElement(elementNr)

		this.disableDiv(elementNr)

		this.openRow(elementNr);

	},
	writefirstElement : function ( elementNr )
	{
		firstCellcontent = '<a name="Elementmarker'+elementNr+'"></a><font class="mainElement">Element '+elementNr+'</font></font><br />'
		if ( Number(elementNr) == 0 )
		{
			firstCellcontent = firstCellcontent + "Formulier"
		} else
		{
			firstCellcontent = firstCellcontent + '<a href="#" onClick="menuObject.insertElement('+elementNr+'); return false;">Insert</a>'
			firstCellcontent = firstCellcontent + ' <a href="#" onClick="menuObject.removeElement('+elementNr+'); return false;">Remove</a>'
		}
		firstCellcontent = firstCellcontent + ' <a href="#" onClick="menuObject.openRow('+elementNr+'); return false;">Open</a>'
		firstCellcontent = firstCellcontent + ' <a href="#" onClick="menuObject.closeRow('+elementNr+'); return false;">Close</a>'
		//firstCellcontent = firstCellcontent + ' <br /><b>Element '+elementNr+'</b></font><br /><br />'
		return firstCellcontent
	},
	writesecondElement : function ( elementNr )
	{
		divName = new String("element"+elementNr)
		secondCellcontent = '<div id="'+divName+'" STYLE="top:0;">'
		if ( Number(elementNr) == 0 )
		{
			secondCellcontent = secondCellcontent+this.writegeneralForm()
		} else
		{
			secondCellcontent = secondCellcontent+this.writeelementForm( elementNr )
		}
		secondCellcontent = secondCellcontent+"</div>"
		return secondCellcontent
	},
	writegeneralForm : function ()
	{
		//generalForm = 'Algemene elementen'
		generalForm = '<table id="generalform" border="0" width="500" class="formcreator">'
		generalFormwidth = "200"
			// formname, leftwidth and rightwidth OK
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'"><b>Formuliernaam</b> (formname)</td><td><input type="text" name="formname" size="50" value="'+this.getContent(this.xmlDoc, "formname")+'"></td></tr>'
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">Linkerbreedte (leftwidth)</td><td><input type="text" name="leftwidth" size="25" value="'+this.getContent(this.xmlDoc, "leftwidth")+'"></td></tr>'
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">Rechterbreedte (rightwidth)</td><td><input type="text" name="rightwidth" size="25" value="'+this.getContent(this.xmlDoc, "rightwidth")+'"></td></tr>'
			// formtype select OK, ONE TYPE ONLY ATM
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">Type formulier (formtype)</td><td><select size="1" name="formtype">'
		generalForm = generalForm+'<option value="multipart/form-data">multipart/form-data</option></select></td></tr>'
			// targeturi OK
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">Doel adres (targeturi)</td><td><input type="text" name="targeturi" size="25" value="'+this.getContent(this.xmlDoc, "targeturi")+'"></td></tr>'
			// formmethod select OK
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">De methode (formmethod)</td><td><select size="1" name="formmethod">'
		generalForm = generalForm+'<option value="POST"'
		if ( this.getContent(this.xmlDoc, "formethod") == "POST" )
		{
			generalForm = generalForm+' selected'
		}
		generalForm = generalForm+'>POST</option>'
		generalForm = generalForm+'<option value="GET"'
		if ( this.getContent(this.xmlDoc, "formmethod") == "GET" )
		{
			generalForm = generalForm+' selected'
		}
		generalForm = generalForm+'>GET</option>'
		generalForm = generalForm+'</select></td></tr>'

			//layout select OK
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">Type opmaak (layout)</td><td><select size="1" name="layout">'
		layouts = new Array("1", "2", "3", "4", "5", "6")
		layoutsDescr = new Array("Aanvullen", "", "", "", "", "")
		for ( l=0; l<Number(layouts.length); l++ )
		{
			generalForm = generalForm+'<option value="'+layouts[l]+'" '
			if ( this.getContent(this.xmlDoc, "layout") == layouts[l] )
			{
				generalForm = generalForm+' selected'
			}
			generalForm = generalForm+'>'+layouts[l]+" ("+layoutsDescr[l]+")"+'</option>'
		}
		generalForm = generalForm+'</select></td></tr>'

			// tableborder OK
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">Tabelrand (tableborder)</td><td><select size="1" name="tableborder">'
		generalForm = generalForm+'<option value="no"'
		if ( this.getContent(this.xmlDoc, "tableborder") == "no" )
		{
			generalForm = generalForm+' selected'
		}
		generalForm = generalForm+'>no</option>'
		generalForm = generalForm+'<option value="yes"'
		if ( this.getContent(this.xmlDoc, "tableborder") == "yes" )
		{
			generalForm = generalForm+' selected'
		}
		generalForm = generalForm+'>yes</option>'
		generalForm = generalForm+'</select></td></tr>'
			// submit and clear OK
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">Invoerknop (submittext)</td><td><input type="text" name="submittext" size="50" value="'+this.getContent(this.xmlDoc, "submittext")+'"></td></tr>'
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">Herstelknop (cleartext)</td><td><input type="text" name="cleartext" size="50" value="'+this.getContent(this.xmlDoc, "cleartext")+'"></td></tr><tr><td>'
			// sqlTable OK
		generalForm = generalForm+'<tr><td width="'+generalFormwidth+'">sqlTable creeeren (sqltable)</td><td><select size="1" name="sqltable">'
		generalForm = generalForm+'<option value="yes"'
		if ( this.getContent(this.xmlDoc, "sqltable") == "yes" )
		{
			generalForm = generalForm+' selected'
		}
		generalForm = generalForm+'>yes</option>'
		generalForm = generalForm+'<option value="no"'
		if ( this.getContent(this.xmlDoc, "sqltable") == "no" )
		{
			generalForm = generalForm+' selected'
		}
		generalForm = generalForm+'>no</option>'
		generalForm = generalForm+'</select></td></tr>'
		generalForm = generalForm+'</table>'
		return generalForm
	},
	writetypepropsExpl : function ( )
	{
		var Expl = 'Invul voorbeelden:'
		Expl = Expl+'\ntext:width=10,maxchars=10'
		Expl = Expl+'\ntextarea:width=10,height=2'
		Expl = Expl+'\nselect:a,b,c'
		Expl = Expl+'\npass:passtype=protected,width=10,maxchars=10'
		Expl = Expl+'\npass:passtype=encrypted,width=10,maxchars=10'
		return Expl
	},
	writeelementForm : function ( elementNr )
	{
		if ( Number(elementNr) != 0 && Number(elementNr) <= Number(this.elementInit-1) )
		{
			tmpelementXml = this.xmlDoc.getElementsByTagName("element").item(Number(elementNr-1))
			label = this.getContent(tmpelementXml, "label")
			sqldatatype = this.getContent(tmpelementXml, "sqldatatype")
			sqldatalength = this.getContent(tmpelementXml, "sqldatalength")
			displayname = this.getContent(tmpelementXml, "displayname")
			requiredtype = this.getContent(tmpelementXml, "requiredtype")
			explanation = this.getContent(tmpelementXml, "explanation")
			typeprops = this.getContent(tmpelementXml, "typeprops")
			editable = this.getContent(tmpelementXml, "editable")
			fieldtype = this.getContent(tmpelementXml, "fieldtype")
			required = this.getContent(tmpelementXml, "required")
		} else
		{
			label = ""
			sqldatatype = ""
			sqldatalength = ""
			displayname = ""
			requiredtype = ""
			explanation = ""
			typeprops = ""
			editable = ""
			fieldtype = ""
			required = ""

			openMe = "yes"
		}

		elementForm = '<table id="elementform" border="0" width="500" class="formcreator">'
		elementFormwidth = "200"

	//columnname => "aanhef", displayname => "Aanhef", required => "1", requiredtype => "",
	//editable => "1", explanation => "", fieldtype => "select",
	//typeprops => array(options => array("Dhr.", "Mevr."))),

	// 1 Label
		elementForm = elementForm+'<tr><td width="'+elementFormwidth+'"><b>Label</b> (label) '
		elementForm = elementForm+'<a href="#" onClick="document.getElementById(\'propertiesScreen'+elementNr+'\').style.display=\'block\'; return false;">Properties</a>'
		elementForm = elementForm+'</td><td><input type="text" name="label" size="50" value="'+label+'"></td></tr>'

		elementForm = elementForm+'</table>'
		elementForm = elementForm+'<div id="propertiesScreen'+elementNr+'" style="background:#F8F8F8; display:none;">'
		elementForm = elementForm+'<table id="elementform" border="0" width="500" class="formcreator">'

	// 2 Displayname
		elementForm = elementForm+'<tr><td width="'+elementFormwidth+'">Getoonde naam (displayname)</td><td><input type="text" name="displayname" size="50" value="'+displayname+'"></td></tr>'

	// 3 Required
		reqTypes = new Array("no", "yes")
		elementForm = elementForm+'<tr><td>Verplichting (required)</td><td><select size="1" name="required">'
		for ( rqt=0; rqt<Number(reqTypes.length); rqt++ )
		{
			elementForm = elementForm+'<option value="'+reqTypes[rqt]+'" '
			if ( required == reqTypes[rqt] )
			{
				elementForm = elementForm+' selected'
			}
			elementForm = elementForm+'>'+reqTypes[rqt]+'</option>'
		}
		elementForm = elementForm+'</select></td></tr>'
	// 4 Requiredtype
		elementForm = elementForm+'<tr><td width="'+elementFormwidth+'">Geldige invoer (requiredtype)</td><td><select size="1" name="requiredtype">'
		validTypes = new Array("", "email", "postcode-nl", "postcode-be", "jpeg")
		for ( vt=0; vt<Number(validTypes.length); vt++ )
		{
			elementForm = elementForm+'<option value="'+validTypes[vt]+'" '
			if ( requiredtype == validTypes[vt] )
			{
				elementForm = elementForm+' selected'
			}
			elementForm = elementForm+'>'+validTypes[vt]+'</option>'
		}
		elementForm = elementForm+'</select></td></tr>'
	// 5 Editable
		elementForm = elementForm+'<tr><td>Open voor wijziging (editable)</td><td><select size="1" name="editable"><option value="yes">yes</option><option value="no">no</option></select></td></tr>'
	// 6 Explanation
		elementForm = elementForm+'<tr><td width="'+elementFormwidth+'" valign="top">Uitleg (explanation)</td><td><textarea rows="2" name="explanation" rows="5" cols="50">'+explanation+'</textarea></td></tr>'
	// 7 FieldType
		elementForm = elementForm+'<tr><td width="'+elementFormwidth+'">Formulier veld (fieldtype)</td><td><select size="1" name="fieldtype">'
		fieldTypes = new Array("text", "textarea", "select", "date", "checkbox", "time", "pass")
		for ( ft=0; ft<Number(fieldTypes.length); ft++ )
		{
			elementForm = elementForm+'<option value="'+fieldTypes[ft]+'" '
			if ( fieldtype == fieldTypes[ft] )
			{
				elementForm = elementForm+' selected'
			}
			elementForm = elementForm+'>'+fieldTypes[ft]+'</option>'
		}
		elementForm = elementForm+'</select></td></tr>'
	// 8 Typeprops
		elementForm = elementForm+'<tr><td width="'+elementFormwidth+'" valign="top"><a href="#" title="'+this.writetypepropsExpl()+'">Eigenschappen (typeprops)</a>'
		elementForm = elementForm+'<td><textarea rows="2" name="typeprops" rows="5" cols="50">'+typeprops+'</textarea></td></tr>'
	// 9 SqlDatatype
		elementForm = elementForm+'<tr><td width="'+elementFormwidth+'">MySQL datatype (sqldatatype)</td><td><select size="1" name="sqldatatype">'
		sqlcolumnTypes = new Array("bigint", "bit", "blob", "bool", "boolean", "char", "date", "datetime", "decimal", "duoble", "enum", "float", "int", "numeric", "text", "time", "timestamp", "varchar", "year")
		for ( ct=0; ct<Number(sqlcolumnTypes.length); ct++ )
		{
			elementForm = elementForm+'<option value="'+sqlcolumnTypes[ct]+'" '
			if ( sqldatatype == sqlcolumnTypes[ct] )
			{
				elementForm = elementForm+' selected'
			}
			elementForm = elementForm+'>'+sqlcolumnTypes[ct]+'</option>'
		}
		elementForm = elementForm+'</select></td></tr>'
	// 10 SqlDatalength
		elementForm = elementForm+'<tr><td width="'+elementFormwidth+'">MySQL lengte (sqldatalength)</td><td><input type="text" name="sqldatalength" size="25" value="'+sqldatalength+'"></td></tr>'
	// Close the table
		elementForm = elementForm+'</table></div>'
	// Return the form
		return elementForm
	},
	insertElement : function ( elementNr )
	{
		order = this.getorderofElement(elementNr)
		if ( !order )
		{
			order = this.elementList.length
		}
		this.addElement( this.elementCount, order)
		this.incrementRows(order)
		this.elementList.push(this.elementCount+"_"+order)
		this.elementCount++
	},
	removeElement : function ( elementNr )
	{
		if ( this.showConfirm() )
		{
			order = this.getorderofElement(elementNr)
			remElement = document.getElementById('myMenu').deleteRow(order)
			this.decrementRows(order)
		}
	},
	getorderofElement : function ( elementNr )
	{
		rowNr = ''
		for ( e=0; e<Number(this.elementList.length); e++ )
		{
			tmpElement = this.elementList[e]
			tmpElement = tmpElement.split("_")
			if ( Number(elementNr) ==  Number(tmpElement[0]) )
			{
				rowNr = tmpElement[1]
			}
		}
		return rowNr
	},
	incrementRows : function ( startRowNr )
	{
		for ( el=0; el<Number(this.elementList.length); el++ )
		{
			tmpElement = this.elementList[el]
			tmpElement = tmpElement.split("_")
			if ( Number(tmpElement[1]) >= Number(startRowNr) )
			{
				newRow = Number(Number(tmpElement[1])+1)
				newPos = new String(tmpElement[0]+"_"+newRow)
				this.elementList[el] = newPos
			}
		}
	},
	decrementRows : function ( startRowNr )
	{

		for ( el=0; el<Number(this.elementList.length); el++ )
		{
			tmpElement = this.elementList[el]
			tmpElement = tmpElement.split("_")
			if ( Number(tmpElement[1]) == Number(startRowNr) )
			{
				spliceHere = el
			} else if ( Number(tmpElement[1]) >= Number(Number(startRowNr)+1) )
			{
				newRow = Number(Number(tmpElement[1])-1)
				newPos = new String(tmpElement[0]+"_"+newRow)
				this.elementList[el] = newPos
			}
		}

		this.elementList.splice(spliceHere,1);
		document.getElementById('myMenu').refresh()

	},
	openRow : function ( elementNr )
	{
		order = this.getorderofElement(elementNr)

		document.getElementById('myMenu').rows[Number(order)].height = Number(this.elementOHeight)

		this.enableDiv(elementNr)

			// useless scripting to truely update the table
		tmpRow = document.getElementById('myMenu').insertRow(this.elementList.length)
		document.getElementById('myMenu').deleteRow(this.elementList.length)
	},

	closeRow : function ( elementNr )
	{
		order = this.getorderofElement(elementNr)
		document.getElementById('myMenu').rows[Number(order)].height = Number(this.elementCHeight)

		this.disableDiv(elementNr)

			// useless scripting to truely update the table
		tmpRow = document.getElementById('myMenu').insertRow(this.elementList.length)
		document.getElementById('myMenu').deleteRow(this.elementList.length)
	},
	openRows : function ()
	{
		for ( a=0; a<Number(this.elementList.length); a++ )
		{
			elementNrs = this.elementList[a]
			elementNrs = this.elementList[a].split("_")
			this.openRow(Number(elementNrs[0]))
		}
	},
	closeRows : function ()
	{
		for ( a=0; a<Number(this.elementList.length); a++ )
		{
			elementNrs = this.elementList[a]
			elementNrs = this.elementList[a].split("_")
			this.closeRow(Number(elementNrs[0]))
		}
	},
	enableDiv : function ( elementNr )
	{
		tmpDiv = document.getElementById(new String("element"+elementNr))
		tmpDiv.style.top = Number(0)
		tmpDiv.style.left = Number(0)
		tmpDiv.style.position = "relative"
		//tmpDiv.style.display = "inline"
		tmpDiv.focus()
		tmpDiv.style.background = "#FFFFFF";
	},
	disableDiv : function ( elementNr )
	{
		tmpDiv = document.getElementById(new String("element"+elementNr))
		tmpDiv.style.position = "absolute"
		//tmpDiv.style.top = 0
		tmpDiv.style.left = Number(Number(this.leftWidth)-1500)
	},
	showConfirm : function ()
	{
		var input_box=confirm("Weet u het zeker?");
		if (input_box==true)
		{
			return 1
		} else
		{
			return 0
		}
	},
	importXml : function ( inputXml )
	{
		if (window.ActiveXObject)
		{
			this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			this.xmlDoc.async="false";
			this.xmlDoc.load(inputXml);
			if ( Number(this.xmlDoc.parseError.reason.length) > 0 )
			{
				alert("parseError: "+this.xmlDoc.parseError.reason+"parseLine: "+this.xmlDoc.parseError.line+".\nerrorTag: "+this.xmlDoc.parseError.srcText+".")
			} else
			{
				this.elementInit = Number(this.elementInit+this.xmlDoc.getElementsByTagName("element").length)
			}
			this.firefox = false;
			this.processXml( );
		}
		else if (document.implementation && document.implementation.createDocument)
		{
			this.xmlDoc = document.implementation.createDocument("","",null);
			this.xmlDoc.load(inputXml);
			this.xmlDoc.addEventListener('load', menuObject.loadHandler, false);
		}
	},

	//Firefox only function - happens when a XML file is loaded
    loadHandler : function ()
    {
        var count =  Number( menuObject.xmlDoc.getElementsByTagName("element").length );
        menuObject.elementInit = count;
        menuObject.firefox = true;
        menuObject.processXml( );
    },

	getContent : function ( inputObject, inputElement )
	{
		if ( Number(inputObject.getElementsByTagName(inputElement).length) >= 1 )
		{
		    if ( this.firefox == true )
		        elementContent = inputObject.getElementsByTagName(inputElement).item(0).firstChild.nodeValue;
		    else
			    elementContent = inputObject.getElementsByTagName(inputElement).item(0).text;
		} else
		{
			elementContent = "";
		}
		return elementContent;
	},
	submitMenu : function ()
	{

		content = new String('<form><properties>')
		for ( fm=0; fm<Number(document.getElementById("Formcreator").length); fm++ )
		{
			activeKey = document.getElementById("Formcreator")[fm].name
			activeValue = document.getElementById("Formcreator")[fm].value
			endgeneralTag = "sqltable"
			startelementTag = "label"
			endelementTag = "sqldatalength"

			//content = content+"<"+activeKey+">"+activeValue+"</"+activeKey+">"

			if ( activeKey == endgeneralTag )
			{
				content = content+"<"+activeKey+">"+activeValue+"</"+activeKey+"></properties><elementlist>"
			} else if ( activeKey == startelementTag )
			{
				content = content+"<element><"+activeKey+">"+activeValue+"</"+activeKey+">"
			} else if ( activeKey == endelementTag )
			{
				content = content+"<"+activeKey+">"+activeValue+"</"+activeKey+"></element>"
			} else if ( activeKey == "xmlresult" )
			{
				content = content+""
			} else
			{
				content = content+"<"+activeKey+">"+activeValue+"</"+activeKey+">"
			}
		}
		content = content+"</elementlist></form>"
		document.getElementById("xmlresult").value = content
		//alert(content)

		//document.getElementById("Formcreator").submit()
		document.forms.Formcreator.submit()
	}
}