Liferay.ColorPicker = new Class({

	/**
	 * OPTIONS
	 *
	 * Required
	 * item {string|object}: A jQuery selector or DOM element that specifies which field to insert the selected value into.
	 *
	 * Optional
	 * context {object}: A DOM element which specifies the context in which to search for the item.
	 * hasImage {boolean}: Whether an image is provided in the DOM or options object (via the item option).
	 *
	 * Callbacks
	 * onChange {function}: Called whenever the color changes.
	 * onClose {function}: Called when the color picker is closed.
	 */

	initialize: function(options) {
		var instance = this;

		instance._onClose = options.onClose;
		instance._onChange = options.onChange;
		instance._context = options.context || document.body;
		instance._hasImage =  options.hasImage || false;
		instance._item = jQuery(options.item || '.use-colorpicker', instance._context);

		instance._currentColor = {r:255, g:255, b:255};

		instance._insertImages();

		instance._buildHTML();
	},

	_buildHTML: function() {
		var instance = this;

		var baseDiv = jQuery('<div class="lfr-colorpicker" />');
		var closeButton = jQuery('<div class="ui-colorpicker-close" />');

		baseDiv.append(closeButton);

		baseDiv.appendTo('body');

		closeButton.click(
			function(event) {
				instance._toggle(event, this);
			}
		);

		var onChange = function(event, ui) {
			instance._currentInput.val('#' + ui.hex);
			instance._currentColor = ui.rgb;

			if (instance._onChange) {
				instance._onChange(ui.rgb);
			}
		};

		baseDiv.colorpicker(
			{
				change: onChange,
				picking: onChange,
				pick: onChange
			}
		);

		baseDiv.hide();

		baseDiv.css(
			{
				position: 'absolute',
				zIndex: Liferay.zIndex.ALERT + 1
			}
		);

		instance._baseDiv = baseDiv;
	},

	_insertImages: function() {
		var instance = this;

		var context = instance._context;

		var items = instance._item;

		var colorPickerImgHTML = '<img alt="' + Liferay.Language.get('color-picker') + '" class="lfr-colorpicker-img" src="' + themeDisplay.getPathThemeImages() + '/color_picker/color_picker.png" title="' + Liferay.Language.get('color-picker') + '" />';

		if (items.length == 1) {
			var colorPickerImg;

			if (instance._hasImage) {
				colorPickerImg = items;
			}
			else {
				colorPickerImg = jQuery(colorPickerImgHTML);

				items.after(colorPickerImg);
			}

			colorPickerImg.click(
				function(event) {
					instance._toggle(event, this);
				}
			);
		}
		else {
			items.each(
				function() {
					var item = jQuery(this);
					var colorPickerImg;

					if (!instance._hasImage) {
						colorPickerImg = jQuery(colorPickerImgHTML);
					}
					else {
						colorPickerImg = item;
					}

					colorPickerImg.click(
						function(event) {
							instance._toggle(event, this);
						}
					);

					item.after(colorPickerImg);
				}
			);
		}
	},

	_toggle: function(event, obj) {
		var instance = this;

		var item = jQuery(obj);

		var dimensions = item.offset();

		instance._currentInput = item.prev();

		var baseDiv = instance._baseDiv;

		if (baseDiv.is(':visible')) {
			baseDiv.hide();

			if (instance._item.is('input')) {
				instance._item.trigger('blur');
			}

			if (instance._onClose) {
				instance._onClose();
			}
		}
		else {
			baseDiv.show();

			if (instance._item.is('input')) {
				instance._item.trigger('focus');
			}

			baseDiv.css(
				{
					top: dimensions.top + 'px',
					left: dimensions.left + 25 + 'px'
				}
			);
		}
	}
});