/*	vim:ts=4:autoindent
*/
/* Colour Picker for DataSite
	based on code by Justin Palmer @ isolated-designs.net
	reworked for CSS popup by John O'Rourke for Versatilia Ltd, 2006

	USAGE:

	<script src="this script"></script>
	<style>
		#colourPicker {
			width: 140px;
			position: absolute;
			display: none;
			border: 1px solid black;
			background-color: white;
			z-index: 100;
			text-align: center;
			top: 0; left: 0;
		}
		#colourPickerTable td { width: 8px; height: 8px; }
		#colourPickerTable table { border-collapse: collapse; border: 0px; }
		#colourPicker select { font-size: 10px; color: #999; }
	</style>

	Then somewhere in your document put this:
	(only put this once, even if you have multiple colour pickers)

	<div id="colourPicker">
		<select onClick="nothing(event)" onChange="swapPalette(this.value)" name="palette">
			<option value="rgbscale">RGB</option>
			<option value="common">Common Colours</option>
			<option value="grayscale">Greys</option>
		</select> <input id="colourPickerDisplay" name="colourPickerDisplay" size="6" />
		<a href="#" onclick="return hidePalette()" id="colourPickerClose">[close]</a>
		<div id="colourPickerTable"></div>
	</div>

	Finally, put this for all colour pickers:
	<something onClick="showPalette(event)" >...</something>

	and if you want your picker to update, say, a form element:
	<something onClick="showPalette(event,'ID to update')">...</something>
	
*/

function initPage() {
	colours = getColours('common');
	buildColourMenu(20,colours.length, colours, 'colourPickerTable');

	// add the colour picker onClick routine to colour picking things:
	// commented out at the mo, I'm using onClick="showPalette" instead
	// addPicker(30,document);
}

// this adds the colour picker to anything with a class 'colourPicker':

function addPicker(depth,node){
	if(depth==0) return 0;
	if(typeof(node)=='object' && node.getAttribute('class').indexOf('colourPicker')){
		if(node.addEventListener){
			node.addEventListener("click",showPalette,false);
		}else if(node.attachEvent){
			node.attachEvent("onClick",showPalette);
		}
	}
	if(node && node.childNodes){
		for(var i=0;i<node.childNodes.length;i++){
			addPicker(depth-1,node.childNodes[i]);
		}
	}
	return 0;
}


// called when user chooses another palette from the drop-down:
function swapPalette(colours) {
	var root = document.getElementById('colourPickerTable');
	root.innerHTML = '';
	var colourlist = getColours(colours);
	buildColourMenu(20, colourlist.length, colourlist, 'colourPickerTable');
}
	
//Generate An Array of Hex colours based on the pallete
function getColours(pallete) {
	switch(pallete) {
		case 'grayscale' :
			var colours = generateGrayScale();
			break
		case 'common' :
			var colours = Array(
 				'#FFFFFF', '#EDEDED', '#E4E4E4', '#DADADA', '#D1D1D1',
				'#C7C7C7', '#BDBDBD', '#B3B3B3', '#A8A8A8', '#9E9E9E',
				'#FF0010', '#FFFE38', '#76FF36', '#00FFFF', '#002CFD',
				'#EF00FD', '#FB0034', '#00AE5F', '#00B8EF',
				'#00429A', '#F30094', '#939393', '#878787', '#7B7B7B',
				'#6E6E6E', '#626262', '#535353', '#444444', '#343434',
				'#202020', '#000000', '#FF9C86', '#FFB18D', '#FFC997',
				'#FFF7A4', '#D8E2A6', '#B5D8A6', '#91CFA6', '#78D3CD',
				'#08D6F7', '#63AFDA', '#709DCE', '#7D8CC2', '#9D90C2',
				'#F8A1C6', '#FE9EA5', '#FF715C', '#FF9363', '#FFB26A',
				'#FFF478', '#C3D680', '#96C981', '#55BF84', '#00C3BB',
				'#00C7F3', '#0097CE', '#0080BC', '#416AAD', '#7E6BAF',
				'#A66EAF', '#F475AF', '#FB7388', '#FB0034', '#FF6A35',
				'#FF9936', '#FFF125', '#ADCB52', '#62BC5B', '#00AE5F',
				'#00B2A6', '#00B8EF', '#0080C1', '#0063AB', '#00429A',
				'#593C99', '#923397', '#F30094', '#F90066', '#AD001F',
				'#B34A20', '#B76B21', '#C4A621', '#748F3B', '#408641',
				'#007E46', '#008076', '#0083AB', '#005A89', '#00437B',
				'#00256E', '#421E6C', '#68006B', '#A90068', '#AC0047',
				'#8A0000', '#8D3A00', '#905400', '#998402', '#58712A',
				'#2E6B31', '#006535', '#00665E', '#006988', '#00456D',
				'#003162', '#000258', '#2F0056', '#540054', '#870052',
				'#8A0035', '#D3B7A1', '#A88E80', '#816E64', '#625550',
				'#463D3B', '#D6A279', '#B8855E', '#9E6D49', '#875735',
				'#744524'
				);
				break
				
		case 'rgbscale' :
			var colours = generateRGBScale();
			break;
		default :
			//Nada
	}
	return colours;
}

//The Work horse that does all the bulding
function buildColourMenu(num_rows, total_cells, colours, rootID) {
	if(typeof colours != 'object'){ alert('Error: Colours Must Be An Array');}
	var root = document.getElementById(rootID);
	var table = document.createElement('table');
	root.appendChild(table);
	var tbody = document.createElement('tbody');
	var tr = document.createElement('tr');
	tbody.appendChild(tr);
	table.appendChild(tbody);
	var row = tr;
	for(var i = 0; i < total_cells; i++) {
		if( (i != 0) && ( i % num_rows ) == 0) {
			row = tbody.appendChild(document.createElement('tr'));
		} 
		td = document.createElement('td')
		td.id = colours[i];
		td.onclick = selectColour;
		td.onmouseover=showColour;
		td.style.backgroundColor = colours[i];
		row.appendChild(td);
	}
		
	tfoot = document.createElement('tfoot');
	return table;
}
	
function generateGrayScale() {
	var colours = Array();
	for(var i = 255; i>=0; --i) {
		hex = decToHex(i);
		rgb = '#' + hex + hex + hex;
		colours.push(rgb);
	}
	return colours;
}
function generateRGBScale() {
	var colours = Array();
	for(var y=0;y<30;y++){
		for(var x=0;x<20;x++){
			rgb='#'+decToHex(x*(255/19))+decToHex(y*(255/29))+decToHex((y%10)*(255/9));
			colours.push(rgb);
		}
	}
	return colours;
}
	
function showColour() {
	var colour = document.getElementById(this.id);
	var disp = document.getElementById('colourPickerDisplay');
	if(disp){
		disp.value=this.id; // colour.id;
	}
}
	 
//Utility Scrtip to Convert decimal to hex value	 
function decToHex(dec) {
  var hexStr = "0123456789ABCDEF";
  var low = dec % 16;
  var high = (dec - low)/16;
  hex = "" + hexStr.charAt(high) + hexStr.charAt(low);
  return hex;
}


function selectColour(e) {
	if(!e) var e=window.event;
	var swatch = document.getElementById(this.id);
	var palette=document.getElementById('colourPicker');

	if(!paletteCurElem){
		confirm("Nothing was selected to change the colour of!");
		e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
		return 0;
	}

	// change the colour:
	paletteCurElem.style.backgroundColor=swatch.id;

	if(paletteUpdateElem){
		paletteUpdateElem.value=swatch.id;
	}

	// tidy up:
	palette.style.display="none";
	paletteCurElem="";
	paletteUpdateElem="";
	// stop propagation:
	e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
}

function nothing(e){
	if(!e) var e=window.event;
	e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
}

// this will create and position the popup colour grid.
var paletteCurElem;
var paletteCurElemName="";
var paletteUpdateElem;
 
function showPalette(e,update) {
	var palette=document.getElementById('colourPicker');
	var elem=e.srcElement?e.srcElement:e.target;
	paletteCurElemName=elem.tagName;
	paletteCurElem=elem;
	if(update) paletteUpdateElem=document.getElementById(update);
	if(document.all){ // IE
		palette.style.top=e.clientY+"px";
		palette.style.left=e.clientX+"px";
	}else{
		palette.style.top=e.pageY+"px";
		palette.style.left=e.pageX+"px";
	}
	palette.style.display="block";
	e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
}

function hidePalette() {
	var palette=document.getElementById('colourPicker');
	palette.style.display="none";
	e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
	return false;
}