/**
 * Script: Moopick.js
 * 		A 216 pallet color picker
 *
 * License:
 * 		MIT-style license
 *
 * Copyright:
 * 		2009 - Zohar Arad - www.zohararad.com
 */

/**
 * Class: Moopick
 * 		A 216 pallet color picker
 *
 * Implements:
 * 		Mootools.Options, Mootools.Events
 *
 * Requires:
 * 		Mootools 1.2 Core with Class, Class.Extras, Events, Element, Element.Events, Element.Style, Element.Dimensions
 *
 * Options:
 * 		- palletParentElement (DOM Element) - The element which contains the color picker.
 * 			Defaults to document.body
 * 		- palletID (String) - A Unique ID for the picker's top-level HTML element
 * 			Defaults to 'pallet'
 * 		- styles (Object) - An object with user-defined styles applied to the color picker. Any styles added or modified here will be applied
 * 			to each color box inside the pallet.
 * 			- width (String) - The width of each color box inside the pallet in pixels.
 * 				Defaults to '8px'.
 * 			- height (String) - The height of each color box inside the pallet in pixels.
 * 				Defaults to 8px.
 * 			- border-color (String) - The border color (in Hex) applied to each color box inside the pallet
 * 				Defaults to '#ddd'.
 * 			- border-width (String) - The border-width of each color box inside the pallet in pixels.
 * 				Defaults to 1px
 * Example:
 * 		<code>
 * 		var pallet = new Moopick({
 * 			palletParentElement:$('mypallet')
 * 		});
 *
 * 		pallet.addEvents({
 * 			'onColorClick':function(color){console.log(color);},
 * 			'onColorHover':function(color){console.log(color);},
 * 		});
 * 		</code>
 */
var mooColorDropDown = new Class({
	Implements:[Options,Events],
	options:{
		button:null,
		palletID:'pallet',
		styles:{
			'width':'31px',
			'height':'16px',
			'border-color':'#ccc',
			'border-width':'2px'
		},
		colors: ['#fff','#f00','#0f0','#00f','#000']
	},
	initialize:function(options){
		this.setOptions(options);
		if(this.options.button){
			this.options.styles = this.getPalletStyles();
			this.currentColor = '';
			this.buildPallet();
			this.attachPalletEvents();
		}
	},
	show: function(){
		this.pallet.setStyle('display','block');
	},
	hide: function(){
		this.pallet.setStyle('display','none');
	},
	buildPaletContainer: function(){
		this.pallet = new Element('ul',{
			'class' : 'mooColorDropDown',
			'styles': {
				'width': (this.options.styles.width.toInt() + this.options.styles['border-width'].toInt()) * 1 + 'px',
				'height': (this.options.styles.height.toInt() + this.options.styles['border-width'].toInt()) * this.options.colors.length + 'px',
				'padding':'0',
				'margin':'0',
				'list-style':'none',
				'position':'absolute',
				'left':this.options.button.getPosition().x,
				'top':this.options.button.getPosition().y+this.options.button.getSize().y,
				'display':'none'
			},
			'events': {
				mouseleave: function(){
					this.hide();
				}.bind(this)
			}
		}).set('id',this.options.palletID).injectInside($(document.body));
	},
	buildPallet: function(){
		this.buildPaletContainer();

		var hex;
		for(var i=0;i<this.options.colors.length;i++){
			hex=this.options.colors[i];
			this.options.styles.background = hex;
			var li = new Element('li').setStyles(this.options.styles).set('html',hex).injectInside(this.pallet);
			li.addEvent('mouseenter',function(evt){
				evt.target.setStyle('border-color','#C6021F');
			});
			li.addEvent('mouseleave',function(evt){
				evt.target.setStyle('border-color','#CCC');
			});
		}
	},
	attachPalletEvents: function(){
		this.pallet.getElements('li').addEvents({
			'click':this.onColorClick.bindWithEvent(this),
			'mouseover':this.onColorHover.bindWithEvent(this)
		});
	},
	getPalletStyles: function(){
		var border = '-'+this.options.styles['border-width'] || '-1px';
		var boxStyles = {
			'display':'block',
			'float':'left',
			'overflow':'hidden',
			'text-indent':'-1000em',
			'padding':'0px',
			'margin':'0px '+border+' 0px 0px',
			'cursor':'pointer',
			'border-style':'solid'
		}
		return $merge(boxStyles,this.options.styles);
	},
	onColorClick:function(ev){
		ev.preventDefault();
		var t = $(ev.target);
		this.currentColor = t.get('text');
		this.fireEvent('onColorClick',[this.currentColor]);
	},
	onColorHover:function(ev){
		var t = $(ev.target);
		this.fireEvent('onColorHover',[t.get('text')]);
	}
});