/*
 * INFORMATION
 * ---------------------------
 * Owner:     jquery.webspirited.com
 * Developer: Matthew Hailwood
 * ---------------------------
 *
 * CHANGELOG:
 * ---------------------------
 * 1.1
 * Fixed bug 01
 * Fixed bug 02
 *
 * ---------------------------
 * Bug Fix Credits:
 * --
 * * Number: 01
 * * Bug:  Initial color should be option "selected" from select
 * * Name: Nico <unknown>
 * --
 * * Number: 02
 * * Bug: Selects Change event should be called on color pick
 * * Name: Bob Farrell <unknown>
 */
(function($) {
    $.fn.extend({
        colorpicker: function(options) {

            //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().substring(1);
                    colors[i].value = $(elm).text();
                    colors[i].myclass = $(elm).attr('class');
                });
                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() {
                //    picker.fadeOut('slow');
                //});
                //wrap.mouseenter(function() {
                //    picker.fadeIn('slow');
                //});
            }

            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 ' + (colors[i].color == $(obj).children(":selected").text() ? ' active' : '') + '" rel="' + colors[i].value + '" alt="' + colors[i].myclass + '" style="background-color: #' + colors[i].color + '; width: ' + options.size + 'px; height: ' + options.size + 'px;"></span>');
                }
                trigger.css('background-color', '#'+$(obj).children(":selected").val().substring(1));
                trigger.text($(obj).children(":selected").text());
                info.text(''+$(obj).children(":selected").text());
                picker.children(".colorpicker-picker-span").hover(function() {
                    if (typeof  $(this).attr('rel') != 'undefined' ) info.text('' + $(this).attr('rel'));
                }, function() {
                    if (typeof  picker.children('.colorpicker-picker-span.active').attr('rel') != 'undefined' ) info.text('' + picker.children('.colorpicker-picker-span.active').attr('rel'));
                });
                picker.delegate(".colorpicker-picker-span", "click", function() {
                    	info.text('' + $(this).attr('rel'));
	                    $(obj).val($(this).attr('rel'));
	                    $(obj).change();
	                    picker.children('.colorpicker-picker-span.active').removeClass('active');
	                    $(this).addClass('active');
	                    trigger.css('background-color', $(this).css('background-color'));
			                trigger.text($(this).attr('rel'));
			                trigger[0].className = trigger[0].className.replace(/\bral.*?\b/g, '');
			                trigger.addClass($(this).attr('alt'));
			                var rgbString = $(this).css('background-color');
			                if ($(this).css('background-color').substring(0,3) == 'rgb') {
				                var parts = rgbString
				                	.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
				                ;
				                delete (parts[0]);
				                for (var i = 1; i <= 3; ++i) {
				                	parts[i] = parseInt(parts[i]).toString(16);
				                	if (parts[i].length == 1) parts[i] = '0' + parts[i];
				                }
				                var hexString = parts.join('');
				              } else {
				                var hexString = $(this).css('background-color').substring(1);
				              }
										  var image = "/grafkist"+$("#type option:selected").val()+"_"+hexString+".png";
										  picker.fadeOut('slow');
										  //$('#patient').show();
										  //$('#example').attr("src", image);
										  //$('#patient').fadeOut(2500);
										  showCabin();
                });
                $(obj).after(picker);
            }
        }
    });
})(jQuery);