analytics/webcontent/ps/cogadmin/js/thresholdMgr.js

//    Licensed Materials - Property of IBM
//
//    IBM Cognos Products: cogadmin
//
//    (C) Copyright IBM Corp. 2005, 2014
//
//    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
//
//
// Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
// Cognos (R) is a trademark of Cognos ULC, (formerly Cognos Incorporated).

/*******************************************************************************
 * Cognos Generic Threshold Manager Library Description: A library to facilitate
 * the creation of a Cognos standard threshold editor with customizable editors
 ******************************************************************************/

var TYPE_HIGH_POSITIVE = "high";
var TYPE_MIDDLE_POSITIVE = "middle";
var TYPE_LOW_POSITIVE = "low";
var TYPE_NONE = "none";
var THRESHOLD_EXCEED_MAX = -2;
var THRESHOLD_NO_MATCH = -3;
var THRESHOLD_NOT_A_NUMBER = -4;
var HEALTHS = ["Good","Average","Poor"];

/*
 * The data for a particular editor
 */
function ThresholdModel(value, exclusive, attrName, exAttrName, upperSide) {
	var orig = "" + value + exclusive;
	this.value = value;
	this.exclusive = exclusive;
	this.attrName = attrName; // the name of the "value" attribute used to
								// post to the server (eg. "UpperSidePoor")
	this.exAttrName = exAttrName; // the name of the "exclusive" attribute
									// used to post to the server (eg.
									// "UpperPoorEx")
	this.upperSide = upperSide; // boolean to store whether the threshold lies
								// on the upper or lower side of the scale
	this.errorCode = 0;

	this.setErrorCode = function(value) {
		this.errorCode = parseFloat(value);
	}

	this.getErrorCode = function() {
		return this.errorCode;
	}

	this.clearErrorCode = function() {
		this.errorCode = 0;
	}

	this.setValue = function(value) {
		this.value = value;
	}

	this.setExclusive = function(isExclusive) {
		this.exclusive = isExclusive;
	}

	this.hasChanged = function() {
		return ("" + this.value + this.exclusive) != orig;
	}

	this.getValue = function() {
		return this.value;
	}

	this.isExclusive = function() {
		return this.exclusive;
	}

	this.isUpperSide = function() {
		return this.upperSide;
	}

}
/*
 * The view for an editor consisting of 2 editors. 1 editor for the top and 1
 * for the bottom. The view is designed to allow an editor to "jump" into a
 * higher or lower view when the "up" or "down" icons are respectively.
 */
function ThresholdView(dialog, health, label, topEditor, botEditor, imagesURL) {

	var tr = document.createElement("tr");
	var td = document.createElement("td");
	tr.appendChild(td);
	td.style.cssText = "border:0pt none;margin:0pt;padding:0pt;white-space:nowrap;";
	td.align = "right";

	var imgTop = document.createElement("input");
	imgTop.setAttribute("type", "image");
	imgTop.setAttribute("src", imagesURL + "rangestyle_up_normal.gif");
	imgTop.setAttribute("alt", "");

	var editorParentTop = document.createElement("span");
	td.appendChild(editorParentTop);

	if (topEditor) {
		editorParentTop.appendChild(topEditor.isUpperSide ? topEditor.exclusive
				: topEditor.inclusive);
		if (topEditor.isUpperSide) {
			topEditor.imgExclusive = imgTop;
		} else {
			topEditor.imgInclusive = imgTop;
		}
	}

	imgTop.style.visibility = "hidden";
	imgTop.disabled = true;
	td.appendChild(imgTop);
	td.appendChild(document.createElement("div"));

	if (topEditor && topEditor.model) {
		imgTop.onclick = function() {
			topEditor.update(true, false);
			initTabStops(dialog,true);
		};
		imgTop.alt = "";
		imgTop.onmouseover = function() {
			this.src = imagesURL + 'rangestyle_up_rollover.gif'
		};
		imgTop.onmouseout = function() {
			this.src = imagesURL + 'rangestyle_up_normal.gif'
		};
	}

	var imgBot = document.createElement("input");
	imgBot.setAttribute("type", "image");

	var editorParentBot = document.createElement("span");
	td.appendChild(editorParentBot);

	if (botEditor) {
		editorParentBot.appendChild(botEditor.isUpperSide ? botEditor.inclusive
				: botEditor.exclusive);
		if (botEditor.isUpperSide) {
			botEditor.imgInclusive = imgBot;
		} else {
			botEditor.imgExclusive = imgBot;
		}
	}

	imgBot.style.visibility = "hidden";
	imgBot.disabled = true;
	imgBot.setAttribute("src", imagesURL + "rangestyle_down_normal.gif");
	imgBot.setAttribute("alt", "");
	imgBot.style.verticalAlign = "bottom";
	td.appendChild(imgBot);
	if (botEditor && botEditor.model) {
		imgBot.onclick = function() {
			botEditor.update(true, false);
			initTabStops(dialog, true);
		};
		imgBot.onmouseover = function() {
			this.src = imagesURL + "rangestyle_down_rollover.gif"
		};
		imgBot.onmouseout = function() {
			this.src = imagesURL + "rangestyle_down_normal.gif"
		};
	}

	var tdScale = document.createElement("td");
	tr.appendChild(tdScale);

	tdScale.innerHTML += '<img width="23" alt="" height="3" border="0" style="border: 0pt none ; margin: 0pt; padding: 0pt; display: block;" src="'
			+ imagesURL + 'range_top.gif"/>';
	tdScale.innerHTML += '<img width="23" alt="" height="16" border="0" style="border: 0pt none ; margin: 0pt; padding: 0pt; display: block;" src="'
			+ imagesURL + 'range_resize.gif"/>';
	tdScale.innerHTML += '<img width="23" alt="" border="0" style="border: 0pt none ; margin: 0pt; padding: 0pt; display: block;" src="'
			+ imagesURL + 'range_middle.gif"/>';
	tdScale.innerHTML += '<img width="23" alt="" height="16" border="0" style="border: 0pt none ; margin: 0pt; padding: 0pt; display: block;" src="'
			+ imagesURL + 'range_resize.gif"/>';
	tdScale.innerHTML += '<img width="23" alt="" height="3" border="0" style="border: 0pt none ; margin: 0px; padding: 0px; display: block;" src="'
			+ imagesURL + 'range_bottom.gif"/>';

	var tdHealth = document.createElement("td");
	tr.appendChild(tdHealth);
	tdHealth.innerHTML += '<img alt="' + label
			+ '" style="display:inline;margin-right:100px" border="0" title="'
			+ label + '" src="' + imagesURL + 'icon_' + health
			+ '_traffic32.gif"/>';

	if (botEditor) {
		botEditor.update();
	}
	if (topEditor) {
		topEditor.update();
	}
	
	return tr;

}

ThresholdView.getEditorLabel = function(model, i18n, units, range) {
	var labelTemplate = i18n.labelTemplate;
	var coreLabel = ThresholdView.getLabel(model, i18n, false);
	return labelTemplate.replace('#LABEL#',coreLabel).replace('#UNITS#',units).replace('#RANGE#',range);
}

ThresholdView.getEditorToggleLabel = function(model, i18n) {
	return ThresholdView.getLabel(model, i18n, true);
}

ThresholdView.getLabel = function(model, i18n, isToggleButton) {
	var tokens = model.exAttrName.split(/(?=[A-Z])/); //Each upper case letter
	var upperLower = tokens[0]
	var health = tokens[1];
	if ((isToggleButton && !model.exclusive) || (!isToggleButton && model.exclusive)) {
		health = HEALTHS[HEALTHS.indexOf(health)-1];
	} else {
		upperLower = upperLower == "Lower" ? "Upper" : "Lower";
	}
	var labelKey = upperLower+health+"Label";
	var label = i18n[labelKey];
	return label;
}
/*
 * A 'controller' object for an editor which renders the supplied editor based
 * on the state of it's supplied model
 */
function EditorManager(model, editor, isUpperSide, inputModel) {

	this.model = model;
	this.isUpperSide = isUpperSide;

	this.editor = editor;
	this.inputModel = inputModel;
	
	if (model && model.isExclusive()) {
		this.exclusive = editor.element;
		this.inclusive = editor.element.cloneNode(true); // placeholder
	} else {
		this.inclusive = editor.element;
		this.exclusive = editor.element.cloneNode(true); // placeholder
	}

	this.imgInclusive = null;
	this.imgExclusive = null;

	this.updateElement = function(element, hide) {
		element.style.visibility = hide ? "hidden" : "visible";
		element.disabled = hide;
		var inputs = element.getElementsByTagName('input');
		for ( var i = 0; i < inputs.length; i++) {
			inputs[i].disabled = hide;
		}
		
	}

	this.updateElements = function() {
		var isExclusive = this.model ? this.model.isExclusive() : true;
		this.updateElement(this.inclusive, isExclusive);
		this.updateElement(this.exclusive, !isExclusive);
		editor.update();
	}

	this.update = function(switchEx, needUpdate) {
		if (needUpdate == undefined)
			needUpdate = true;

		if (model) {
			if (switchEx) {
				model.setExclusive(!model.exclusive);
				var exclusiveParent = this.exclusive.parentNode;
				var inclusiveParent = this.inclusive.parentNode;

				var i = null
				var e = null;
				if (exclusiveParent) {
					e = exclusiveParent.removeChild(exclusiveParent.lastChild);
				}
				if (inclusiveParent) {
					i = inclusiveParent.removeChild(inclusiveParent.lastChild);
				}
				if (exclusiveParent && i) {
					exclusiveParent.appendChild(i);
					this.exclusive = i;
				}
				if (inclusiveParent && e) {
					inclusiveParent.appendChild(e);
					this.inclusive = e;
				}
			}

			this.updateElements();

			if (this.imgExclusive) {
				this.imgExclusive.style.visibility = model.isExclusive() ? "visible"
						: "hidden";
				this.imgExclusive.disabled = !model.isExclusive();
				
				setToggleLabel(model, this.imgExclusive, this.inputModel);
			}
			if (this.imgInclusive) {
				this.imgInclusive.style.visibility = model.isExclusive() ? "hidden"
						: "visible";
				this.imgInclusive.disabled = model.isExclusive();
				
				setToggleLabel(model, this.imgInclusive, this.inputModel);
			}

			if (model.value >= 0 && needUpdate)
				this.editor.update();

		} else {
			this.updateElements();
			if (this.imgExclusive) {
				this.imgExclusive.style.visibility = "visible";
				this.imgExclusive.disabled = false;
			}
			if (this.imgInclusive) {
				this.imgInclusive.style.visibility = "hidden";
				this.imgInclusive.disabled = true;
			}
		}
		
	}

	setToggleLabel = function(model, toggleButton, inputModel) {
		var toggleLabel = inputModel.i18n.toggleLabel;
		toggleLabel = toggleLabel.replace('#TARGET#',ThresholdView.getEditorToggleLabel(model, inputModel.i18n));
		
		toggleButton.setAttribute('title', toggleLabel);
		toggleButton.setAttribute('alt', toggleLabel);
	}

}

/*
 * Encapsulates the Threshold Manager Widget
 */
function ThresholdsManager(parentElt, inputModel) {

	var lowerSeparator = null;
	this.models = new Array();

	this.createSeparator = function(label, valign) {
		var tr = document.createElement("tr");
		var td = document.createElement("td");
		tr.appendChild(td);
		td.align = "right";
		td.style.cssText = "border: 0pt none ; margin: 0pt; padding: 0pt; display: block;";
		if (label != null) {
			td.innerHTML += '<span class="formText">' + label + '</span>';
		}
		var td2 = document.createElement("td");
		td2.style.cssText = "border:0pt none;margin:0pt;padding:0pt";
		td2.innerHTML += '<img alt="" width="23" border="0" style="border: 0pt none ; margin: 0pt; padding: 0pt; display: block;" src="'
				+ inputModel.imagesURL
				+ 'range_tic'
				+ ((label == null) ? '_mid' : '') + '.gif"/>';
		if (valign) {
			td2.setAttribute("valign", valign);
		}
		tr.appendChild(td2);
		return tr;
	}

	this.addView = function(view, model) {
		if (tbody.childNodes.length > 2) {
			tbody.insertBefore(this.createSeparator(), lowerSeparator);
		}
		tbody.insertBefore(view, lowerSeparator);
		if (model) {
			this.models[this.models.length] = model;
		}
	}

	this.getModels = function() {
		return this.models;
	}

	var table = document.createElement("table");

	table.className = "cctable"
	table.setAttribute("width", "100%");
	table.setAttribute("role", "presentation");

	while (parentElt.childNodes.length > 0) {
		parentElt.removeChild(parentElt.firstChild);
	}

	var theader = document.createElement("thead");
	theader.className = "cogstyle-table-header";
	var tbody = document.createElement("tbody");

	if (inputModel.type == "none") {
		table.style["filter"] = "alpha(opacity=50)";
		table.style["-moz-opacity"] = .5;
		table.style["opacity"] = .5;
	}

	table.appendChild(theader);
	table.appendChild(tbody);

	var trHeader = document.createElement("tr");
	trHeader.className = "cogstyle-form-label";
	theader.appendChild(trHeader);
	var tdValuesHeader = document.createElement("td");
	tdValuesHeader.align = "left";
	tdValuesHeader.innerHTML += inputModel.i18n.valuesHeaderLabel;
	tdValuesHeader.colSpan = 2;
	var parentWidth = parseInt(parentElt.style.width);
	trHeader.appendChild(tdValuesHeader);
	var tdScoreHeader = document.createElement("td");
	tdScoreHeader.align = "left";
	tdScoreHeader.innerHTML += inputModel.i18n.scoreHeaderLabel;
	trHeader.appendChild(tdScoreHeader);
	tbody.appendChild(this.createSeparator(inputModel.i18n.maxLabel, 'bottom'));

	lowerSeparator = this.createSeparator(inputModel.i18n.minLabel, 'top');
	tbody.appendChild(lowerSeparator);

	parentElt.appendChild(table);
}

/*
 * Default Threshold Editor consisting of 1 HTML textual input element.
 */
function DefaultEditor(model, inputModel) {
	var patternRegExp = /^\d{0,14}$/;
	this.input = document.createElement("input");
	this.input.className = "cogstyle-threshold-default-input";
	var range = "1 - 99999999999999";
	var self = this.input;
	xAddEventListener(self, "keypress", thresholdNoLetters, false);
	xAddEventListener(self, "keyup", function(event) {
		thresholdCheck(model, self, inputModel.maxValue, patternRegExp);
	}, false);
	xAddEventListener(self, "blur", function(event) {
		var dValue = thresholdCheck(model, self, inputModel.maxValue,
				patternRegExp);
		if (dValue !== null) {
			model.setValue(dValue);
		}
	}, false);
	this.input.setAttribute("autocomplete", "OFF");
	this.input.setAttribute("maxlength", inputModel.maxValue.toString().length);
	this.input.maxLength = inputModel.maxValue.toString().length;
	this.input.disabled = inputModel.type == TYPE_NONE;

	// Editor interface "this.update" implementation
	this.update = function() {
		this.input.value = model.getValue();
		var label = ThresholdView.getEditorLabel(model, inputModel.i18n, '', range);
		this.input.setAttribute("alt", label);
		this.input.setAttribute("title", label);
	}
	this.element = this.input;
}

/*
 * Percentage Threshold Editor consisting of 1 HTML textual input element.
 */
function PercentageEditor(model, inputModel) {
	var container = document.createElement("span");
	var patternRegExp = /^\d{0,2}(\.)?\d{0,2}$/;
	this.input = document.createElement("input");
	this.input.className = "cogstyle-threshold-duration-input";
	var range = "0.01 - 99.99";
	var self = this.input;
	xAddEventListener(self, "keypress", thresholdNoLetters, false);
	xAddEventListener(self, "keyup", function(event) {
		thresholdCheck(model, self, inputModel.maxValue, patternRegExp);
	}, false);
	xAddEventListener(self, "blur", function(event) {
		var dValue = thresholdCheck(model, self, inputModel.maxValue,
				patternRegExp);
		if (dValue !== null) {
			model.setValue(floatMath(dValue, 0.01, "*"));
		}
	}, false);
	this.input.setAttribute("autocomplete", "OFF");
	this.input.setAttribute("maxlength", inputModel.maxValue.toString().length);
	this.input.maxLength = inputModel.maxValue.toString().length;
	this.input.disabled = inputModel.type == TYPE_NONE;
	// Editor interface "this.update" implementation
	this.update = function() {
		var value = model.getValue();
		if (value) {
			this.input.value = parseFloat(100 * value).toFixed(2);
		}
		var label = ThresholdView.getEditorLabel(model, inputModel.i18n,'',range);
		this.input.setAttribute("title", label);
		this.input.setAttribute("alt", label);
		
	}
	container.appendChild(this.input);

	var labelContainer = document.createElement("span");
	labelContainer.className = "cogstyle-form-label";
	labelContainer.style.cssText = "padding:2px";
	labelContainer.innerHTML += "%";

	container.appendChild(labelContainer);

	this.element = container;

}

/*
 * Duration utility class
 */
function Duration(milliseconds) {
	var mSeconds = milliseconds;
	this.hours = Math.floor(milliseconds / 1000 / 60 / 60);
	milliseconds = milliseconds - this.hours * 1000 * 60 * 60
	this.minutes = Math.floor(milliseconds / 1000 / 60);
	milliseconds = milliseconds - this.minutes * 1000 * 60
	this.seconds = (milliseconds % 1000 == 0) ? Math.round(milliseconds / 1000)
			: milliseconds / 1000;

	this.toString = function(inputModel) {
		if (inputModel && inputModel.i18n) {
			var s = "";
			if (this.hours > 0) {
				s += this.hours + inputModel.i18n.hoursLabelAbbr;
			}
			if (this.minutes > 0) {
				s += " " + this.minutes + inputModel.i18n.minutesLabelAbbr;
			}
			s += " " + this.seconds + inputModel.i18n.secondsLabelAbbr;
			return s;
		} else {
			return "" + mSeconds;
		}
	}
}

/*
 * mask of the input value of threshold, garantee the input is an integer and
 * less then upperBound @para obj: target object to be checked @para uBound: the
 * maxValue (include) allowed
 */
thresholdCheck = function(model, obj, uBound, pattern) {

	function styleSwitcher(obj, withError) {
		if (withError) {
			if (obj.className.search(/-error$/i) == -1) {
				obj.className = obj.className + "-error";
			}
		} else {
			obj.className = obj.className.replace(/-error$/i, "");
		}
	}

	var retValue = obj.value;

	// get rid of the leading or tail space, try to avoid flashing at the same
	// time.
	if (trim(retValue).length < retValue.length) {
		retValue = trim(retValue);
	}

	if (isNaN(retValue) || retValue < 0) {
		obj.setAttribute("cogErrorType", THRESHOLD_NOT_A_NUMBER);
		styleSwitcher(obj, true);
		model.setErrorCode(THRESHOLD_NOT_A_NUMBER);
		return null;
	}

	if (parseFloat(retValue) > parseFloat(uBound)) {
		obj.setAttribute("cogErrorType", THRESHOLD_EXCEED_MAX);
		styleSwitcher(obj, true);
		model.setErrorCode(THRESHOLD_EXCEED_MAX);
		return null;
	}

	if (!retValue.match(pattern)) {
		obj.setAttribute("cogErrorType", THRESHOLD_NO_MATCH);
		styleSwitcher(obj, true);
		model.setErrorCode(THRESHOLD_NO_MATCH);
		return null;
	}

	styleSwitcher(obj, false);
	obj.setAttribute("cogErrorType", 0);
	model.clearErrorCode();

	return retValue ? parseFloat(retValue) : 0;
}

// event handler for threshold onkeypress, prevent the letter and space from
// input
thresholdNoLetters = function(event) {
	// Get the event object and character code in a portable way
	var e = event || window.event; // Key event object
	var code = e.charCode || e.keyCode; // What key was pressed

	// If this keystroke is a function key of any kind, do not filter it
	if (e.charCode == 0)
		return true; // Function key (Firefox only)
	if (e.ctrlKey || e.altKey)
		return true; // Ctrl or Alt held down
	if (code < 32)
		return true; // ASCII control character

	// Convert the character code to a character
	var c = String.fromCharCode(code);

	var pattern = /\d|[\.]/;
	if (pattern.test(c)) {
		return true;
	} else {
		// And reject this keypress event
		if (e.preventDefault)
			e.preventDefault();
		if (e.returnValue)
			e.returnValue = false;
		return false;
	}
}

/*
 * Duration Threshold editor consisting of 3 HTML textual input elements for
 * "Hours","Minutes","Seconds"
 */
function DurationEditor(model, inputModel) {
	var container = document.createElement("span");
	var hours = createInput(inputModel.i18n.hoursLabelAbbr, 999, /^\d{0,3}$/);
	var mins = createInput(inputModel.i18n.minutesLabelAbbr, 59, /^\d{0,2}$/);
	var secs = createInput(inputModel.i18n.secondsLabelAbbr, 59.999,
			/^\d{0,2}(\.)?\d{0,3}$/, 0.001);
	var self = this;
	
	function createInput(label, upperBound, pattern, lowerBound) {
		
		this.lowerBound = lowerBound;
		this.upperBound = upperBound;

		var lb = lowerBound || 0;
		var input = document.createElement("input");
		input.className = "cogstyle-threshold-duration-input";

		xAddEventListener(input, "keypress", thresholdNoLetters, false);
		xAddEventListener(input, "keyup", function(event) {
			thresholdCheck(model, input, upperBound, pattern);
		}, false);
		xAddEventListener(input, "blur", function(event) {
			var dValue = thresholdCheck(model, input, upperBound, pattern);
			input.setAttribute("retValue", dValue);

			var finalValue = self.getValue();
			if (finalValue !== null) {
				model.setValue(finalValue);
			}
		}, false);

		input.setAttribute("autocomplete", "OFF");
		input.setAttribute("maxlength", upperBound.toString().length);
		input.maxLength = upperBound.toString().length;
		input.upperBound = upperBound;
		input.disabled = inputModel.type == TYPE_NONE;
		container.appendChild(input);
		var labelContainer = document.createElement("span");
		labelContainer.className = "cogstyle-form-label";
		labelContainer.style.cssText = "padding:2px";
		labelContainer.innerHTML += label;
		container.appendChild(labelContainer);
		return input;
	}

	this.getValue = function() {

		var ihours = hours.getAttribute("retValue") || 0;
		var imins = mins.getAttribute("retValue") || 0;
		var isecs = secs.getAttribute("retValue") || 0;

		if (hours.getAttribute("cogErrorType")
				&& hours.getAttribute("cogErrorType") < 0) {
			model.setErrorCode(hours.getAttribute("cogErrorType"));
			return;

		} else if (mins.getAttribute("cogErrorType")
				&& mins.getAttribute("cogErrorType") < 0) {
			model.setErrorCode(mins.getAttribute("cogErrorType"));
			return;

		} else if (secs.getAttribute("cogErrorType")
				&& secs.getAttribute("cogErrorType") < 0) {
			model.setErrorCode(secs.getAttribute("cogErrorType"));
			return;

		} else if (!ihours && !imins && !isecs) {
			model.setErrorCode(THRESHOLD_NOT_A_NUMBER);
			return;

		} else {
			return (ihours * 1000 * 60 * 60) + (imins * 1000 * 60)
					+ (isecs * 1000);

		}
	}

	// Editor interface "this.update" implementation
	this.update = function() {
		var duration = new Duration(model.getValue());
		if (duration > 0) {
			hours.value = duration.hours;
			hours.setAttribute("retValue", duration.hours);

			mins.value = duration.minutes;
			mins.setAttribute("retValue", duration.minutes);

			secs.value = duration.seconds;
			secs.setAttribute("retValue", duration.seconds);
		}
		
		var hoursLabel = ThresholdView.getEditorLabel(model, inputModel.i18n, inputModel.i18n.hoursLabel, hours.upperBound);
		hours.setAttribute("alt", hoursLabel);
		hours.setAttribute("title", hoursLabel);
		
		var minsLabel = ThresholdView.getEditorLabel(model, inputModel.i18n, inputModel.i18n.minutesLabel, mins.upperBound);
		mins.setAttribute("alt", minsLabel);
		mins.setAttribute("title", minsLabel);
		
		var secsLabel = ThresholdView.getEditorLabel(model, inputModel.i18n, inputModel.i18n.secondsLabel, secs.upperBound);
		secs.setAttribute("alt", secsLabel);
		secs.setAttribute("title", secsLabel);
	}

	this.element = container;
}

/*
 * Encapsulates the Threshold Tooltip Widget
 */
function ThresholdsTooltip(inputModel) {
	var container = document.getElementById(inputModel.container);

	while (container.childNodes && (container.childNodes.length > 0)) {
		container.removeChild(container.firstChild);
	}

	var table = document.createElement("table");
	table.setAttribute("role", "presentation");
	container.appendChild(table);
	var tbody = document.createElement("tbody");
	table.appendChild(tbody);
	container.appendChild(table);
	var upperSideAvgModel = null;
	var lowerSideAvgModel = null;
	if (inputModel.type != TYPE_HIGH_POSITIVE) {
		var upperSidePoorModel = new ThresholdModel(
				inputModel.upperSidePoorValue, inputModel.upperSidePoorEx,
				"UpperSidePoor", "UpperPoorEx", true, inputModel.i18n);
		addView(upperSidePoorModel, null, "poor", inputModel.i18n.poorLabel);
		upperSideAvgModel = new ThresholdModel(inputModel.upperSideAvgValue,
				inputModel.upperSideAvgEx, "UpperSideAverage",
				"UpperAverageEx", true, inputModel.i18n);
		addView(upperSidePoorModel, upperSideAvgModel, "average",
				inputModel.i18n.avgLabel);
	}
	if (inputModel.type != TYPE_LOW_POSITIVE) {
		lowerSideAvgModel = new ThresholdModel(inputModel.lowerSideAvgValue,
				inputModel.lowerSideAvgEx, "LowerSideAverage",
				"LowerAverageEx", false, inputModel.i18n);
	}
	if (inputModel.type == TYPE_LOW_POSITIVE) {
		addView(null, upperSideAvgModel, "good", inputModel.i18n.goodLabel);
	} else if (inputModel.type == TYPE_HIGH_POSITIVE) {
		addView(lowerSideAvgModel, null, "good", inputModel.i18n.goodLabel);
	} else {
		addView(upperSideAvgModel, lowerSideAvgModel, "good",
				inputModel.i18n.goodLabel);
	}
	if (inputModel.type != TYPE_LOW_POSITIVE) {
		var lowerSidePoorModel = new ThresholdModel(
				inputModel.lowerSidePoorValue, inputModel.lowerSidePoorEx,
				"LowerSidePoor", "LowerPoorEx", false, inputModel.i18n);
		addView(lowerSideAvgModel, lowerSidePoorModel, "average",
				inputModel.i18n.avgLabel);
		addView(null, lowerSidePoorModel, "poor", inputModel.i18n.poorLabel);
	}

	function addView(topModel, botModel, health, healthLabel) {

		var tr = document.createElement("tr");
		tbody.appendChild(tr);
		var tdHealth = document.createElement("td");
		tr.appendChild(tdHealth);
		tdHealth.setAttribute("valign", "middle");

		tdHealth.innerHTML += '<img border="0" title="' + healthLabel
				+ '" alt="' + healthLabel + '" src="' + inputModel.imagesURL
				+ 'icon_' + health + '_traffic.gif"/>';
		tdRange = document.createElement("td");
		tr.appendChild(tdRange);

		if (topModel && botModel) {
			var base = inputModel.valueBase || 1;
			var botValue = parseFloat(botModel.value);
			var topValue = parseFloat(topModel.value);
			var offSetTop = 0;
			var offSetBot = 0;
			var isConsecutive = floatMath(topValue, -botValue) == base;
			var arrConsecutive = [];
			var botText = "";
			var topText = "";

			if (botModel.isUpperSide() && topModel.isUpperSide()) {
				if (!topModel.isExclusive()) {
					offSetTop = -base;
				}
				if (botModel.isExclusive()) {
					offSetBot = base;
				}
			} else if ((!botModel.isUpperSide()) && (!topModel.isUpperSide())) {
				if (topModel.isExclusive()) {
					offSetTop = -base;
				}
				if (!botModel.isExclusive()) {
					offSetBot = base;
				}
			} else if (topModel.isUpperSide) {
				if (!topModel.isExclusive()) {
					offSetTop = -base;
				}
				if (!botModel.isExclusive()) {
					offSetBot = base;
				}
			}
			if (botText = getToolTipText(botValue, offSetBot, isConsecutive))
				arrConsecutive.push(botText);

			if (topText = getToolTipText(topValue, offSetTop, isConsecutive))
				// to avoid the duplicated value
				if (botText != topText)
					arrConsecutive.push(topText);

			tdRange.innerHTML = "= " + arrConsecutive.join(" - ");

		} else if (topModel) {
			tdRange.innerHTML = ">"
					+ ((!topModel.isExclusive() && topModel.isUpperSide())
							|| (topModel.isExclusive() && !topModel
									.isUpperSide()) ? "= " : " ")
					+ getToolTipText(parseFloat(topModel.value));

		} else if (botModel) {
			tdRange.innerHTML = "<"
					+ ((!botModel.isExclusive() && !botModel.isUpperSide())
							|| (botModel.isExclusive() && botModel
									.isUpperSide()) ? "= " : " ")
					+ getToolTipText(parseFloat(botModel.value));

		}
		tbody.appendChild(tr);
	}

	function getToolTipText(value, offSet, isConsecutive) {
		var isConsecutive = isConsecutive || false;
		var tOffSet = offSet ? offSet : 0;

		if (isConsecutive && offSet != 0)
			return "";

		if (inputModel.propertyType == "xs:duration") {
			var duration = new Duration(value + tOffSet);
			return duration.toString(inputModel);

		} else if (inputModel.propertyType == "cdm:percentage") {
			return (100 * floatMath(value, tOffSet)).toFixed(2) + "%";

		} else {
			return value + tOffSet;
		}
	}

}

/*******************************************************************************
 * End of Cognos Generic Threshold Manager Library
 ******************************************************************************/

/*******************************************************************************
 * CogAdmin specific implementation of Cognos Threshold Manager
 ******************************************************************************/
function CogAdminThresholdManager(inputModel, targetDiv, dialog) {
	var targetDiv = $(targetDiv);
	var initialType = inputModel.type;
	var manager = null;
	var self = this;
	this.thresholdContainer = document.getElementById('thresholdsContainer');
	this.dialog = dialog;

	/* for the change of nextGen *****************begin******************* */

	this.addPatternItem = function(type, lbl) {
		var patternItem = xCreateElement("div");
		var itemId = "pattern_" + type;
		var isChecked = false;

		if (inputModel.type == type)
			isChecked = true;

		if (document.all && !window.opera && document.createElement) {
			// MSIE 6 for browser does not support DOM-insertion of radio
			// buttons. The following code works around that lack of support.
			var patternInput = document
					.createElement("<input type='radio' name='pattern' id='"
							+ itemId + "' value='" + type + "' "
							+ (isChecked ? "checked" : "") + ">");

		} else if (document.createElement && document.createTextNode) {
			// other DOM compilable browsers
			var patternInput = xCreateElement("input");
			patternInput.id = itemId;
			patternInput.type = "radio";
			patternInput.name = "pattern"
			patternInput.value = type
			patternInput.checked = isChecked;

		} else {
			return;
		}

		var patternLabel = xCreateElement("label");
		patternLabel.htmlFor = itemId;
		patternLabel.appendChild(document.createTextNode(lbl));
		xAddEventListener(patternInput, "click", function(event) {
			self.update(type)
		}, false);

		patternItem.appendChild(patternInput);
		patternItem.appendChild(patternLabel);

		return patternItem;
	}

	if (targetDiv) {
		while (targetDiv.childNodes.length > 0) {
			targetDiv.removeChild(targetDiv.firstChild);
		}

		var Desc = xCreateElement("div");
		Desc.style.marginBottom = "5px";
		Desc.className = "dialogHeaderText";
		Desc.appendChild(document
				.createTextNode(ADM.THR.IDS_ADMNEW_THR_DIALOG_TIP));

		var fieldSet = xCreateElement("fieldset");
		fieldSet.style.border = "none";
		fieldSet.style.padding = "0";

		var legend = xCreateElement("legend");
		legend.className = "cogstyle-form-label";
		legend.appendChild(document
				.createTextNode(ADM.THR.IDS_ADMNEW_THR_PERF_PATTERN));

		var thresholdTitle = xCreateElement("div");
		thresholdTitle.style.marginTop = "5px";
		thresholdTitle.style.marginBottom = "5px";
		thresholdTitle.className = "cogstyle-form-label";
		thresholdTitle.appendChild(document
				.createTextNode(ADM.THR.IDS_ADMNEW_THR_SCORE_CALC));

		var patternDiv = xCreateElement("div");
		patternDiv.appendChild(Desc);
		patternDiv.appendChild(fieldSet);

		fieldSet.appendChild(legend);

		fieldSet.appendChild(this.addPatternItem("none",
				ADM.THR.IDS_ADMNEW_THR_NONE));
		fieldSet.appendChild(this.addPatternItem("high",
				ADM.THR.IDS_ADMNEW_THR_HIGH_VALUE));
		fieldSet.appendChild(this.addPatternItem("middle",
				ADM.THR.IDS_ADMNEW_THR_MIDDLE_VALUE));
		fieldSet.appendChild(this.addPatternItem("low",
				ADM.THR.IDS_ADMNEW_THR_LOW_VALUE));
		patternDiv.appendChild(thresholdTitle);

		targetDiv.appendChild(patternDiv);
		this.thresholdContainer = xCreateElement("div");
		this.thresholdContainer.id = "thresholdsContainer";
		this.thresholdContainer.style.cssText = "border:1px solid;overflow:auto;height:235px;width:400px;margin-bottom:10px;";
		targetDiv.appendChild(this.thresholdContainer);
	}

	/* for the change of nextGen *****************end******************* */

	this.update = function(type) {

		if (type) {
			inputModel.type = type;
		}
		manager = new ThresholdsManager(this.thresholdContainer, inputModel);

		var upperSidePoorModel = new ThresholdModel(
				inputModel.upperSidePoorValue, inputModel.upperSidePoorEx,
				"UpperSidePoor", "UpperPoorEx", false, inputModel.i18n);
		var upperSidePoorEditor = new EditorManager(
				inputModel.type != TYPE_NONE ? upperSidePoorModel : null,
				new inputModel.editorClass(upperSidePoorModel, inputModel),
				true, inputModel);

		var upperSideAvgModel = new ThresholdModel(
				inputModel.upperSideAvgValue, inputModel.upperSideAvgEx,
				"UpperSideAverage", "UpperAverageEx", false, inputModel.i18n);
		var upperSideAvgEditor = new EditorManager(
				inputModel.type != TYPE_NONE ? upperSideAvgModel : null,
				new inputModel.editorClass(upperSideAvgModel, inputModel), true, inputModel);

		var lowerSideAvgModel = new ThresholdModel(
				inputModel.lowerSideAvgValue, inputModel.lowerSideAvgEx,
				"LowerSideAverage", "LowerAverageEx",false, inputModel.i18n);
		var lowerSideAvgEditor = new EditorManager(lowerSideAvgModel,
				new inputModel.editorClass(lowerSideAvgModel, inputModel),
				false, inputModel);

		var lowerSidePoorModel = new ThresholdModel(
				inputModel.lowerSidePoorValue, inputModel.lowerSidePoorEx,
				"LowerSidePoor", "LowerPoorEx",false, inputModel.i18n);
		var lowerSidePoorEditor = new EditorManager(lowerSidePoorModel,
				new inputModel.editorClass(lowerSidePoorModel, inputModel),
				false, inputModel);

		var thresholds = new Array();

		if (inputModel.type != TYPE_HIGH_POSITIVE) {
			var upperSidePoorView = new ThresholdView(dialog, "poor",
					inputModel.i18n.poorLabel, null, upperSidePoorEditor,
					inputModel.imagesURL);
			manager.addView(upperSidePoorView, upperSidePoorModel);

			var upperSideAvgView = new ThresholdView(dialog, "average",
					inputModel.i18n.avgLabel, upperSidePoorEditor,
					upperSideAvgEditor, inputModel.imagesURL);
			manager.addView(upperSideAvgView, upperSideAvgModel);

		}
		var goodView = new ThresholdView(
				dialog,
				"good",
				inputModel.i18n.goodLabel,
				(inputModel.type == TYPE_LOW_POSITIVE || inputModel.type == TYPE_MIDDLE_POSITIVE) ? upperSideAvgEditor
						: null,
				(inputModel.type == TYPE_HIGH_POSITIVE || inputModel.type == TYPE_MIDDLE_POSITIVE) ? lowerSideAvgEditor
						: null, inputModel.imagesURL);
		manager.addView(goodView);
		if (inputModel.type == TYPE_HIGH_POSITIVE
				|| inputModel.type == TYPE_MIDDLE_POSITIVE) {
			var lowerSideAvgView = new ThresholdView(dialog, "average",
					inputModel.i18n.avgLabel, lowerSideAvgEditor,
					lowerSidePoorEditor, inputModel.imagesURL);
			manager.addView(lowerSideAvgView, lowerSideAvgModel);
			var lowerSidePoorView = new ThresholdView(dialog, "poor",
					inputModel.i18n.poorLabel, lowerSidePoorEditor, null,
					inputModel.imagesURL);
			manager.addView(lowerSidePoorView, lowerSidePoorModel);
		}

		initTabStops(dialog,true);

	}

	this.hasChanged = function() {
		var thresholds = manager.getModels();
		for ( var i = 0; i < thresholds.length; i++) {
			if (thresholds[i].hasChanged()) {
				return true;
			}
		}
		return initialType != inputModel.type;
	}

	this.getSubmitString = function() {
		var queryString = "processRequest=true&thresholdPropertyName="
				+ inputModel.thresholdPropertyName + "&thresholdResourceID="
				+ inputModel.thresholdResourceID;
		if (inputModel.type != TYPE_NONE) {
			var thresholds = manager.getModels();
			for ( var i = 0; i < thresholds.length; i++) {
				queryString += "&"
						+ (thresholds[i].attrName + "="
								+ thresholds[i].getValue() + "&"
								+ thresholds[i].exAttrName + "=" + thresholds[i]
								.isExclusive());
			}
		}
		queryString += "&deleteThreshold=" + (inputModel.type == TYPE_NONE);

		return queryString;
	}

	this.validate = function(maxValue) {
		if (!maxValue)
			maxValue = inputModel.maxValue;

		if (inputModel.type != TYPE_NONE) {
			var models = manager.getModels();

			for ( var i = 0; i < models.length; i++) {

				// if have a error code, validate it first, since the value
				// might be empty.
				switch (models[i].getErrorCode()) {
				case THRESHOLD_EXCEED_MAX:
					alert(inputModel.i18n.validateMsgExceedMax);
					return false;
					break;

				case THRESHOLD_NO_MATCH:
					alert(inputModel.i18n.validateMsgBadFormat);
					return false;
					break;

				case THRESHOLD_NOT_A_NUMBER:
					alert(inputModel.i18n.validateMsgNotNumeric);
					return false;
					break;

				default:

				}

				// editor's default value is "", in case of clicking "ok" button
				// without touching the input.
				if (models[i].value == 0 || models[i].value == ""
						|| isNaN(models[i].value)) {
					alert(inputModel.i18n.validateMsgNotNumeric);
					return false;
				}

				// range logic
				if ((i > 0)
						&& (parseFloat(models[i].value) >= parseFloat(models[i - 1].value))) {
					alert(inputModel.i18n.validateMsgInvalidRange);
					return false;
				}

				models[i].value = Math.abs(models[i].value);
			}
		}
		return true;
	}

	this.update();
}

editThreshold = function(thresholdFragId, grpCaption, objCaption, name, type, resourceID) {
	var thresholdFrag = createFragment(thresholdFragId, null,
			'/cogadmin/controls/threshold.xts');
	var params = 'thresholdGroupName=' + grpCaption
			+ '&thresholdPropertyCaption=' + objCaption
			+ '&thresholdPropertyName=' + name + '&thresholdResourceID='
			+ resourceID + '&propertyType=' + type + '&style=dialog';
	thresholdFrag.retrieve(params);
}

initTabStops = function(dialog, skipFocus) {
	 var dialogEle = document.getElementById(dialog.id);
	 var inputs = dialogEle.getElementsByTagName('input');
	 for (var i=0; i < inputs.length; i++) {
		 inputs[i].tabIndex = "1";
	 }
	 dialog.initTabStops(skipFocus);
}