function getObject(name) 
{
    if ("object" == typeof(name)) {
       return name; // this is actually the object itself, not its id
    }
	if (document.getElementById) 
	{
	   	return document.getElementById(name);
 	}
 	else if (document.all) 
	{
	   	return document.all[name];
 	}
 	else if (document.layers) 
	{
	   	if (document.layers[name]) 
		{
	   		return document.layers[name];
		}
		else 
		{
	    	return document.layers.testP.layers[name];
	   	}
 	}
}

function GetElementPosition(target) {
  if (typeof(target) == "string") {
      target = getObject(target);
  }
  if(target.offsetParent) {
    for(var posX = 0, posY = 0; target.offsetParent; target = target.offsetParent ) {
      posX += target.offsetLeft;
      posY += target.offsetTop;
    }
    return { left:posX, top:posY };
  } 
  else {
    return { left:target.x, top:target.y };
  }
}

function createElement(parent, tagname) {
	var elem = document.createElement(tagname);
	if (parent) {
		parent.appendChild(elem);
	}
	return elem;
}

var showPalette = function(obj, target, inputname) {
	palette = new PaletteObj(target, inputname)
	palettePos = GetElementPosition(obj)
	pal.style.left = (palettePos.left - 100) + "px"
	pal.style.top = (palettePos.top + 22) + "px"
	pal.style.zIndex = "1000"
	pal.style.display = "block"
	
	return false;
}


var PaletteObj = function(target, inputname) {

	this.previewObj = getObject(target)
	this.inputName = getObject(inputname)
	
	this.updateColor = function(rgb) {
		this.previewObj.style.backgroundColor = rgb
	}
	
	this.pickedColor = function(rgb) {
		pal.style.display = "none"

		this.inputName.value = d2h(fromRgb(rgb));

		readSettingsControl()
	}
}

var fromRgb = function(rgb) {
	if (rgb.substr(0,3) == "rgb") {
		var rgbvalues = rgb.substr(4, (rgb.length - 5)).split(',')
		return (0x10000 * Number(rgbvalues[0])) + (0x100 * Number(rgbvalues[1])) + Number(rgbvalues[2])
	}
}

var palette = new PaletteObj('colorShow')

var padHex = function(n) {
	return (n.length == 1 ? "0" + n : n)
}

var hD="0123456789ABCDEF";
var d2h = function(d) {
	var h = hD.substr(d&15,1);
	while(d > 15) {d >>= 4;h = hD.substr(d&15,1) + h;}
	return h;
}

var colorShow = getObject('colorShow');

var updateColor = function(rgb) {
	colorShow.style.backgroundColor = rgb
}

/* Colors */
var fillColorPalette = function() {
	var cpContainer = getObject('colorPalette')
	var cpTable = createElement(cpContainer, "table")
	cpTable.cellSpacing = '0';
	cpTable.cellPadding = '0';
	var cpTableBody = createElement(cpTable, "tbody");
	
	cpTable.style.border = "1px solid #fff"

	for (j = 0; j < 16; j++) {
		var cpRow = createElement(cpTableBody, "tr")
		for (i = 0; i < 16; i+=4) {
			for (k = 0; k < 16; k+=2) {
				var cell = createElement(cpRow, "td")
				cell.style.backgroundColor = rgbOf(i, j, k)
				cell.style.height = "8px"
				cell.style.width = "8px"
				cell.onmouseover = function() { palette.updateColor(this.style.backgroundColor) }
				cell.onclick = function() { palette.pickedColor(this.style.backgroundColor) }
			}
		}
	}

	/* Grey */
	var cpTable2 = createElement(cpContainer, "table")
	cpTable2.style.border = "1px solid #fff"
	cpTable2.cellSpacing = '0';
	cpTable2.cellPadding = '0';
	var cpTableBody2 = createElement(cpTable2, "tbody");
	var cpRow2 = createElement(cpTableBody2, "tr")
	for (i = 0; i < 16; i++) {
		var cell = createElement(cpRow2, "td")
		cell.style.backgroundColor = rgbOf(i, i, i)
		cell.style.height = "10px"
		cell.style.width = "16px"
		cell.onmouseover = function() { palette.updateColor(this.style.backgroundColor) }
		cell.onclick = function() { palette.pickedColor(this.style.backgroundColor) }
	}
}

var rgbOf = function(r, g, b) {
	return "rgb(" + (17 * r) +  "," + (17 * g) + "," + (17 * b) + ")"
}

var d2rgb = function (n) {
	var rgbn = "rgb(" + ((n & 0xFF0000) >> 16) + "," + ((n & 0xFF00) >> 8) + "," + (n & 0xFF) + ")"
	return rgbn
}