$.widget('ui.colorselect', {
	options: {
	},
	_create: function() {
		var widget = this;
		widget.select = widget.element;
		widget.element = $('<a href="#" role="button" aria-haspopup="true" class="ui-widget ui-state-default ui-corner-all"></a>')
			.css({
				'position': 'relative',
				'text-decoration': 'none',
				'display': 'block',
				'height': '2em'
			})
			.append($('<span class="ui-colorselect-selected">Color</span>')
				.css({
					'line-height': '1.4em',
					'padding': '0.3em 1em',
					'display': 'block'
				}))
			.append($('<span class="ui-icon ui-icon-triangle-1-s"></span>')
				.css({
					'display': 'inline-block',
					'margin': 'auto',
					'position': 'absolute',
					'right': '0px',
					'margin-top': '-8px',
					'top': '50%'
				}))
			.bind('mouseenter mouseleave', function() {$(this).toggleClass('ui-state-hover');})
			.click(function() {
				widget.element.blur();
				widget.toggleVisibility();
				return false;
			});
		widget.select.hide().after(widget.element);
		widget.list = $('<ul class="ui-widget ui-widget-content ui-corner-bottom" />').hide().css({
			'margin': '0px',
			'padding': '0px',
			'position': 'absolute',
			'list-style': 'none',
			'z-index': '6000',
			'width': '200px'
		});
		widget.select.find('option').each(function(key, element) {
			widget.list.append(
				$('<li />')
					.data('optionItem', $(element))
					.append(widget._getColorBox($(element).val()).css('margin-left', '4px'))
					.append($('<span></span>')
						.text($(element).text())
						.css({
							'display': 'inline-block'
						})
					)
					.bind('mouseenter', function() {
						$(this).toggleClass('ui-state-hover');
						$(this).css({
							'border-width': '',
							'border-color': '',
							'border-style': ''
						});
					}).bind('mouseleave', function() {
						$(this).toggleClass('ui-state-hover');
						$(this).css({
							'border-width': '1px',
							'border-color': 'transparent',
							'border-style': 'solid'
						})
					})
					.click(function() {
						widget.select.val($(this).data('optionItem').val());
						widget.select.change();
						widget.toggleVisibility();
					})
					.css({
						'line-height': '1.4em',
						'padding': '0.3em 1em',
						'border-width': '1px',
						'border-color': 'transparent',
						'border-style': 'solid'
					})
			);
		});
		widget.element.after(widget.list);
		console.log(widget.list.getHiddenDimensions());
		widget.element.width(widget.list.getHiddenDimensions().width);
		//widget.element.width(widget.list.outerWidth());


		widget.select.change(function() {
			widget.selectChanged();
		});
		widget.select.change();
		
		$(document).click(function () {
			if (widget.list.is(':visible')) {
				widget.toggleVisibility();
			}
		});
	},
	selectChanged: function() {
		var widget = this;
		var selectedOption = widget.select.find(':selected');
		widget.element.find('.ui-colorselect-selected').html('').append(widget._getColorBox(selectedOption.val())).append(selectedOption.text());
	},
	toggleVisibility: function() {
		var widget = this;
		widget.element.toggleClass('ui-state-active');
		widget.element.toggleClass('ui-corner-all');
		widget.element.toggleClass('ui-corner-top');
		if (widget.list.is(':visible')) {
			widget.list.hide();
		}
		else {
			widget.list.show();
			widget.list.css({
				'top': widget.element.offset().top + widget.element.outerHeight() -1,
				'left': widget.element.offset().left
			});
		}
	},
	_getColorBox: function(color) {
		return $('<span></span>')
			.css({
				'display': 'inline-block',
				'width': '40px',
				'height': '0.7em',
				'background-color': color,
				'border': '1px solid #000',
				'margin-right': '4px'
			})
	}
});

(function($) {
	$.fn.getHiddenDimensions = function(includeMargin) {
		var $item = this,
		props = {
			position: 'absolute',
			visibility: 'hidden',
			display: 'block'
		},
		dim = {
			width:0,
			height:0,
			innerWidth: 0,
			innerHeight: 0,
			outerWidth: 0,
			outerHeight: 0
		},
		$hiddenParents = $item.parents().andSelf().not(':visible'),
		includeMargin = (includeMargin == null)? false : includeMargin;

		var oldProps = [];
		$hiddenParents.each(function() {
			var old = {};

			for ( var name in props ) {
				old[ name ] = this.style[ name ];
				this.style[ name ] = props[ name ];
			}

			oldProps.push(old);
		});

		dim.width = $item.width();
		dim.outerWidth = $item.outerWidth(includeMargin);
		dim.innerWidth = $item.innerWidth();
		dim.height = $item.height();
		dim.innerHeight = $item.innerHeight();
		dim.outerHeight = $item.outerHeight(includeMargin);

		$hiddenParents.each(function(i) {
			var old = oldProps[i];
			for ( var name in props ) {
				this.style[ name ] = old[ name ];
			}
		});

		return dim;
	}
}(jQuery));