(function($){
    $.fn.extend({
        colorpicker: function(options) {
	    var tout;
            //Settings list and the default values
            var defaults = {
                label: '',
                size: 20,
                count: 6,
                hide: true
            };

            var options = $.extend(defaults, options);
            var obj;
            var colors = {};

            var wrap        = $('<div class="colorpicker-wrap"></div>');
            var label       = $('<div class="colorpicker-label"></div>');
            var trigger     = $('<div class="colorpicker-trigger"></div>');
            var picker      = $('<div style="width: '+(options.size+4)*options.count+'px" class="colorpicker-picker"></div>');
            var info        = $('<div class="colorpicker-picker-info"></div>');
            var clear       = $('<div style="clear:both;"></div>');

            return this.each(function() {
                obj = this;
                
                //build an array of colors
                $(obj).children('option').each(function(i, elm){
                    colors[i] = {};
                    colors[i].color = $(elm).val();
                    colors[i].value = $(elm).text();
                });
                create_wrap();
                if(options.label != '')
                    create_label();
                create_trigger();
                create_picker();
                wrap.append(label);
                wrap.append(trigger);
                wrap.append(picker);
                wrap.append(clear);
                $(obj).after(wrap);
                if(options.hide)
                    $(obj).css({
                        position: 'absolute',
                        left: -10000
                    });                
            });


            function create_wrap(){
                wrap.mouseleave(function() {
                    tout = setTimeout(function() {picker.fadeOut('slow')}, 500);
                });
		wrap.mouseenter(function() {
                    clearTimeout(tout);
                });
            }

            function create_label(){
                label.text(options.label);
                label.click(function(){
                    trigger.click()
                });
            }

            function create_trigger(){
                trigger.click(function() {
                    var offset = $(this).position();
                    var top = offset.top;
                    var left = offset.left + $(this).width() + 5;
                    $(picker).css({
                        'top': top,
                        'left': left
                    }).fadeIn('slow');
                });
            }

            function create_picker(){
                picker.append(info);
                for(var i in colors){
                    picker.append('<span class="colorpicker-picker-span '+(i == 0 ? ' active' : '')+'" title="'+colors[i].color+'" rel="'+colors[i].value+'" style="background-color: #'+(colors[i].color=='no' ? 'ffffff' : colors[i].color) +'; width: '+options.size+'px; height: '+options.size+'px;">'+(colors[i].color=='no' ? ' X' : '')+'</span>');
                }

                if (colors[0].color=='no') {
			trigger.css('background-color', '#ffffff').css('border', '1px dotted #cccccc');
	
		} else {trigger.css('background-color', '#'+colors[0].color);}
		
                info.text('#'+colors[0].color);
                picker.children(".colorpicker-picker-span").hover(function(){
                    info.text($(this).attr('rel'));
                }, function(){
                    info.text(picker.children('.colorpicker-picker-span.active').attr('rel'));
                });
                picker.children(".colorpicker-picker-span").click(function(){
                	
                    info.text($(this).attr('rel'));
                    $(obj).val($(this).attr('title'));
//alert($(this).attr('title'));
//$(obj).find('option[value='+$(this).attr('rel')+']').attr('selected', 'selected');
                    picker.children('.colorpicker-picker-span.active').removeClass('active');
                    $(this).addClass('active');
		    if($(this).attr('title')=='no') {
	                trigger.css('background-color', $(this).css('background-color')).css('border','1px dotted #cccccc');
                    } else {
			trigger.css('background-color', $(this).css('background-color')).css('border','1px solid Black');
		    }
		    calculate();
                });
                $(obj).after(picker);
            }
        }
    });
})(jQuery);