var ColorSelect = function() {
	this.colorPreview = null;
	this.colorTab = null;
	this.colorField = null;
	this.ident = null;
	this.color = null;

	this.setIdent = function(ident) {
		this.ident = ident;
	}

	this.getIdent = function() {
		return this.ident;
	}

	this.setColor = function(color) {
		this.color = color;
	}

	this.getColor = function() {
		return this.color;
	}

	this.initColorSelect = function() {
		this.colorTab = document.getElementById('colorSelectTab_' + this.getIdent());
		this.colorBox = document.getElementById('colorBox_' + this.getIdent());
		this.colors = document.getElementById('colors_' + this.getIdent());
		if(!this.colorTab || !this.colorBox || !this.colors)
			return false;
		if(!this.getColor()) {
			this.colorBox.style.backgroundImage = "url('/images/forms/no_color.gif')";
		} else {
			this.colorBox.style.backgroundImage = "url('')";
		}
		this.colorBox.container = this;
		if(this.colorBox) {
			this.colorBox.onclick = this.showColorSelect;
		}
	}

	this.showColorSelect = function(event) {
		cursor = getPosition(event);
		this.container.colors.innerHTML = "";
		this.container.colors.innerText = "";
		this.container.colors.appendChild(getColorTab(
			this.container.getIdent(), this.container.getColor()
		));
		this.container.colorTab.style.left = cursor.x + "px";
		this.container.colorTab.style.top = cursor.y + "px";
		this.container.colorTab.style.display = "block";
	}
}

// Hide Colorselect will called onclick and returns false;
function hideColorSelect(ident) {
	var var_local_tab;

	var_local_tab = document.getElementById('colorSelectTab_' + ident);
	var_local_tab.style.display = "none";

	return false;
}

function setColor(ident, color) {
	colorBox = document.getElementById('colorBox_' + ident);
	colorShowHex = document.getElementById('colorShowHex_' + ident);
	colorBox.style.backgroundColor = "#" + color;
	colorBox.style.backgroundImage = "none";

	colorShowHex.value = color;
	hideColorSelect(ident);
}

function touchColorField(ident, color) {
	document.getElementById('colorSelectField_' + ident).value = color;
	document.getElementById('colorSelectPreview_' + ident).style.backgroundColor = '#' + color;
}

function reinitColorSelect(ident, color) {
	eval('if(ObjColorSelect' + ident + ') { var obj = ObjColorSelect' + ident + '; } else { var obj = false; } ');
	if(!obj)
		var obj = new ColorSelect();
	obj.setIdent(ident);
	obj.setColor(color);
	obj.initColorSelect(ident, color);

	return true;
}

function getColorTab(ident, color) {
   var table = document.createElement("table");
   table.setAttribute("cellspacing", 0);
   table.setAttribute("cellpadding", 0);
   table.className = "colorSelectTab";
   var tbody = document.createElement("tbody");
   table.appendChild(tbody);

   for(var r = 0; r <= 5; r++) {
      var tr = document.createElement("tr");
      if(r == 5)
         var td = getTdTransparent();
      else
         var td = getTd(r, r, r);
      td.className = "colorSelectTab_grey";
      tr.appendChild(td);
      for(var g = 0; g <= 5; g++) {
         for(var b = 0; b <= 5; b++) {
            tr.appendChild(getTd(r, g, b));
         }
      }
      tbody.appendChild(tr);
   }
   
   return table;
   
   function getTd(r, g, b) {
      var color = getHex(r) + getHex(g) + getHex(b);
      var td = document.createElement("td");
      var div = document.createElement("div");
      div.className = "colorSelectTab_color";
      div.style.display = "block";
      div.style.backgroundColor = "#" + color;
      
      div.onmouseover = function() {
         touchColorField(ident, color);
      }
      div.onclick = function() {
    	  setColor(ident, color);

    	  // Isnt something new
    	  focusField = document.getElementById("colorShowHex_" + ident);
    	  focusField.focus();
      }
      
      td.appendChild(div);
      return td;
   }

   function getTdTransparent() {
      var color = "transparent";
      var td = document.createElement("td");
      var div = document.createElement("div");
      div.className = "colorSelectTab_color";
      div.style.display = "block";
      div.style.backgroundColor = "transparent";
      div.style.backgroundImage = "url(/images/forms/no_color.gif)";

      div.onmouseover = function() {
		document.getElementById('colorSelectField_' + ident).value = 'transparent';
		document.getElementById('colorSelectPreview_' + ident).style.backgroundColor = 'transparent';
      }
      div.onclick = function() {
  		colorBox = document.getElementById('colorBox_' + ident);
		colorShowHex = document.getElementById('colorShowHex_' + ident);
		colorBox.style.backgroundColor = "transparent";
		colorBox.style.backgroundImage = "url(/images/forms/no_color.gif)";

		colorShowHex.value = "transparent";
		hideColorSelect(ident);
      }

      td.appendChild(div);
      return td;
   }

   function getHex(dec) {
      var hex;
      if(dec <= 3) {
         dec = String(dec * 3);
         return dec + dec;
      }
      if(dec <= 4) {
         return "CC";
      }
      return "FF";
   }
}