window.onload = function(){
col();
//vertical();
vdrag();
startdrag();
adda();
}
function vertical() {

 var e=document.createElement("em");
  $("wt").appendChild(e);

}

function col() {
var co = $("wp");
var vo = $("wt");

for (var j=0; j <64; j++){
    for (var i=0; i <64; i++){
    var e=document.createElement("em");
    
    e.style.backgroundColor = 'rgb('+j*4+','+i*4+',0)';
    co.appendChild(e);
     
    }
 var f=document.createElement("em");
 f.style.backgroundColor = 'rgb('+0*4+','+0*4+','+j*4+')';
 vo.appendChild(f);
 
}
 

}
function getTargetElement(evt) {
    var elem = (evt.target) ? ((evt.target.nodeType == 3) ? evt.target.parentNode : evt.target) : evt.srcElement;
    return elem;
}

function colorrefreshv(h,k) {
var co = $("wt");
var ems =co.getElementsByTagName("em");
for (var i=0; i <64; i++){ 
 ems[i].style.backgroundColor = 'rgb('+h+','+k+','+i*4+')';
}
}

function colorrefresh(b) {

var co = $("wp");
var ems =co.getElementsByTagName("em");

for (var j=0; j <64; j++){
 
    for (var i=0; i <64; i++){  
    ems[ 64*j+i].style.backgroundColor = 'rgb('+j*4+','+i*4+','+b+')';

  }
}
}

function stepact(e) {
 e = (e) ? e : ((window.event) ? window.event : "");
 var elem = getTargetElement(e);
 var ep = (elem.className =="arrowboxd") ? elem : elem.parentNode;
 var epc = $$(ep,"div");
 var l =epc.length;
 
 if (e.type == "mouseover") {
 for (var i=0; i < l-1; i++) {
 epc[i].style.backgroundColor = "#6699cc";
 epc[i].style.borderLeft ="solid 1px #6699cc";
 epc[i].style.borderRight ="solid 1px #6699cc";
 }
 epc[l-1].style.backgroundColor = "#6699cc";
 
 }
 if (e.type == "mouseout") {
 for (var i=0; i < l-1; i++) {
 epc[i].style.backgroundColor = "#cfcfcf";
 epc[i].style.borderLeft ="solid 1px #cfcfcf";
 epc[i].style.borderRight ="solid 1px #cfcfcf";
 }
 epc[l-1].style.backgroundColor = "#cfcfcf";
 
 }
 
 }

function vdrag() {
var e=getElementsByClass("arrowboxd");
    e[0].onmouseover = stepact;
    e[0].onmouseout = stepact;
    e[0].onclick = stepact;
}

function c(tag) {
return document.createElement(tag);
}

function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}

function $$(e,tag) {return e.getElementsByTagName(tag);}

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}


function realToDec( n ) {
	return Math.min( 255, Math.round( n * 256 ) );
}
	
function hsvToRgb( h, s, v ) {
	var r, g, b, i, f, p, q, t;
	   i = Math.floor( ( h / 60 ) % 6 );
	    f = ( h / 60 ) - i;
	    p = v * ( 1 - s );
	    q = v * ( 1 - f * s );
	    t = v * ( 1 - ( 1 - f ) * s );
	    switch(i) {
        case 0: r=v; g=t; b=p; break;
	        case 1: r=q; g=v; b=p; break;
	        case 2: r=p; g=v; b=t; break;
	        case 3: r=p; g=q; b=v; break;
	        case 4: r=t; g=p; b=v; break;
	        case 5: r=v; g=p; b=q; break;
	    }
return "rgb("+realToDec(r)+","+ realToDec(g)+","+ realToDec(b)+")";
}

function RGBColor(color_string)
{
    this.ok = false;

     color_string = color_string.replace(/\#?/,"");

    color_string = color_string.toLowerCase();
    this.simple_colors = {
        aliceblue: 'f0f8ff',
        antiquewhite: 'faebd7',
        aqua: '00ffff',
        aquamarine: '7fffd4',
        azure: 'f0ffff',
        beige: 'f5f5dc',
        bisque: 'ffe4c4',
        black: '000000',
        blanchedalmond: 'ffebcd',
        blue: '0000ff',
        blueviolet: '8a2be2',
        brown: 'a52a2a',
        burlywood: 'deb887',
        cadetblue: '5f9ea0',
        chartreuse: '7fff00',
        chocolate: 'd2691e',
        coral: 'ff7f50',
        cornflowerblue: '6495ed',
        cornsilk: 'fff8dc',
        crimson: 'dc143c',
        cyan: '00ffff',
        darkblue: '00008b',
        darkcyan: '008b8b',
        darkgoldenrod: 'b8860b',
        darkgray: 'a9a9a9',
        darkgreen: '006400',
        darkkhaki: 'bdb76b',
        darkmagenta: '8b008b',
        darkolivegreen: '556b2f',
        darkorange: 'ff8c00',
        darkorchid: '9932cc',
        darkred: '8b0000',
        darksalmon: 'e9967a',
        darkseagreen: '8fbc8f',
        darkslateblue: '483d8b',
        darkslategray: '2f4f4f',
        darkturquoise: '00ced1',
        darkviolet: '9400d3',
        deeppink: 'ff1493',
        deepskyblue: '00bfff',
        dimgray: '696969',
        dodgerblue: '1e90ff',
        feldspar: 'd19275',
        firebrick: 'b22222',
        floralwhite: 'fffaf0',
        forestgreen: '228b22',
        fuchsia: 'ff00ff',
        gainsboro: 'dcdcdc',
        ghostwhite: 'f8f8ff',
        gold: 'ffd700',
        goldenrod: 'daa520',
        gray: '808080',
        green: '008000',
        greenyellow: 'adff2f',
        honeydew: 'f0fff0',
        hotpink: 'ff69b4',
        indianred : 'cd5c5c',
        indigo : '4b0082',
        ivory: 'fffff0',
        khaki: 'f0e68c',
        lavender: 'e6e6fa',
        lavenderblush: 'fff0f5',
        lawngreen: '7cfc00',
        lemonchiffon: 'fffacd',
        lightblue: 'add8e6',
        lightcoral: 'f08080',
        lightcyan: 'e0ffff',
        lightgoldenrodyellow: 'fafad2',
        lightgrey: 'd3d3d3',
        lightgreen: '90ee90',
        lightpink: 'ffb6c1',
        lightsalmon: 'ffa07a',
        lightseagreen: '20b2aa',
        lightskyblue: '87cefa',
        lightslateblue: '8470ff',
        lightslategray: '778899',
        lightsteelblue: 'b0c4de',
        lightyellow: 'ffffe0',
        lime: '00ff00',
        limegreen: '32cd32',
        linen: 'faf0e6',
        magenta: 'ff00ff',
        maroon: '800000',
        mediumaquamarine: '66cdaa',
        mediumblue: '0000cd',
        mediumorchid: 'ba55d3',
        mediumpurple: '9370d8',
        mediumseagreen: '3cb371',
        mediumslateblue: '7b68ee',
        mediumspringgreen: '00fa9a',
        mediumturquoise: '48d1cc',
        mediumvioletred: 'c71585',
        midnightblue: '191970',
        mintcream: 'f5fffa',
        mistyrose: 'ffe4e1',
        moccasin: 'ffe4b5',
        navajowhite: 'ffdead',
        navy: '000080',
        oldlace: 'fdf5e6',
        olive: '808000',
        olivedrab: '6b8e23',
        orange: 'ffa500',
        orangered: 'ff4500',
        orchid: 'da70d6',
        palegoldenrod: 'eee8aa',
        palegreen: '98fb98',
        paleturquoise: 'afeeee',
        palevioletred: 'd87093',
        papayawhip: 'ffefd5',
        peachpuff: 'ffdab9',
        peru: 'cd853f',
        pink: 'ffc0cb',
        plum: 'dda0dd',
        powderblue: 'b0e0e6',
        purple: '800080',
        red: 'ff0000',
        rosybrown: 'bc8f8f',
        royalblue: '4169e1',
        saddlebrown: '8b4513',
        salmon: 'fa8072',
        sandybrown: 'f4a460',
        seagreen: '2e8b57',
        seashell: 'fff5ee',
        sienna: 'a0522d',
        silver: 'c0c0c0',
        skyblue: '87ceeb',
        slateblue: '6a5acd',
        slategray: '708090',
        snow: 'fffafa',
        springgreen: '00ff7f',
        steelblue: '4682b4',
        tan: 'd2b48c',
        teal: '008080',
        thistle: 'd8bfd8',
        tomato: 'ff6347',
        turquoise: '40e0d0',
        violet: 'ee82ee',
        violetred: 'd02090',
        wheat: 'f5deb3',
        white: 'ffffff',
        whitesmoke: 'f5f5f5',
        yellow: 'ffff00',
        yellowgreen: '9acd32'
    };
            
    for (var key in this.simple_colors) {
        if (color_string==key) {
			color_string = this.simple_colors[key];
        }      
        if ( color_string==this.simple_colors[key]) {
        this.name = key;
        
        }
    }
    
      
    var color_defs = [
        {
            //re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
            re: /^rgb\((1[0-9]{2}|25[0-5]|2[0-4]\d|\d{1,2}),(1[0-9]{2}|25[0-5]|2[0-4]\d|\d{1,2}),(1[0-9]{2}|25[0-5]|2[0-4]\d|\d{1,2})\)$/,
            example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
            process: function (bits){
                return [
                    parseInt(bits[1]),
                    parseInt(bits[2]),
                    parseInt(bits[3])
                ];
            }
        },
        {
            re: /^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/,
            example: ['#00ff00', '336699'],
            process: function (bits){
                return [
                    parseInt(bits[1], 16),
                    parseInt(bits[2], 16),
                    parseInt(bits[3], 16)
                ];
            }
        },
        {
            re: /^([a-f0-9])([a-f0-9])([a-f0-9])$/,
            example: ['#fb0', 'f0f'],
            process: function (bits){
                return [
                    parseInt(bits[1] + bits[1], 16),
                    parseInt(bits[2] + bits[2], 16),
                    parseInt(bits[3] + bits[3], 16)
                ];
            }
        }
    ];

    // search through the definitions to find a match
    for (var i = 0; i < color_defs.length; i++) {
        var re = color_defs[i].re;
        var processor = color_defs[i].process;
        var bits = re.exec(color_string);
        if (bits) {
            channels = processor(bits);
            this.r = channels[0];
            this.g = channels[1];
            this.b = channels[2];
            this.ok = true;
           
        }

    }

    this.toRGB = function () {
        return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
    }
    this.toHex = function () {
        var r = this.r.toString(16);
        var g = this.g.toString(16);
        var b = this.b.toString(16);
        if (r.length == 1) r = '0' + r;
        if (g.length == 1) g = '0' + g;
        if (b.length == 1) b = '0' + b;
        return '#' + r + g + b;
    }
  
this.toHsv= function () {
   var red = this.r;
   var green = this.g;
   var blue = this.b;
   var hue,sat,lumin;
   var  min = Math.min( Math.min( red, green ), blue );
   var max = Math.max( Math.max( red, green ), blue );
   var delta = (max - min);
   if (max != 0) {
      // calculate saturation & luminence
      sat = delta / max; 
      lumin = max / 255;
      // calculate hue: first, adjustments to fix if(...) errors
         delta = delta+0;
         red = red+0;
         green = green+0;
         blue = blue+0;
      if ( delta != 0 ) {
         if (red==max) {
            hue = (green - blue) / delta;
         } else if (green==max) {
            hue = 2 + ((blue - red) / delta);
         } else {
            hue = 4 + ((red - green) / delta);
         }
      }
      hue = hue * 60;
      if (hue < 0) hue = hue + 360;
   }
 return [Math.round(hue),Math.round(sat * 100),Math.round(lumin * 100)];
}

   
    
}

function gopos() {
b = parseInt(b);
r =parseInt(r);
g = parseInt(g);
$("dv").style.top = b + parseInt(ctop) +"px";
$("ds").style.left = g + parseInt(bleft) +"px";
$("ds").style.top = r + parseInt(btop) +"px";
colorrefreshv(r,g);
colorrefresh(b);
}

function move(e){
e = (e) ? e : ((window.event) ? window.event : "");
if (d.className=='arrows') {
    var xs,ys;
    xs = e.clientX -5;
    if (xs<bleft) xs = bleft;
	if (xs>255+bleft) xs = 255+bleft;
        d.style.left = xs  + "px";	
        g = xs -bleft;
	
	ys = e.clientY +document.documentElement.scrollTop-5
	if (ys<btop) ys = btop;
	if (ys>255+btop) ys = 255+btop;
	
	    d.style.top  = ys + "px";
	    r = ys - btop;	
   output();  	
}
else
{ 
	var y_y = e.clientY+document.documentElement.scrollTop;
	
	
	if (y_y<ctop) y_y = ctop;
	if (y_y>255+ctop) y_y = 255+ctop;
	d.style.top  = y_y  + "px";
	b = y_y-ctop;
  // $("test").innerHTML =  $("test").innerHTML +"<br>"+" y_y "+y_y+ " e.clientY "+ e.clientY + " offtop " + offtop + " ctop " +ctop + " b  "+ b;
	output();	
    
 } 
  return false; 
  
}


var r=0,g=0,b=0;
function down(e){
e = (e) ? e : ((window.event) ? window.event : "");
var temp = getTargetElement(e); 

if ((temp.className=="arrows")||(temp.parentNode.className=="arrowboxd")) {

d = (temp.className=="arrows") ? temp : temp.parentNode;

document.onmousemove = move;
return false; }

else
d = null;
}

function up(){
if ((d!=null) && (d.className=="arrowboxd")) {
colorrefresh(b);}

if ((d!=null) && (d.className=="arrows")) {
colorrefreshv(r,g);
}
document.onmousemove = null;
d=null;
}

   
function clickbar(e){
e = (e) ? e : ((window.event) ? window.event : "");
var yy = e.clientY -7; 
$("dv").style.top = yy +"px";
b = yy-ctop;
output();
colorrefresh(b);
}

function inputact(e){
e = (e) ? e : ((window.event) ? window.event : "");
var el = getTargetElement(e); 
if ((el.id=="h")||(el.id=="s")||(el.id=="v")) {
var h = $("h").value;var s = $("s").value;var v = $("v").value;
if (h>359) h=359;
if (h<0) h=0;
if (s>100) s=100;
if (s<0) s = 0;
if (v>100) v=100;
if (v<0) v= 0;

s = s/100;v=v/100;
var vrgb = hsvToRgb(h,s,v);
var color = new RGBColor(vrgb);
if (color.ok==true) {
el.parentNode.nextSibling.innerHTML="";

r = color.r;
g = color.g;
b = color.b;
$("r").value = r;
$("g").value = g;
$("b").value = b;
$("hex").value =color.toHex();

$("nm").value = color.name;
$("clbx").style.backgroundColor = color.toHex();


gopos();
}

}
else if (el.id=="nm") {
var strcolor = el.value;
var color = new RGBColor(strcolor);
if (color.ok==true) {
el.parentNode.nextSibling.innerHTML="";

r = color.r;
g = color.g;
b = color.b;
$("r").value = r;
$("g").value = g;
$("b").value = b;
$("hex").value =color.toHex();

$("nm").value = color.name;
$("clbx").style.backgroundColor = color.toHex();

var hsv = color.toHsv();
$("h").value = hsv[0];
$("s").value = hsv[1];
$("v").value = hsv[2];

gopos();
}

}

else if (el.id=="hex") {
var strcolor = el.value;
var color = new RGBColor(strcolor);
if (color.ok==true) {
el.parentNode.nextSibling.innerHTML="";

r = color.r;
g = color.g;
b = color.b;
$("r").value = r;
$("g").value = g;
$("b").value = b;


output();
gopos();

}else
el.parentNode.nextSibling.innerHTML="x";

}
else
{
if (isNaN(el.value)||(el.value<0)||(el.value>255)) {
el.parentNode.nextSibling.innerHTML="x";
}
else
{
el.parentNode.nextSibling.innerHTML="";

var rgb = "rgb("+$("r").value+","+$("g").value+","+$("b").value+")";
var color = new RGBColor(rgb);
if (color.ok==true) {
r = $("r").value;
g = $("g").value;
b = $("b").value;

gopos();
output();
}
}
}
}

function output() {
var rgb = "rgb("+r+","+g+","+b+")";
$("clbx").style.backgroundColor = rgb;
$("r").value = r;
$("g").value = g;
$("b").value = b;
var color = new RGBColor(rgb);
var hexcolor = color.toHex();
$("hex").value = hexcolor;
//$("hex").value = rgbtohex(rgb);
var color = new RGBColor(hexcolor);
$("nm").value = (color.name!=undefined) ? color.name : "";

var hsv = color.toHsv();
$("h").value = hsv[0];
$("s").value = hsv[1];
$("v").value = hsv[2];
}

function clicksquare(e){
e = (e) ? e : ((window.event) ? window.event : "");

	var xs = e.clientX -5;
        $("ds").style.left = xs  + "px";	
        g = xs -bleft;
	
	var ys = e.clientY -5
		
	    $("ds").style.top  = ys + document.documentElement.scrollTop+"px";
	    r = ys - btop;
		output();
		colorrefreshv(r,g);

}

function Draggable(item,wd,mn, mx,unt){
	if (item=="dv") {
	var pos_wt = getElementPosition($("wt"));
	
	$(item).style.left = pos_wt[0]+8+"px";
	ctop = pos_wt[1]-7;
	$(item).style.top =ctop+"px";
	
	var dd = $$($("wt"),"em");
	for (var i=0; i <dd.length; i++){
	dd[i].onclick = clickbar;
	}
	}
	if (item=="ds") {
	var pos_wt = getElementPosition($("wp"));
	bleft=pos_wt[0]
	$(item).style.left = bleft+"px";
	btop = pos_wt[1];
	$(item).style.top =btop+"px";
	$("wp").onclick = clicksquare;
		
	}
	
   var inputs = $('r','g','b','hex','h','s','v','nm');
    for (var i=0; i < inputs.length; i++) {
        inputs[i].onkeyup = inputact;
      
    }
    
    
   	return false;
}


function slider(id) {
    this.id=id;
    this.b = function() {
    var d;
    var y,x,dy,dx,ctop,btop,bleft;
  
    Draggable(this.id);
    
    document.onmousedown = down;
	document.onmouseup = up;
    }    
       
}

function startdrag() {
var drg1 = new slider("dv");
drg1.b();
var drg2 = new slider("ds");
drg2.b();
}

function getstyle(elem, prop) {
		if(document.defaultView)
		{
			return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
		}
		else if(elem.currentStyle)
		{
			var prop = prop.replace(/-(\w)/gi, function($0,$1)
			{
				//return $0.charAt($0.length - 1).toUpperCase();
				return $1.toUpperCase();
			});
			return elem.currentStyle[prop];
		}
		else return null;
	}
	
function getoffset(el) {
var curLeft = 0;   
var curTop = 0; 

if (el.offsetParent) { 
	el = el.offsetParent
        do {   
            curLeft += el.offsetLeft;  
            curTop += el.offsetTop;   
            
        } while (el = el.offsetParent); 
     return [curLeft,curTop];
  }

}	
	
	
function getElementPosition(el)   
{   
    var curLeft = 0;   
    var curTop = 0;   
   // var corrections = calcPositionCorrection(el);   
  
    if (el.offsetParent)   
    {   
        do {   
            curLeft += el.offsetLeft;  
         
            curTop += el.offsetTop;   
        } while (el = el.offsetParent);   
        return [ curLeft, curTop ]; 
     //   return [ (curLeft - corrections[0]), (curTop - corrections[1]) ];   
    }   
} 

  
function calcPositionCorrection(el)   
{   
    var curX = 0;   
    var curY = 0;   
    do {   
        curX += el.scrollLeft;   
        curY += el.scrollTop;   
        if (el.nodeName == 'BODY')   
            break;   
    } while (el = el.parentNode);   
    return [curX, curY];   
}  


function adda() {
var color = new RGBColor("red");
var n=0;         
for (var key in color.simple_colors) {
	n++;  
}

var m = parseInt(n/4);

var lfts= getElementsByClass("lft");
var i = 0;


for (var key in color.simple_colors) {
	if (i<m) {
	createlink(lfts[0],color.simple_colors[key],key);
	i++;
	}
	
	if ((i>m-1)&&(i<2*m)) {
	if (i>m){
	createlink(lfts[1],color.simple_colors[key],key);
	}	
	i++;
		
	}
	if ((i>2*m-1)&&(i<3*m)) {
	if (i>2*m){
	createlink(lfts[2],color.simple_colors[key],key);
	}
	i++;
	}
	if ((i>3*m-1)&&(i<4*m)) {
	if (i>3*m)	{
	createlink(lfts[3],color.simple_colors[key],key);
	}
	i++;
	
	}
}

}

function colorname(txt){

var el = $("nm");
el.value = txt;

var color = new RGBColor(txt);
if (color.ok==true) {
el.parentNode.nextSibling.innerHTML="";

r = color.r;
g = color.g;
b = color.b;
$("r").value = r;
$("g").value = g;
$("b").value = b;
$("hex").value =color.toHex();
$("nm").value = color.name;
var hexcolor = color.toHex();
$("clbx").style.backgroundColor = hexcolor;
var hsv = color.toHsv();
$("h").value = hsv[0];
$("s").value = hsv[1];
$("v").value = hsv[2];
gopos();
var wwpp= getElementsByClass("wrapper");
wwpp[0].style.backgroundColor = hexcolor;
var n1 = wwpp[0].nextSibling;
var n2 = n1.nextSibling;
var n3 = n2.nextSibling;
var n4 = n3.nextSibling;
var n5 = n4.nextSibling;
n1.style.backgroundColor = hexcolor;
n2.style.backgroundColor = hexcolor;
n3.style.backgroundColor = hexcolor;
n4.style.backgroundColor = hexcolor;
n5.style.backgroundColor = hexcolor;

var p1= wwpp[0].previousSibling;
var p2 =p1.previousSibling;
var p3 = p2.previousSibling;
var p4 = p3.previousSibling;
var p5 = p4.previousSibling;

p1.style.backgroundColor = hexcolor;
p2.style.backgroundColor = hexcolor;
p3.style.backgroundColor = hexcolor;
p4.style.backgroundColor = hexcolor;
p5.style.backgroundColor = hexcolor;



}

}

function createlink(e,hexcl,cltxt) {
var a = document.createElement("a");	
	a.href ="javascript:colorname('"+cltxt+"')";
	var dsq=document.createElement("div");
	dsq.className = "cl";
	dsq.style.backgroundColor ="#"+hexcl;
	a.appendChild(dsq);
	 
	var dnm = document.createElement("div");
	dnm.appendChild(document.createTextNode(cltxt));
	a.appendChild(dnm);
	e.appendChild(a);

}

function socialbkmk() {
var u = location.href;
var t = document.title;
location.href = 'http://www.pagecolumn.com/social_bookmark2.htm?pgcoluu='+u+'&pgcoltt='+t;
}