analytics/webcontent/ppwb/ColorPicker.js

// Licensed Materials - Property of IBM
//
// IBM Cognos Products: pps
//
// (C) Copyright IBM Corp. 2005, 2017
//
// US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.

var currentColorPicker = null;
var colorPickerDOM = null;
var patternPickerDOM = null;
var ownerControl = null;
var currentColor = "";
var currentlySelectedColorCell = null;
var isIE = navigator.appVersion.indexOf("MSIE")>0;

var notifyColorChange = "";

var MAX_RGB = 255;

var MAX_HSL = 240;

function RGB(red, green, blue) {

	if (red < 0)
		this.red = 0;
	else if (red > MAX_RGB)
		this.red = MAX_RGB;
	else
		this.red = red;


	if (green < 0)
		this.green = 0;
	else if (green > MAX_RGB)
		this.green = MAX_RGB;
	else
		this.green = green;

	if (blue < 0)
		this.blue = 0;
	else if (blue > MAX_RGB)
		this.blue = MAX_RGB;
	else
		this.blue = blue;
}

function HSL(hue, sat, lum) {

	if (hue < 0)
		this.hue = 0;
	else if (hue > MAX_HSL)
		this.hue = MAX_HSL;
	else
		this.hue = hue;

	if (sat < 0)
		this.sat = 0;
	else if (sat > MAX_HSL)
		this.sat = MAX_HSL;
	else
		this.sat = sat;

	if (lum < 0)
		this.lum = 0;
	else if (lum > MAX_HSL)
		this.lum = MAX_HSL;
	else
		this.lum = lum;
}

function displayColorPicker(event) {

	var eventM = new eventManager(event);
	eventM.cancelBubble();

	displayColorPickerObj(eventM.getSrc().parentNode.parentNode.parentNode.parentNode);
}

function displayColorPickerObj(obj) {
  //Create the dom for the color Picker.

  if (currentColorPicker != null)
		return;

  ownerControl = obj; //Get the table

  if (colorPickerDOM == null) { 

	  currentColorPicker = document.createElement("DIV");
	  currentColorPicker.className = "ColorPickerDiv";

	  var outerTable = document.createElement("TABLE");
	  if (isIE){
		  outerTable.setAttribute("cellpadding",8);
		  outerTable.setAttribute("cellspacing",0);
		}
	  var outerTableBody = document.createElement("TBODY");
	  
	  if (outerTableBody.addEventListener)
		outerTableBody.addEventListener('click',stopProp,false);
	  else
		outerTableBody.onclick = function() {stopProp();}

	  var row = document.createElement("TR");
	  var cell = document.createElement("TD");
	  cell.className = "colorPickerPreviewCell";
	  var center = document.createElement("CENTER");
	  var div = document.createElement("DIV");
	  div.className = "colorPickerPreview";
	  div.id = "colorPickerPreviewDiv";
	  center.appendChild(div);
	  cell.appendChild(center);
	  row.appendChild(cell);

	  cell = document.createElement("TD");
	  cell.className = "colorPickerColorTableContainer";
	  div = document.createElement("DIV");

	  div.className = "colorPickerColorTable";
	  createWebSafeColorPicker(div);

	  cell.appendChild(div);
	  row.appendChild(cell);
	  outerTableBody.appendChild(row);

	  row = document.createElement("TR");
	  cell = document.createElement("TD");
	  row.appendChild(cell);

	  cell = document.createElement("TD");

	  var innerTable = document.createElement("TABLE");
	  if (isIE){
		  innerTable.setAttribute("cellpadding",8);
		  innerTable.setAttribute("cellspacing",0);
	  }

	  var innerTableBody = document.createElement("TBODY");
	  var innerrow = document.createElement("TR");
	  var innercell = document.createElement("TD");
	  innercell.className = "colorPickerLabel";
	  innercell.appendChild(document.createTextNode(strColorPickerRed + " "));
	  innerrow.appendChild(innercell);
  
	  innercell = document.createElement("TD");
	  var textBox = document.createElement("INPUT");
	  textBox.type = "text";
	  textBox.size = "5";
	  textBox.id = "colorPickerRed"
	  textBox.onchange = function() { onRGBChange(); };
	  textBox.onkeyup = function() { onRGBChange(); };
	  innercell.appendChild(textBox);
	  innerrow.appendChild(innercell);

	  innercell = document.createElement("TD");
	  innercell.className = "colorPickerLabel";
	  innercell.appendChild(document.createTextNode(strColorPickerHue + " "));
	  innerrow.appendChild(innercell);

	  innercell = document.createElement("TD");
	  textBox = document.createElement("INPUT");
	  textBox.type = "text";
	  textBox.size = "5";
	  textBox.id = "colorPickerHue"
	  textBox.onchange = function() { onHSLChange(); };
	  textBox.onkeyup = function() { onHSLChange(); };
	  innercell.appendChild(textBox);
	  innerrow.appendChild(innercell);

	  innerTableBody.appendChild(innerrow);

	  innerrow = document.createElement("TR");
	  innercell = document.createElement("TD");
	  innercell.className = "colorPickerLabel";
	  innercell.appendChild(document.createTextNode(strColorPickerGreen + " "));
	  innerrow.appendChild(innercell);
  
	  innercell = document.createElement("TD");
	  textBox = document.createElement("INPUT");
	  textBox.type = "text";
	  textBox.size = "5";
	  textBox.id = "colorPickerGreen"
	  textBox.onchange = function() { onRGBChange(); };
	  textBox.onkeyup = function() { onRGBChange(); };
	  innercell.appendChild(textBox);
	  innerrow.appendChild(innercell);

	  innercell = document.createElement("TD");
	  innercell.className = "colorPickerLabel";
	  innercell.appendChild(document.createTextNode(strColorPickerSat + " "));
	  innerrow.appendChild(innercell);

	  innercell = document.createElement("TD");
	  textBox = document.createElement("INPUT");
	  textBox.type = "text";
	  textBox.size = "5";
	  textBox.id = "colorPickerSat"
	  textBox.onchange = function() { onHSLChange(); };
	  textBox.onkeyup = function() { onHSLChange(); };
	  innercell.appendChild(textBox);
	  innerrow.appendChild(innercell);

	  innerTableBody.appendChild(innerrow);

	  innerrow = document.createElement("TR");
	  innercell = document.createElement("TD");
	  innercell.className = "colorPickerLabel";
	  innercell.appendChild(document.createTextNode(strColorPickerBlue + " "));
	  innerrow.appendChild(innercell);
  
	  innercell = document.createElement("TD");
	  textBox = document.createElement("INPUT");
	  textBox.type = "text";
	  textBox.size = "5";
	  textBox.id = "colorPickerBlue"
	  textBox.onchange = function() { onRGBChange(); };
	  textBox.onkeyup = function() { onRGBChange(); };
	  innercell.appendChild(textBox);
	  innerrow.appendChild(innercell);

	  innercell = document.createElement("TD");
	  innercell.className = "colorPickerLabel";
	  innercell.appendChild(document.createTextNode(strColorPickerLum + " "));
	  innerrow.appendChild(innercell);

	  innercell = document.createElement("TD");
	  textBox = document.createElement("INPUT");
	  textBox.type = "text";
	  textBox.size = "5";
	  textBox.id = "colorPickerLum"
	  textBox.onchange = function() { onHSLChange(); };
	  textBox.onkeyup = function() { onHSLChange(); };
	  innercell.appendChild(textBox);
	  innerrow.appendChild(innercell);

	  innerTableBody.appendChild(innerrow);

	  innerTable.appendChild(innerTableBody);
	  cell.appendChild(innerTable);
	  row.appendChild(cell);
	  outerTableBody.appendChild(row);

	  row = document.createElement("TR");
	  cell = document.createElement("TD");
	  cell.colspan = 2;
	  cell.className = "colorPickerButtonArea";

	  var span = document.createElement("SPAN");
	  span.className = "colorPickerButton";
	  span.appendChild(document.createTextNode(strColorPickerOK));
	  span.onclick = function() { setOwnerControlColor();hideColorPicker();eval(notifyColorChange); }
	  span.onmouseover = new Function("this.className = 'colorPickerButtonRollover';");
	  span.onmouseout = new Function("this.className = 'colorPickerButton';");
			

	  cell.appendChild(span);
	  cell.appendChild(document.createTextNode("  "));

	  span = document.createElement("SPAN");
	  span.className = "colorPickerButton";
	  span.appendChild(document.createTextNode(strColorPickerCancel));
	  span.onclick = function() { hideColorPicker(); }
	  span.onmouseover = new Function("this.className = 'colorPickerButtonRollover';");
	  span.onmouseout = new Function("this.className = 'colorPickerButton';");
	  cell.appendChild(span);

	  row.appendChild(cell);
	  outerTableBody.appendChild(row);
	  outerTable.appendChild(outerTableBody);

	  currentColorPicker.appendChild(outerTable);

	  document.body.appendChild(currentColorPicker);
	
	  colorPickerDOM = currentColorPicker;
  } else {
	currentColorPicker = colorPickerDOM;
	currentColorPicker.style.display = "";
  }
  
  positionColorPicker();
  initializeColorPicker();

}

function createWebSafeColorPicker(parent) {
	//This function creates a table of the 216 web safe colors.

	var table = document.createElement("TABLE");
	if (isIE){
		table.setAttribute("cellpadding",2);
	    	table.setAttribute("cellspacing",2);
	}
	table.setAttribute("border",0);

	var tableBody = document.createElement("TBODY");
	tableBody.id = "ColorPickerWebSafePaletteTable";

	var row;
	var cell;

	var color;

	for (var i = 0; i < 12; i++) {

		row = document.createElement("TR");

		for (var j = 0; j < 18; j++) {
			cell = document.createElement("TD");
			cell.className = "colorPickerWebSafeColorCell";

			color = getHexColor(parseInt(j % 6) * 51, parseInt(i % 6) * 51, (parseInt(j / 6) + 3 * parseInt(i / 6)) * 51);

			cell.style.backgroundColor = "#" + color;
			cell.onclick = new Function ( "setColorPickerColor('" + color + "');" );

			row.appendChild(cell);
		}
		
		tableBody.appendChild(row);
	}

	table.appendChild(tableBody);
	parent.appendChild(table);
}

function getHexColor(red, green, blue) {

	var redHex = convertIntToHex(red);
	while (redHex.length < 2)
		redHex = "0" + redHex;

	var greenHex = convertIntToHex(green);
	while (greenHex.length < 2)
		greenHex = "0" + greenHex;	

	var blueHex = convertIntToHex(blue);
	while (blueHex.length < 2)
		blueHex = "0" + blueHex;

	var hexColor = redHex + greenHex + blueHex;	

	if (hexColor.length != 6) {
		alert(red + "," + green + "," + blue + " = " + hexColor);
	}

	return hexColor;
}

function convertIntToHex(num) {
	var hexDigits = "0123456789ABCDEF";

	var hexNo = "";

	var tempNo = num;
	var tempDigit;
		
	while (tempNo > 0) {
		tempDigit = tempNo % 16;
		tempNo = parseInt(tempNo / 16);
		
		hexNo = hexDigits.charAt(tempDigit) + hexNo;
	}

	return hexNo;
}

function getRGBFromHex(hexColor) {
	
	var red = 0;
	var green = 0;
	var blue = 0;

	red = getIntFromHex(hexColor.substr(0,2));
	green = getIntFromHex(hexColor.substr(2,2));
	blue = getIntFromHex(hexColor.substr(4,2));

	return new RGB(red,green,blue);
}

function getIntFromHex(hexNum) {
	var num = 0;
	var digit;

	for (var i = 0; i < hexNum.length; i++) {
		digit = hexNum.charAt(i);

		switch (digit) {
			case 'A': num = 16 * num + 10; break;
			case 'B': num = 16 * num + 11; break;
			case 'C': num = 16 * num + 12; break;
			case 'D': num = 16 * num + 13; break;
			case 'E': num = 16 * num + 14; break;
			case 'F': num = 16 * num + 15; break;
			default: num = 16 * num + parseInt(digit);
		}
	}

	return num;
}

function displayPatternPicker(event) {
	var eventM = new eventManager(event);
	eventM.cancelBubble();

	displayPatternPickerObj(eventM.getSrc().parentNode.parentNode.parentNode.parentNode);
}

function displayPatternPickerObj(obj) {
  //Create the dom for the color Picker.

    if (currentColorPicker != null)
		return;

  ownerControl = obj; //Get the table
  var currentPattern = parseInt(ownerControl.getAttribute("pattern"));

  if (patternPickerDOM == null) {

	  currentColorPicker = document.createElement("DIV");
	  currentColorPicker.className = "PatternPickerDiv";

	  var outerTable = document.createElement("TABLE");
	  outerTable.setAttribute("cellpadding",0);
	  outerTable.setAttribute("cellspacing",4);

	  var outerTableBody = document.createElement("TBODY");

	  var row;
	  var cell;
	  var div;
	  var patternNo;	  

	  for (var i = 0; i < 6; i++) {
    
		row = document.createElement("TR");
		
		for (var j = 1; j <= 7; j++) {
			
			patternNo = (i*7 + j);

			cell = document.createElement("TD");
			cell.id = "patternpickercell" + i + "-" + j;
			div = document.createElement("DIV");
			cell.setAttribute("pattern", patternNo);	
			cell.className = "patternPickerPatternCell";
			div.style.backgroundImage = getPatternStyle(patternNo);
			div.className = (patternNo == currentPattern)? "patternPickerPatternDivSelected": "patternPickerPatternDiv" ;
			cell.onclick = new Function( "selectPattern(" + patternNo + ");eval(notifyColorChange);" );

			cell.appendChild(div);
			row.appendChild(cell);
		}

		outerTableBody.appendChild(row);

	  }

	  outerTable.appendChild(outerTableBody);
	  currentColorPicker.appendChild(outerTable);
			
	  document.body.appendChild(currentColorPicker);

	  patternPickerDOM = currentColorPicker;
  } else {
	  currentColorPicker = patternPickerDOM;
	  currentColorPicker.style.display = "";

	  //We have to select the correct item
	  var patternNo;
	  for (var i = 0; i < 6; i++) {	
		for (var j = 1; j <= 7; j++) {
			
			patternNo = (i*7 + j);
			var cell = document.getElementById("patternpickercell" + i + "-" + j);
			cell.firstChild.className = (patternNo == currentPattern)? "patternPickerPatternDivSelected": "patternPickerPatternDiv" ;
		}
	  }
  }

  positionColorPicker();
}

function getPatternStyle(patternNo) {
	//return "background-image: url(" + topparent.getGlobal("menuImagePath") + "pattern" + patternNo + ".png);";
	return "url(" + topparent.getGlobal("menuImagePath") + "pattern" + patternNo + ".png)";
}

function selectPattern(patternNo) {
	
	ownerControl.setAttribute("pattern",patternNo);
	ownerControl.firstChild.firstChild.firstChild.style.backgroundImage = getPatternStyle(patternNo);

	hideColorPicker();
}

function positionColorPicker() {
	var colorPickerWidth = currentColorPicker.offsetWidth;
	var colorPickerHeight = currentColorPicker.offsetHeight;

	var docheight,docwidth;	

	if (window.innerHeight) {
	  docheight = window.innerHeight;
	  docwidth = window.innerWidth;
	} else {
	  docheight = document.body.offsetHeight;
	  docwidth  = document.body.offsetWidth;
	}

	var verticalScroll = 0;
	if (window.scrollY)
		verticalScroll = scrollY;
	else
		verticalScroll = document.body.scrollTop;

	currentColorPicker.style.top = parseInt((docheight - colorPickerHeight) / 2) + verticalScroll;
	currentColorPicker.style.left = parseInt((docwidth - colorPickerWidth) / 2);
}

function initializeColorPicker() {
	setColorPickerColor(ownerControl.getAttribute("color"));
}

function selectCurrentWebSafeColorCell() {
	if (currentlySelectedColorCell)
		currentlySelectedColorCell.removeChild(currentlySelectedColorCell.firstChild);
		
	//Find the correct cell;
	var rgb = getRGBFromHex(currentColor);
	
	if ((rgb.red % 51) || (rgb.green % 51) || (rgb.blue % 51)) {
		//Not a websafe color
		currentlySelectedColorCell = null;
	} else {
	
		//find the row
		var rowNum = parseInt(rgb.green / 51);
		
		if (rgb.blue >= (51 * 3))
			rowNum += 6;
	
		var colNum = parseInt(rgb.red / 51);
		
		if (colNum += 6 * ((rgb.blue % (3 * 51)) / 51));
	
		currentlySelectedColorCell = document.getElementById("ColorPickerWebSafePaletteTable").childNodes[rowNum].childNodes[colNum];
		
		var selectImg = document.createElement("IMG");
		selectImg.className = "colorPickerWebSafeColorCellSelected";
		selectImg.src = topparent.getGlobal("menuImagePath") + "blank.gif";
		
		if (((rgb.red + rgb.green + rgb.blue)/3) < (255/3))
			selectImg.style.borderColor = "#FFFFFF";
		else
			selectImg.style.borderColor = "#000000";
			
		if (topparent.getGlobal("nn7")) {
			selectImg.style.height = "2px";
		}
		
		currentlySelectedColorCell.appendChild(selectImg);
	}
}

function setColorPickerColor(color) {
	
	var colorPreview = document.getElementById("colorPickerPreviewDiv");

	colorPreview.style.backgroundColor = "#" + color;

	currentColor = color;
	
	selectCurrentWebSafeColorCell();

	var rgb = getRGBFromHex(color);

	document.getElementById("colorPickerRed").value = rgb.red;
	document.getElementById("colorPickerGreen").value = rgb.green;
	document.getElementById("colorPickerBlue").value = rgb.blue;

	var hsl = RGBtoHSL(rgb);

	document.getElementById("colorPickerHue").value = hsl.hue;
	document.getElementById("colorPickerSat").value = hsl.sat;
	document.getElementById("colorPickerLum").value = hsl.lum;
}

function onRGBChange() {

	var rgb = new RGB(parseInt(document.getElementById("colorPickerRed").value),parseInt(document.getElementById("colorPickerGreen").value),parseInt(document.getElementById("colorPickerBlue").value));

	var hexColor = getHexColor(rgb.red, rgb.green, rgb.blue);

	var colorPreview = document.getElementById("colorPickerPreviewDiv");
	colorPreview.style.backgroundColor = "#" + hexColor;
	currentColor = hexColor;
	selectCurrentWebSafeColorCell();

	var hsl = RGBtoHSL(rgb);
	document.getElementById("colorPickerHue").value = hsl.hue;
	document.getElementById("colorPickerSat").value = hsl.sat;
	document.getElementById("colorPickerLum").value = hsl.lum;	
}

function onHSLChange() {
	var hsl = new HSL(parseInt(document.getElementById("colorPickerHue").value),parseInt(document.getElementById("colorPickerSat").value),parseInt(document.getElementById("colorPickerLum").value));

	var rgb = HSLtoRGB(hsl);

	var hexColor = getHexColor(rgb.red, rgb.green, rgb.blue);

	var colorPreview = document.getElementById("colorPickerPreviewDiv");
	colorPreview.style.backgroundColor = "#" + hexColor;
	currentColor = hexColor;
	selectCurrentWebSafeColorCell();

	document.getElementById("colorPickerRed").value = rgb.red;
	document.getElementById("colorPickerGreen").value = rgb.green;
	document.getElementById("colorPickerBlue").value = rgb.blue;
}

function setOwnerControlColor() {	
	ownerControl.setAttribute("color",currentColor);
	ownerControl.firstChild.firstChild.firstChild.style.backgroundColor = "#" + currentColor;
}

function hideColorPicker() {
    if (currentColorPicker != null) {
		currentColorPicker.style.display = "none";
		currentColorPicker = null;
		ownerControl = null;
		currentColor = "";
	}
}

/**********************************/
/* RGB / HSL conversions routines */
/**********************************/

function RGBtoHSL(rgb) {

	var hue = 0;
	var sat = 0;
	var lum = 0;

	var minColor = rgb.red;
	var maxColor = rgb.red;

	if (rgb.green < minColor)
		minColor = rgb.green;
	else if (rgb.green > maxColor)
		maxColor = rgb.green;

	if (rgb.blue < minColor)
		minColor = rgb.blue;
	else if (rgb.blue > maxColor)
		maxColor = rgb.blue;

	lum = parseInt(((maxColor + minColor) / 2) * MAX_HSL/MAX_RGB + 0.5);

	if (maxColor != minColor) {
		if (lum < (MAX_HSL / 2)) {
			sat = (maxColor	- minColor) / (maxColor + minColor);
		} else {
			sat = (maxColor - minColor) / ((2 * MAX_RGB) - maxColor - minColor);
		}
		sat = parseInt(sat * MAX_HSL + 0.5);
	}

	if ((maxColor == 0 && minColor == 0) || (maxColor - minColor == 0))
		hue = 0;
	else if (rgb.red == maxColor) {
		hue = parseInt(((rgb.green - rgb.blue)/(maxColor - minColor)) * MAX_HSL/6);
	} else if (rgb.green == maxColor) {
		hue = parseInt(((rgb.blue - rgb.red)/(maxColor - minColor)) * MAX_HSL/6 + MAX_HSL/3);	
	} else {
		hue = parseInt(((rgb.red - rgb.green)/(maxColor - minColor)) * MAX_HSL/6 + 2 * MAX_HSL/3);
	} 
		
	if (hue < 0)
		hue += MAX_HSL;

	return new HSL(hue,sat,lum);

}

function HSLtoRGB(hsl) {

	var red = 0;
	var green = 0;
	var blue = 0;

	var temp1, temp2, Rtemp, Gtemp, Btemp;

	if (hsl.sat == 0) {
		red = parseInt(hsl.lum * MAX_RGB/MAX_HSL + 0.5);
		green = parseInt(hsl.lum * MAX_RGB/MAX_HSL + 0.5);
		blue = parseInt(hsl.lum * MAX_RGB/MAX_HSL + 0.5);
	} else {
	
		if (hsl.lum < (MAX_HSL / 2)) {
			temp2 = hsl.lum/MAX_HSL * (1 + hsl.sat/MAX_HSL);
		} else 
			temp2 = (hsl.lum + hsl.sat)/MAX_HSL - (hsl.lum/MAX_HSL * hsl.sat/MAX_HSL);

		temp1 = 2 * hsl.lum/MAX_HSL - temp2;

		Rtemp = hsl.hue/MAX_HSL + 1/3;
		if (Rtemp > 1)
			Rtemp -= 1;
		else if (Rtemp < 0)
			Rtemp += 1;

		Gtemp = hsl.hue/MAX_HSL;
		if (Gtemp > 1)
			Gtemp -= 1;
		else if (Gtemp < 0)
			Gtemp += 1;

		Btemp = hsl.hue/MAX_HSL - 1/3;
		if (Btemp > 1)
			Btemp -= 1;
		else if (Btemp < 0)
			Btemp += 1;

		if (6 * Rtemp < 1)
			red = temp1 + (temp2 - temp1) * 6 * Rtemp;
		else if (2 * Rtemp < 1)
			red = temp2;
		else if (3 * Rtemp < 2)
			red = temp1 + (temp2 - temp1) * (2/3 - Rtemp) * 6;
		else 
			red = temp1; 

		if (6 * Gtemp < 1)
			green = temp1 + (temp2 - temp1) * 6 * Gtemp;
		else if (2 * Gtemp < 1)
			green = temp2;
		else if (3 * Gtemp < 2)
			green = temp1 + (temp2 - temp1) * (2/3 - Gtemp) * 6;
		else 
			green = temp1;

		if (6 * Btemp < 1)
			blue = temp1 + (temp2 - temp1) * 6 * Btemp;
		else if (2 * Btemp < 1)
			blue = temp2;
		else if (3 * Btemp < 2)
			blue = temp1 + (temp2 - temp1) * (2/3 - Btemp) * 6;
		else 
			blue = temp1;
	}

	return new RGB(parseInt(red * MAX_RGB + 0.5), parseInt(green * MAX_RGB + 0.5), parseInt(blue * MAX_RGB + 0.5));

}

function setColorPicker(id, color) {	
	var colorPicker = document.getElementById(id);

	colorPicker.setAttribute("color",color);
	colorPicker.firstChild.firstChild.firstChild.style.backgroundColor = "#" + color;
}

function getColorPickerColor(id) {
	return document.getElementById(id).getAttribute("color");
}

function setPatternPicker(id, pattern) {
	var patternPicker = document.getElementById(id);

	patternPicker.setAttribute("pattern",pattern);
	patternPicker.firstChild.firstChild.firstChild.style.backgroundImage = getPatternStyle(pattern);
}

function getPatternPickerPattern(id) {
	return parseInt(document.getElementById(id).getAttribute("pattern"));
}


//***************************************
//slider

var dragging_slider = null;
var sliderPageOffsetLeft = 0;
var sliderContainerOffsetWidth = 0;
var sliderOffsetWidth = 0;
var sliderTextBox = null;
var minSliderValue = 0;
var maxSliderValue = 0;

function startdragslider(event) {
	var eventM = new eventManager(event);
	eventM.cancelBubble();

	dragging_slider = eventM.getSrc();
	if (dragging_slider.tagName.toUpperCase() != "IMG") {
		dragging_slider = dragging_slider.firstChild;
	}

	sliderPageOffsetLeft = getPageOffsetLeft(dragging_slider.parentNode);
	sliderOffsetWidth = dragging_slider.offsetWidth;
	sliderContainerOffsetWidth = dragging_slider.parentNode.offsetWidth - sliderOffsetWidth;
	sliderTextBox = dragging_slider.parentNode.nextSibling.firstChild.nextSibling;
	minSliderValue = parseInt(dragging_slider.parentNode.getAttribute("min"));
	maxSliderValue = parseInt(dragging_slider.parentNode.getAttribute("max"));
}

function stopdragslider(event) {
	dragging_slider = null;
} 

function dragslider(event) {
	var eventM = new eventManager(event);
	eventM.cancelBubble();

	if (dragging_slider != null) {
		var val = eventM.theEvent.clientX - sliderPageOffsetLeft - sliderOffsetWidth/2;
		
		if (val > 0 && val < sliderContainerOffsetWidth ) {
			dragging_slider.style.left = val;

			if ((val - 2) <= 0)
				sliderTextBox.value = minSliderValue;
			else if ((val + 2) >= sliderContainerOffsetWidth)
				sliderTextBox.value = maxSliderValue;
			else
				sliderTextBox.value = parseInt(minSliderValue + ((val - 2) * (maxSliderValue - minSliderValue)/(sliderContainerOffsetWidth - 4)));
		}
	}
}

function sliderCLicked(event) {
	//Clicking the slider is the same as a complete drag operation
	startdragslider(event);
	dragslider(event);
	stopdragslider(event);
}

function getPageOffsetLeft(obj) {
	var left = obj.offsetLeft;
	var oParent = obj.offsetParent;
	while (oParent) {
		left += oParent.offsetLeft;
		oParent = oParent.offsetParent;
	}
	return left;
}

function changeSlider(event) {
	var eventM = new eventManager(event);
	eventM.cancelBubble();

	var text = eventM.getSrc();

	sliderValueChanged(text);
}

function sliderValueChanged(text) {
	var slider = text.parentNode.previousSibling.firstChild;
	var sliderWidth = text.parentNode.previousSibling.offsetWidth;
	var sliderMin = text.parentNode.previousSibling.getAttribute("min");
	var sliderMax = text.parentNode.previousSibling.getAttribute("max");

	if (text.value == "") {
		val = 0;
		text.value = "";
	} else if (text.value == "-") {
		val = 0;
		text.value = "-";
	} else {
		var val = parseInt(text.value);
		if (isNaN(val)) {
			val = sliderMin;
		}
		if (val < sliderMin)
			val = sliderMin;
		if (val > sliderMax)
			val = sliderMax;
		text.value = val;
	}
	
	slider.style.left = (val * (sliderWidth - 4 - slider.offsetWidth)/(sliderMax - sliderMin) ) + 2;

}

function stopProp(event) {
	var eventM = new eventManager(event);
	eventM.cancelBubble();
}