BaseField = function(fieldHTML, fieldId, fieldType, style, styleClass) { 
	this.fieldHTML = fieldHTML;
	this.setAttribute("id", fieldId);
	this.setAttribute("type", fieldType);
	this.setAttribute("style", style);
	this.setAttribute("class", styleClass);
};
BaseField.prototype.setAttribute = function(attributeName, attributeValue) {
	var index = this.fieldHTML.indexOf(attributeName + '="');
	if(index==-1) {
		index = this.fieldHTML.indexOf(' ');
		this.fieldHTML = this.fieldHTML.substring(0, index) + ' ' + attributeName + '="' + attributeValue + '"' + this.fieldHTML.substring(index);
	}
	else {
		index += (attributeName + '="').length;
		var indexEnd = this.fieldHTML.indexOf('"', index);
		this.fieldHTML = this.fieldHTML.substring(0, index) + attributeValue + this.fieldHTML.substring(indexEnd);
	}
};
DatePicker = function(fieldHTML, fieldName, styleClass, style, selectButtonStyleClass, selectButtonStyle, calendarAlign, parentElement) {
	this.id = fieldName + Math.random();
	
	if(!style || style=='null') {
		style = '';
	}
	if(!selectButtonStyleClass || selectButtonStyleClass=='' || selectButtonStyleClass=='null') {
		selectButtonStyleClass = 'dropDownButton';
	}
	var html = '<span id="calendar_' + fieldName + '">\n';
	html += '	<table border="0" cellspacing="0" cellpadding="0"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';table-layout:fixed;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += '		<tr>\n';
	html += '			<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += new BaseField(fieldHTML, 'calendar_' + this.id, 'text', style + ';border-style:none; height:100%; width:100%', styleClass).fieldHTML;
	html += '			</td>\n';
	html += '			<td id="datePicker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n';
	html += '		</tr>\n';
	html += '	</table>\n';
	html += '</span>';
	if(parentElement) {
		parentElement.innerHTML = html;
	}
	else {
		document.write(html);
	}
	
	Calendar.setup({inputField: document.getElementById('calendar_' + this.id), ifFormat: "y-mm-dd", button: document.getElementById("datePicker" + this.id), displayArea: document.getElementById("datePicker" + this.id), align: (!calendarAlign || calendarAlign=='null' ? "Br" : calendarAlign), singleClick:true});
};
TimePicker = function(fieldHTML, fieldName, fieldValue, secondEnabled, styleClass, style, selectButtonStyleClass, selectButtonStyle, parentElement) {
	this.id = fieldName + Math.random();
	this.timeField = "Hour"; 
	this.secondEnabled = secondEnabled;
	var hourValue = '';
	var minuteValue = '';
	var secondValue = '';
	if(fieldValue!='') {
		var values = fieldValue.split(":");
		hourValue = Number(values[0]);
		minuteValue = Number(values[1]);
		if(secondEnabled) {
			secondValue = Number(values[2]);
		}
	}
	if(!style || style=='null') {
		style = '';
	}
	if(!selectButtonStyleClass || selectButtonStyleClass=='' || selectButtonStyleClass=='null') {
		selectButtonStyleClass = 'dropDownButton';
	}
	var html = '<span id="time_' + fieldName + '">\n';
	html += new BaseField(fieldHTML, 'time_' + this.id, 'hidden', '', '').fieldHTML;
	html += '<table border="0" cellspacing="0" cellpadding="0"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';width:' + (secondEnabled ? 88 : 68) + 'px;table-layout:fixed;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += '	<tr>\n';
	html += '		<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0"><input maxlength="2"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';text-align:center;border-style:none; height:100%; width:100%" type="input" id="' + this.id + 'Hour" value="' + hourValue + '"/></td>\n';
	html += '		<td width="8px" align="center">:</td>\n';
	html += '		<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0"><input maxlength="2"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';text-align:center;border-style:none; height:100%; width:100%" type="input" id="' + this.id + 'Minute" value="' + minuteValue + '"/></td>\n';
	if(secondEnabled) {
		html += '		<td width="8px" align="center">:</td>\n';
		html += '		<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0"><input maxlength="2"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';text-align:center;border-style:none; height:100%; width:100%" type="input" id="' + this.id + 'Second" value="' + secondValue + '"/></td>\n';
	}
	html += '		<td id="timePicker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n';
	html += '	</tr>\n';
	html += '</table>\n';
	html += '</span>';
	if(parentElement) {
		parentElement.innerHTML = html;
	}
	else {
		document.write(html);
	}
	
	var timePicker = this;
	
	
	document.getElementById(this.id + "Hour").onchange = function() {
		timePicker.update();
	};
	document.getElementById(this.id + "Hour").onfocus = function() {
		timePicker.timeField = 'Hour';
	};
	document.getElementById(this.id + "Minute").onchange = function() {
		timePicker.update();
	};
	document.getElementById(this.id + "Minute").onfocus = function() {
		timePicker.timeField = 'Minute';
	};
	if(secondEnabled) {
		document.getElementById(this.id + "Second").onchange = function() {
			timePicker.update();
		};
		document.getElementById(this.id + "Second").onfocus = function() {
			timePicker.timeField = 'Second';
		};
	}
	
	document.getElementById('timePicker' + this.id ).onclick = function() {
		timePicker.selectTimeValue();
	};
};
TimePicker.prototype.selectTimeValue = function() {
	var values = '0';
	for(var i=1; i < (this.timeField=='Hour' ? 24: 60); i++) {
		values += '\0' + i;
	}
	showValueList(values, document.getElementById(this.id + this.timeField), null, document.getElementById("timePicker" + this.id), 43, true);
};
TimePicker.prototype.update = function() {
	var hour = new Number(document.getElementById(this.id + "Hour").value);
	var value = (hour<10 ? "0" : "") + hour;
	var minute = new Number(document.getElementById(this.id + "Minute").value);
	value += ":" + (minute<10 ? "0" : "") + minute;
	if(this.secondEnabled) {
		var second = new Number(document.getElementById(this.id + "Second").value);
		value += ":" + (second<10 ? "0" : "") + second;
	}
	document.getElementById("time_" + this.id).value = value;
	try {
		document.getElementById("time_" + this.id).onchange();
	}
	catch(e) {
	
	}
};
TimePicker.setValue = function(fieldName, timeField, timeValue) { 
	var field = document.getElementsByName(fieldName)[0];
	var fieldId = field.id.substring("time_".length);
	var timeField = document.getElementById(fieldId + timeField.substring(0, 1).toUpperCase() + timeField.substring(1));
	timeField.value = timeValue;
	timeField.onchange();
};
DateTimePicker = function(fieldHTML, fieldName, fieldValue, styleClass, style, selectButtonStyleClass, selectButtonStyle, parentElement) {
	this.id = fieldName + Math.random();
	this.timeField = "Hour"; 
	var dateValue = '';
	var hourValue = '';
	var minuteValue = '';
	var secondValue = '';
	if(fieldValue!='') {
		var values = fieldValue.split(' ');
		dateValue = values[0];
		if(values[1]) {
			values = values[1].split(":");
			hourValue = Number(values[0]);
			minuteValue = Number(values[1]);
			secondValue = Number(values[2]);
		}
	}
	if(!style || style=='null') {
		style = '';
	}
	if(!selectButtonStyleClass || selectButtonStyleClass=='' || selectButtonStyleClass=='null') {
		selectButtonStyleClass = 'dropDownButton';
	}
	var html = '<span id="datetime_' + fieldName + '">\n';
	html += new BaseField(fieldHTML, 'datetime_' + this.id, 'hidden', '', '').fieldHTML;
	html += '<table border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed">\n';
	html += '	<tr>\n';
	html += '		<td width="100%" style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += '			<table border="0" cellspacing="0" cellpadding="0"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';table-layout:fixed;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += '				<tr>\n';
	html += '					<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0"><input maxlength="10"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';border-style:none; height:100%; width:100%" type="input" id="' + this.id + 'Date" value="' + dateValue + '"/></td>\n';
	html += '					<td id="datePicker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n';
	html += '				</tr>\n';
	html += '			</table>\n';
	html += '		</td>\n';
	html += '		<td width="3px"></td>\n';
	html += '		<td width="88px">\n';
	html += '			<table border="0" cellspacing="0" cellpadding="0"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';table-layout:fixed;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += '				<tr>\n';
	html += '					<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0" width="33%"><input maxlength="2"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';text-align:center;border-style:none; height:100%; width:100%" type="input" id="' + this.id + 'Hour" value="' + hourValue + '"/></td>\n';
	html += '					<td width="8px" align="center">:</td>\n';
	html += '					<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0" width="33%"><input maxlength="2"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';text-align:center;border-style:none; height:100%; width:100%" type="input" id="' + this.id + 'Minute" value="' + minuteValue + '"/></td>\n';
	html += '					<td width="8px" align="center">:</td>\n';
	html += '					<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0" width="33%"><input maxlength="2"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';text-align:center;border-style:none; height:100%; width:100%" type="input" id="' + this.id + 'Second" value="' + secondValue + '"/></td>\n';
	html += '					<td id="timePicker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n';
	html += '				</tr>\n';
	html += '			</table>\n';
	html += '		</td>\n';
	html += '	</tr>\n';
	html += '</table>\n';
	html += '</span>';
	if(parentElement) {
		parentElement.innerHTML = html;
	}
	else {
		document.write(html);
	}
	
	
	Calendar.setup({inputField: document.getElementById(this.id + "Date"), ifFormat: "y-mm-dd", button: document.getElementById("datePicker" + this.id), displayArea: document.getElementById("datePicker" + this.id), align: "Br", singleClick:true});
	
	var dateTimePicker = this;
	
	document.getElementById(this.id + "Date").onchange = function() {
		dateTimePicker.update();
	};
	
	
	document.getElementById(this.id + "Hour").onchange = function() {
		dateTimePicker.update();
	};
	document.getElementById(this.id + "Minute").onchange = function() {
		dateTimePicker.update();
	};
	document.getElementById(this.id + "Second").onchange = function() {
		dateTimePicker.update();
	};
	document.getElementById(this.id + "Hour").onfocus = function() {
		dateTimePicker.timeField = 'Hour';
	};
	document.getElementById(this.id + "Minute").onfocus = function() {
		dateTimePicker.timeField = 'Minute';
	};
	document.getElementById(this.id + "Second").onfocus = function() {
		dateTimePicker.timeField = 'Second';
	};
	
	
	document.getElementById('timePicker' + this.id ).onclick = function() {
		dateTimePicker.selectTimeValue();
	};
};
DateTimePicker.prototype.selectTimeValue = function() {
	var values = '0';
	for(var i=1; i < (this.timeField=='Hour' ? 24: 60); i++) {
		values += '\0' + i;
	}
	showValueList(values, document.getElementById(this.id + this.timeField), null, document.getElementById("timePicker" + this.id), 43, true);
};
DateTimePicker.prototype.update = function() {
	var value = document.getElementById(this.id + "Date").value;
	if(value!='') {
		value += ' ' + new Number(document.getElementById(this.id + "Hour").value);
		value += ':' + new Number(document.getElementById(this.id + "Minute").value);
		value += ':' + new Number(document.getElementById(this.id + "Second").value);
	}
	document.getElementById("datetime_" + this.id).value = value;
	try {
		document.getElementById("datetime_" + this.id).onchange();
	}
	catch(e) {
	
	}
};
DateTimePicker.setValue = function(fieldName, timeField, timeValue) { 
	var field = document.getElementsByName(fieldName)[0];
	var fieldId = field.id.substring("datetime_".length);
	var timeField = document.getElementById(fieldId + timeField.substring(0, 1).toUpperCase() + timeField.substring(1));
	timeField.value = timeValue;
	timeField.onchange();
};
DropdownField = function(fieldHTML, fieldName, listValues, valueField, titleField, styleClass, style, selectButtonStyleClass, selectButtonStyle, parentElement) {
	this.id = fieldName + Math.random();
	
	if(!style || style=='null') {
		style = '';
	}
	if(!selectButtonStyleClass || selectButtonStyleClass=='' || selectButtonStyleClass=='null') {
		selectButtonStyleClass = 'dropDownButton';
	}
	var html = '<span id="dropdown_' + fieldName + '">\n';
	html += '	<table id="table' + this.id + '" border="0" cellspacing="0" cellpadding="0"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';table-layout:fixed;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += '		<tr>\n';
	html += '			<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += new BaseField(fieldHTML, 'dropdown_' + this.id, 'text', style + ';border-style:none; height:100%; width:100%', styleClass).fieldHTML;
	html += '			</td>\n';
	html += '			<td id="picker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n';
	html += '		</tr>\n';
	html += '	</table>\n';
	html += '</span>';
	if(parentElement) {
		parentElement.innerHTML = html;
	}
	else {
		document.write(html);
	}
	var dropdownField = this;
	
	document.getElementById('picker' + this.id ).onclick = function() {
		var table = document.getElementById('table' + dropdownField.id);
		var form = getParentElement(table, "form");
		if(!form) {
			form = document.body;
		}
		var valueInput = getElement(form, "input", valueField);
		if(!valueInput && valueField!="") {
			valueInput = document.getElementsByName(valueField)[0];
		}
		var titleInput = getElement(form, "input", titleField);
		if(!titleInput && titleField!="") {
			titleInput = document.getElementsByName(titleInput)[0];
		}
		showValueList(listValues, valueInput, titleInput, table);
	};
};
SelectField = function(fieldHTML, fieldName, onSelect, styleClass, style, selectButtonStyleClass, selectButtonStyle, parentElement) {
	this.id = fieldName + Math.random();
	if(!style || style=='null') {
		style = '';
	}
	if(!selectButtonStyleClass || selectButtonStyleClass=='' || selectButtonStyleClass=='null') {
		selectButtonStyleClass = 'selectButton';
	}
	var html = '<span id="select_' + fieldName + '">\n';
	html += '	<table border="0" cellspacing="0" cellpadding="0"' + (styleClass=='' ? '' : ' class="' + styleClass + '"') + ' style="' + style + ';table-layout:fixed;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += '		<tr>\n';
	html += '			<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n';
	html += new BaseField(fieldHTML, 'select_' + this.id, 'text', style + ';border-style:none; height:100%; width:100%', styleClass).fieldHTML;
	html += '			</td>\n';
	html += '			<td id="picker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n';
	html += '		</tr>\n';
	html += '	</table>\n';
	html += '</span>';
	if(parentElement) {
		parentElement.innerHTML = html;
	}
	else {
		document.write(html);
	}
	
	document.getElementById('picker' + this.id ).onclick = function() {
		eval(onSelect);
	};
};