$.fn.soColorPicker = function(opts) {
	// default var
	var defaults = {
		contenair: '#myColor'
	}
	
	// extends for personnal setting
	var opts = $.extend(defaults, opts);
	
	// generated div contains the colors list
	divColor = '<div class="coloContenaire" style="display: none;">';
	
		divColor += '<div class="coloBox" style="background-color:#cc3333;" rel="#cc3333"></div>';
		divColor += '<div class="coloBox" style="background-color:#dd4477;" rel="#dd4477"></div>';
		divColor += '<div class="coloBox" style="background-color:#994499;" rel="#994499"></div>';
		divColor += '<div class="coloBox" style="background-color:#6633cc;" rel="#6633cc"></div>';
		divColor += '<div class="coloBox" style="background-color:#3366cc;" rel="#3366cc"></div>';
		divColor += '<div class="coloBox" style="background-color:#22aa99;" rel="#3366cc"></div>';
		divColor += '<div class="coloBox" style="background-color:#66aa00;" rel="#66aa00"></div>';
		divColor += '<div class="coloBox" style="background-color:#a87070;" rel="#a87070"></div>';
		divColor += '<div class="coloBox" style="background-color:#8c6d8c;" rel="#8c6d8c"></div>';
		divColor += '<div class="coloBox" style="background-color:#627487;" rel="#627487"></div>';
		divColor += '<div class="coloBox" style="background-color:#7083a8;" rel="#7083a8"></div>';
		divColor += '<div class="coloBox" style="background-color:#5c8d87;" rel="#5c8d87"></div>';
		divColor += '<div class="coloBox" style="background-color:#898951;" rel="#898951"></div>';
		divColor += '<div class="coloBox" style="background-color:#b08b59;" rel="#b08b59"></div>';
		divColor += '<div class="coloBox" style="background-color:#ff00f0;" rel="#ff00f0"></div>';
		divColor += '<div class="coloBox" style="background-color:#0006ff;" rel="#0006ff"></div>';
		divColor += '<div class="coloBox" style="background-color:#00ffcc;" rel="#00ffcc"></div>';
		divColor += '<div class="coloBox" style="background-color:#00ff06;" rel="#00ff06"></div>';
		divColor += '<div class="coloBox" style="background-color:#f0ff00;" rel="#f0ff00"></div>';
		divColor += '<div class="coloBox" style="background-color:#ffba00;" rel="#ffba00"></div>';
		divColor += '<div class="coloBox" style="background-color:#ff0000;" rel="#ff0000"></div>';
	
	divColor += '</div>';
	
	// take the object
	var $this = $(this);
	thisHtml = $this.html();
		
	// insertion on code
	thisHtml += divColor;
	
	$this.html(thisHtml);

	
	$this.click(function() {
		couleurIni = $this.css('background-color');
		
		$contenaire = $this.children('.coloContenaire:first');
		$contenaire.show();
		
		$contenaire.children('.coloBox').click(function() {
			colorNew = $(this).css('background-color');
			
			$this.css('background-color', colorNew);
			$contenaire = $this.children('.coloContenaire:first')
			$contenaire.hide(1);
		});
		
	});
};