jQuery.fn.colourPicker = function (conf) {
	// Config for plug
	var config = jQuery.extend({
		id:			'jquery-colour-picker',	// id of colour-picker container
		ico:		'ico.gif',				// SRC to colour-picker icon
		title:		'Pick a colour',		// Default dialogue title
		inputBG:	true,					// Whether to change the input's background to the selected colour's
		speed:		500,					// Speed of dialogue-animation
		isSupportRGBGUI : false,			// The flag about support choose RGB (CUSTOM)
											// The lineQuery, only used when isSupportRGBGUI == true
		parentLineQuery : '.color_status_settings_item',
		openTxt:	'Open colour picker'
	}, conf);

	// Inverts a hex-colour
	var hexInvert = function (hex) {
		var r = hex.substr(0, 2);
		var g = hex.substr(2, 2);
		var b = hex.substr(4, 2);

		return 0.212671 * r + 0.715160 * g + 0.072169 * b < 0.5 ? 'ffffff' : '000000'
	};
	
	// tdchien :: Custom function
	var componentToHex = function(c) {
	    var hex = c.toString(16);
	    return hex.length == 1 ? "0" + hex : hex;
	}
	// tdchien :: Custom function
	var rgbToHex = function (r, g, b) {
	    //return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
		return "#" +
		  ("0" + parseInt(r,10).toString(16)).slice(-2) +
		  ("0" + parseInt(g,10).toString(16)).slice(-2) +
		  ("0" + parseInt(b,10).toString(16)).slice(-2);
		
	}
	// tdchien :: Custom function
	var hexToRgb = function(hex) {
	    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	    return result ? {
	        r: parseInt(result[1], 16),
	        g: parseInt(result[2], 16),
	        b: parseInt(result[3], 16)
	    } : null;
	}

	// Add the colour-picker dialogue if not added
	var colourPicker = jQuery('#' + config.id);

	if (!colourPicker.length) {
		colourPicker = jQuery('<div id="' + config.id + '"></div>').appendTo(document.body).hide();

		// Remove the colour-picker if you click outside it (on body)
		jQuery(document.body).click(function(event) {
			if (!(jQuery(event.target).is('#' + config.id) || jQuery(event.target).parents('#' + config.id).length)) {
				colourPicker.hide(config.speed);
			}
		});
	}

	// For every select passed to the plug-in
	return this.each(function () {
		// Insert icon and input
		var select	= jQuery(this);
		
		// tdchien :: Special treating with isSupportRGBGUI = true
		//var icon	= jQuery('<a class="color_icon" href="#"><img src="' + config.ico + '" alt="' + config.openTxt + '" /></a>').insertAfter(select);
		//var input	= jQuery('<input class="color_input" type="text" name="' + select.attr('name') + '" value="' + select.val() + '" size="6" />').insertAfter(select);
		var rgbUIRed = null;
		var rgbUIGreen = null;
		var rgbUIBlue = null;
		
		// tdchien :: Special treating with isSupportRGBGUI = true
		var icon = null;
		var input = null;
		if (config.isSupportRGBGUI === true) {
			input	= jQuery('<input class="color_input" type="text" name="' + select.attr('name') + '" value="' + select.val() + '" size="6" readonly="true" />').insertAfter(select);
			icon = input;
		} else {
			icon	= jQuery('<a class="color_icon" href="#"><img src="' + config.ico + '" alt="' + config.openTxt + '" /></a>').insertAfter(select);
			input	= jQuery('<input class="color_input" type="text" name="' + select.attr('name') + '" value="' + select.val() + '" size="6" />').insertAfter(select);
		}
				
		var loc		= '';

		// Build a list of colours based on the colours in the select
		jQuery('option', select).each(function () {
			var option	= jQuery(this);
			var hex		= option.val();
			var title	= option.text();

			loc += '<li><a href="#" title="' 
					+ title 
					+ '" rel="' 
					+ hex 
					+ '" style="background: #' 
					+ hex 
					+ '; colour: ' 
					+ hexInvert(hex) 
					+ ';">' 
					+ title 
					+ '</a></li>';
		});

		// Remove select
		select.remove();

		// If user wants to, change the input's BG to reflect the newly selected colour
		if (config.inputBG) {
			input.change(function () {
				// tdchien : Custom for RGB
				//input.css({background: '#' + input.val(), color: '#' + hexInvert(input.val())});
				if (config.isSupportRGBGUI) {
					var hexVal = '#' + input.val();					
					input.css({background: hexVal, color: hexVal });					
					input.attr('readonly', true);
					
					// Put value into R, G, B GUI
					// '.color_status_settings_item'
					var objThisLine = input.closest(config.parentLineQuery);
					
					var rgbVal = hexToRgb(hexVal);					
					objThisLine.find('.select_red').val(rgbVal.r);
					objThisLine.find('.select_green').val(rgbVal.g);
					objThisLine.find('.select_blue').val(rgbVal.b);
					
				} else {
					input.css({background: '#' + input.val(), color: '#' + hexInvert(input.val())});
				}
			});

			input.change();
		}
		
		// tdchien :: Add RGB GUI (Custom)
		if (config.isSupportRGBGUI) {			
			rgbUIRed = jQuery('<select class="rgb_select_item" />');
			rgbUIGreen = jQuery('<select class="rgb_select_item" />');
			rgbUIBlue = jQuery('<select class="rgb_select_item" />');
			
			rgbUIRed.insertBefore(input);
			rgbUIGreen.insertBefore(input);
			rgbUIBlue.insertBefore(input);
			
			var builderRGB = [];
			for (var k = 0; k <= 255; k++) {
				var line = '<option value=#value#>#value#</option>';
				line = line.replace(/#value#/g, k);
				builderRGB.push(line);
			}
			var strBuilderRGB = builderRGB.join('');
			
			rgbUIRed.html(strBuilderRGB).addClass('select_red');
			rgbUIGreen.html(strBuilderRGB).addClass('select_green');
			rgbUIBlue.html(strBuilderRGB).addClass('select_blue');
			
			// Add to parentLineQuery into rgbUIRed/rgbUIGreen/rgbUIBlue
			rgbUIRed.attr('parent_line_query', config.parentLineQuery);
			rgbUIGreen.attr('parent_line_query', config.parentLineQuery);
			rgbUIBlue.attr('parent_line_query', config.parentLineQuery);
									
			// Bind event for RGB
			var changeColorRGB = function(objThis) {
				// '.color_status_settings_item'
				var pLineQuery = $(objThis).attr('parent_line_query');
				var objThisLine = $(objThis).closest(pLineQuery);
				var r = objThisLine.find('.select_red').val();
				var g = objThisLine.find('.select_green').val();
				var b = objThisLine.find('.select_blue').val();
				var hex = rgbToHex(r, g, b);
				
				objThisLine.find('.color_input')
					.val(hex.replace('#', ''))
					.css('background', hex)
					.css('color', hex);

			}
			rgbUIRed.change(function() {
				changeColorRGB(this);
			});
			rgbUIGreen.change(function() {
				changeColorRGB(this);
			});

			rgbUIBlue.change(function() {
				changeColorRGB(this);
			});
		}

		// When you click the icon
		icon.click(function () {
			// Show the colour-picker next to the icon and fill it with the colours in the select that used to be there
			var iconPos	= icon.offset();
			var heading	= config.title ? '<h2>' + config.title + '</h2>' : '';

			colourPicker.html(heading + '<ul>' + loc + '</ul>').css({
				position: 'absolute', 
				left: iconPos.left + 'px', 
				top: iconPos.top + 'px'
			}).show(config.speed);

			// When you click a colour in the colour-picker
			jQuery('a', colourPicker).click(function () {
				// The hex is stored in the link's rel-attribute
				var hex = jQuery(this).attr('rel');

				input.val(hex);

				// If user wants to, change the input's BG to reflect the newly selected colour
				if (config.inputBG) {
					// Apply RGB feature
					//input.css({background: '#' + hex, color: '#' + hexInvert(hex)});
					if (config.isSupportRGBGUI) {
						input.css({background: '#' + hex, color: '#' + hex});
					} else {
						input.css({background: '#' + hex, color: '#' + hexInvert(hex)});
					}
				}

				// Trigger change-event on input
				input.change();

				// Hide the colour-picker and return false
				colourPicker.hide(config.speed);

				return false;
			});

			return false;
		});
	});
};