/**
**	Primitive color picker, designed to be used with a jQuery selector.
**/

jQuery.fn.addColorPicker = function( props ) {
	if( ! props ) { props = []; }
	props = jQuery.extend({
		clickCallback: function(ignoredColor) {},
		iterationCallback: null,
		showTitle: true,
		transparentString: '-',
		titles: [],
		colors: []
		}, props);
	var count = props.colors.length;
	for( var i = 0; i < count; ++i ) {
		var color = props.colors[i];
		if( ! color ) color='transparent';
		var framePanel = getFramePanel() // TODO was jQuery('<div/>')
			.addClass('framePanel');
		var colorPane = getColorPane(color, props.titles[i]) // TODO was jQuery('<div/>')
			.addClass('colorPane')
			.css( 'background-color',color); // jq bug: chaining here fails if color is null b/c .css() returns (new String('transparent'))!
		colorPane.attr('name', color);
		if( props.showTitle ) {
			framePanel.html( ('transparent' == color) ? props.transparentString : props.titles[i] );
		}
		
		if( props.clickCallback ) {
			framePanel.click( function() { props.clickCallback(jQuery(this).children().attr('name')); });
		}
		framePanel.append(colorPane);
		this.append(framePanel);
		if( props.iterationCallback ) props.iterationCallback( this, framePanel, color, i );
	}
	return this;
};

/**




 */
function getColorPane(color, title) {
	return jQuery('<div/>');
}

function getFramePanel() {
	return jQuery('<div/>');
}