function initPageEngine() {

		// wire up the page eng widgets
	var wgtList = document.getElementsByTagName("div");
	for (var i=0; i < wgtList.length; i++ ) {
		var strTitle = wgtList[i].title;
		var wgt = createWidget(strTitle, wgtList[i].id);			
		if (wgt != null) {
			var strAttr = wgtList[i].getAttribute("props");
			if (strAttr != null) {
				//add all the widgets to widgetList of pgEng
				pageEng.addWidget(wgt);
				//split wgt properties
				var wgtProps = new Array();
				wgtProps = strAttr.split(':');
				
				/*	handle this later			
			 if (allProps.length == 2) {
				 wgtProps = allProps[1].split(':');
			 } else if (allProps.length > 2) {
				 //reqd. for some widgets (for ex. Message & ComboBox)
				 //as the wgt props are grouped in multiple sets (i.e. multi-dim array).
				 for(j=1; j<allProps.length; j++) {
				 wgtProps[j-1] = allProps[j].split(':');
			 }
			 */
				wgt.init(wgtProps);
			}
			var strTags = wgtList[i].getAttribute("tags");
			if (strTags != null) {
				var allTagProps = new Array();
					// multiple tags are separated by a comma
				allTagProps = strTags.split(',');
				for (var j = 0; j < allTagProps.length; j++) {
						// tag props are separated by a colon
					var tagProps = allTagProps[j].split(':');
					if (tagProps.length > 0) {
						var dataLink = new DataLink;
						dataLink.init(tagProps, wgt);
						wgt.addDataLink(dataLink);
						// give the dataLink to the data source.  the data source will
						// call the dataLink when there is new data.  The dataLink will
						// update the widget value
						var dataSrc = pageEng.getDataSource(dataLink.dataSrcName);
						if (dataSrc != null) {
							dataSrc.addDataLink(dataLink);
						}
					}
				}
			}	

		}
	}
};

function createWidget(wgtType, wgtId) {
	var wgt = null;
	switch (wgtType.toLowerCase()) {
		case "numeric":
			wgt = new NumericWgt(wgtId);
			break;
			
		case "bargraph":
			wgt = new BargraphWgt(wgtId);
			break;
			
		case "light":
			wgt = new LightWgt(wgtId);
			break;

		case "message":
			wgt = new MessageWgt(wgtId);
			break;
			
		case "multistate":
			wgt = new MultistateWgt(wgtId);
			break;
			
		case "button":
			wgt = new ButtonWgt(wgtId);
			break;

		case "inputbox":
			wgt = new InputBoxWgt(wgtId);
			break;

		case "checkbox":
			wgt = new CheckBoxWgt(wgtId);
			break;

		case "radiobutton":
			wgt = new RadioButtonWgt(wgtId);
			break;

		case "combobox":
			wgt = new ComboBoxWgt(wgtId);
			break;
		case "needle":
			wgt = new NeedleWgt(wgtId);
			break;
		case "panimage":
			wgt = new PanImageWgt(wgtId);
			break;
			
	}
	return wgt;
}

/**
*	CgiWgt Data Source widget
*
*/
function CgiItemsWgt(wgtName) {
	this.wgtName = wgtName;
	this.xmlhttp = null;
	this.vars = new Array();
	this.values = new Array();
	this.readWrite = 0;
	this.pollInterval = 4000;
	this.dataLinks = new Array();
		// patch to set the this pointer before invoking callback
	var me = this;
	this.onDataReady = function() {
		if (me.xmlhttp.readyState != 4) 
			return;
		if (me.xmlhttp.status == 200) {
			var strResult = me.xmlhttp.responseText;
				// update the variables with the response data
			var i;
			for (i=0; i<me.vars.length; i++) {
				strValue = me.decodeValue(strResult, me.vars[i]);
				me.values[i] = strValue;
			}
			
			// update the display variables
			var field;
			for (i=0; i<me.dataLinks.length; i++) {
				for (var j=0; j<me.vars.length; j++) {
					if (me.dataLinks[i].tag == me.vars[j]) {
						me.dataLinks[i].setWgtValue(me.values[j]);
						break;
					}
				}
			}
		} else {
			// no data
		}
	};
	
	this.onWriteStatus = function () {
		if (me.xmlhttp.readyState != 4) 
			return;

		if (me.xmlhttp.status == 200) {
			var strResponse = me.xmlhttp.responseText;
//			alert("Write Status :\n"+strResponse);
		}
	};
		
};
	// override the base class
CgiItemsWgt.prototype = new DataSrc(); //Overriding JavaScript supplied prototype object with DataSrc object. 
					// CgiItemsWgt.prototype inherits from DataSrc.prototype

CgiItemsWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
CgiItemsWgt.prototype.addVar = function(varName) {
	var idx = this.vars.length;
	this.vars[idx] = varName;
	return idx;
};

CgiItemsWgt.prototype.setReadWrite = function(rwType) {
	this.readWrite = rwType;
};

CgiItemsWgt.prototype.requestData = function() {
	
	if (window.XMLHttpRequest) 
		this.xmlhttp = new XMLHttpRequest();
	else if (window.ActiveXObject)
		this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	else 
		return; 
		
	
	var strURL = "http://"+window.location.host;
	strURL += "/cgi/readItems";

	var i;
	var strRequest = "n="+this.vars.length;
	for (i=0; i<this.vars.length; i++) {
		strRequest += "&it"+(i+1)+"="+this.vars[i];
//		strRequest += "&t"+(i+1)+"="+this.vars[i];
	}

	this.xmlhttp.open("POST", strURL, true);
	this.xmlhttp.setRequestHeader('content-type', 'text/xml');
	this.xmlhttp.onreadystatechange = this.onDataReady;
	this.xmlhttp.send(strRequest);	

};
CgiItemsWgt.prototype.setFieldValue = function(tagName, tagValue) {

	postData(tagName, tagValue);
}
CgiItemsWgt.prototype.getFieldValue = function(tagName) {

	return getTagValue(tagName);
}
CgiItemsWgt.prototype.postData = function(tagName, tagValue) {
	if (window.XMLHttpRequest) 
		this.xmlhttp = new XMLHttpRequest();
	else if (window.ActiveXObject)
		this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	else 
		return; 
	
	var strURL = "http://"+window.location.host;
	strURL += "/cgi/writeItems";
//	strURL += "/cgi/writeTags";
	var i;
	var strRequest;
	if(tagName == "") {
		strRequest = "n="+(this.vars.length-1);
		for (i=0; i<this.vars.length-1; i++) {
			strRequest += "&it"+(i+1)+"="+this.vars[i+1]+"&v"+(i+1)+"="+this.values[i+1];
//			strRequest += "&t"+(i+1)+"="+this.vars[i+1]+"&v"+(i+1)+"="+this.values[i+1];
		}
	} else {
		strRequest = "n=1&it1="+tagName+"&v1="+tagValue;
//		strRequest = "n=1&t1="+tagName+"&v1="+tagValue;
	}
	this.xmlhttp.open("POST", strURL, true);
	this.xmlhttp.setRequestHeader('content-type', 'text/xml');
	this.xmlhttp.onreadystatechange = this.onWriteStatus;
	this.xmlhttp.send(strRequest);	

};

CgiItemsWgt.prototype.decodeValue = function(strText, strVarName) {
	var retValue = null;
	var idx1 = strText.indexOf("#"+strVarName);
	var idx2 = strText.indexOf("\n", idx1);
	if ((idx1>=0) && (idx2>0)) {
		var strTemp = strText.substring(idx1, idx2);
		var strValue = strTemp.split("\t");
		var strCode = strValue[1];
		if (strCode == "S_OK") {
			var idx3 = strText.indexOf("\n", idx2+1);
			if (idx3>0) {
				strTemp = strText.substring(idx2+1, idx3);
				strValue = strTemp.split("\t");
				retValue = strValue[1];
			}
		}
	}
	return retValue;
};

CgiItemsWgt.prototype.setTagValue = function(tagName, tagValue) {
	var bFound=false;
	for(i=0; i<this.vars.length; i++) {
		if(this.vars[i] == tagName) {
			this.values[i] = tagValue;
			bFound = true;
			break;
		}
	}
	if (!bFound) {
		var i = this.addVar(tagName);
		this.values[i]=tagValue;
	}
};

CgiItemsWgt.prototype.getTagValue = function(tagName) {
	for(i=0; i<this.vars.length; i++) {
		if(this.vars[i] == tagName) {
			return this.values[i];
			break;
		} else {
			//no data
		}
	}
};

CgiItemsWgt.prototype.startPoll = function() {
	this.pollTimer = document.setInterval("CgiItemsWgt.requestData();",this.pollInterval);
};

CgiItemsWgt.prototype.stopPoll = function () {
	document.clearInterval(this.pollTimer);
};
/**
*	CgiGroupWgt Data Source widget
*
*/
function CgiGroupWgt(wgtName) {
	this.wgtName = wgtName;
	this.xmlhttp = null;
	this.vars = new Array(30);		// max size of group is 30 vars
	this.values = new Array(30);
	this.readWrite = 0;
	this.pollInterval = 4000;
	this.dataLinks = new Array();
		// patch to set the this pointer before invoking callback
	var me = this;
	this.onDataReady = function() {
		if (me.xmlhttp.readyState != 4) 
			return;
		if (me.xmlhttp.status == 200) {
			var strResult = me.xmlhttp.responseText;
				// update the variables with the response data
			var numVars = me.decodeVars(strResult, me);
			
			// update the display variables
			for (var i=0; i<me.dataLinks.length; i++) {
				for (var j=0; j<numVars; j++) {
					if (me.dataLinks[i].tag == me.vars[j]) {
						me.dataLinks[i].setWgtValue(me.values[j]);
						break;
					}
				}
			}
		} else {
			// no data
		}
	};
	
	this.onWriteStatus = function () {
		if (me.xmlhttp.readyState != 4) 
			return;

		if (me.xmlhttp.status == 200) {
			var strResponse = me.xmlhttp.responseText;
//			alert("Group Activate Status :\n"+strResponse);
		}
	};
		
};
	// override the base class
CgiGroupWgt.prototype = new DataSrc(); //Overriding JavaScript supplied prototype object with DataSrc object. 
					// CgiGroupWgt.prototype inherits from DataSrc.prototype


CgiGroupWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
CgiGroupWgt.prototype.addVar = function(varName) {
	var idx = this.vars.length;
	this.vars[idx] = varName;
	return idx;
};

CgiGroupWgt.prototype.setReadWrite = function(rwType) {
	this.readWrite = rwType;
};
CgiGroupWgt.prototype.setFieldValue = function(tagName, tagValue) {

	postData(tagName, tagValue);
}
CgiGroupWgt.prototype.getFieldValue = function(tagName) {

	return getTagValue(tagName);
}
CgiGroupWgt.prototype.requestData = function() {
	
	if (window.XMLHttpRequest) 
		this.xmlhttp = new XMLHttpRequest();
	else if (window.ActiveXObject)
		this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	else 
		return; 
		
	
	var strURL = "http://"+window.location.host;
	strURL += "/cgi/readGroups";

		// dataset name is the group name
	var strRequest = "n=1&gr1="+this.wgtName;

	this.xmlhttp.open("POST", strURL, true);
	this.xmlhttp.setRequestHeader('content-type', 'text/xml');
	this.xmlhttp.onreadystatechange = this.onDataReady;
	this.xmlhttp.send(strRequest);	

};

CgiGroupWgt.prototype.postData = function(tagName, tagValue) {
	if (window.XMLHttpRequest) 
		this.xmlhttp = new XMLHttpRequest();
	else if (window.ActiveXObject)
		this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	else 
		return; 
	
	var strURL = "http://"+window.location.host;
		// tag name should be 'activateGroups' or 'deactivateGroups'
	strURL += "/cgi/"+tagName;

	
		// group name is the widget name
	var strRequest = "n=1&gr1="+this.wgtName;

	this.xmlhttp.open("POST", strURL, true);
	this.xmlhttp.setRequestHeader('content-type', 'text/xml');
	this.xmlhttp.onreadystatechange = this.onWriteStatus;
	this.xmlhttp.send(strRequest);	

};


CgiGroupWgt.prototype.decodeVars = function(strText, me) {

	var idx1 = strText.indexOf("#" + this.wgtName); // find the group name
	var idx2 = strText.indexOf("\n", idx1);
	var nextIdx;
	var strValue;
	var strName;
	var numVars = 0;
		// get group status
	var strLine = strText.substring(idx1, idx2);
	var strTokens = strLine.split("\t");
	var strCode = strTokens[1];
		// if group status is okay
	if (strCode == "S_OK") {
		nextIdx = idx2+1;	// next line
		while (nextIdx>0) {
			idx1 = strText.indexOf("#", nextIdx); // find the tag name
			idx2 = strText.indexOf("\n", idx1);
			nextIdx = idx1;
			if ((idx1 >= 0) && (idx2 > 0)) {
				strLine = strText.substring(idx1+1, idx2);
				strTokens = strLine.split("\t");
				var strCode = strTokens[1];
					// is tag status ok
				if (strCode == "S_OK") {
					strName = strTokens[0];
						// next line
					idx3 = strText.indexOf("\n", idx2 + 1);
					if (idx3 > 0) {
						strLine = strText.substring(idx2 + 1, idx3);
						strTokens = strLine.split("\t");
						strValue = strTokens[1];
						// store the name and value in the array
						me.vars[numVars] = strName;
						me.values[numVars] = strValue;
						numVars++;
//						alert("result: "+numVars+" "+strName+" : "+strValue);
							// set next line pointer
						nextIdx = idx3 + 1;
					}
				} else {
						// next line
					idx3 = strText.indexOf("\n", idx2 + 1);	
					idx3++;	
					nextIdx = idx3;			
				}
			}
		}
	}
	return numVars;
};

CgiGroupWgt.prototype.setTagValue = function(tagName, tagValue) {
	var bFound=false;
	for(i=0; i<this.vars.length; i++) {
		if(this.vars[i] == tagName) {
			this.values[i] = tagValue;
			bFound = true;
			break;
		}
	}
	if (!bFound) {
		var i = this.addVar(tagName);
		this.values[i]=tagValue;
	}
};

CgiGroupWgt.prototype.getTagValue = function(tagName) {
	for(i=0; i<this.vars.length; i++) {
		if(this.vars[i] == tagName) {
			return this.values[i];
			break;
		} else {
			//no data
		}
	}
};

CgiGroupWgt.prototype.startPoll = function() {
	this.pollTimer = document.setInterval("CgiGroupWgt.requestData();",this.pollInterval);
};

CgiGroupWgt.prototype.stopPoll = function () {
	document.clearInterval(this.pollTimer);
};

/**
*	VariablesWgt Data Source widget
*	This widget holds local variables on the page
*
*/
function VariablesWgt(wgtName) {
	this.wgtName = wgtName;
	this.vars = new Array();		
	this.values = new Array();
	this.readWrite = 0;
	this.dataLinks = new Array();
		
};
	// override the base class
VariablesWgt.prototype = new DataSrc(); //Overriding JavaScript supplied prototype object with DataSrc object. 
					// VariablesWgt.prototype inherits from DataSrc.prototype

VariablesWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
VariablesWgt.prototype.addVar = function(varName) {
	var idx = this.vars.length;
	this.vars[idx] = varName;
	return idx;
};
VariablesWgt.prototype.addVar = function(varName, value) {
	var idx = this.vars.length;
	this.vars[idx] = varName;
	this.values[idx] = value;
	return idx;
};
VariablesWgt.prototype.setFieldValue = function(tagName, tagValue) {

	this.setTagValue(tagName, tagValue);
		// send update to all observers
	this.sendUpdate(tagName, tagValue);
}
VariablesWgt.prototype.getFieldValue = function(tagName) {

	return this.getTagValue(tagName);
}
VariablesWgt.prototype.postData = function(tagName, tagValue) {
	this.setTagValue(tagName, tagValue);
		// send update to all observers
	this.sendUpdate();
};

VariablesWgt.prototype.setTagValue = function(tagName, tagValue) {
	var bFound=false;
	for(i=0; i<this.vars.length; i++) {
		if(this.vars[i] == tagName) {
			this.values[i] = tagValue;
			bFound = true;
			break;
		}
	}
		// if not found, add as a new variable
	if (!bFound) {
		var i = this.addVar(tagName);
		this.values[i]=tagValue;
	}
};

VariablesWgt.prototype.getTagValue = function(tagName) {
	for(i=0; i<this.vars.length; i++) {
		if(this.vars[i] == tagName) {
			return this.values[i];
			break;
		} else {
			//no data
		}
	}
};

VariablesWgt.prototype.sendUpdateAll = function(){
	// update the attached variables
	for (var i=0; i<this.dataLinks.length; i++) {
		for (var j=0; j<this.vars.length; j++) {
			if (this.dataLinks[i].tag == this.vars[j]) {
				this.dataLinks[i].setWgtValue(this.values[j]);
			}
		}
	}
}
VariablesWgt.prototype.sendUpdate = function(tag, value){
	// update the attached variables
	for (var i=0; i<this.dataLinks.length; i++) {
		if (this.dataLinks[i].tag == tag) {
			this.dataLinks[i].setWgtValue(value);
		}
	}
}
/**
*	Numeric widget
*
*/
function NumericWgt(wgtId) {
	this.wgtId = wgtId;
	this.dataLinks = new Array();
};

NumericWgt.prototype = new Widget();

NumericWgt.prototype.init = function(wgtProps) {

};
NumericWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
NumericWgt.prototype.setFieldValue = function(tag, newValue) {
	
	var docField = document.getElementById(this.wgtId);
	if (docField != null) { 
		docField.innerHTML = newValue;
	}
	
};

/**
*	Needle widget
*
*/
function NeedleWgt(wgtId) {
	this.wgtId = wgtId;
	this.numSteps = 12;
	this.direction = 1;		// 1 = clockwise
	this.width = 100;
	this.minValue = 0.0;
	this.maxValue = 500.0;
	this.range = 500.0
	this.dataLinks = new Array();
};

NeedleWgt.prototype = new Widget();

NeedleWgt.prototype.init = function(wgtProps) {
	
	if (wgtProps != null)  {
		if (wgtProps.length >= 1) 
			this.numSteps = parseInt(wgtProps[0]);
		if (wgtProps.length >= 2) 
			this.width = parseInt(wgtProps[1]);
		if (wgtProps.length >= 3) 
			this.direction = parseInt(wgtProps[2]);
		if (wgtProps.length >= 4) 
			this.minValue = parseInt(wgtProps[3]);
		if (wgtProps.length >= 5) 
			this.maxValue = parseInt(wgtProps[4]);
			
		this.range = (this.maxValue - this.minValue);
		if (this.range <= 0) 
			this.range = 1;
	}
};
NeedleWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
NeedleWgt.prototype.setFieldValue = function(tag, newValue) {
	
	var docField = document.getElementById(this.wgtId);
	if (docField != null) { 
		var value = (newValue-this.minValue)/this.range * this.numSteps+0.5;
		value = parseInt(value) * this.width;
		docField.style.backgroundPosition = -value + "px 0px";
	}
	
};


/**
*	Bargraph widget
*
*/
function BargraphWgt(wgtId) {
	this.wgtId = wgtId;
	this.drawType = "solid";
	this.direction = "vertical";
	this.minValue = 0.0;
	this.maxValue = 50.0;
	this.dataLinks = new Array();

};

BargraphWgt.prototype = new Widget();

BargraphWgt.prototype.init = function(wgtProps) {

	if (wgtProps != null)  {
		if (wgtProps.length >= 1) 
			this.drawType = wgtProps[0].toLowerCase();
		if (wgtProps.length >= 2) 
			this.direction = wgtProps[1].toLowerCase();
		if (wgtProps.length >= 3) 
			this.minValue = wgtProps[2];
		if (wgtProps.length >= 4) 
			this.maxValue = wgtProps[3];
			
		this.range = (this.maxValue - this.minValue);
		if (this.range <= 0) 
			this.range = 1;
	}

};
BargraphWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
BargraphWgt.prototype.setFieldValue = function(tag, newValue) {	
	
	var docField = document.getElementById(this.wgtId);
	if (docField != null) { 
		var barFields = docField.getElementsByTagName("div");
		if (barFields.length > 0) {
			var barField = barFields[0];
			var scale;
			var barLength;
			var barValue;
			if (this.direction == "horizontal") {
				var wgtLength = parseInt(docField.style.width);				
				scale = wgtLength / this.range;
				barValue = newValue; 
				barLength = parseInt(scale * barValue)+2;
				
				barField.style.left = "0px";
				barField.style.width = barLength+"px";
			} else {
				var wgtLength = parseInt(docField.style.height);				
				scale = wgtLength / this.range;
				barValue = newValue; 
				barLength = parseInt(scale * barValue)+2;
				
				var top = parseInt(wgtLength - barLength);
				barField.style.top = top+"px";
				barField.style.height = barLength+"px";
			}
		}
	}	
};

/**
*	Message widget
*
*/
function MessageWgt(wgtId) {
	this.wgtId = wgtId;
	this.dataLinks = new Array();
	this.numStates = 3;
	this.msgs = new Array();
	this.msgs[0] = "message 1";
	this.msgs[1] = "message 2";
	this.msgs[2] = "message 3";
};

MessageWgt.prototype = new Widget();

MessageWgt.prototype.init = function(wgtProps) {

	if ((wgtProps != null) && (wgtProps.length >= 2)) {
		this.numStates = wgtProps[0];
		for (var i=0; i<this.numStates; i++) {
			this.msgs[i] = wgtProps[i+1];
		}
	}
	
};
MessageWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
MessageWgt.prototype.setFieldValue = function(tag, newValue) {

	var msgField = document.getElementById(this.wgtId);
	if (msgField != null) { 
		var val = newValue;
		if (val > (this.msgs.length-1))
			val = this.msgs.length-1;
		
		if (val > this.msgs.length)
			msgField.innerHTML = "---";
		else
			msgField.innerHTML = this.msgs[val];
	}
	
};

/**
*	Button widget
*
*/
function ButtonWgt(wgtId) {
	this.wgtId = wgtId;
	this.numStates = 2;
	this.imageSize = 32;
	this.curState = 0;
	this.rawValue = 0;
	this.isToggle = 0;
	this.action = "write"
	this.clickDelay=0;
	this.dataLinks = new Array();
};

ButtonWgt.prototype = new Widget();

ButtonWgt.prototype.init = function(wgtProps) {
	if (wgtProps != null) {
		if (wgtProps.length >= 1) 
			this.numStates = wgtProps[0];
		if (wgtProps.length >= 2) 
			this.imageSize = wgtProps[1];
		if (wgtProps.length >= 3) 
			this.curState = wgtProps[2];
		if (wgtProps.length >= 4) 
			this.isToggle = wgtProps[3];
		if (wgtProps.length >= 5) 
			this.action = wgtProps[4];
	}	
};

ButtonWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};

ButtonWgt.prototype.doMouseDown = function() {
	var newState;
	if (this.isToggle==0) {
		newState = 1;
	} else if (this.curState == 1) {
		newState = 0;
	} else {
		newState = 1;
	}
	this.setState(newState);

};
ButtonWgt.prototype.doMouseUp = function(){
	
	if (this.isToggle==0) {
		this.setState(0);
	}
	this.doAction();
};
	//Function to update the state value changed at run time to the widget property 
	//as well as data set values array
ButtonWgt.prototype.updateValue = function() {
	var newState;
	if (this.curState == 1) 
		newState = 0;
	else
		newState = 1;
	
	this.setState(newState);

};
ButtonWgt.prototype.setFieldValue = function(tag, newValue){
		// click delay is so we don't update after we clicked on the button
		// need to give time for the write value to get to the panel
	if (this.clickDelay <= 0) {

		this.setState(newValue);
	} else {
		this.clickDelay--;
	}
};

ButtonWgt.prototype.setState = function(newState) {	
	
	this.curState = newState % this.numStates;

	var docField = document.getElementById(this.wgtId);
	if (docField != null) {
			// select the image in the image list (use neg values for images)
		var imgOffset = -parseInt(this.curState * this.imageSize);
		docField.style.backgroundPosition = imgOffset + "px 0px";
	}	
};

ButtonWgt.prototype.doAction = function() { 

	var writeValue = this.curState;
		// get the data source widget
	var dataLink1 = null;
	if (this.dataLinks.length>0) {
		dataLink1 = this.dataLinks[0];
	}
	var strAction = this.action;
		// parse the action parameters
	var idx1 = this.action.indexOf("(");
	var idx2 = this.action.indexOf(")");
	var params = new Array();
	if (idx1 > 0) {
		strAction = this.action.substring(0,idx1);
		var strParams = this.action.substring(idx1+1, idx2);
		params = strParams.split(",");
	}
	
	switch (strAction) {
		case "writeDataSet":
			// post data to the dataSrc
			if (dataLink1 != null) {
				dataLink1.setDataSrcValue("", ""); // pass null for the tag name to post all data in the datasrc
				this.clickDelay = 3;
			}
			break;
			
		case "write":
			if (params.length>0) {
					// param0 will override the write value
				writeValue = parseInt(params[0]);
			}
			if (dataLink1 != null) {
				dataLink1.setDataSrcValue(writeValue);
				this.clickDelay = 3;
			}
			break;
			
		case "inc":
			if (dataLink1 != null) {
				var value = dataLink1.getDataSrcValue();
				if (params.length > 0) {
					// param0 is the increment amount
					value = value + parseInt(params[0]);
				}
				else {
					value = value + 1;
				}
				dataLink1.setDataSrcValue(value);
			}
			break;
			
		case "dec":
			if (dataLink1 != null) {
				var value = dataLink1.getDataSrcValue();
				if (params.length > 0) {
					// param0 is the increment amount
					value = value - parseInt(params[0]);
				}
				else {
					value = value - 1;
				}
				dataLink1.setDataSrcValue(value);
			}
			break;
			
		case "loadurl":
			var theUrl = null;
			if (params.length>0) {
					// param0 is the url
				theUrl = params[0];
			}
			if (theUrl != null) {
				location.href = theUrl; 
			}
			break;
						
		case "None":
			break;
	}


};


/**
*	Light widget
*
*/
function LightWgt(wgtId) {
	this.wgtId = wgtId;
	this.dataLinks = new Array();
	this.numStates = 2;
	this.imageSize = 32;

};

LightWgt.prototype = new Widget();

LightWgt.prototype.init = function(wgtProps) {

	if (wgtProps != null) {
		if (wgtProps.length >= 1) 
			this.numStates = wgtProps[0];
		if (wgtProps.length >= 2) 
			this.imageSize = wgtProps[1];
	}	
};
LightWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
LightWgt.prototype.setFieldValue = function(tag, newValue) {	
	
	var docField = document.getElementById(this.wgtId);
	if (docField != null) {
		var value = newValue % this.numStates;
			// select the image in the image list (use neg values for images)
		var imgOffset = -parseInt(value * this.imageSize);
		docField.style.backgroundPosition = imgOffset + "px 0px";
	}	
};
/**
*	Light widget
*
*/
function PanImageWgt(wgtId) {
	this.wgtId = wgtId;
	this.dataLinks = new Array();
	this.width = 100;
	this.height = 100;
	this.x = 0;
	this.y = 0;

};

PanImageWgt.prototype = new Widget();

PanImageWgt.prototype.init = function(wgtProps) {

	if (wgtProps != null) {
		if (wgtProps.length >= 1) 
			this.x = -parseInt(wgtProps[0]);
		if (wgtProps.length >= 2) 
			this.y = -parseInt(wgtProps[1]);
		if (wgtProps.length >= 3) 
			this.width = parseInt(wgtProps[2]);
		if (wgtProps.length >= 4) 
			this.height = parseInt(wgtProps[3]);
	}
		// needed to init the image position
	this.setFieldValue("",0);	
};
PanImageWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
PanImageWgt.prototype.setFieldValue = function(tag, newValue) {	
	
	var docField = document.getElementById(this.wgtId);
	if (docField != null) {
		var value = newValue; 
		if (tag=="PosX") {
			this.x += parseInt(newValue);
			if (this.x < -this.width)
				this.x = -this.width;
			else if (this.x > 0)
				this.x = 0;
		} else if (tag=="PosY") {
			this.y += parseInt(newValue);
			if (this.y < -this.height)
				this.y = -this.height;
			else if (this.y > 0)
				this.y = 0;		
		}
		docField.style.backgroundPosition = this.x + "px " + this.y + "px";
	}	
};
/**
*	Multistate Image widget
*
*/
function MultistateWgt(wgtId) {
	this.wgtId = wgtId;
	this.dataLinks = new Array();
	this.numStates = 2;
	this.imageSize = 32;

};

MultistateWgt.prototype = new Widget();

MultistateWgt.prototype.init = function(wgtProps) {
	this.initField(fieldProps);	

	if (wgtProps != null) {
		if (wgtProps.length >= 1) 
			this.numStates = wgtProps[0];
		if (wgtProps.length >= 2) 
			this.imageSize = wgtProps[1];
	}	
};
MultistateWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
MultistateWgt.prototype.setFieldValue = function(tag, newValue) {	
	
	var docField = document.getElementById(this.wgtId);
	if (docField != null) {
		var value = newValue; 

		var imageFields = docField.getElementsByTagName("div");
		value = value % imageFields.length;
			// hide all image
		for (i=0; i<imageFiels.length; i++) {
			imageFields[i].style.visibility = "hidden";
		}
			// show the selected image
		if (imageFields.length > value) {
			imageFields[value].style.visibility = "visible";
		}

	}	
};
/**
*	Input Box widget
*
*/
function InputBoxWgt(wgtId) {
	this.wgtId = wgtId;
	this.dataLinks = new Array();
	this.curValue = 0;
	this.txtColors = new Array();
	this.txtColors[0] = "#ff0000";
	this.txtColors[1] = "#00ff00";
};

InputBoxWgt.prototype = new Widget();

InputBoxWgt.prototype.init = function(fieldProps, wgtProps) {
	this.initField(fieldProps);
	if ((wgtProps != null) && (wgtProps.length > 1)) {
		for (var i=0; i<wgtProps.length; i++) {
			this.txtColors[i] = wgtProps[i+1];
		}
	}
};
InputBoxWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
InputBoxWgt.prototype.updateValue = function() {	
	if (this.tag != "None") {
		var inputWgt = document.getElementById(event.srcElement.id);
		this.curValue = inputWgt.value;

			//Update the data set values array with the changed value
		if (this.dataSrc == "Write Data") {
			this.updateDataSet();
		}
	}
};

InputBoxWgt.prototype.updateDataSet = function() {
		//update the values array of write data set
	var dataSrcWgt1 = pageEng.getDataSource(this.dataSrc);
	dataSrcWgt1.setTagValue(this.tag, this.curValue);
};

/**
*	Check Box Widget
*
*/
function CheckBoxWgt(wgtId) {
	this.wgtId = wgtId;
	this.dataLinks = new Array();
	this.curState;
};

CheckBoxWgt.prototype = new Widget();

CheckBoxWgt.prototype.init = function(fieldProps, wgtProps) {
	this.initField(fieldProps);
	if ((wgtProps != null)) {
		this.curState = wgtProps[0];
	}
		//Update the data set values array to reflect the initial state value (set at edit mode)
	if (this.dataSrc == "Write Data")
		this.updateDataSet();
};

	//Function to set the current value read from IDAL to the field on the web page 
CheckBoxWgt.prototype.setFieldValue = function(tag, newState) {
	var docField = document.getElementById(this.wgtId);
	if (docField != null) { 
		var chkField = docField.childNodes[0];
		if (newState == 1)
			chkField.checked = true;
		else
			chkField.checked = false;
	}
};

	//Function to update the state value changed at run time to the widget property 
	//as well as data set values array
CheckBoxWgt.prototype.updateValue = function() {
	if(this.tag != "None") {
		if (this.curState == 1) 
			this.curState = 0;
		else
			this.curState = 1;
		
			//Update the data set values array with the changed state value
		if (this.dataSrc == "Write Data")
			this.updateDataSet();
	}
};

CheckBoxWgt.prototype.updateDataSet = function() {
		//update the values array of write data set
	var dataSrcWgt1 = pageEng.getDataSource(this.dataSrc);
	dataSrcWgt1.setTagValue(this.tag, this.curState);
};

/**
*	Radio Button Widget
*
*/
function RadioButtonWgt(wgtId) {
	this.wgtId = wgtId;
	this.dataLinks = new Array();
	this.curValue = 0;
	this.curState = 0;
};

RadioButtonWgt.prototype = new Widget();

RadioButtonWgt.prototype.init = function(fieldProps, wgtProps) {
	this.initField(fieldProps);
	if ((wgtProps != null)) {
		this.curState = wgtProps[0];
		this.curValue = wgtProps[1];
	}
		//Update the data set values array with this radio value if this radio button 
		//is selected at edit mode)
	if (this.curState==1 && this.dataSrc == "Write Data")
		this.updateDataSet();
};
RadioButtonWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
	//Function to update the state value changed at run time to the widget property 
	//as well as data set values array
RadioButtonWgt.prototype.updateValue = function() {
	var me = this;
	if(me.tag != "None") {
			//Update the data set values array with the radio value
		if (me.dataSrc == "Write Data")
			me.updateDataSet();
	}
};

RadioButtonWgt.prototype.updateDataSet = function() {
	var me = this;
		//update the values array of write data set
	var dataSrcWgt1 = pageEng.getDataSource(me.dataSrc);
	dataSrcWgt1.setTagValue(me.tag, me.curValue);
};

/**
*	Combo Box Widget
*
*/
function ComboBoxWgt(wgtId) {
	this.wgtId = wgtId;
	this.dataLinks = new Array();
	this.comboTxts = new Array();
	this.comboVals = new Array();
	this.comboLen = 0;
	this.curValue = 0;
};

ComboBoxWgt.prototype = new Widget();

ComboBoxWgt.prototype.init = function(fieldProps, wgtProps) {
	this.initField(fieldProps);
	if(wgtProps != null) {
		this.comboLen = wgtProps[0];
		this.comboTxts = wgtProps[1];
		this.comboValues = wgtProps[2];
	}
		
	var docField = document.getElementById(this.wgtId);
	var comboField = docField.childNodes[0];
	this.curValue = comboField.options[comboField.selectedIndex].value;
	
/* -----------caused an error
		//Update the data set values array to reflect the initial state value (set at edit mode)
	if (this.dataSrc == "Write Data") {
		this.updateDataSet();
	}
*/	
};
ComboBoxWgt.prototype.addDataLink = function(newLink) {
	this.dataLinks[this.dataLinks.length++] = newLink;
};
	//Function to update the state value changed at run time to the widget property 
	//as well as data set values array
ComboBoxWgt.prototype.updateValue = function() {
	if(this.tag != "None") {
		//var comboWgt = document.getElementById(event.srcElement.id);
		var comboWgt = document.getElementById(this.wgtId + "_id");
		this.curValue = comboWgt.options[comboWgt.selectedIndex].value;
		var dataSrcWgt1 = pageEng.getDataSource(this.dataSrc);

			//Update the data set values array with the changed state value
		if (this.dataSrc == "Write Data") {
			dataSrcWgt1.setTagValue(this.tag, this.curValue);
			
    		dataSrcWgt1.postData(this.tag);

		}
	}

};