/*
Author: David Boyer (a.k.a. CrazyDave)
Website: http://mootools.yougeezer.co.uk/color/color.html
Version: 1.00 [2007-03-15]
*/
var Picker = new Class({
	getOptions: function() {
		return {
			img: 'color.png',
			onComplete: function(el, col) {
				// el = elment that fired the color picker
				// col = color, hex
			}
		};
	},

	initialize: function(elements, options) {
		this.setOptions(this.getOptions(), options);
		this.elements = $$(elements);
		this.bound = {};
		this.bound.appear = this.appear.bind(this);
		this.bound.disappear = this.disappear.bind(this);
		this.bound.sv = this.satLig.bind(this);
		this.bound.hue = this.hueFun.bind(this);
		this.bound.dragSvStop = this.dragSvStop.bind(this);
		this.bound.dragHStop = this.dragHStop.bind(this);
		this.bound.cancel = this.disappear.bind(this);
		this.elements.addEvent('click', this.bound.appear);
		this.container = new Element('div').setStyles({
			position: 'absolute', visibility: 'hidden', height: 140, width: 135,
			background: 'black',zIndex:9000
		}).injectInside(document.body).addEvent('click', function(e) {
			e = new Event(e);
			e.stop();
		});
		this.colorBox = new Element('div').setStyles({
			position: 'absolute', top: 10, left: 10, width: 15, height: 15, overflow: 'hidden'
		}).injectInside(this.container);
		this.colorValue = new Element('div').setStyles({
			position: 'absolute', top: 10, left: 30, height: 15, color: 'white', overflow: 'hidden'
		}).injectInside(this.container);
		this.sv = new Element('div').setStyles({
			position: 'absolute', top: 30, left: 10, width: 100, height: 100,
			background: ['url(',this.options.img,')'].join('')
		}).injectInside(this.container).addEvent('mousedown', this.bound.sv);
		if (window.ie6) {
			this.sv.setStyle('filter', ["progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",this.options.img,"', sizingMethod='scale')"].join(''));
		}
		this.hue = new Element('div').setStyles({
			position: 'absolute', top: 30, left: 115, width: 10, height: 100, overflow: 'hidden'
		}).injectInside(this.container).addEvent('mousedown', this.bound.hue);
		this.cancel = new Element('div').setStyles({
			position: 'absolute', top: 10, right: 10, width: 10, height: 15,
			color: 'white', overflow: 'hidden'
		}).appendText('X').injectInside(this.container).addEvent('click', this.bound.cancel);
		this.marker = new Element('div').setStyles({
			position: 'absolute', top: 0, left: 98, width:1, height:1,
			border: '1px outset white', background: 'white', overflow: 'hidden'
		}).injectInside(this.sv);
		this.line = new Element('div').setStyles({
			position: 'absolute', top: 0, left: -2, width: 14, height: 1,
			background: 'white',
			overflow: 'hidden'
		}).injectInside(this.hue);
		for (var h = 0; h <= 99; h++) {
			new Element('div').setStyles({
				background: $HSB(h*3.6, 100, 100).rgbToHex(),
				height: 1,
				overflow: 'hidden'
			}).injectInside(this.hue);
		}
		this.color = $HSB(0, 100, 100);
		this.colorValue.setHTML(this.color.rgbToHex());
		this.sv.setStyle('background-color', this.colorValue.innerHTML);
		this.colorBox.setStyle('background-color', this.colorValue.innerHTML);
		this.body = $(document.body);
	},
	
	appear: function(e) {
		e = new Event(e);
		e.stop();
		e.target = $(e.target);
		window.addEvent('click', this.bound.disappear);
		var pos = e.target.getCoordinates();
		this.container.setStyles({
			top: pos.top,
			left: pos.left,
			visibility: 'visible'
		});
		this.hue.pos = this.hue.getCoordinates();
		this.sv.pos = this.sv.getCoordinates();
		this.bound.setColor = this.setColor.bind(this, e.target);
		this.colorBox.addEvent('click', this.bound.setColor);
		this.colorValue.addEvent('click', this.bound.setColor);
	},
	
	setColor: function(el) {
		this.fireEvent('onComplete', [el, this.color.rgbToHex()]);
		this.disappear();
	},
	
	disappear: function(e) {
		this.colorBox.removeEvent('click', this.bound.setColor);
		this.colorValue.removeEvent('click', this.bound.setColor);
		window.removeEvent('click', this.bound.disappear);
		this.container.setStyles({
			top:0, left:0, visibility: 'hidden'
		});
	},
	
	dragSvStop: function(e) {
		this.sv.removeEvent('mousemove', this.bound.sv);
		this.body.removeEvent('mouseup', this.bound.dragSvStop);
	},

	dragHStop: function(e) {
		this.hue.removeEvent('mousemove', this.bound.hue);
		this.body.removeEvent('mouseup', this.bound.dragHStop);
	},
	
	satLig: function(e) {
		e = new Event(e);
		if (e.type == 'mousedown') {
			e.stop();
			this.sv.addEvent('mousemove', this.bound.sv);
			this.body.addEvent('mouseup', this.bound.dragSvStop);
		}
		if (e.page.y < this.sv.pos.top) s = 0;
		else if (e.page.y > this.sv.pos.bottom) s = 100;
		else s = e.page.x-this.sv.pos.left;
		if (e.page.x < this.sv.pos.left) b = 0;
		else if (e.page.x > this.sv.pos.right) b = 100;
		else b = 100+this.sv.pos.top-e.page.y;
		this.marker.setStyles({
			top: 100-b-1, left: s-1
		});
		this.color = this.color.setSaturation(s);
		this.color = this.color.setBrightness(b);
		this.colorValue.setHTML(this.color.rgbToHex());
		this.colorBox.setStyle('background-color', this.colorValue.innerHTML);
	},
	
	hueFun: function(e) {
		e = new Event(e);
		if (e.type == 'mousedown') {
			e.stop();
			this.hue.addEvent('mousemove', this.bound.hue);
			this.body.addEvent('mouseup', this.bound.dragHStop);
		}
		if (e.page.y < this.hue.pos.top || e.page.y > this.hue.pos.bottom) return;
		this.line.setStyle('top', e.page.y-this.hue.pos.top);
		var theHue = 3.6*(e.page.y-this.hue.pos.top);
		this.color = this.color.setHue(theHue);
		this.sv.setStyle('background-color', $HSB(theHue, 100, 100).rgbToHex());
		this.colorValue.setHTML(this.color.rgbToHex());
		this.colorBox.setStyle('background-color', this.colorValue.innerHTML);
	},
	remove: function(){
		this.container.remove();
		this.elements.removeEvents('click');
	}
		
});
Picker.implement(new Events);
Picker.implement(new Options);