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.write = function() {
	document.write(this.fieldHTML);
}
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);
	}
};
TimestampPicker = function(fieldHTML, fieldName, fieldValue, timeOnly, styleClass, style, selectButtonStyleClass, selectButtonStyle) {
	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(timeOnly) {
		dateValue = '2005-7-18';
	}
	if(!style || style=='null') {
		style = '';
	}
	if(!selectButtonStyleClass || selectButtonStyleClass=='' || selectButtonStyleClass=='null') {
		selectButtonStyleClass = 'dropDownButton';
	}
	document.write('<span id="timestamp_' + fieldName + '">\n');
	new BaseField(fieldHTML, 'timestamp_' + this.id, 'hidden', '', '').write();
	document.write('<table border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed">\n');
	document.write('	<tr>\n');
	document.write('		<td width="100%" style=' + (timeOnly ? 'display:none;' : '') + "padding-left:0;padding-right:0;padding-top:0;padding-bottom:0" + '>\n');
	document.write('			<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');
	document.write('				<tr>\n');
	document.write('					<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');
	document.write('					<td id="datePicker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n');
	document.write('				</tr>\n');
	document.write('			</table>\n');
	document.write('		</td>\n');
	document.write('		<td width="3px"></td>\n');
	document.write('		<td width="88px">\n');
	document.write('			<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');
	document.write('				<tr>\n');
	document.write('					<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');
	document.write('					<td width="8px" align="center">:</td>\n');
	document.write('					<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');
	document.write('					<td width="8px" align="center">:</td>\n');
	document.write('					<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');
	document.write('					<td id="timePicker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n');
	document.write('				</tr>\n');
	document.write('			</table>\n');
	document.write('		</td>\n');
	document.write('	</tr>\n');
	document.write('</table>\n');
	document.write('</span>');
	
	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 timestampPicker = this;
	
	document.getElementById(this.id + "Date").onchange = function() {
		timestampPicker.update();
	};
	
	
	document.getElementById(this.id + "Hour").onchange = function() {
		timestampPicker.update();
	};
	document.getElementById(this.id + "Minute").onchange = function() {
		timestampPicker.update();
	};
	document.getElementById(this.id + "Second").onchange = function() {
		timestampPicker.update();
	};
	document.getElementById(this.id + "Hour").onfocus = function() {
		timestampPicker.timeField = 'Hour';
	};
	document.getElementById(this.id + "Minute").onfocus = function() {
		timestampPicker.timeField = 'Minute';
	};
	document.getElementById(this.id + "Second").onfocus = function() {
		timestampPicker.timeField = 'Second';
	};
	
	
	document.getElementById('timePicker' + this.id ).onclick = function() {
		timestampPicker.selectTimeValue();
	};
};
TimestampPicker.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);
};
TimestampPicker.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("timestamp_" + this.id).value = value;
	try {
		document.getElementById("timestamp_" + this.id).onchange();
	}
	catch(e) {
	
	}
};
TimestampPicker.setValue = function(fieldName, timeField, timeValue) { 
	var field = document.getElementsByName(fieldName)[0];
	var fieldId = field.id.substring("timestamp_".length);
	var timeField = document.getElementById(fieldId + timeField.substring(0, 1).toUpperCase() + timeField.substring(1));
	timeField.value = timeValue;
	timeField.onchange();
};
DatePicker = function(fieldHTML, fieldName, styleClass, style, selectButtonStyleClass, selectButtonStyle, calendarAlign) {
	this.id = fieldName + Math.random();
	
	if(!style || style=='null') {
		style = '';
	}
	if(!selectButtonStyleClass || selectButtonStyleClass=='' || selectButtonStyleClass=='null') {
		selectButtonStyleClass = 'dropDownButton';
	}
	document.write('<span id="calendar_' + fieldName + '">\n');
	document.write('	<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');
	document.write('		<tr>\n');
	document.write('			<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n');
	new BaseField(fieldHTML, 'calendar_' + this.id, 'text', style + ';border-style:none; height:100%; width:100%', styleClass).write();
	document.write('			</td>\n');
	document.write('			<td id="datePicker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n');
	document.write('		</tr>\n');
	document.write('	</table>\n');
	document.write('</span>');
	
	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});
};
DropdownField = function(fieldHTML, fieldName, listValues, valueField, titleField, styleClass, style, selectButtonStyleClass, selectButtonStyle) {
	this.id = fieldName + Math.random();
	
	if(!style || style=='null') {
		style = '';
	}
	if(!selectButtonStyleClass || selectButtonStyleClass=='' || selectButtonStyleClass=='null') {
		selectButtonStyleClass = 'dropDownButton';
	}
	document.write('<span id="dropdown_' + fieldName + '">\n');
	document.write('	<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');
	document.write('		<tr>\n');
	document.write('			<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n');
	new BaseField(fieldHTML, 'dropdown_' + this.id, 'text', style + ';border-style:none; height:100%; width:100%', styleClass).write();
	document.write('			</td>\n');
	document.write('			<td id="picker' + this.id + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n');
	document.write('		</tr>\n');
	document.write('	</table>\n');
	document.write('</span>');
	var dropdownField = this;
	
	document.getElementById('picker' + this.id ).onclick = function() {
		showValueList(listValues, document.getElementsByName(valueField)[0], document.getElementsByName(titleField)[0], document.getElementById('table' + dropdownField.id));
	};
};
SelectField = function(fieldHTML, fieldName, onSelect, styleClass, style, selectButtonStyleClass, selectButtonStyle) {
	this.id = fieldName + Math.random();
	
	if(!style || style=='null') {
		style = '';
	}
	if(!selectButtonStyleClass || selectButtonStyleClass=='' || selectButtonStyleClass=='null') {
		selectButtonStyleClass = 'selectButton';
	}
	document.write('<span id="select_' + fieldName + '">\n');
	document.write('	<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');
	document.write('		<tr>\n');
	document.write('			<td style="padding-left:0;padding-right:0;padding-top:0;padding-bottom:0">\n');
	new BaseField(fieldHTML, 'select_' + this.id, 'text', style + ';border-style:none; height:100%; width:100%', styleClass).write();
	document.write('			</td>\n');
	document.write('			<td id="picker' + this.id + '" onclick="' + onSelect + '" class="' + selectButtonStyleClass + '" style="' + selectButtonStyle + '">&nbsp;</td>\n');
	document.write('		</tr>\n');
	document.write('	</table>\n');
	document.write('</span>');
};