Function.prototype.bind = function(obj) {	
    var _method = this;
    return function() {
        return _method.apply(obj, arguments);
    };
    
}   

function pgcolor() {

this.wpstyle= {cssFloat:"left",fontSize:"1px",width: "180px"};
this.emstyle ={fontSize:"1px",display:"block",width: "100%",height: "4px"};
this.colstyle ={fontSize:"1px",width: "2px",height: "100px",cssFloat:"left"};

this.dragboxstyle ={width:"8px",height:"8px",position:"relative",border:"1px solid #fff",overflow:"hidden",zIndex:"1000",backgroundColor:"#9400d3"}
this.leftstyle={width:"190px",height:"100px",cssFloat:"left"};
//this.rightstyle={width:"30px",height:"100px"};
this.header="";this.footer="";this.wrp="";
this.right ="";this.left="";this.drgbox="";this.pos_wp=[];this.pos_wt=[];this.drager="";this.drgarrow;//these are necessary for ff, don't delete
this.h=0;this.s=100;this.v=100;
}

pgcolor.prototype = { 
init : function(settings) {
for(var i in settings){
    if (typeof(this[i])=="undefined") 
		    this[i] = settings[i];
}

this.layout();
this.createbox();
this._event_docMouseMove = this._docMouseMove.bind(this);		
this._event_docMouseUp = this._docMouseUp.bind(this);		
this.drgbox.onmousedown = this._mouseDown.bind(this);
this.drgarrow.onmousedown = this._mouseDown.bind(this);
this.wp.onclick =  this._clicksquare.bind(this);
this.wt.onclick =  this._clicksquare.bind(this);

if (this.fire)
	 addEvent (this.wp, 'click', this.fire );	
if (this.fire)
	 addEvent (this.wt, 'click', this.fire );	
if (this.fireup)
    addEvent(this.wp, 'click', this.fireup);
if (this.fireup)
    addEvent(this.wt, 'click', this.fireup);
		 
},

setPosition: function(x,y) {
  if (this.drager=="box") {
   

   x = x-this.pos_wp[0]-180;
   y = y-this.pos_wp[1];
    if (x<-180+4) x = -180+4;
    if (x>4) x = 4;
    if (y<4) y=4;
    if (y>104) y = 104;
   
	this.drgbox.style.left = x-4+ "px";
	this.drgbox.style.top = y-4+ "px";
	this.h = (180+x-4)*2;
	this.v = 100- (y-4);
  } 
  else {

    y = y-this.pos_wt[1]-5
     if (y<-5) y = -5;
     if (y>95) y = 95;
   
   	this.drgarrow.style.top =y+ "px";
	this.s = 100 -y-5;
  }
  var hex =  this.Hex();
  this.hexvalue.value = hex
  this.hexvalue.style.color = hex;
},

_clicksquare:function (e){
e = (e) ? e : ((window.event) ? window.event : "");
var o = getTargetElement(e); 
this.drager = ((o.parentNode==this.wp)||(o.parentNode.parentNode==this.wp)) ? "box" : "arrow";

    this.setValuesClick(e);
	if (this.drager=="box") {   
	    this.colorrefreshv();
    } 
    else {
	this.colorrefresh();
    }
  
    this.noBubbleDefault(e);
},

colorrefreshv:function () {
var co = this.wt;
var ems =co.getElementsByTagName("em");

for (var i=24; i >-1; i--){
 ems[i].style.backgroundColor =  hsvToRgb(this.h,(100-i*4)/100,this.v/100);
}
},

colorrefresh:function () {

var co = this.wp;
var ems =co.getElementsByTagName("em");
for (var i=0; i <90; i++){;
    for (var j=24; j >-1; j--){
        var n = 25*i+j
        ems[n].style.backgroundColor =  hsvToRgb(4*i,this.s/100,(100-4*j)/100);   
    }
}

},
_mouseDown: function(e) {
		
		addEvent(document, 'mousemove', this._event_docMouseMove);					
		addEvent(document, 'mouseup', this._event_docMouseUp);	
		
		this.drager = this.drag(e);
		
		if (this.fireup)
		    addEvent(document, 'mouseup', this.fireup);
		if (this.fire)
	        addEvent (document, 'mousemove', this.fire );	
	 
		
		this.noBubbleDefault(e);		
},

drag: function(e) {
e = (e) ? e : ((window.event) ? window.event : "");
var o = getTargetElement(e); 
if (o==this.drgbox) return "box";
 else 
 return "arrow";

},
 _docMouseMove: function(e) {

		this.setValuesClick(e);	
		this.noBubbleDefault(e);	   
},

_docMouseUp: function(e) {

 if (this.drager=="box") {
	this.colorrefreshv();
  } 
  else 
	this.colorrefresh();
	
if (this.fire)
	        removeEvent(document, 'mousemove', this.fire );
	        
if ((this.fireup) && (document.all))
	removeEvent(document, 'mouseup', this.fireup);
		
removeEvent(document, 'mouseup', this._event_docMouseUp);
removeEvent(document, 'mousemove', this._event_docMouseMove);


this.noBubbleDefault(e);

},

setValuesClick: function(e){ 
 
var x = e.clientX+document.documentElement.scrollLeft;
var y = e.clientY+document.documentElement.scrollTop;	
this.setPosition(x,y);	
 	
},

RGB:function() {
return hsvToRgb(this.h,this.s/100,this.v/100);
},

Hex: function () {
var rgb = this.RGB();
var result = rgb.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/g);
this.r = parseInt(RegExp.$1);this.g = parseInt(RegExp.$2);this.b=parseInt(RegExp.$3);
        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;
    },

createbox: function() {
this.wp = document.createElement("div");
this.addstyle(this.wp,this.wpstyle);

this.wt =this.wp.cloneNode(false);
this.wt.style.width ="8px";

var cell=document.createElement("em");
this.addstyle(cell,this.emstyle);

var col = document.createElement("div");
this.addstyle(col,this.colstyle);

for (var i=0; i <90; i++){
var ec = col.cloneNode(false);
this.wp.appendChild(ec);
for (var j=24; j >-1; j--){
var er = cell.cloneNode(false);
ec.appendChild(er);
er.style.backgroundColor =  hsvToRgb(4*i,1,4*j/100);
}
}
 
for (var j=24; j >-1; j--){

var f = cell.cloneNode(false);

f.style.width="8px";
f.style.backgroundColor =hsvToRgb(0,4*j/100,1);
this.wt.appendChild(f); 
}

this.drgbox =  document.createElement("div");
this.addstyle(this.drgbox,this.dragboxstyle);

this.left.appendChild(this.wp);
this.left.appendChild(this.drgbox);
this.right.appendChild(this.wt);
this.drgarrow = this.steparrows();
this.right.appendChild(this.drgarrow);

addEvent(this.drgbox,"mouseover",this.hltdrgbox.bind(this));
addEvent(this.drgbox,"mouseout",this.hltdrgbox.bind(this));

addEvent(this.drgarrow,"mouseover",this.hightlight.bind(this));
addEvent(this.drgarrow,"mouseout",this.hightlight.bind(this));

this.pos_wp = getElementPosition(this.wp);	
this.drgbox.style.left = -180+"px";
this.drgbox.style.top =0+"px";

this.pos_wt = getElementPosition(this.wt);
this.drgarrow.style.left =-2+"px";
this.drgarrow.style.top =-5+"px";
},
addstyle: function(node,styles) {
        for(var i in styles){
        if ((document.all)&&(i=="cssFloat")) node.style["styleFloat"]= styles[i];
        node.style[i]= styles[i];
        }
   
},

layout:function(){
var co = document.getElementById(this.id);
this.wrp = document.createElement("div");
this.wrp.style.width="222px";
this.wrp.style.backgroundColor = this.style.body;
this.wrp.style.borderLeft = this.style.border;
this.wrp.style.borderRight = this.style.border;

co.appendChild(this.wrp); 

this.header = document.createElement("div");
this.header.style.width="100%";
this.header.style.height="20px";
this.header.style.backgroundColor = this.style.header;
this.header.style.borderBottom=this.style.border;
this.header.style.borderTop=this.style.border;

this.wrp.appendChild(this.header); 
this.left = document.createElement("div");
this.addstyle(this.left,this.leftstyle);

this.wrp.appendChild(this.left); 

this.right = document.createElement("div");
//this.addstyle(this.right,this.rightstyle);

this.wrp.appendChild(this.right); 

this.footer = this.header.cloneNode(false);
this.footer.style.height="5px";
this.hexvalue = document.createElement("input");
this.hexvalue.type="text";
this.hexvalue.style.border="0px solid #fff";
this.hexvalue.style.width ="50px";
this.hexvalue.style.padding="1px";
this.hexvalue.style.backgroundColor = this.style.header;
this.hexvalue.style.marginLeft="50px";

if (!document.all) {
this.hexvalue.style.position="relative";
this.hexvalue.style.top = "1px";
}


var divclear = document.createElement("div");
divclear.style.clear="both";
this.wrp.appendChild(divclear);
this.wrp.appendChild(this.footer); 
this.link = olink();
this.header.appendChild(this.link);
this.header.appendChild(this.hexvalue);
},

steparrows:function () {
	var div = document.createElement('div');
	//div.style.width = "12px";
	div.style.position="relative";
	var divl = this.divleft();
	divl.style.width = "12px";	
	this.leftarrow = this.arrowleftright(12,12,"left","#9400d3");
	divl.appendChild(this.leftarrow);	
	div.appendChild(divl);
	return div;	
	},
	
divleft: function() {
	var div = document.createElement('div');
	var divfloat = (document.all)  ? "styleFloat" : "cssFloat";
	div.style[divfloat] ="left";	
	return div;
},
	
hltdrgbox:function (e) {
    e = (e) ? e : ((window.event) ? window.event : "");
    var o = getTargetElement(e);
    o.style.backgroundColor = (e.type == "mouseover") ? "#c195d4" : "#9400d3";
},

hightlight: function (e) {
    e = (e) ? e : ((window.event) ? window.event : "");
    var o = getTargetElement(e);
    var v = (o ==this.leftarrow) ? o : o.parentNode;
    var d = v.childNodes;
    if (e.type == "mouseover") {
        for (var i=0;i<d.length;i++) {
        d[i].style.backgroundColor = "#c195d4";
        }
    }
    else if (e.type == "mouseout") {
        for (var i=0;i<d.length;i++) {
        d[i].style.backgroundColor = "#9400d3";
        }
    }
     
} ,
arrowleftright:function (w,h,up,bkcl) {
    var par = document.createElement('div');
    par.style.width = w+"px";
    t0 = this.divnode();
    var l = parseInt(h/2);
    for (var i=l-1;i>0;i--) {
	    t = t0.cloneNode(false);   	
        t.style.backgroundColor = bkcl;
            	
	    if (up=="right") {
	        t.style.marginLeft = 0+"px";
	        t.style.marginRight =w/l*i+"px";}
    	
	    else{
	        t.style.marginRight = 0+"px";
	        t.style.marginLeft =w/l*i+"px";
	    }
	    par.appendChild(t);
	}
	
	for (var i=1;i<l+1;i++) {
	    t = t0.cloneNode(false);
        t.style.backgroundColor = bkcl;
    
	    if (up=="right") {
	        t.style.marginLeft = 0+"px";
	        t.style.marginRight =w/l*i+"px";}
    	
	    else{
	        t.style.marginRight = 0+"px";
	        t.style.marginLeft =w/l*i+"px";
	    }
	    par.appendChild(t);

	}
    return par;
},

divnode: function () {
        var o=document.createElement("div");
        o.style.height = "1px";
        o.style.overflow="hidden";
        return o;
},
    
noBubbleDefault:function (e) {
	if (e && e.stopPropagation) {
		e.stopPropagation();
		e.preventDefault();
		}
	else
		window.event.cancelBubble = true;	
        window.event.returnValue = false; // IE	       
}


}


function addEvent ( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
      if ( obj.detachEvent ) {
        obj.detachEvent( "on"+type, obj[type+fn] );
		    obj[type+fn] = null;
      } else
        obj.removeEventListener( type, fn, false );
}

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

function $(id) {
return document.getElementById(id);
}

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 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 socialbkmk() {
var u = location.href;
var t = document.title;
location.href = 'http://www.pagecolumn.com/social_bookmark2.htm?pgcoluu='+u+'&pgcoltt='+t;
} 

function createlink(e,cltxt) {
var a = document.createElement("a");	
	a.href ="javascript:colorname('"+cltxt+"')";
		 
	e.appendChild(a);

}

function olink() {

oLk = document.createElement("a");
oLk.setAttribute('href','http://www.pagecolumn.com/tool/color_picker.htm');
var txt = document.createTextNode('Color Picker');
oLk.style.marginLeft="2px";
oLk.style.font ="12px arial #cfcfcf"
oLk.appendChild(txt);
return oLk;

}
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;
	}