elementCreation.js

// this bit is important
$w('a div p span img table thead td th tr tbody tfoot input').each(function(e) {
	window['$' + e] = function() {
		return new Element(e, arguments[0]);
	}
});

function addLocation(partId) {
	// create the element	
	newPart = $div({
		id: 'partition-'+partId,
		'class':'location'})
		.insert( $div({
			'class': 'partition',
			'onmouseover': "$('hoverShow"+partId+"').show()",
			'onmouseout': "$('hoverShow"+partId+"').hide()" })
			.insert( $span()
				.insert($span({
					'class': 'eip partName',
					id: 'part-name-'+partId})
					.insert('Part')
				)
				.insert(' ')
				.insert( $span({
					'class': 'partId'})
					.insert('(')
					.insert( $span({
						id: 'part-id-'+partId,
						'class': 'eip'})
						.insert(partId)
					)
					.insert(')')
				)
				.insert( $a({
					href: "javascript:void(0)",
					onclick: "togglePart(this, "+partId+");"})
					.insert( $img({
						'src': "/images/down.png",
						alt: "open"})
					)
				)
			)
			.insert( $span({
				id: 'hoverShow'+partId,
				style: 'display:none;'})
				.insert( $a({
					href: "javascript:void(0);",
					onclick: "removePart("+partId+")" })
					.insert( $img({
						'src': "/images/delete_small.png",
						alt: "delete",
						style: "margin-bottom:-2px;"})
					)
				)
			)
		)
		.insert( $table({
			id: 'zonesForPart'+partId,
			'class': 'zones',
			style: 'display:none;'})
			.insert( $thead()
				.insert( $tr()
					.insert( $th()
						.insert('ID')
					)
					.insert( $th({
						style: 'min-width: 200px;' })
						.insert('Name')
					)
				)
			)
			.insert( $tbody({
				id: "zoneListForPart"+partId})
				.insert( $tr()
					.insert( $td({
						colspan: 2,
						style: "text-align: center"})
						.insert( 'No zones found for this partition' )
					)
				)
			)
			.insert( $tfoot({
				id: "addZoneForPart"+partId})
				.insert( $tr()
					.insert( $td()
						.insert( $input({
							type: 'text',
							id: 'newZoneIdForPart-'+partId,
							name: 'id',
							maxlength: 3,
							'class': 'zoneIdField'})
						)
					)
					.insert( $td()
						.insert( $input({
							type: "text",
							id: "newZoneNameForPart-"+partId,
							name: 'name',
							'class': 'zoneNameField'})
							.observe('keypress', function(e){if(e.keyCode==13){addZone(partId);}})
						)
						.insert( $a({
							href: 'javascript:void(0);',
							onclick: "addZone("+partId+")"})
							.insert( $img({
								'src': '/images/save_small.png',
								alt: 'save'})
							)
						)
					)
				)
			)
		);

	// Put the element into the locations id
	$('locations').insert(newPart);

	// Put the edit in place functions on it
	eip.init(eip.init('/client/part/update','.partition .eip'));
}