// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// シンプルピッカー (C) 20070101 oitake
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// シンプルピッカークラス
var simplePicker=
{
	mode:'hex',
	chartFrame:null,
	chartImage:null,
	chartString:null,
	windowOnLoad:window.onload,
	documentOnMouseMove:window.onmousemove,
	mouseX:0,
	mouseY:0,
	textH:null,
	textR:null,
	textG:null,
	textB:null,
	HEX:'',
	RGB:[0,0,0]
};

// エントリーポイント
simplePicker.run=function()
{
	if(arguments.length==1)
	{
		this.mode='HEX';
		this.textH=document.getElementsByName(arguments[0])[0];
	}
	else
	{
		this.mode='RGB';
		this.textR=document.getElementsByName(arguments[0])[0];
		this.textG=document.getElementsByName(arguments[1])[0];
		this.textB=document.getElementsByName(arguments[2])[0];
	}
	this.chartFrame.style.left=this.mouseX+'px';
	this.chartFrame.style.top=this.mouseY+'px';
	this.chartFrame.style.visibility=this.chartFrame.style.visibility=='visible' ? 'hidden' : 'visible';
};

// 色を設定する
simplePicker.getColor=function(e,event)
{
	var x=e ? e.pageX-this.chartFrame.offsetLeft : event.offsetX;
	var y=e ? e.pageY-this.chartFrame.offsetTop : event.offsetY;
	this.pickColor(x,y);
	var r=this.RGB[0].toString(16);
	r=r.length==1 ? '0'+r : r;
	var g=this.RGB[1].toString(16);
	g=g.length==1 ? '0'+g : g;
	var b=this.RGB[2].toString(16);
	b=b.length==1 ? '0'+b : b;
	this.HEX=r+g+b;
	this.chartString.value='#'+this.HEX+' : RGB('+this.RGB[0]+','+this.RGB[1]+','+this.RGB[2]+')';
	this.chartString.style.backgroundColor='#'+this.HEX;
	this.chartString.style.color=parseInt(this.RGB[0])+parseInt(this.RGB[1])+parseInt(this.RGB[2])<382 ? '#fff' : '#000';
}

// 色を取得する
simplePicker.pickColor=function(x,y)
{
	var a=
	[
		[255,-1,0,0,1,255],
		[1,255,255,-1,0,0],
		[0,0,1,255,255,-1]
	];
	var u=Math.round(255/6);
	var s=Math.floor(x/u);
	this.RGB=[0,0,0];
	for(var i=0; i<3; i++)
	{
		if(a[i][s]===1)
		{
			this.RGB[i]=x%u*6;
		}
		else if(a[i][s]===-1)
		{
			this.RGB[i]=255-x%u*6;
		}
		else
		{
			this.RGB[i]=a[i][s];
		}
		if(y<128)
		{
			this.RGB[i]=255-Math.sin(Math.PI/255*y)*(255-this.RGB[i]);
		}
		else
		{
			this.RGB[i]=Math.sin(Math.PI/255*y)*this.RGB[i];
		}
		this.RGB[i]=Math.round(this.RGB[i]);
	}
}

// ピッカーを作成する
window.onload=function()
{
	if(simplePicker.windowOnLoad)
	{
		simplePicker.windowOnLoad();
	}
	simplePicker.chartFrame=document.createElement('div');
	document.body.appendChild(simplePicker.chartFrame);
	simplePicker.chartImage=document.createElement('div');
	simplePicker.chartFrame.appendChild(simplePicker.chartImage);
	simplePicker.chartString=document.createElement('input');
	simplePicker.chartFrame.appendChild(simplePicker.chartString);
	simplePicker.chartFrame.style.left='0px';
	simplePicker.chartFrame.style.top='0px';
	simplePicker.chartFrame.style.backgroundColor='#fff';
	simplePicker.chartFrame.style.border='#888 1px solid';
	simplePicker.chartFrame.style.padding='4px';
	simplePicker.chartFrame.style.position='absolute';
	simplePicker.chartFrame.style.visibility='hidden';
	simplePicker.chartImage.style.backgroundImage='url("simplepicker/colorchart.png")';
	simplePicker.chartImage.style.cursor='crosshair';
	simplePicker.chartImage.style.width='256px';
	simplePicker.chartImage.style.height='256px';
	simplePicker.chartString.setAttribute('type','text');
	simplePicker.chartString.style.backgroundColor='#fff';
	simplePicker.chartString.style.border='#888 1px solid';
	simplePicker.chartString.style.marginTop='4px';
	simplePicker.chartString.style.width='256px';
	simplePicker.chartFrame.onclick=function(e)
	{
		simplePicker.chartFrame.style.visibility='hidden';
	};
	simplePicker.chartImage.onmousemove=function(e)
	{
		simplePicker.getColor(e,e || event);
	};
	simplePicker.chartImage.onclick=function(e)
	{
		simplePicker.getColor(e,e || event);
		if(simplePicker.mode=='HEX')
		{
			simplePicker.textH.value=simplePicker.HEX;
		}
		else if(simplePicker.mode=='RGB')
		{
			simplePicker.textR.value=simplePicker.RGB[0];
			simplePicker.textG.value=simplePicker.RGB[1];
			simplePicker.textB.value=simplePicker.RGB[2];
		}
	};
};

// マウスカーソルの位置を取得する
document.onmousemove=function(e)
{
	if(simplePicker.documentOnMouseMove)
	{
		simplePicker.documentOnMouseMove();
	}
	simplePicker.mouseX=e ? e.pageX : event.x+document.body.scrollLeft;
	simplePicker.mouseY=e ? e.pageY : event.y+document.body.scrollTop;
}