/**
	* the container where the list process instance preview is placed on the process list
	*/
	var processListInstancePreviewContainer = "process_list_instance_preview";
	
	/**
	* the container for the instance preview data, inside the processListInstancePreviewContainer
	*/
	var instanceContainer = "process_list_instance_preview_container";
	
	/**
	* the navigation container for the preview
	*/
	var instanceContainerNavigation = "process_list_instance_preview_container_navigation";

	/**
	* Ajax call to get the data of a given process instance to be viewed on the process list
	*/
	function previewInstance(instanceId, viewId){
		var txturl = "ajax.do"
		var params = "function=de.tto.monitoring.get.instance.preview&value=" + instanceId + "&processId=" + viewId + "#preview_instance";
		var callback = handleInstanceResponse;
		
		$(process_list_instance_preview).update("<div class=\"load_data\"></div>");
		CommonUtils.showLoader("Loading...");
		
		// highlight row
		highlightSelectedListRow(instanceId);
		// init request as last step because sometimes it is faster than js is preparing the content target
		initRequest('get', txturl, params, callback);
	}
	
	/**
	* closes the list instance preview
	*/
	function closeInstancePreview(){
		var previewBox = $(process_list_instance_preview);
		var innerContainer = $(instanceContainer);
		if(previewBox && innerContainer){
			previewBox.removeChild(innerContainer);
			// restore background color of all rows
			highlightSelectedListRow(-1);
		}
	}
	
	
	/**
	* get the response xml from ajax request for process instance
	*/
	function handleInstanceResponse(request){
		
		var columnCount = 3;
		var mobile = false;
		
		inlineAttributes = new Array();
		var xmlResponse = request.responseXML;
		var previewBox = $(process_list_instance_preview);
		if(xmlResponse && previewBox){

			var result = "<div id=\"" + instanceContainer + "\">";
				result += "<div class=\"" + instanceContainer + "\">";
				
					/* Add the Navigation for the preview... */
					/* ##################################### */
					result += "<div class=\"" + instanceContainerNavigation + "\">"
							result += "<div class=\"instance_menu\">";
								result += "<div class=\"instance_menu_item\"><a href=\"#\" onClick=\"closeInstancePreview();\"><img src=\"client/images/gificons/cross.gif\" title=\"" + MessageProperties.PROCESS_LIST_INSTANCE_PREVIEW_CLOSE + "\"/></a></div>";
							result += "</div>";
					result += "</div>";
					/* ##################################### */
					
					
			var attributeGroups = xmlResponse.getElementsByTagName("attributeGroup");
			var anchor = "instance_preview";
			result += "<a name=\""+anchor+"\">";
			result += "<table class=\"instance_preview_table_attributes\">";
			
			if (attributeGroups && attributeGroups.length > 0) {
				var attributeGroupsLength = attributeGroups.length;
				for (var g = 0; g < attributeGroupsLength; g++) {
					var attributeGroup = attributeGroups[g];
												
					var groupName = "N/A";
					var groupDescription = "N/A";	
						
					var groupAttributes = attributeGroup.attributes;
					if(groupAttributes){
						var gAttLength = groupAttributes.length;
						for(var j=0; j<gAttLength; j++){
							if(groupAttributes[j].nodeName == 'name')
								groupName = groupAttributes[j].nodeValue;
							else if(groupAttributes[j].nodeName == 'description')
								groupDescription = groupAttributes[j].nodeValue;
						}
					}
				
					result += "<thead>";
					result += "<tr><th colspan=\"6\">" + groupName + "</th></tr>";
					result += "<tr>";
					result += "</thead>";
					
					var recordAttributes = attributeGroup.getElementsByTagName("attribute");
					var counter = 1;
					var recordAttributesLength = recordAttributes.length;
					for(var i=0; i<recordAttributesLength; i++){
						var recordAttribute = recordAttributes[i];
						if(recordAttribute){
							if(counter == 1)
								result += "<tr>";
								
							var name = "N/A";
							var value = "N/A";	
							var inline = false;	
							var attributeId = "";	
							var recordId = "";	
								
							var attributes = recordAttribute.attributes;
							if(attributes){
								var rAttLength = attributes.length;
								for(var j=0; j<rAttLength; j++){
									if(attributes[j].nodeName == 'name')
										name = attributes[j].nodeValue;
									else if(attributes[j].nodeName == 'value')
										value = attributes[j].nodeValue;
									else if(attributes[j].nodeName == 'inline')
										inline = attributes[j].nodeValue == "true";
									else if(attributes[j].nodeName == 'attributeId')
										attributeId = attributes[j].nodeValue;
									else if(attributes[j].nodeName == 'recordId')
										recordId = attributes[j].nodeValue;
										
								}
							}
							
							if (inline && attributeId != "" && attributeId != "-1" && recordId != "" && recordId != "-1") {
								inlineAttributes.push(new Array(recordId, attributeId));
							}
								
							result += "<td class=\"instance_preview_table_label\">" + name + "</td><td class=\"instance_preview_table_value\">" + value + "</td>";
							
							if(counter == columnCount || i+1 == recordAttributesLength){
								result += "</tr>";
								counter = 0;
							}
							
							counter++;
						}
					}
				}
			}
			result += "</table>";
			
			var tasks = xmlResponse.getElementsByTagName("task");
			var tasksLength = tasks.length;
			if(tasksLength > 0){
				
				result += "<table class=\"instance_preview_table_tasks\">";
				result += "<thead>";
				result += "<tr><th colspan=\"5\">" + MessageProperties.PROCESS_LIST_INSTANCE_PREVIEW_TASKS + "</th></tr>";
				result += "<tr>";
				result += "<td width=\"20px\">" + MessageProperties.COMMON_ID + "</td>";
				result += "<td width=\"20px\">" + MessageProperties.COMMON_STATUS + "</td>";
				result += "<td>" + MessageProperties.COMMON_BPTS + "</td>";
				result += "<td>" + MessageProperties.COMMON_NAME + "</td>";
				if (!mobile)
					result += "<td>" + MessageProperties.COMMON_DESCRIPTION + "</td>";
				result += "</tr>";
				result += "</thead>";
				result += "<tbody>";
				
				for(var i=0; i<tasksLength; i++){
					var task = tasks[i];
					var attributes = task.attributes;
					if(attributes){
						var tAttLength = attributes.length;
						var instId = "";
						var status = "";
						var name = "N/A";
						var descr = "N/A";
						var bpts = "";
						var icon = "";
						for(var j=0; j<tAttLength; j++){
							if(attributes[j].nodeName == 'id')
								instId = attributes[j].nodeValue;
							if(attributes[j].nodeName == 'status')
								status = attributes[j].nodeValue;
							else if(attributes[j].nodeName == 'icon')
								icon = attributes[j].nodeValue;
							else if(attributes[j].nodeName == 'name')
								name = attributes[j].nodeValue;
							else if(attributes[j].nodeName == 'description')
								descr = attributes[j].nodeValue;
							else if(attributes[j].nodeName == 'bpts')
								bpts = attributes[j].nodeValue;
						}
						result += "<tr>";
							result += "<td>" + instId + "</td>";
							result += "<td align=\"center\" class=\"image\">";
								if (icon && icon != "") {
									result += "<img src=\""+icon+"\" title=\""+name+": "+MessageProperties.getStatusName(status)+"\"/>";
								}
								result += "<img src=\"client/images/status_" + status + ".gif\" title=\""+MessageProperties.getStatusName(status)+"\"/>";
							result += "</td>";
							result += "<td>" + bpts + "</td>";
							result += "<td>" + name + "</td>";
							if (!mobile)
								result += "<td>" + descr + "</td>";
						result += "</tr>";
					}
				}
				result += "</tbody>";
				result += "</table>";
			}
			
				result += "</div>";
			result += "</div>";
			
			previewBox.update(result);
			CommonUtils.clearLoaderDelayed(1000);
			// jump to named anchor
			window.location.hash=anchor; 
		}
		if (inlineAttributes) {
			var length = inlineAttributes.length;
			if (length > 0) {
				for (var i = 0; i < length; i++) {
					var ids = inlineAttributes[i];
					InlineCallValue.showRecordAttributeInlineValue(ids[0], ids[1]);
				}
			}
		}
	}
	
	/* ###### Functions for Tree Preview of a Record ######################## */	
	
	var instance_tree_preview_area;	
	var recordTreePreviewContainerPrefix = "record_tree_preview_container_";
	
	function showRecordTreePreview(where, recordId, viewId){
		instance_tree_preview_area = where;
		
		var container = $(where);
		var innerContainerName = recordTreePreviewContainerPrefix +"_" + where;
		var innerContainer = $(innerContainerName);
		var closingAnchor = "closing_anchor"; // the anchor name where to jump to when closing a process instance preview
		if(container && innerContainer){
			innerContainer.parentNode.removeChild(innerContainer);
			// jump to named anchor
			window.location.hash=closingAnchor;
		} else {
		
			var txturl = "ajax.do"
			var params = "function=de.tto.monitoring.get.instance.preview&value=" + recordId + "&processId=" + viewId ;
			var callback = handleTreePreviewResponse;
			initRequest('get', txturl, params, callback);
			CommonUtils.showLoader("Loading...");
		}
	}
	
	function handleTreePreviewResponse(request){
		var xmlResponse = request.responseXML;
		if(xmlResponse){
		
			var innerContainerName = recordTreePreviewContainerPrefix + "_" + instance_tree_preview_area;
			var anchorName = "anchor_" + innerContainerName;
		
			var result = "<a name=\"" + anchorName + "\">";
			result += "<div class=\"record_tree_view_preview\" id=\"" + innerContainerName + "\">";
				result += "<table>";
				
			var instance_preview_value = "";	
			var instance_preview_id = "";
			var instance_preview_viewId = "";
			var instance_preview_viewName = "";
				
			var data = xmlResponse.getElementsByTagName("data");
			if (data && data.length > 0) {
				var valueElem = data[0].getElementsByTagName("value");
				if (valueElem && valueElem.length > 0) {
					var attributes = valueElem[0].attributes;
					if(attributes){
						var tmp = valueElem[0].getAttribute('value');
						if (tmp)
							instance_preview_value = tmp;
					}
				}
				
				var idElem = data[0].getElementsByTagName("id");
				if (idElem && idElem.length > 0) {
					var attributes = idElem[0].attributes;
					if(attributes){
						var tmp = idElem[0].getAttribute('value');
						if (tmp)
							instance_preview_id = tmp;
					}
				}
				
				var viewElem = data[0].getElementsByTagName("view");
				if (viewElem && viewElem.length > 0) {
					var attributes = viewElem[0].attributes;
					if(attributes){
						var tmp = viewElem[0].getAttribute('value');
						if (tmp)
							instance_preview_viewId = tmp;
					}
				}
				
				var nameElem = data[0].getElementsByTagName("viewName");
				if (nameElem && nameElem.length > 0) {
					var attributes = nameElem[0].attributes;
					if(attributes){
						var tmp = nameElem[0].getAttribute('value');
						if (tmp)
							instance_preview_viewName = tmp;
					}
				}
				
			}
			
			var title = MessageProperties.COMMON_PREVIEW + " | " + instance_preview_viewName + " | " + instance_preview_value;
			var header = "<tr title=\"" + title + "\"><th colspan=\"3\">" + title + "</th>";
				header += "<th width=\"16px\"><img src=\"client/images/gificons/cross.gif\" title=\"" + MessageProperties.PROCESS_LIST_INSTANCE_PREVIEW_CLOSE + "\" onClick=\"showRecordTreePreview('" + instance_tree_preview_area + "', " + instance_preview_id + ", " + instance_preview_viewId + ", '')\"/></th></tr>";
				header += "<tr><th class=\"image\">" + MessageProperties.COMMON_STATUS + "</th><th width=\"40%\">" + MessageProperties.COMMON_NAME + "</th><th width=\"60%\" colspan=\"2\">" + MessageProperties.COMMON_DESCRIPTION + "</th></tr>";
			
			var content = "";
			var tasks = xmlResponse.getElementsByTagName("task");
			var tasksLength = tasks.length;
			var tasksAvailable = 0;
			for(var i=0; i<tasksLength; i++){
				var task = tasks[i];
				var attributes = task.attributes;
				if(attributes){
					var tAttLength = attributes.length;
					var status = "";
					var name = "N/A";
					var icon = "";
					var descr = "N/A";
					for(var j=0; j<tAttLength; j++){
						if(attributes[j].nodeName == 'status')
							status = attributes[j].nodeValue;
						else if(attributes[j].nodeName == 'icon')
							icon = attributes[j].nodeValue;
						else if(attributes[j].nodeName == 'name')
							name = attributes[j].nodeValue;
						else if(attributes[j].nodeName == 'description')
							descr = attributes[j].nodeValue;
							
						tasksAvailable = 1;
					}
					content += "<tr><td align=\"center\" class=\"image\">";
					if (icon && icon != "") {
						content += "<img src=\""+icon+"\" title=\""+name+": "+MessageProperties.getStatusName(status)+"\"/>";
					}
					content += "<img src=\"client/images/status_" + status + ".gif\" title=\""+MessageProperties.getStatusName(status)+"\"/>";
					content += "</td><td>" + name + "</td><td>" + descr + "</td></tr>";
				}
			}
			
			
			if(tasksAvailable == 1){
				result += header;
				result += content;
				
			} else {
				result += "<tr>";
				result += "<td>" + MessageProperties.PROCESS_LIST_INSTANCE_PREVIEW_NO_TASKS + "</td>";
				result += "<td width=\"16px\"><img src=\"client/images/gificons/cross.gif\" title=\"" + MessageProperties.PROCESS_LIST_INSTANCE_PREVIEW_CLOSE + "\" onClick=\"showRecordTreePreview('" + instance_tree_preview_area + "', " + instance_preview_id + ", " + instance_preview_viewId + ", '" + instance_preview_value + "')\"/></td>";
				result += "</tr>";
			}
			
			result += "</table>";
			result += "</div>";
			
			$(instance_tree_preview_area).update(result);
			// jump to named anchor
			window.location.hash=anchorName;
			// stop the loader
			CommonUtils.clearLoaderDelayed(1000);
		}
	}
	
	var height = 250;
	var width = 400;
	
	function changeChartSize(value, chartType, target){
		if(value == "+"){
			height = height + 40;
			width = width + 80;
		} else {
			if(height >= 200){
				height = height - 40;
				width = width - 80;
				
			}
		}
	}
	
	
	/* ###### Functions for TimeRange Input ################################# */
	
	var datePreferencesBoxName = "date_preferences_box";
	var datePreferencesBoxFooterName = "date_preferences_box_footer";
	var datePreferencesBoxTitle = "date_preferences_box_title";
	var datePreferencesBoxContent = "date_preferences_box_content";
	
	/*
	* function to show the form where the user can specify his date preferences
	*/
	function showDatePreferences(where, webAppContext){
		var area = $(where);
		var dateBox = $(datePreferencesBoxName);
		var dateBoxFooter = $(datePreferencesBoxFooterName);
		
		if(area && dateBox){
			// if both are avialable, the remove it 
			area.removeChild(dateBox);
			area.removeChild(dateBoxFooter);
			
		} else if(area){
			// if only area is available, add input fields...
			$(area).update("<div id=\"" + datePreferencesBoxName + "\" class=\"" + datePreferencesBoxName + "\">" + renderDatePreferences(where, webAppContext) + "</div><div id=\"" + datePreferencesBoxFooterName + "\" class=\"date_preferences_box_footer\"></div>");
		}
	}	

	
	/*
	* Build a table to show the users date preferences form.
	* The user can now modifiy his preferences regarding date / time of the lists etc.
	* @param where - the container where to place the date preferences
	* @param webAppContext - the web app context
	* Theses parameters are only used here to use them on the cancel button to savely remove the popup from the page if cancel is pressed !
	*/
	function renderDatePreferences(where, webAppContext){
	
	
		
		
		//alert("0 | 0 | 0 | 0 \n 0 | 0 | 0 | 0");
		
		
			var html = "<div class=\"" + datePreferencesBoxTitle + "\">" + MessageProperties.DATE_PREFERENCES_TITLE + "</div>";
			html += "<div class=\"" + datePreferencesBoxContent + "\">";

		html += '<form name="date_preferences_form" method="post" action="/monitoringDAV/datePreferences.do">';
		html += "<table>";
		html += "<tr><td colspan=\"9\">&nbsp;</td></tr>";
		html += "<tr>";
			html += "<td class=\"label\">" + MessageProperties.COMMON_START + "</td>";
			html += '<td colspan=\"4\"><input type="text" name="startDate" size="20" tabindex="2" value="" onblur="resetSelectFieldStart()" id="startDate"></td>';
			html += '<td>';
			html += "<img src=\"client/images/gificons/calendar.gif\" onClick=\"scwShow(scwID('startDate'),event, true,false);\" class=\"pointer\" />";
			html += '<img src=\"client/images/gificons/calendar_delete.gif\" onClick=\"javascript:FormTools.clearFormInputField(document.date_preferences_form.startDate)\" class=\"pointer\" />';
			html += "</td>";
			
		html += "</tr>";
		html += "<tr>";
			html += "<td class=\"label\">" + MessageProperties.COMMON_END + "</td>";
			html += '<td colspan=\"4\"><input type="text" name="endDate" size="20" tabindex="2" value="" onblur="resetSelectFieldEnd()" id="endDate"></td>';
			html += '<td>';
			html += "<img src=\"client/images/gificons/calendar.gif\"  onClick=\"scwShow(scwID('endDate'),event, true,false);\" class=\"pointer\" />";
			html += '<img src=\"client/images/gificons/calendar_delete.gif\" onClick=\"javascript:FormTools.clearFormInputField(document.date_preferences_form.endDate)\" class=\"pointer\" />';
			html += "</td>";
		html += "</tr>";
		html += "<!--<tr><td colspan=\"9\">&nbsp;</td></tr>-->";
		html += "<tr>";
			html += "<td class=\"label\">" + MessageProperties.COMMON_START + "</td>";
			html += "<td>";
			
			html += '<select name="dateStart_D" tabindex="3" onchange="updateDateInputFieldStart();">';
			html += "</select>";
			
			html += "</td>";
			html += "<td>" + MessageProperties.DATE_PREFERENCES_DAYS + "&nbsp;</td>";
			html += "<td>";
			
			html += '<select name="dateStart_H" tabindex="4" onchange="updateDateInputFieldStart();">';
			html += "</select>";
			
			html += "</td>";
			html += "<td>" + MessageProperties.DATE_PREFERENCES_HOURS + "&nbsp;</td>";
			html += "<td>";
			
			html += '<select name="dateStart_M" tabindex="5" onchange="updateDateInputFieldStart();">';
			html += "</select>";
					
			html += "</td>";
			html += "<td>" + MessageProperties.DATE_PREFERENCES_MINUTES + "&nbsp;</td>";
			html += "<td>";
			
			html += '<select name="dateStart_S" tabindex="6" onchange="updateDateInputFieldStart();">';
			html += "</select>";
			
			html += "</td>";
			html += "<td>" + MessageProperties.DATE_PREFERENCES_SECONDS + "&nbsp;</td>";
		html += "</tr>";
		html += "<tr>";
			html += "<td class=\"label\">" + MessageProperties.COMMON_END + "</td>";
			html += "<td>";
			
			html += '<select name="dateEnd_D" tabindex="7" onchange="updateDateInputFieldEnd();">';
			html += "</select>";
			
			html += "</td>";
			html += "<td>" + MessageProperties.DATE_PREFERENCES_DAYS + "&nbsp;</td>";
			html += "<td>";
			
			html += '<select name="dateEnd_H" tabindex="8" onchange="updateDateInputFieldEnd();">';
			html += "</select>";
			
			html += "</td>";
			html += "<td>" + MessageProperties.DATE_PREFERENCES_HOURS + "&nbsp;</td>";
			html += "<td>";
			
			html += '<select name="dateEnd_M" tabindex="9" onchange="updateDateInputFieldEnd();">';
			html += "</select>";
			
			html += "</td>";
			html += "<td>" + MessageProperties.DATE_PREFERENCES_MINUTES + "&nbsp;</td>";
			html += "<td>";
			
			html += '<select name="dateEnd_S" tabindex="10" onchange="updateDateInputFieldEnd();">';
			html += "</select>";
			
			html += "</td>";
			html += "<td>" + MessageProperties.DATE_PREFERENCES_SECONDS + "&nbsp;</td>";
		html += "</tr>";
		html += "<!--<tr><td colspan=\"9\">&nbsp;</td></tr>-->";
		html += "<tr>";
			html += "<td class=\"label\">" + MessageProperties.DATE_PREFERENCES_TIMESPAN + "</td>";
			html += "<td colspan=\"8\">";
			
			html += '<select name="dateRange" tabindex="11" onchange="updateTimeRangeField();">';
			html += "</select>";
			
			html += "</td>";
		html += "</tr>";
		html += "<!--<tr><td colspan=\"9\">&nbsp;</td></tr>-->";
		html += "<tr>";
			html += "<td></td>";
			html += "<td colspan=\"8\">";
			html += '<input type="submit" name="OK" tabindex="12" value="OK">&nbsp;';
			html += "<input type=\"button\" value=\"Cancel\" tabindex=\"13\" onClick=\"showDatePreferences('" + where + "', '" + webAppContext + "')\"/>&nbsp;";
			html += "</td>";
		html += "</tr>";
		
		html += "</table>";
		html += '</form>';
		html += "</div>";


		return html;
	}
	
	/**
	* this funtion is used to set the date input fields to the values that have been chosen
	* via the time range dropdown (this qarter, this week...)
	*/
	function updateTimeRangeField(){
		if(document.date_preferences_form){
			var dateForm = document.date_preferences_form;
			if(dateForm){
				var dateRangeBox = dateForm.dateRange;
				if(dateRangeBox){
					var value = dateRangeBox.options[dateRangeBox.selectedIndex].value;
					if(value){
						dateForm.startDate.value = value;
						dateForm.endDate.value = value;
					}
				}
				var formElements = dateForm.elements;
				if(formElements){
					for(var i=0; i<formElements.length; i++){
						var inputField = dateForm.elements[i];
						if(inputField.type == "select" || inputField.type == "select-one"){
							if(inputField.name != "dateRange")
								inputField.selectedIndex = "0";
						}
					}
				}
			} 
		}
	}
	
	/*
	* Update the input field after the selection of the dropdown boxes have changed
	*/
	function updateDateInputFieldStart(){
		// get the form
		if(document.date_preferences_form){
			var dateForm = document.date_preferences_form;
			var formElements = dateForm.elements;
			
			var startFields = new Array(4);
			
			if(formElements){
				for(var i=0; i<formElements.length; i++){
					var inputField = dateForm.elements[i];
					if(inputField.type == "select" || inputField.type == "select-one"){
						var value = inputField.options[inputField.selectedIndex].value;
						if(inputField.name == "dateStart_D")
							startFields[0] = value;
						else if(inputField.name == "dateStart_H")
							startFields[1] = value;
						else if(inputField.name == "dateStart_M")
							startFields[2] = value;
						else if(inputField.name == "dateStart_S")
							startFields[3] = value;
						else if(inputField.name == "dateRange")
							inputField.selectedIndex = "0";
					}
				}
				
				var finalStart = "";
				
				for(var i=0; i<4; i++){
					var sValue = startFields[i];
					var suffix = "";
					if(i == 0)
						suffix = "d";
					else if(i == 1)
						suffix = "h";
					else if(i == 2)
						suffix = "m";
					else if(i == 3)
						suffix = "s";
					
					if(sValue && sValue != "0")
						finalStart += sValue + suffix;
				}
				
				if(finalStart != "")
					finalStart = "-" + finalStart;
				dateForm.startDate.value = finalStart;
			} else {
				alert(MessageProperties.COMMON_ERROR_FORM_NOT_FOUND);
			}
			
		}
	}
	
	/*
	* Update the input field after the selection of the dropdown boxes have changed
	*/
	function updateDateInputFieldEnd(){
		// get the form
		if(document.date_preferences_form){
			var dateForm = document.date_preferences_form;
			var formElements = dateForm.elements;

			var endFields = new Array(4);
			
			if(formElements){
				for(var i=0; i<formElements.length; i++){
					var inputField = dateForm.elements[i];
					if(inputField.type == "select" || inputField.type == "select-one"){
						var value = inputField.options[inputField.selectedIndex].value;
						if(inputField.name == "dateEnd_D")
							endFields[0] = value;
						else if(inputField.name == "dateEnd_H")
							endFields[1] = value;
						else if(inputField.name == "dateEnd_M")
							endFields[2] = value;
						else if(inputField.name == "dateEnd_S")
							endFields[3] = value;
						else if(inputField.name == "dateRange")
							inputField.selectedIndex = "0";
					}
				}
				
				var finalEnd = "";
				
				for(var i=0; i<4; i++){
					var eValue = endFields[i];
					var suffix = "";
					if(i == 0)
						suffix = "d";
					else if(i == 1)
						suffix = "h";
					else if(i == 2)
						suffix = "m";
					else if(i == 3)
						suffix = "s";
					
					if(eValue && eValue != "0")
						finalEnd += eValue + suffix;
				}
				
				if(finalEnd != "")
					finalEnd = "-" + finalEnd;
				dateForm.endDate.value = finalEnd;		
				
				
			} else {
				alert(MessageProperties.COMMON_ERROR_FORM_NOT_FOUND);
			}
			
		}
	}
	
	/*
	* Update the input field after the selection of the dropdown boxes have changed
	*/
	function resetSelectFieldStart(){
		// get the form

		if(document.date_preferences_form){
			var dateForm = document.date_preferences_form;
			var formElements = dateForm.elements;
			
			if(formElements){
				for(var i=0; i<formElements.length; i++){
					var inputField = dateForm.elements[i];
					if(inputField.type == "select" || inputField.type == "select-one"){
						var value = inputField.options[inputField.selectedIndex].value;
						if(inputField.name == "dateStart_D")
							inputField.selectedIndex = "0";
						else if(inputField.name == "dateStart_H")
							inputField.selectedIndex = "0";
						else if(inputField.name == "dateStart_M")
							inputField.selectedIndex = "0";
						else if(inputField.name == "dateStart_S")
							inputField.selectedIndex = "0";
						else if(inputField.name == "dateRange")
							inputField.selectedIndex = "0";
					}
				}				
				
			} else {
				alert(MessageProperties.COMMON_ERROR_FORM_NOT_FOUND);
			}
			
		}
	}
	
	/*
	* Update the input field after the selection of the dropdown boxes have changed
	*/
	function resetSelectFieldEnd(){
		// get the form

		if(document.date_preferences_form){
			var dateForm = document.date_preferences_form;
			var formElements = dateForm.elements;
			
			if(formElements){
				for(var i=0; i<formElements.length; i++){
					var inputField = dateForm.elements[i];
					if(inputField.type == "select" || inputField.type == "select-one"){
						var value = inputField.options[inputField.selectedIndex].value;
						if(inputField.name == "dateEnd_D")
							inputField.selectedIndex = "0";
						else if(inputField.name == "dateEnd_H")
							inputField.selectedIndex = "0";
						else if(inputField.name == "dateEnd_M")
							inputField.selectedIndex = "0";
						else if(inputField.name == "dateEnd_S")
							inputField.selectedIndex = "0";
						else if(inputField.name == "dateRange")
							inputField.selectedIndex = "0";
					}
				}				
				
			} else {
				alert(MessageProperties.COMMON_ERROR_FORM_NOT_FOUND);
			}
			
		}
	}
	
	
	function closeMessageList(container){
		var msgList = $(container);
		var body = $('body');
		if(msgList && body){
			body.removeChild(msgList);
		} else {
			debugThis(MessageProperties.COMMON_ERROR_BODY_NOT_FOUND);
		}
	}
	
	
	/* ###################################################################### */
	/* ###### Default Functions ############################################# */		
	/* ###################################################################### */

	/**
	 * method to establish an ajax request via prototype
	 * @param {Object} method - the method, 'get' or 'post'
	 * @param {Object} url - the url to call
	 * @param {Object} params - the parameters
	 * @param {Object} callback - the callback function
	 */
	function initRequest(method, url, params, callback){
		var request = new Ajax.Request(
					url, 
					{
						method: method, 
						parameters: params, 
						onComplete: callback
					});
	}
	

	/*
	* show something at a given Position
	*/
	function update(where, what){
		$(where).update(what);
	}
	
	/*
	* shows the details of an error
	*/
	function showDetails(count) {
		var divElement = $("exception_"+count);
		if (divElement) {
			if (divElement.style.display != 'none') {
				divElement.style.display = 'none';
			} else {
				divElement.style.display = '';
			}
		}
	}
	
	function showAttributesOnDateilPage(eventId, imageId) {
		if (eventId, imageId) {
			var tr = $(eventId);
			var img = $(imageId);
			if (tr && img) {
				if (eventId.indexOf("_attribute_") < 0) {
					if (tr.style.display != 'none') {
						tr.style.display = 'none';
						img.src = "client/images/taskLink.gif";
						img.title = 'Show attributes of the process event';
					} else {
						tr.style.display = '';
						img.src = "client/images/taskLink_.gif";
						img.title = 'Hide attributes of the process event';
					}
				} else {
					if (tr.style.display != 'none') {
						tr.style.display = 'none';
						img.src = "client/images/taskExtensions.gif";
						img.title = 'Show attribute’s process extensions';
					} else {
						tr.style.display = '';
						img.src = "client/images/taskExtensions_.gif";
						img.title = 'Hide attribute’s process extensions';
					}
				}
			} 	
		}
	}
	
	function showConfirmation(url, type) {
		var text = "";
		if (type == 2)
			text = "Do you really want to call the attribute's WebService?";
		else
			text = "Do you really want to call the attribute's URL?";
		var answer = confirm(text);
		if (answer == true)
			WindowTools.popup(url, 500, 700);
	}
	
	
	function switchDeviceView(){
		
			var ignore = false;
		
		var index = location.href.indexOf('MOBILE_DEVICE_IGNORE');
		if (index != -1 ) {
			
			var start = location.href.substr(0, index);
			var end_tmp = location.href.substr(index+'MOBILE_DEVICE_IGNORE'.length+1, location.href.length - index);
			var end = "";
			if (ignore) {
				end = end_tmp.substr(4, end_tmp.length - 4); // 4 is length of 'true'
			} else {
				end = end_tmp.substr(5, end_tmp.length - 5); // 5 is length of 'false'
			}
			
			if (ignore) {
				location.href = start +'MOBILE_DEVICE_IGNORE=false'+ end;
			} else {
				location.href = start +'MOBILE_DEVICE_IGNORE=true'+ end;
			}
			
		} else {
			if (ignore) {
				location.href = location.href + (location.href.indexOf('?')==-1?'?':'&') + 'MOBILE_DEVICE_IGNORE=false';
			} else {
				location.href = location.href + (location.href.indexOf('?')==-1?'?':'&') + 'MOBILE_DEVICE_IGNORE=true';
			}
		}
		
	}
	
	
	var SortAttributesOnDateilPage = {
	
		columnIndex : -1,
		
		direction : 1,
	
		sort : function (attributeName, tableId) {
			if (attributeName && tableId) {
				var header = $('taskHeaderRow');
				var table = $(tableId);
				SortAttributesOnDateilPage.columnIndex = -1;
				if (header && table) {
					var cells = header.cells;
					if (cells && cells.length > 0) {
						var l = cells.length;
						for (var i = 0; i < l; i++) {
							if (cells[i] && cells[i].id == attributeName+"TaskColumn") {
								SortAttributesOnDateilPage.columnIndex = i;
								break;
							}
						}
					}
				}
				
				if (SortAttributesOnDateilPage.columnIndex > -1) {
				
					var rows = new Array();
					var attributeRows = new Array();
					
					var tableRows = table.tBodies[0].rows;
					if (tableRows && tableRows.length > 0) {
						var l = tableRows.length;
						var start = false;
						for (var i = 0; i < l; i++) {
							if (tableRows[i]) {
								if (tableRows[i].id.indexOf('task_attributes_') > -1) {
									var eventId = tableRows[i].id.substring(16, tableRows[i].id.lastIndexOf("_"));
									attributeRows[eventId] = tableRows[i];
								} else {
									rows.push(tableRows[i]);
								}
							}
						}
					}
					if (attributeName == 'id')
						rows.sort(SortAttributesOnDateilPage.sortByNumber);
					else if (attributeName == 'bpts' || attributeName == 'datetime' || attributeName == 'modified')
						rows.sort(SortAttributesOnDateilPage.sortByDate);
					else
						rows.sort(SortAttributesOnDateilPage.sortByText);
					
					var l = rows.length;
					var bgcolor="#E6E6E6";
					for (var i = 0; i < l; i++) {
						rows[i].style.background = bgcolor;
						if (bgcolor == "#E6E6E6")
							bgcolor = "#FFFFFF";
						else 
							bgcolor="#E6E6E6";
					
						var lc = rows[i].cells.length;
						for (var j = 0; j < lc; j++) {
							rows[i].cells[j].className = "";
						}
						rows[i].cells[SortAttributesOnDateilPage.columnIndex].className = "table_sorted";
						
						table.tBodies[0].appendChild(rows[i]);
						var eventId = rows[i].id.substring(5, rows[i].id.lastIndexOf("_"));
						if (attributeRows[eventId]) {
							table.tBodies[0].appendChild(attributeRows[eventId]);
						}
					}
					
					//remove sort icon from header cells
					var headerCells = header.cells;
					var l = headerCells.length;
					for (var i = 0; i < l; i++) {
						var hasLabel = false;
						var cell = headerCells[i];
						var childs = cell.childNodes;
						var child = null;
						if (childs && childs.length > 0) {
							var cl = childs.length;
							for (var j = 0; j < cl; j++) {
								if (childs[j].tagName && childs[j].tagName.toUpperCase() == "SPAN") {
									child = childs[j];
									break;
								}
							}
						}
						
						if (child && child != null) {
							var innerHTML = "";
							innerHTML += "<span ";
							
							var attributes = child.attributes;
							if (attributes && attributes.length > 0) {
								var al = attributes.length;
								for (var j = 0; j < al; j++) {
									var attributeName = attributes[j].nodeName;
									var attributeValue = attributes[j].nodeValue;
									if (attributeName == 'title') {
										if (SortAttributesOnDateilPage.direction == 1) {
											attributeValue = 'Sort descending';
										} else {
											attributeValue = 'Sort ascending';
										}
									}
									innerHTML += attributeName+"=\""+attributeValue+"\" ";
								}
							}
							
							innerHTML += ">";
							
							childs = child.childNodes;
							if (childs && childs.length > 0) {
								var cl = childs.length;
								for (var j = 0; j < cl; j++) {
									if (childs[j] && childs[j].nodeType == 3) {
										innerHTML +=childs[j].nodeValue;
									}
								}
							}
							
							innerHTML += "</span>";
							
							if (innerHTML)
								cell.innerHTML = innerHTML;
						}
					}
					
					//add sort icon to sorted header cell
					var sortedCell = headerCells[SortAttributesOnDateilPage.columnIndex];
					if (sortedCell) {
						var image = "";
						if (SortAttributesOnDateilPage.direction == 1) {
							image = "<img src='client/images/table_sort_up.gif' title='Sorted ascending'/>&nbsp;";
						} else {
							image = "<img src='client/images/table_sort_down.gif' title='Sorted descending'/>&nbsp;";
						}
						var innerHTML = sortedCell.innerHTML;
						innerHTML = image + innerHTML;
						sortedCell.innerHTML = innerHTML;
					}
				}
				
				if (SortAttributesOnDateilPage.direction == 1)
					SortAttributesOnDateilPage.direction = 0;
				else
					SortAttributesOnDateilPage.direction = 1;
			}
		},
		
		sortByNumber : function(rowA, rowB) {
			if (SortAttributesOnDateilPage.direction == 1)
				return SortAttributesOnDateilPage.getInnerText(rowA.cells[SortAttributesOnDateilPage.columnIndex]) - SortAttributesOnDateilPage.getInnerText(rowB.cells[SortAttributesOnDateilPage.columnIndex]);
			else
				return SortAttributesOnDateilPage.getInnerText(rowB.cells[SortAttributesOnDateilPage.columnIndex]) - SortAttributesOnDateilPage.getInnerText(rowA.cells[SortAttributesOnDateilPage.columnIndex]);
		},
		
		sortByText : function(rowA, rowB) {
			var value1 = "";
			var value2 = "";
			
			if (SortAttributesOnDateilPage.direction == 1) {
				value1 = SortAttributesOnDateilPage.getInnerText(rowA.cells[SortAttributesOnDateilPage.columnIndex]);
				value2 = SortAttributesOnDateilPage.getInnerText(rowB.cells[SortAttributesOnDateilPage.columnIndex]);
			} else {
				value1 = SortAttributesOnDateilPage.getInnerText(rowB.cells[SortAttributesOnDateilPage.columnIndex]);
				value2 = SortAttributesOnDateilPage.getInnerText(rowA.cells[SortAttributesOnDateilPage.columnIndex]);
			}
			
			if (value1==value2) {
				return 0;
			}
			if (value1<value2) {
				return -1;
			}
			return 1;
		},
		
		sortByDate : function(rowA, rowB) {
			var value1 = "";
			var value2 = "";
			
			var year1 = "";
			var year2 = "";
			var month1 = "";
			var month2 = "";
			var day1 = "";
			var day2 = "";
			
			var hour1 = "";
			var hour2 = "";
			var minute1 = "";
			var minute2 = "";
			var second1 = "";
			var second2 = "";
			
			if (SortAttributesOnDateilPage.direction == 1) {
				value1 = SortAttributesOnDateilPage.getInnerText(rowA.cells[SortAttributesOnDateilPage.columnIndex]);
				value2 = SortAttributesOnDateilPage.getInnerText(rowB.cells[SortAttributesOnDateilPage.columnIndex]);
			} else {
				value1 = SortAttributesOnDateilPage.getInnerText(rowB.cells[SortAttributesOnDateilPage.columnIndex]);
				value2 = SortAttributesOnDateilPage.getInnerText(rowA.cells[SortAttributesOnDateilPage.columnIndex]);
			}
			
			var date1 = value1.substring(0, value1.indexOf(" "));
			var date2 = value2.substring(0, value2.indexOf(" "));
			
			var time1 = value1.substring(value1.indexOf(" ")+1, value1.length);
			var time2 = value2.substring(value2.indexOf(" ")+1, value2.length);
			
			var dateFormat = "";
			var timeFormat = "";
			
			if (dateFormat == "dd.MM.yyyy" || dateFormat == "dd-MM-yyyy" || dateFormat == "d.M.yyyy" 
				|| dateFormat == "dd/MM/yyyy" || dateFormat == "d.MM.yyyy") {
				year1 = date1.substring(date1.length-4, date1.length);
				year2 = date2.substring(date2.length-4, date2.length);
			} else if (dateFormat == "dd/MM/yy" || dateFormat == "dd.MM.yy") {
				year1 = date1.substring(date1.length-2, date1.length);
				year2 = date2.substring(date2.length-2, date2.length);
			} else if (dateFormat == "yyyy-MM-dd" || dateFormat == "yyyy/MM/dd") {
				year1 = date1.substring(0, 4);
				year2 = date2.substring(0, 4);
			} else if (dateFormat == "yy/MM/dd") {
				year1 = date1.substring(0, 2);
				year2 = date2.substring(0, 2);
			}
			
			if (dateFormat == "dd.MM.yyyy" || dateFormat == "dd-MM-yyyy" || dateFormat == "dd/MM/yyyy"
				|| dateFormat == "yy/MM/dd" || dateFormat == "dd/MM/yy" || dateFormat == "dd.MM.yy") {
				month1 = date1.substring(3, 5);
				month2 = date2.substring(3, 5);
			} else if(dateFormat == "yyyy-MM-dd" || dateFormat == "yyyy/MM/dd") {
				month1 = date1.substring(5, 7);
				month2 = date2.substring(5, 7);
			} else if (dateFormat == "d.M.yyyy" || dateFormat == "d.MM.yyyy") {
				month1 = date1.substring(date1.indexOf(".")+1, date1.lastIndexOf("."));
				month2 = date2.substring(date2.indexOf(".")+1, date2.lastIndexOf("."));
			}
			
			if (dateFormat == "dd.MM.yyyy" || dateFormat == "dd-MM-yyyy" || dateFormat == "dd/MM/yyyy"
				|| dateFormat == "dd/MM/yy" || dateFormat == "dd.MM.yy") {
				day1 = date1.substring(0, 2);
				day2 = date2.substring(0, 2);
			} else if (dateFormat == "yyyy-MM-dd" || dateFormat == "yyyy/MM/dd" || dateFormat == "yy/MM/dd") {
				day1 = date1.substring(date1.length-2, date1.length);
				day2 = date2.substring(date2.length-2, date2.length);
			} else if (dateFormat == "d.M.yyyy" || dateFormat == "d.MM.yyyy") {
				day1 = date1.substring(0, date1.indexOf("."));
				day2 = date2.substring(0, date2.indexOf("."));
			}
			
			if (timeFormat == "HH:mm:ss") {
				hour1 = time1.substring(0, 2);
				hour2 = time2.substring(0, 2);
				
				minute1 = time1.substring(3, 5);
				minute2 = time2.substring(3, 5);
				
				second1 = time1.substring(6, 8);
				second2 = time2.substring(6, 8);
			} else {
				hour1 = time1.substring(0, 2);
				hour2 = time2.substring(0, 2);
				
				minute1 = time1.substring(3, 5);
				minute2 = time2.substring(3, 5);
				
				second1 = time1.substring(6, 8);
				second2 = time2.substring(6, 8);
				
				if (time1.indexOf("PM") > 0)
					hour1 += 12;
				if (time2.indexOf("PM") > 0)
					hour2 += 12;
			}
			
			if (year1<year2) {
				return -1;
			}
			if (year1>year2) {
				return 1;
			}
			if (month1<month2) {
				return -1;
			}
			if (month1>month2) {
				return 1;
			}
			if (day1<day2) {
				return -1;
			}
			if (day1>day2) {
				return 1;
			}
			
			if (hour1<hour2) {
				return -1;
			}
			if (hour1>hour2) {
				return 1;
			}
			if (minute1<minute2) {
				return -1;
			}
			if (minute1>minute2) {
				return 1;
			}
			if (second1<second2) {
				return -1;
			}
			if (second1>second2) {
				return 1;
			}
			return 0;
			
		},
		
		
		getInnerText : function(element) {
			if (typeof element == "string") return element;
			if (typeof element == "undefined") { return element };
			if (element.innerText) return element.innerText;	//Not needed but it is faster
			var str = "";
			
			var childs = element.childNodes;
			var l = childs.length;
			for (var i = 0; i < l; i++) {
				switch (childs[i].nodeType) {
					case 1: //ELEMENT_NODE
						if (childs[i].tagName.toUpperCase() == "IMG") {
							str += childs[i].src;
						} else {
							str += SortAttributesOnDateilPage.getInnerText(childs[i]);
						}
						break;
					case 3:	//TEXT_NODE
						str += childs[i].nodeValue;
						break;
				}
			}
			return str;
		}
	};