if(!commons) {
var commons = new function() {

	var DEBUG = false;

	this.alertError = function(e) {
		var msg = '';
		for(var i in e){
			msg += i+':'+e[i]+'\n';
		}
		alert(msg);		
	}
	
	this.log = function(s) {
		if(!DEBUG) return;
		var loggerPanel = document.getElementById("loggerPanel");
		if(!loggerPanel) {
			loggerPanel = document.createElement("div");
			loggerPanel.id="loggerPanel";
			loggerPanel.style.backgroundColor = "yellow";
			loggerPanel.style.overflow = "auto";
			loggerPanel.style.top = "50%";
			loggerPanel.style.left = "2%";
			loggerPanel.style.width = "75%";
			loggerPanel.style.height = "75%";
			loggerPanel.style.position = "absolute";
			loggerPanel.style.zIndex = 1;						
			document.body.appendChild(loggerPanel);
		}
		var logEntry = document.createElement("div");
		loggerPanel.appendChild(logEntry);
		logEntry.innerHTML = s + "<BR/>";	
	}
	
	this.getBrowserType = function() {
		function found(str,pattern,index) { return str.indexOf(pattern,index)!=-1; }
		
		var text = navigator.userAgent;
		var name = null;
		var version = null;
		var index = -1;
		if((index=text.indexOf('MSIE'))!=-1) {
			name = "ie";
			if(found(text,"MSIE 6.",index)) version = '6';
			else if(found(text,"MSIE 7.",index)) version = '7';
			else if(found(text,"MSIE 8.",index)) version = '8';
		}
		else if((index=text.indexOf('Chrome'))!=-1) {
			name = "chrome";
			if(found(text,"Chrome/1.",index)) version = '1';
			else if(found(text,"Chrome/2.",index)) version = '2';
			else if(found(text,"Chrome/3.",index)) version = '3';
		}
		else if((index=text.indexOf('Firefox'))!=-1) {
			name = "firefox";
			if(found(text,"Firefox/1.",index)) version = '1';
			else if(found(text,"Firefox/2.",index)) version = '2';
			else if(found(text,"Firefox/3.0",index)) version = '3.0';
			else if(found(text,"Firefox/3.1",index)) version = '3.1';
			else if(found(text,"Firefox/3.5",index)) version = '3.5';
		}
		else if((index=text.indexOf('Safari'))!=-1) {
			name = "safari";
		}
		else if((index=text.indexOf('Opera'))!=-1) {
			name = "opera";
		}
		return {
			name: name,
			version: version
		};
	}
	var browser = this.getBrowserType();
	this.browser = browser;

	this.getJQueryObj = function() {
		var myJQueryObj = null;
		if(typeof commons_ui_jquery_obj  != 'undefined') {
			if(commons_ui_jquery_obj) {
				myJQueryObj = commons_ui_jquery_obj;
			}
			else {
				myJQueryObj = $;				
			}
		}
		else {
			myJQueryObj = $;			
		}

		if(!myJQueryObj) {
			alert("找不到 jQuery 物件! \n" +
					 "如果有使用jQuery.noConflict, e.g. var myJQueryObj = jQuery.noConflict();	\n"+
					 "請另外 assign var commons_ui_jquery_obj = myJQueryObj;"
					 );
		}
		return myJQueryObj;
	}
		
	this.getBoundInContainer = function(htmlElement) {
				
		var bound = {};
		bound.x = htmlElement.offsetLeft;
		bound.y = htmlElement.offsetTop;			

		var parentNode = htmlElement.offsetParent;
		while(parentNode) {			

			
			var nodeName = parentNode.nodeName;
			/*
			if(nodeName!='TD' && nodeName!='TH' && nodeName!='TABLE') {
				break;
			}
			*/
			bound.x += parentNode.offsetLeft;
			bound.y += parentNode.offsetTop;
			parentNode = parentNode.offsetParent;


										
		}						
		bound.w = htmlElement.offsetWidth;
		bound.h = htmlElement.offsetHeight;
				
		return bound;
	}


	var bodyOnloadFuncs = []; 
	this.bodyOnload = function(func) {
		if(bodyOnloadFuncs.length==0) {
				var bodyOnloadFunc = function() {
					for(var i=0;i<bodyOnloadFuncs.length;i++){
						bodyOnloadFuncs[i]();
						//alert(bodyOnloadFuncs[i]);
					}
				}
				commons.attachEvent(window,bodyOnloadFunc,'load');
		}
		bodyOnloadFuncs.push(func);
	}
				
	this.attachEvent = function(htmlElement,func,eventName) {
		if(document.addEventListener) {
			htmlElement.addEventListener(eventName, func,true);
		}
		else {
			htmlElement.attachEvent("on"+eventName, func);
		}			
	}
	
	this.detachEvent = function(htmlElement,func,eventName) {
		if(document.removeEventListener) {
			htmlElement.removeEventListener(eventName, func,true);
		}
		else {
			htmlElement.detachEvent("on"+eventName, func);
		}			
	}

	this.attachChild = function(parentNode,childNode) {
		if(childNode.parentNode) {
			if(childNode.parentNode!==parentNode) {
				childNode.parentNode.removeChild(childNode);
				parentNode.appendChild(childNode);
			}
		}
		else {
			parentNode.appendChild(childNode);
		}
	}

	this.Dom2Event = function(e) {
		if(!e) e = window.event;
		
		this.preventDefault = function() {
			if(!e.preventDefault) {
				e.returnValue=false;	
			}
			else {
				e.preventDefault();
			}
		}
		
		if(e.target) {
			this.target = e.target;	
		}
		else if(e.srcElement) {
			this.target = e.srcElement;	
		}
		
		this.keyCode = e.keyCode;
	}	
	
	this.isIeAndDocType = function() {
		if(!commons.isIe()) return false;
		if(document.documentElement && document.documentElement.clientWidth) {
			return true;
		}	
		return false;
	}
	
	this.isIe = function() {
		return !document.addEventListener;
	}

	this.ltrim = function(str){
		return str.replace(/^[\s]*/gi,"");
	}
	this.rtrim = function(str){
		return str.replace(/[\s]*$/gi,"");
	}
	this.trim = function(str){
		return str.replace(/(^\s*)|(\s*$)/g, "");
	}
	this.reverse = function(str) {
		var newStr = '';
		for(var i=str.length-1; i >=0; i--) {		
			newStr += str.charAt(i);
		}		
		return newStr;
	}
	
	this.isTrueYesOn = function(str) {
		str = str.toLowerCase();
		if(str=='true' || str=='yes' || str=='on') return true;
		return false;
	}

	this.loadJs = function(token,url) {
		try {
			eval("var t="+token);
		}
		catch(e) {
			
		}
		
		if(!t) {
			var result = commons.postSync(url);
			eval(result);
		}

	}
	
	this.postSync = function(url, params) {		
		return commons.send({
				method: "POST",
				url: url,
				async: false,
				params: params
			}); 		
	}
	this.postAsync = function(options) {		
		return commons.send({
				method: "POST",
				async: true,
				url: options.url,				
				params: options.params,
				callback: options.callback,
				errorback: options.errorback,
				callbackData: options.callbackData
			}); 		
	}
		
	this.send = function(options) {

		var method = options.method;			
		var async = options.async;
		var url = options.url;			
		var params = options.params;
		var callback = options.callback;
		var errorback = options.errorback;
		var callbackData = options.callbackData;
						
		if(!method) { method="POST"; }
		if(!async) { async=false; }
		if(!params) { params=null; }
		
		method = method.toUpperCase();	
		var paramString = commons.encodeParams(params);
		if(method=='GET') {
			url += "?" + paramString;
			paramString = null;
		}
		
		/*
		alert(
			"method="+method+"\n"+
			"url="+url+"\n"+
			"async="+async+"\n"+
			"callback="+callback+"\n"+
			"paramString="+paramString+"\n"
		);
		*/
										
		// new Request								
		var req = null;
		if(typeof ActiveXObject != "undefined") {
			req = new ActiveXObject("Microsoft.XMLHTTP");	
		}
		else if(typeof XMLHttpRequest != "undefined") {
			req = new XMLHttpRequest();	
		}
		else {
			// should throw exception	
		}		

		if(async) {
			req.onreadystatechange = function(){			
				if (req.readyState == 4) {					
					if (req.status == 200) {
						callback(req.responseText,callbackData);
					}
					else {
						var statusText = null;
						// for some reason firefox throw exception when getting this attribute
						try {	statusText = req.statusText; }
						catch(e) {}

						// 204 - No Response 
						// 404 - Not found 
						// 500 - Internal Error 							
						
						errorback(req.status,statusText,callbackData);						
					}
				}
			}
		}				
						
		// open
		try {
			var date1 = (new Date()).getTime();
	 		req.open(method, url, async);
			var date2 = (new Date()).getTime();
			//alert("open "+url+" took: " + (date2-date1) + " ms");
	 	}
	 	catch(e) {
	 		// should throw exception again	indicating user security preference has specifically disallowed ajax
			throw e;
	 	}


		//req.setRequestHeader("Accept-Charset", "UTF-8");
		
		if(method=='POST') {
			req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
		}
		
		// send
		try {		
			var date1 = (new Date()).getTime();			
	    	req.send(paramString);    
			var date2 = (new Date()).getTime();
			//alert("send "+url+" took: " + (date2-date1) + " ms");
		}
		catch(e) {
			throw e;				
		}	
		
		if(!async) {
			if (req.status == 200 || req.status == 0) { return req.responseText; }	
			else { return null; }					
		}			
																	
	}
	
	this.encodeParams = function(params) {
		
		if(!params) { return null; }
		
	    var pairs = [];
	    var regexp = /%20/g;
	
	    for(var name in params) {
				var value = params[name].toString();			        
				var pair = encodeURIComponent(name).replace(regexp,"+") + '=' +
										encodeURIComponent(value).replace(regexp,"+");
				//pair = name + "=" + value;
				pairs.push(pair);
	    }
	    return pairs.join('&');
	}								
	
	this.cloneObject = function(obj) {
		var o = {};
		for(var i in obj) {
			o[i]=obj[i];
		}
		return o;
	}

	var inAlert=false;
	this.alarm = function(msg) {
		if(inAlert) return;
		inAlert=true;
		alert(msg);	
		inAlert=false;
	} 
	this.isInAlert = function() {
		return inAlert;
	}
			
	this.crud = new function() {
		this.getCheckedValues = function(elementName) {
			var checkboxArray = document.getElementsByName(elementName);
			var newArray = [];
			for(var i=0; i < checkboxArray.length; i++) {
				var element = checkboxArray[i];
				if(element.checked) {
					newArray.push(element.value);
				}
			}
			return newArray;
		}
		this.getDeleteList = function(elementName) {
			var list = this.getCheckedValues(elementName);
			if(list.length==0) {
				alert("\u8acb\u9078\u64c7\u9805\u76ee!");
				return false;
			}
			return list.join(",");
		},
		this.getUpdateId =  function(elementName) {
			var list = this.getCheckedValues(elementName);
			if(list.length==0) {
				alert("\u8acb\u9078\u64c7\u9805\u76ee!");
				return false;
			}
			else if(list.length>1) {
				alert("\u4e00\u6b21\u50c5\u80fd\u4fee\u6539\u4e00\u500b\u9805\u76ee!");
				return false;
			}
			return list[0];
		}
		
	}();

	this.validator = null;
	if(typeof lwValidator != 'undefined') {
		this.validator = lwValidator;
	} 
		
	this.widget = new function() {
		
		this.DropDownEffect =  function(options) {

			var targetElement = options.targetElement;
			var dropDownElement = options.dropDownElement;	
			var dropDownWidth = options.dropDownWidth;	
			var dropDownHeight = options.dropDownHeight;
			
			var dropDownContainer = document.createElement("div");
			var dropDownFrame = document.createElement("iframe");

			dropDownContainer.style.zIndex=10000;			
			dropDownContainer.style.display='none';			
			dropDownContainer.style.position='absolute';
			dropDownContainer.style.width=dropDownWidth+'px';			
			dropDownContainer.style.height=dropDownHeight+'px';
			
			dropDownFrame.style.position='relative';			
			dropDownFrame.style.left='0'+'px';
			dropDownFrame.style.top='0'+'px';
			dropDownFrame.style.width=dropDownWidth+'px';			
			dropDownFrame.style.height=dropDownHeight+'px';

			dropDownElement.style.border='black 1px groove';									
			dropDownElement.style.position='absolute';			
			dropDownElement.style.left='0'+'px';
			dropDownElement.style.top='0'+'px';
			dropDownElement.style.width=(7+dropDownWidth)+'px';			
			dropDownElement.style.height=(4+dropDownHeight)+'px';
									
			dropDownContainer.appendChild(dropDownFrame);
			dropDownContainer.appendChild(dropDownElement);
			
			dropDownFrame.frameBorder='0';
			// dropDownFrame.style.border='0px solid black';
			
			document.body.appendChild(dropDownContainer);											


			var openDropDown = function() {
				// reposition everytime onclick
				var topOffset = 0;				
				
				if(commons.isIeAndDocType()) {
					if(browser.version=='7' || browser.version=='8') {
						topOffset=4;						
					}
				}				
				var bound = commons.getBoundInContainer(targetElement);		
				dropDownContainer.style.backgroundColor='white';
				dropDownContainer.style.left = bound.x+'px';
				dropDownContainer.style.top = (topOffset+bound.y+bound.h) + 'px';
								
				dropDownContainer.style.display = "";	
				
				if(options.doRePositionClock) {
					options.crudTime.textBox_onchange();
					
					var clockFrame = document.getElementById("clockFrame");
					clockFrame.style.display='';
					if(options.datetime) {
						clockFrame.style.left = (210+15+bound.x)+'px';
						clockFrame.style.top = (15+topOffset+bound.y+bound.h) + 'px';						
					}
					else {
						var docTypeOffSet = (document.documentElement && document.documentElement.clientWidth) ? 2 : 3;
						clockFrame.style.left = (docTypeOffSet+3+bound.x)+'px';
						clockFrame.style.top = (docTypeOffSet+topOffset+bound.y+bound.h) + 'px';						
					}
					clockFrame.justOpened=targetElement.id;
				}
					
				commons.attachEvent(document,closeDropDown,"mousedown");		
			};
			var closeDropDown = function(e) {
				if(!e) e = window.event;
				var target = e.target || e.srcElement;
				var isWithin = false;
				while(true) {
					if(target===dropDownElement || target===targetElement) {
						isWithin = true;
						break;		
					}
					if(!target.parentNode) {
						break;
					}
					target = target.parentNode;
				}
				if(!isWithin) {
					dropDownContainer.style.display = "none";	

					if(options.doRePositionClock) {
						var clockFrame = document.getElementById("clockFrame");
						if(clockFrame.justOpened==targetElement.id) {							
							clockFrame.style.display='none';
						}
					}				
					commons.detachEvent(document,closeDropDown,"mousedown");			
				
				}							
			}
	
			commons.attachEvent(targetElement,openDropDown,"mousedown");

			this.openDropDown = openDropDown;
			this.closeDropDown = function() {
				dropDownContainer.style.display = "none";
			}							
		}
			
		this.InlineDropDownEffect =  function(options) {

			var targetElement = options.targetElement;
			var dropDownElement = options.dropDownElement;	
			var dropDownWidth = options.dropDownWidth;	
			var dropDownHeight = options.dropDownHeight;
			
			var dropDownContainer = document.createElement("div");

			dropDownContainer.style.position='relative';		
			dropDownContainer.style.zIndex=10000;			
			dropDownContainer.style.display='none';			
			dropDownContainer.style.width=dropDownWidth;			
			dropDownContainer.style.height=dropDownHeight;

			dropDownElement.style.border='black 1px groove';												
			dropDownElement.style.width=dropDownWidth;			
			dropDownElement.style.height=dropDownHeight;
									
			dropDownContainer.appendChild(dropDownElement);
			
			targetElement.parentNode.appendChild(dropDownContainer);

			var openDropDown = function() {
				dropDownContainer.style.display = "";	
				
				commons.attachEvent(document,closeDropDown,"mousedown");		
			};
			var closeDropDown = function(e) {
				if(!e) e = window.event;
				var target = e.target || e.srcElement;
				var isWithin = false;
				while(true) {
					if(target===dropDownElement || target===targetElement) {
						isWithin = true;
						break;		
					}
					if(!target.parentNode) {
						break;
					}
					target = target.parentNode;
				}
				if(!isWithin) {
					dropDownContainer.style.display = "none";	
					
					commons.detachEvent(document,closeDropDown,"mousedown");			
				}							
			}
	
			commons.attachEvent(targetElement,openDropDown,"mousedown");
			
			this.closeDropDown = function() {
				dropDownContainer.style.display = "none";
			}							
		}
		this.InlineEffect =  function(options) {
			var targetElement = options.targetElement;
			var dropDownElement = options.dropDownElement;			
			var dropDownContainer = document.createElement("div");
			
			dropDownContainer.style.position='relative';
			dropDownContainer.appendChild(dropDownElement);
			
			targetElement.parentNode.appendChild(dropDownContainer);						
		}	
		
		this.uniqueIds = {};
		this.generateUniqueId = function(widgetName) {
			var id = commons.uniqueIds[widgetName];
			if(!id) id=0;
			id++;
			commons.uniqueIds[widgetName] = id;
			return widgetName+id;
		}		
		
		this.overcss = function(htmlElement){
			htmlElement.original_backgroundColor=htmlElement.style.backgroundColor;
			htmlElement.style.backgroundColor="#FFDBA6";
		}
		this.outcss = function(htmlElement){
			htmlElement.style.backgroundColor=htmlElement.original_backgroundColor;
		}			
		this.displayTagTableCenterNumbers = function() {
			var table = document.getElementById("dto");	
			if(!table) return;
			
			var tBody = table.getElementsByTagName('TBODY')[0];		
			var rows = tBody.getElementsByTagName('TR');		
			for(var i=0;i<rows.length;i++) {
				var row = rows[i];
				var columns = row.getElementsByTagName('TD');				
				for(var j=0;j<arguments.length;j++) {
					var pos = arguments[j];
					columns[pos].style.textAlign='center';
				}
			}			
		}
		this.displayTagTableCss = function(displayTagTableId,count) {
			commons.bodyOnload(function() {
				if(!displayTagTableId) return;
				
				var tableElement = document.getElementById(displayTagTableId);
				if(!tableElement) return;
				
				var tbody = null;
				if(document.addEventListener) {
					tbody = tableElement.childNodes[3];	
				}
				else {
					tbody = tableElement.childNodes[1];
				}
				
				function getTargetRow(node) {
					while(true) {
						if(node.parentNode==tbody) return node;
						node=node.parentNode;
					}
				}
								 				
				var rows = tbody.childNodes;
				if(rows) {
					var length = rows.length;
					for(var i=0;i<length;i++) {
						var tr = rows[i];
						if(tr.nodeName=='TR') {							
							tr.onmouseover = function(e) {
								var e2 = new commons.Dom2Event(e);
								//commons.widget.overcss(e2.target.parentNode);
								commons.widget.overcss(getTargetRow(e2.target));
							}
							tr.onmouseout = function(e) {
								var e2 = new commons.Dom2Event(e);
								commons.widget.outcss(getTargetRow(e2.target),'#D6FAC5');
							}							
						}
					}
				}		
				var paginationSpan = document.getElementById("paginationSpan");
				if(paginationSpan) {
					var s = paginationSpan.innerHTML;
					s = s.replace('<strong>','&lt;<strong>');
					s = s.replace('<STRONG>','&lt;<STRONG>');
					s = s.replace('</strong>','</strong>&gt;');
					s = s.replace('</STRONG>','</STRONG>&gt;');
					s += '共有'+'<span class="T11b" style="color:#ff0000;font-weight:bold;">'+count+'</span>'+'筆資料';
					paginationSpan.innerHTML = s;							
				}
				
			}); 			
		}				
		this.wrapLongLine = function(className,width) {
			var wrappedElements = $("."+className);
			for(var i=0;i<wrappedElements.length;i++){
				var wrappedElement = wrappedElements[i];
				if(document.addEventListener) {
					wrappedElement.style.width=width;
					wrappedElement.style.wordWrap='break-word';
				}
				else {
					wrappedElement.className='';
				}
			}			
		}
		this.breakLongLine = function(className,width) {
			/*
			var wrappedElements = $("."+className);
			for(var i=0;i<wrappedElements.length;i++){
				var wrappedElement = wrappedElements[i];
				if(document.addEventListener) {
					while(true) {
						if(wrappedElement.offsetWidth>width) {
							var value = wrappedElement.innerHTML;
							for(var j=value.length;j>=0;j--) {
								
							}
						}
					}
				}
				else {
					wrappedElement.className='';
				}
			}		
			*/	
		}
		this.createErrorDisplaySpan = function(options) {
			var errorDisplayId = options.errorDisplayId;			
			var errorDisplay = null;
			if(errorDisplayId) {
				errorDisplay = document.getElementById(errorDisplayId);
				if(!errorDisplay) {					
					alert('Cannot find element with errorDisplayId='+errorDisplayId);
					options.errorDisplayId=null;
					errorDisplay = document.createElement("span");	
				}
			}
			else {
				errorDisplay = document.createElement("span");	
			}		
			errorDisplay.className='red';
			return errorDisplay;
		}
		this.getElementsByName = function(name) {
			if(document.all) {
				return document.all[name];
			}
			else {
				return document.getElementsByName(name);
			}
		}		
		this.getFirstElementByName = function(name) {
			return this.getElementsByName(name)[0];
		}		
		
	}();		


	this.ui = {};			

		
}();
}