Paul Pritchard avatar Paul Pritchard committed ec23930

Add left sidebar navigation to examples;
update examples for jquery 1.9.1 and jquery ui 1.10.0;
add colorpicker.js to distribution;
fix some problems with examples when viewing with local file system

Comments (0)

Files changed (88)

examples/area.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/axisLabelTests.php

 <?php 
-    $title = "Line Charts and Options";
+    $title = "Axis Labels";
     // $plotTargets = array (array('id'=>'chart1', 'width'=>600, 'height'=>400));
 ?>
 <?php include "opener.php"; ?>
 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/axisLabelsRotatedText.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/axisScalingForceTickAt.php

 
 <!-- Additional plugins go here -->
 
-
-  <script class="include" type="text/javascript" src="../src/jquery.jqplot.js"></script>
   <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
   <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
   <script class="include" type="text/javascript" src="../src/plugins/jqplot.canvasOverlay.js"></script>
 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/bandedLine.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/bar-charts.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/barLineAnimated.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/barTest.php

 
 <!-- Additional plugins go here -->
 
-  <script class="include" type="text/javascript" src="../src/jquery.jqplot.js"></script>
   <script class="include" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
   <script class="include" type="text/javascript" src="../src/plugins/jqplot.pieRenderer.js"></script>
   <script class="include" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/bezierCurve.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/blockPlot.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/bodyOpener.php

    
 </head>
 <body>
-    <?php include "topbanner.html"; ?>
+<?php include "topbanner.html"; ?>
 
-    <div class="example-content">
+    <div class="colmask leftmenu">
+      <div class="colleft">
+        <div class="col1" id="example-content">
 
-    <?php include "nav.php"; ?>
+<?php
+    if (isset($plotTargets) and is_array($plotTargets)) {
+        foreach ($plotTargets as $pt) {
 
-    <?php
-        if (isset($plotTargets) and is_array($plotTargets)) {
-            foreach ($plotTargets as $pt) {
+            if (is_array($pt)) {
+                $str = '<div class="example-plot" id="'.$pt['id'].'"';
+                $width = (array_key_exists('width', $pt)) ? $pt['width'] : false;
+                $height = (array_key_exists('height', $pt)) ? $pt['height'] : false;
+                if ( $width or $height) {
+                    $str .=' style="';
+                    if ($width) {
+                        $str .='width: '.$width.'px;';
+                    }
+                    if ($height) {
+                        $str .=' height: '.$height.'px;';
+                    }
+                    $str .='"';
+                }
+                $str .='></div>';
+                print "$str\n";
+            }
 
-                if (is_array($pt)) {
-                    $str = '<div class="example-plot" id="'.$pt['id'].'"';
-                    $width = (array_key_exists('width', $pt)) ? $pt['width'] : false;
-                    $height = (array_key_exists('height', $pt)) ? $pt['height'] : false;
-                    if ( $width or $height) {
-                        $str .=' style="';
-                        if ($width) {
-                            $str .='width: '.$width.'px;';
-                        }
-                        if ($height) {
-                            $str .=' height: '.$height.'px;';
-                        }
-                        $str .='"';
-                    }
-                    $str .='></div>';
-                    print "$str\n";
-                }
-
-                else {
-                    print '<div class="example-plot" id="'.$pt.'"'.'></div>';
-                }
-            } 
-        }
-    ?>
+            else {
+                print '<div class="example-plot" id="'.$pt.'"'.'></div>';
+            }
+        } 
+    }
+?>

examples/bubble-plots.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/bubbleChart.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/candlestick-charts.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/candlestick.php

 <?php 
-    $title = "Candlestick and Open Hi Low Close charts";
-    // $plotTargets = array('chart1', 'chart2', 'chart3');
+    $title = "Candlestick and Open Hi Low Close Charts";
 ?>
 <?php include "opener.php"; ?>
 
 <script class="code" type="text/javascript">$(document).ready(function(){  
     $.jqplot.config.enablePlugins = true;     
     plot1 = $.jqplot('chart1',[ohlc],{
-      title: 'Chart',
+      title: 'Candlestick Charts',
       axesDefaults:{},
       axes: {
           xaxis: {
 
 <script class="code" type="text/javascript">$(document).ready(function(){  
     plot2b = $.jqplot('chart2b',[ohlc_b],{
-      title: 'Chart',
       axesDefaults:{},
       axes: {
           xaxis: {
 
 <script class="code" type="text/javascript">$(document).ready(function(){ 
     plot3 = $.jqplot('chart3',[hlc],{
-      title: 'Chart',
       axesDefaults:{},
       axes: {
           xaxis: {
 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/canvas-overlay.php

 
 <!-- End additional plugins -->
 
-<?php include "closer.html"; ?>
+<?php include "closer.php"; ?>

examples/closer.html

-
-	</div>	
-	<script type="text/javascript" src="example.js"></script>
+        </div>
+    </div>
+    <script type="text/javascript" src="example.js"></script>
 
 </body>
 

examples/closer.php

+        </div>
+<?php include "nav.php"; ?>
+      </div>
+    </div>
+    <script type="text/javascript" src="example.js"></script>
+
+</body>
+
+
+</html>

examples/colorpicker/i18n/jquery.ui.colorpicker-en.js

+jQuery(function($) {
+	$.colorpicker.regional['en'] = {
+		ok:				'OK',
+		cancel:			'Cancel',
+		none:			'None',
+		button:			'Color',
+		title:			'Pick a color',
+		transparent:	'Transparent',
+		hsvH:			'H',
+		hsvS:			'S',
+		hsvV:			'V',
+		rgbR:			'R',
+		rgbG:			'G',
+		rgbB:			'B',
+		labL:			'L',
+		labA:			'a',
+		labB:			'b',
+		hslH:			'H',
+		hslS:			'S',
+		hslL:			'L',
+		cmykC:			'C',
+		cmykM:			'M',
+		cmykY:			'Y',
+		cmykK:			'K',
+		alphaA:			'A'
+	};
+});

examples/colorpicker/i18n/jquery.ui.colorpicker-fr.js

+jQuery(function($) {
+	$.colorpicker.regional['fr'] = {
+		ok:				'OK',
+		cancel:			'Annuler',
+		none:			'Aucune couleur',
+		button:			'Couleur',
+		title:			'Choisir une couleur',
+		transparent:	'Transparent',
+		hsvH:			'T',
+		hsvS:			'S',
+		hsvV:			'V',
+		rgbR:			'R',
+		rgbG:			'V',
+		rgbB:			'B',
+		labL:			'L',
+		labA:			'a',
+		labB:			'b',
+		hslH:			'T',
+		hslS:			'S',
+		hslL:			'L',
+		cmykC:			'C',
+		cmykM:			'M',
+		cmykY:			'J',
+		cmykK:			'N',
+		alphaA:			'A'
+	};
+});

examples/colorpicker/i18n/jquery.ui.colorpicker-nl.js

+jQuery(function($) {
+	$.colorpicker.regional['nl'] = {
+		ok:				'OK',
+		cancel:			'Annuleren',
+		none:			'Geen',
+		button:			'Kleur',
+		title:			'Kies een kleur',
+		transparent:	'Transparant',
+		hsvH:			'H',
+		hsvS:			'S',
+		hsvV:			'V',
+		rgbR:			'R',
+		rgbG:			'G',
+		rgbB:			'B',
+		labL:			'L',
+		labA:			'a',
+		labB:			'b',
+		hslH:			'H',
+		hslS:			'S',
+		hslL:			'L',
+		cmykC:			'C',
+		cmykM:			'M',
+		cmykY:			'Y',
+		cmykK:			'K',
+		alphaA:			'A'
+	};
+});
Add a comment to this file

examples/colorpicker/images/bar-alpha.png

Added
New image
Add a comment to this file

examples/colorpicker/images/bar-opacity.png

Added
New image
Add a comment to this file

examples/colorpicker/images/bar-pointer.png

Added
New image
Add a comment to this file

examples/colorpicker/images/bar.png

Added
New image
Add a comment to this file

examples/colorpicker/images/map-opacity.png

Added
New image
Add a comment to this file

examples/colorpicker/images/map-pointer.png

Added
New image
Add a comment to this file

examples/colorpicker/images/map.png

Added
New image
Add a comment to this file

examples/colorpicker/images/preview-opacity.png

Added
New image
Add a comment to this file

examples/colorpicker/images/ui-colorpicker.png

Added
New image

examples/colorpicker/index.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+    <head>
+        <title>jQuery Colorpicker</title>
+		<!-- jQuery/jQueryUI (hosted) -->
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
+		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
+		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
+        <style>
+			body {
+				font-family:	'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
+				font-size:		62.5%;
+			}
+        </style>
+		<script src="jquery.colorpicker.js"></script>
+		<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
+		<script src="i18n/jquery.ui.colorpicker-nl.js"></script>
+
+		<script>
+			$(function() {
+				$('#tabs').tabs();
+			});
+		</script>
+    </head>
+    <body>
+		<h1>jQuery ColorPicker</h1>
+
+		<div id="tabs">
+			<ul>
+			  <li><a href="#tab-input">Basic &lt;input&gt;</a></li>
+			  <li><a href="#tab-element">Basic element</a></li>
+			  <li><a href="#tab-full">All features</a></li>
+			  <li><a href="#tab-i18n">Localization</a></li>
+			  <li><a href="#tab-websafe">Websafe colors</a></li>
+			  <li><a href="#tab-alt">Alternative display field</a></li>
+			  <li><a href="#tab-events">Events</a></li>
+			  <li><a href="#tab-input-format">Input formatting</a></li>
+			  <li><a href="#tab-format">Output formatting</a></li>
+			  <li><a href="#tab-format-list">Output format list</a></li>
+			  <li><a href="#tab-dialog">In a dialog</a></li>
+			  <li><a href="#tab-modal">Modal</a></li>
+			  <li><a href="#tab-no-inline">Any element to popup</a></li>
+			</ul>
+
+			<div id="tab-input">
+				<h2>Basic &lt;input&gt; example, without any options</h2>
+				<input type="text" class="cp-basic" value="fe9810"/>
+			</div>
+
+			<div id="tab-element">
+				<h2>Basic element (&lt;span&gt;> example, without any options</h2>
+				<span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>
+			</div>
+
+			<div id="tab-full">
+				<h2>Fully-featured example</h2>
+				<input type="text" class="cp-full" value="186aa7"/>
+			</div>
+
+			<div id="tab-i18n">
+				<h2>Localized to Dutch (nl)</h2>
+				<input type="text" class="cp-i18n" value="ccea73"/>
+			</div>
+
+			<div id="tab-websafe">
+				<h2>Limit to websafe colors</h2>
+				<input type="text" class="cp-websafe" value="0fa7c2"/>
+			</div>
+
+			<div id="tab-alt">
+				<h2>Alternative field class</h2>
+				<input type="text" class="cp-alt" value="b762ae"/>
+				<span class="cp-alt-target" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
+					<div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Background-color on outside, text color here</div>
+				</span>
+			</div>
+
+			<div id="tab-events">
+				<h2>Events</h2>
+				<input type="text" class="cp-events" value="92b64a"/>
+				<div class="cp-events-log" style="vertical-align: top; display: inline-block; border: thin solid black; height: 10em; overflow-y: scroll; width: 50em;"></div>
+			</div>
+
+			<div id="tab-format">
+				<h2>Output formatting HSLA</h2>
+				<input type="text" class="cp-format" value="918237"/>
+				<span class="cp-format-output"></span>
+			</div>
+
+			<div id="tab-format-list">
+				<h2>Output format list</h2>
+				You can specify a list of output formats, the first perfect match for the color is output.
+				<input type="text" class="cp-name" value="a92fb4"/>
+				<span class="cp-name-output"></span>
+			</div>
+
+			<div id="tab-dialog">
+				<h2>Dialog with Colorpicker popup (demonstrates z-index)</h2>
+				<button id="cp-dialog-open">Open dialog</button>
+				<div id="cp-dialog-modal" title="Basic modal dialog">
+					Basic &lt;input&gt; example, without any options: <input type="text" class="cp-basic" value="fe9810"/>
+					<br/>
+					Basic element example, without any options: <span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>
+				</div>
+			</div>
+
+			<div id="tab-modal">
+				<h2>Modal (and showCancelButton, closeOnEscape, showCloseButton)</h2>
+				<input type="text" class="cp-modal" value="9ba73f"/>
+			</div>
+
+			<div id="tab-input-format">
+				<h2>Input formatting</h2>
+				Demonstrates the ability to parse common color formats as input.
+				<input type="text" class="cp-input" value="rgb(123,42,87)"/>
+			</div>
+
+			<div id="tab-no-inline">
+				<h2>Popup from any element (&lt;em&gt;)</h2>
+				Just click on this <em>Emphasized</em> word to show the colorpicker. 
+			</div>
+		</div>
+
+		<script>
+           	$( function() {
+                $('.cp-basic').colorpicker();
+
+				$('.cp-full').colorpicker({
+					parts: 'full',
+					showOn: 'both',
+					buttonColorize: true,
+					showNoneButton: true,
+					alpha: true
+				});
+
+				$('.cp-i18n').colorpicker({
+					regional: 'nl',
+					showNoneButton: true,
+					alpha: true
+				});
+
+                $('.cp-websafe').colorpicker({
+					limit: 'websafe'
+				});
+
+                $('.cp-alt').colorpicker({
+					altField: '.cp-alt-target',
+					altProperties: 'background-color,color',
+					altAlpha: true,
+					alpha: true
+				});
+
+				{	// event log
+					var count = 0;
+
+					function addToEventLog(label, message) {
+						var line = '<div>#'+(++count)+' '+label+': '+message+'</div>';
+						var log = $('.cp-events-log');
+						log.append(line).scrollTop(log[0].scrollHeight);
+					}
+
+					$('.cp-events').colorpicker({
+						init:			function(event, color) {
+											addToEventLog('Init', color.formatted);
+										},
+						select:			function(event, color) {
+											addToEventLog('Select', color.formatted);
+										},
+						close:			function(event, color) {
+											addToEventLog('Close', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
+										}
+					});
+				}
+
+                $('.cp-format').colorpicker({
+					colorFormat: 'HSLA',
+					alpha: true,
+					init: function(event, color) {
+								$('.cp-format-output').text(color.formatted);
+							},
+					select: function(event, color) {
+								$('.cp-format-output').text(color.formatted);
+							}
+				});
+
+                $('.cp-name').colorpicker({
+					parts: 'full',
+					colorFormat: ['EXACT', '#HEX3', 'RGB', 'RGBA'],
+					init: function(event, color) {
+								$('.cp-name-output').text(color.formatted);
+							},
+					select: function(event, color) {
+								$('.cp-name-output').text(color.formatted);
+							}
+				});
+	
+				var dialog = $('#cp-dialog-modal').dialog({
+					autoOpen:	false,
+					minWidth:	500,
+					modal:		true,
+					buttons:	{	'Close': function() {
+										$(this).dialog('close');
+									}
+								}
+				});
+
+				$('#cp-dialog-open').click(function() {
+					dialog.dialog('open');
+				});
+
+                $('.cp-modal').colorpicker({
+					parts:				'draggable',
+					showCloseButton:	false,
+					modal:				true,
+					showCancelButton:	false,
+					closeOnEscape:		false
+				});
+			
+                $('.cp-input').colorpicker({
+					colorFormat: ['RGBA']
+				});
+
+                $('em').colorpicker({
+					inline: false
+				});
+			});
+		</script>
+    </body>
+</html>

examples/colorpicker/jquery.colorpicker.css

+.ui-colorpicker,
+.ui-dialog.ui-colorpicker {
+	width:					auto;
+    white-space:			nowrap;
+
+	-webkit-touch-callout:	none;
+	-webkit-user-select:	none;
+	-khtml-user-select:		none;
+	-moz-user-select:		none;
+	-ms-user-select:		none;
+	user-select:			none;
+}
+
+.ui-colorpicker-inline {
+    position:				static;
+}
+
+.ui-colorpicker-buttonset {
+	float:					left;
+	margin-left:			.4em;
+}
+
+.ui-colorpicker-buttonset .ui-button {
+	margin:					.5em 0 .5em 0;
+	cursor:					pointer;
+}
+
+.ui-colorpicker-buttonpane {
+	background-image:		none;
+	margin:					.7em 0 0 0;
+	padding:				0 .2em;
+	border-left:			0;
+	border-right:			0;
+	border-bottom:			0;
+}
+
+.ui-colorpicker-buttonpane button {
+	float:					right;
+	margin:					.5em .2em .4em;
+	cursor:					pointer;
+	padding:				.2em .6em .3em .6em;
+	width:					auto;
+	overflow:				visible;
+}
+
+.ui-colorpicker-buttonpane button.ui-colorpicker-current {
+	float:					left;
+}
+
+.ui-colorpicker table {
+    font-size:				100%; /* Reset browser table font-size */
+	margin:					0;
+}
+
+.ui-colorpicker table td {
+	vertical-align:			top;
+}
+
+.ui-colorpicker-padding-left {
+	padding-left:			10px;
+}
+.ui-colorpicker-padding-top {
+	padding-top:			10px;
+}
+
+.ui-colorpicker-border {
+	border:					1px inset;
+    display:				inline-block;
+}
+
+/* Bar & map */
+.ui-colorpicker-map > *,
+.ui-colorpicker-bar > * {
+    position:				absolute;
+	cursor:					crosshair;
+}
+
+.ui-colorpicker-map-pointer,
+.ui-colorpicker-bar-pointer {
+    position:				absolute;
+}
+/* Map */
+.ui-colorpicker-map,
+.ui-colorpicker-map > * {
+    display:				block;
+	width:					256px;
+	height:					256px;
+	overflow:				hidden;
+}
+
+.ui-colorpicker-map-layer-1,
+.ui-colorpicker-map-layer-2 {
+	background:				url(images/map.png) no-repeat;
+}
+
+.ui-colorpicker-map-layer-alpha {
+	background:				url(images/map-opacity.png);
+}
+
+.ui-colorpicker-map-pointer {
+	display:				inline-block;
+	width:					15px;
+	height:					15px;
+	background:				url(images/map-pointer.png) no-repeat;
+}
+
+/* Bar */
+.ui-colorpicker-bar,
+.ui-colorpicker-bar > * {
+    display:				block;
+    width:					20px;
+    height:					256px;
+	overflow:				hidden;
+    background-repeat:		repeat-x;
+}
+
+.ui-colorpicker-bar-layer-1,
+.ui-colorpicker-bar-layer-2,
+.ui-colorpicker-bar-layer-3,
+.ui-colorpicker-bar-layer-4 {
+	background:				url(images/bar.png) repeat-x;
+}
+
+.ui-colorpicker-bar-layer-alpha {
+	background:				url(images/bar-opacity.png);
+}
+
+.ui-colorpicker-bar-layer-alphabar {
+	background:				url(images/bar-alpha.png);
+}
+
+.ui-colorpicker-bar-pointer {
+	display:				inline-block;
+	width:					20px;
+	height:					7px;
+	background:				url(images/bar-pointer.png) no-repeat;
+}
+
+/* Preview */
+.ui-colorpicker-preview {
+	text-align:				center;
+}
+
+.ui-colorpicker-preview-initial {
+    cursor:					pointer;
+}
+
+.ui-colorpicker-preview-initial,
+.ui-colorpicker-preview-current {
+    width:					50px;
+    height:					20px;
+    display:				inline-block;
+}
+
+.ui-colorpicker-preview-initial-alpha,
+.ui-colorpicker-preview-current-alpha {
+    width:					50px;
+    height:					20px;
+    display:				inline-block;
+	background:				url(images/preview-opacity.png) repeat;
+}
+
+/* Inputs */
+.ui-colorpicker-rgb label,
+.ui-colorpicker-hsv label,
+.ui-colorpicker-hsl label,
+.ui-colorpicker-lab label,
+.ui-colorpicker-cmyk label,
+.ui-colorpicker-alpha label {
+    width:					1.5em;
+    display:				inline-block;
+}
+
+.ui-colorpicker-number {
+	margin:					.1em;
+	width:					4em;
+}
+
+/* Hex */
+.ui-colorpicker-hex {
+	text-align:				center;
+}
+
+/* Swatches */
+.ui-colorpicker-swatches {
+	width:					84px;
+	height:					256px;
+	overflow:				auto;
+	background-color:		#f8f8f8;
+}
+
+.ui-colorpicker-swatch {
+	cursor:					pointer;
+	float:					left;
+	width:					11px;
+	height:					11px;
+    border-right:			1px solid black;
+    border-bottom:			1px solid black;
+}

examples/colorpicker/jquery.colorpicker.js

+/*jslint devel: true, bitwise: true, regexp: true, browser: true, confusion: true, unparam: true, eqeq: true, white: true, nomen: true, plusplus: true, maxerr: 50, indent: 4 */
+/*globals jQuery,Color */
+
+/*
+ * ColorPicker
+ *
+ * Copyright (c) 2011-2012 Martijn W. van der Lee
+ * Licensed under the MIT.
+ *
+ * Full-featured colorpicker for jQueryUI with full theming support.
+ * Most images from jPicker by Christopher T. Tillman.
+ * Sourcecode created from scratch by Martijn W. van der Lee.
+ */
+
+(function ($) {
+	"use strict";
+
+	$.colorpicker = new function() {
+		this.regional = [];
+		this.regional[''] =	{
+			ok:				'OK',
+			cancel:			'Cancel',
+			none:			'None',
+			button:			'Color',
+			title:			'Pick a color',
+			transparent:	'Transparent',
+			hsvH:			'H',
+			hsvS:			'S',
+			hsvV:			'V',
+			rgbR:			'R',
+			rgbG:			'G',
+			rgbB:			'B',
+			labL:			'L',
+			labA:			'a',
+			labB:			'b',
+			hslH:			'H',
+			hslS:			'S',
+			hslL:			'L',
+			cmykC:			'C',
+			cmykM:			'M',
+			cmykY:			'Y',
+			cmykK:			'K',
+			alphaA:			'A'
+		};
+	};
+
+	var _colorpicker_index = 0,
+
+		_container_popup = '<div class="ui-colorpicker ui-colorpicker-dialog ui-dialog ui-widget ui-widget-content ui-corner-all" style="display: none;"></div>',
+
+		_container_inline = '<div class="ui-colorpicker ui-colorpicker-inline ui-dialog ui-widget ui-widget-content ui-corner-all"></div>',
+
+		_parts_lists = {
+			'full':			['header', 'map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'lab', 'cmyk', 'preview', 'swatches', 'footer'],
+			'popup':		['map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview', 'footer'],
+			'draggable':	['header', 'map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview', 'footer'],
+			'inline':		['map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview']
+		},
+
+		_intToHex = function (dec) {
+			var result = Math.round(dec).toString(16);
+			if (result.length === 1) {
+				result = ('0' + result);
+			}
+			return result.toLowerCase();
+		},
+
+		_formats = {
+			'#HEX':		function(color) {
+							return _formatColor('#rxgxbx', color);
+						}
+		,	'#HEX3':	function(color) {
+							var hex3 = _formats.HEX3(color);
+							return hex3 === false? false : '#'+hex3;
+						}
+		,	'HEX':		function(color) {
+							return _formatColor('rxgxbx', color);
+						}
+		,	'HEX3':		function(color) {
+							var rgb = color.getRGB(),
+								r = Math.round(rgb.r * 255),
+								g = Math.round(rgb.g * 255),
+								b = Math.round(rgb.b * 255);
+
+							if (((r >>> 4) == (r &= 0xf))
+							 && ((g >>> 4) == (g &= 0xf))
+							 && ((b >>> 4) == (b &= 0xf))) {
+								return r.toString(16)+g.toString(16)+b.toString(16);
+							}
+							return false;
+						}
+		,	'RGB':		function(color) {
+							return color.getAlpha() >= 1
+									? _formatColor('rgb(rd,gd,bd)', color)
+									: false;
+						}
+		,	'RGBA':		function(color) {
+							return _formatColor('rgba(rd,gd,bd,af)', color);
+						}
+		,	'RGB%':	function(color) {
+							return color.getAlpha() >= 1
+									? _formatColor('rgb(rp%,gp%,bp%)', color)
+									: false;
+						}
+		,	'RGBA%':	function(color) {
+							return _formatColor('rgba(rp%,gp%,bp%,af)', color);
+						}
+		,	'HSL':		function(color) {
+							return color.getAlpha() >= 1
+									? _formatColor('hsl(hd,sd,vd)', color)
+									: false;
+						}
+		,	'HSLA':		function(color) {
+							return _formatColor('hsla(hd,sd,vd,af)', color);
+						}
+		,	'HSL%':	function(color) {
+							return color.getAlpha() >= 1
+									? _formatColor('hsl(hp%,sp%,vp%)', color)
+									: false;
+						}
+		,	'HSLA%':	function(color) {
+							return _formatColor('hsla(hp%,sp%,vp%,af)', color);
+						}
+		,	'NAME':		function(color) {
+							return _closestName(color);
+						}
+		,	'EXACT':	function(color) {		//@todo experimental. Implement a good fallback list
+							return _exactName(color);
+						}
+		},
+
+		_formatColor = function (formats, color) {
+			var that		= this,
+				text		= null,
+				types		= {	'x':	function(v) {return _intToHex(v * 255);}
+							,	'd':	function(v) {return Math.round(v * 255);}
+							,	'f':	function(v) {return v;}
+							,	'p':	function(v) {return v * 100;}
+							},
+				channels	= color.getChannels();
+
+			if (!$.isArray(formats)) {
+				formats = [formats];
+			}
+
+			$.each(formats, function(index, format) {
+				if (_formats[format]) {
+					text = _formats[format](color);
+					return (text === false);
+				} else {
+					text = format.replace(/\\?[argbhsvcmykLAB][xdfp]/g, function(m) {
+						if (m.match(/^\\/)) {
+							return m.slice(1);
+						}
+						return types[m.charAt(1)](channels[m.charAt(0)]);
+					});
+					return false;
+				}
+			});
+
+			return text;
+		},
+
+		_colors = {
+			'black':				{r: 0, g: 0, b: 0},
+			'dimgray':				{r: 0.4117647058823529, g: 0.4117647058823529, b: 0.4117647058823529},
+			'gray':					{r: 0.5019607843137255, g: 0.5019607843137255, b: 0.5019607843137255},
+			'darkgray':				{r: 0.6627450980392157, g: 0.6627450980392157, b: 0.6627450980392157},
+			'silver':				{r: 0.7529411764705882, g: 0.7529411764705882, b: 0.7529411764705882},
+			'lightgrey':			{r: 0.8274509803921568, g: 0.8274509803921568, b: 0.8274509803921568},
+			'gainsboro':			{r: 0.8627450980392157, g: 0.8627450980392157, b: 0.8627450980392157},
+			'whitesmoke':			{r: 0.9607843137254902, g: 0.9607843137254902, b: 0.9607843137254902},
+			'white':				{r: 1, g: 1, b: 1},
+			'rosybrown':			{r: 0.7372549019607844, g: 0.5607843137254902, b: 0.5607843137254902},
+			'indianred':			{r: 0.803921568627451, g: 0.3607843137254902, b: 0.3607843137254902},
+			'brown':				{r: 0.6470588235294118, g: 0.16470588235294117, b: 0.16470588235294117},
+			'firebrick':			{r: 0.6980392156862745, g: 0.13333333333333333, b: 0.13333333333333333},
+			'lightcoral':			{r: 0.9411764705882353, g: 0.5019607843137255, b: 0.5019607843137255},
+			'maroon':				{r: 0.5019607843137255, g: 0, b: 0},
+			'darkred':				{r: 0.5450980392156862, g: 0, b: 0},
+			'red':					{r: 1, g: 0, b: 0},
+			'snow':					{r: 1, g: 0.9803921568627451, b: 0.9803921568627451},
+			'salmon':				{r: 0.9803921568627451, g: 0.5019607843137255, b: 0.4470588235294118},
+			'mistyrose':			{r: 1, g: 0.8941176470588236, b: 0.8823529411764706},
+			'tomato':				{r: 1, g: 0.38823529411764707, b: 0.2784313725490196},
+			'darksalmon':			{r: 0.9137254901960784, g: 0.5882352941176471, b: 0.47843137254901963},
+			'orangered':			{r: 1, g: 0.27058823529411763, b: 0},
+			'coral':				{r: 1, g: 0.4980392156862745, b: 0.3137254901960784},
+			'lightsalmon':			{r: 1, g: 0.6274509803921569, b: 0.47843137254901963},
+			'sienna':				{r: 0.6274509803921569, g: 0.3215686274509804, b: 0.17647058823529413},
+			'seashell':				{r: 1, g: 0.9607843137254902, b: 0.9333333333333333},
+			'chocolate':			{r: 0.8235294117647058, g: 0.4117647058823529, b: 0.11764705882352941},
+			'saddlebrown':			{r: 0.5450980392156862, g: 0.27058823529411763, b: 0.07450980392156863},
+			'sandybrown':			{r: 0.9568627450980393, g: 0.6431372549019608, b: 0.3764705882352941},
+			'peachpuff':			{r: 1, g: 0.8549019607843137, b: 0.7254901960784313},
+			'peru':					{r: 0.803921568627451, g: 0.5215686274509804, b: 0.24705882352941178},
+			'linen':				{r: 0.9803921568627451, g: 0.9411764705882353, b: 0.9019607843137255},
+			'darkorange':			{r: 1, g: 0.5490196078431373, b: 0},
+			'bisque':				{r: 1, g: 0.8941176470588236, b: 0.7686274509803922},
+			'burlywood':			{r: 0.8705882352941177, g: 0.7215686274509804, b: 0.5294117647058824},
+			'tan':					{r: 0.8235294117647058, g: 0.7058823529411765, b: 0.5490196078431373},
+			'antiquewhite':			{r: 0.9803921568627451, g: 0.9215686274509803, b: 0.8431372549019608},
+			'navajowhite':			{r: 1, g: 0.8705882352941177, b: 0.6784313725490196},
+			'blanchedalmond':		{r: 1, g: 0.9215686274509803, b: 0.803921568627451},
+			'papayawhip':			{r: 1, g: 0.9372549019607843, b: 0.8352941176470589},
+			'orange':				{r: 1, g: 0.6470588235294118, b: 0},
+			'moccasin':				{r: 1, g: 0.8941176470588236, b: 0.7098039215686275},
+			'wheat':				{r: 0.9607843137254902, g: 0.8705882352941177, b: 0.7019607843137254},
+			'oldlace':				{r: 0.9921568627450981, g: 0.9607843137254902, b: 0.9019607843137255},
+			'floralwhite':			{r: 1, g: 0.9803921568627451, b: 0.9411764705882353},
+			'goldenrod':			{r: 0.8549019607843137, g: 0.6470588235294118, b: 0.12549019607843137},
+			'darkgoldenrod':		{r: 0.7215686274509804, g: 0.5254901960784314, b: 0.043137254901960784},
+			'cornsilk':				{r: 1, g: 0.9725490196078431, b: 0.8627450980392157},
+			'gold':					{r: 1, g: 0.8431372549019608, b: 0},
+			'palegoldenrod':		{r: 0.9333333333333333, g: 0.9098039215686274, b: 0.6666666666666666},
+			'khaki':				{r: 0.9411764705882353, g: 0.9019607843137255, b: 0.5490196078431373},
+			'lemonchiffon':			{r: 1, g: 0.9803921568627451, b: 0.803921568627451},
+			'darkkhaki':			{r: 0.7411764705882353, g: 0.7176470588235294, b: 0.4196078431372549},
+			'beige':				{r: 0.9607843137254902, g: 0.9607843137254902, b: 0.8627450980392157},
+			'lightgoldenrodyellow':	{r: 0.9803921568627451, g: 0.9803921568627451, b: 0.8235294117647058},
+			'olive':				{r: 0.5019607843137255, g: 0.5019607843137255, b: 0},
+			'yellow':				{r: 1, g: 1, b: 0},
+			'lightyellow':			{r: 1, g: 1, b: 0.8784313725490196},
+			'ivory':				{r: 1, g: 1, b: 0.9411764705882353},
+			'olivedrab':			{r: 0.4196078431372549, g: 0.5568627450980392, b: 0.13725490196078433},
+			'yellowgreen':			{r: 0.6039215686274509, g: 0.803921568627451, b: 0.19607843137254902},
+			'darkolivegreen':		{r: 0.3333333333333333, g: 0.4196078431372549, b: 0.1843137254901961},
+			'greenyellow':			{r: 0.6784313725490196, g: 1, b: 0.1843137254901961},
+			'lawngreen':			{r: 0.48627450980392156, g: 0.9882352941176471, b: 0},
+			'chartreuse':			{r: 0.4980392156862745, g: 1, b: 0},
+			'darkseagreen':			{r: 0.5607843137254902, g: 0.7372549019607844, b: 0.5607843137254902},
+			'forestgreen':			{r: 0.13333333333333333, g: 0.5450980392156862, b: 0.13333333333333333},
+			'limegreen':			{r: 0.19607843137254902, g: 0.803921568627451, b: 0.19607843137254902},
+			'lightgreen':			{r: 0.5647058823529412, g: 0.9333333333333333, b: 0.5647058823529412},
+			'palegreen':			{r: 0.596078431372549, g: 0.984313725490196, b: 0.596078431372549},
+			'darkgreen':			{r: 0, g: 0.39215686274509803, b: 0},
+			'green':				{r: 0, g: 0.5019607843137255, b: 0},
+			'lime':					{r: 0, g: 1, b: 0},
+			'honeydew':				{r: 0.9411764705882353, g: 1, b: 0.9411764705882353},
+			'mediumseagreen':		{r: 0.23529411764705882, g: 0.7019607843137254, b: 0.44313725490196076},
+			'seagreen':				{r: 0.1803921568627451, g: 0.5450980392156862, b: 0.3411764705882353},
+			'springgreen':			{r: 0, g: 1, b: 0.4980392156862745},
+			'mintcream':			{r: 0.9607843137254902, g: 1, b: 0.9803921568627451},
+			'mediumspringgreen':	{r: 0, g: 0.9803921568627451, b: 0.6039215686274509},
+			'mediumaquamarine':		{r: 0.4, g: 0.803921568627451, b: 0.6666666666666666},
+			'aquamarine':			{r: 0.4980392156862745, g: 1, b: 0.8313725490196079},
+			'turquoise':			{r: 0.25098039215686274, g: 0.8784313725490196, b: 0.8156862745098039},
+			'lightseagreen':		{r: 0.12549019607843137, g: 0.6980392156862745, b: 0.6666666666666666},
+			'mediumturquoise':		{r: 0.2823529411764706, g: 0.8196078431372549, b: 0.8},
+			'darkslategray':		{r: 0.1843137254901961, g: 0.30980392156862746, b: 0.30980392156862746},
+			'paleturquoise':		{r: 0.6862745098039216, g: 0.9333333333333333, b: 0.9333333333333333},
+			'teal':					{r: 0, g: 0.5019607843137255, b: 0.5019607843137255},
+			'darkcyan':				{r: 0, g: 0.5450980392156862, b: 0.5450980392156862},
+			'darkturquoise':		{r: 0, g: 0.807843137254902, b: 0.8196078431372549},
+			'aqua':					{r: 0, g: 1, b: 1},
+			'cyan':					{r: 0, g: 1, b: 1},
+			'lightcyan':			{r: 0.8784313725490196, g: 1, b: 1},
+			'azure':				{r: 0.9411764705882353, g: 1, b: 1},
+			'cadetblue':			{r: 0.37254901960784315, g: 0.6196078431372549, b: 0.6274509803921569},
+			'powderblue':			{r: 0.6901960784313725, g: 0.8784313725490196, b: 0.9019607843137255},
+			'lightblue':			{r: 0.6784313725490196, g: 0.8470588235294118, b: 0.9019607843137255},
+			'deepskyblue':			{r: 0, g: 0.7490196078431373, b: 1},
+			'skyblue':				{r: 0.5294117647058824, g: 0.807843137254902, b: 0.9215686274509803},
+			'lightskyblue':			{r: 0.5294117647058824, g: 0.807843137254902, b: 0.9803921568627451},
+			'steelblue':			{r: 0.27450980392156865, g: 0.5098039215686274, b: 0.7058823529411765},
+			'aliceblue':			{r: 0.9411764705882353, g: 0.9725490196078431, b: 1},
+			'dodgerblue':			{r: 0.11764705882352941, g: 0.5647058823529412, b: 1},
+			'slategray':			{r: 0.4392156862745098, g: 0.5019607843137255, b: 0.5647058823529412},
+			'lightslategray':		{r: 0.4666666666666667, g: 0.5333333333333333, b: 0.6},
+			'lightsteelblue':		{r: 0.6901960784313725, g: 0.7686274509803922, b: 0.8705882352941177},
+			'cornflowerblue':		{r: 0.39215686274509803, g: 0.5843137254901961, b: 0.9294117647058824},
+			'royalblue':			{r: 0.2549019607843137, g: 0.4117647058823529, b: 0.8823529411764706},
+			'midnightblue':			{r: 0.09803921568627451, g: 0.09803921568627451, b: 0.4392156862745098},
+			'lavender':				{r: 0.9019607843137255, g: 0.9019607843137255, b: 0.9803921568627451},
+			'navy':					{r: 0, g: 0, b: 0.5019607843137255},
+			'darkblue':				{r: 0, g: 0, b: 0.5450980392156862},
+			'mediumblue':			{r: 0, g: 0, b: 0.803921568627451},
+			'blue':					{r: 0, g: 0, b: 1},
+			'ghostwhite':			{r: 0.9725490196078431, g: 0.9725490196078431, b: 1},
+			'darkslateblue':		{r: 0.2823529411764706, g: 0.23921568627450981, b: 0.5450980392156862},
+			'slateblue':			{r: 0.41568627450980394, g: 0.35294117647058826, b: 0.803921568627451},
+			'mediumslateblue':		{r: 0.4823529411764706, g: 0.40784313725490196, b: 0.9333333333333333},
+			'mediumpurple':			{r: 0.5764705882352941, g: 0.4392156862745098, b: 0.8588235294117647},
+			'blueviolet':			{r: 0.5411764705882353, g: 0.16862745098039217, b: 0.8862745098039215},
+			'indigo':				{r: 0.29411764705882354, g: 0, b: 0.5098039215686274},
+			'darkorchid':			{r: 0.6, g: 0.19607843137254902, b: 0.8},
+			'darkviolet':			{r: 0.5803921568627451, g: 0, b: 0.8274509803921568},
+			'mediumorchid':			{r: 0.7294117647058823, g: 0.3333333333333333, b: 0.8274509803921568},
+			'thistle':				{r: 0.8470588235294118, g: 0.7490196078431373, b: 0.8470588235294118},
+			'plum':					{r: 0.8666666666666667, g: 0.6274509803921569, b: 0.8666666666666667},
+			'violet':				{r: 0.9333333333333333, g: 0.5098039215686274, b: 0.9333333333333333},
+			'purple':				{r: 0.5019607843137255, g: 0, b: 0.5019607843137255},
+			'darkmagenta':			{r: 0.5450980392156862, g: 0, b: 0.5450980392156862},
+			'magenta':				{r: 1, g: 0, b: 1},
+			'fuchsia':				{r: 1, g: 0, b: 1},
+			'orchid':				{r: 0.8549019607843137, g: 0.4392156862745098, b: 0.8392156862745098},
+			'mediumvioletred':		{r: 0.7803921568627451, g: 0.08235294117647059, b: 0.5215686274509804},
+			'deeppink':				{r: 1, g: 0.0784313725490196, b: 0.5764705882352941},
+			'hotpink':				{r: 1, g: 0.4117647058823529, b: 0.7058823529411765},
+			'palevioletred':		{r: 0.8588235294117647, g: 0.4392156862745098, b: 0.5764705882352941},
+			'lavenderblush':		{r: 1, g: 0.9411764705882353, b: 0.9607843137254902},
+			'crimson':				{r: 0.8627450980392157, g: 0.0784313725490196, b: 0.23529411764705882},
+			'pink':					{r: 1, g: 0.7529411764705882, b: 0.796078431372549},
+			'lightpink':			{r: 1, g: 0.7137254901960784, b: 0.7568627450980392}
+		},
+
+		_exactName = function(color) {
+			var name	= false;
+
+			$.each(_colors, function(n, color_b) {
+				if (color.equals(new Color(color_b.r, color_b.g, color_b.b))) {
+					name = n;
+					return false;
+				}
+			});
+
+			return name;
+		},
+
+		_closestName = function(color) {
+			var rgb			= color.getRGB(),
+				distance	= null,
+				name		= false,
+				d;
+
+			$.each(_colors, function(n, color_b) {
+				d = color.distance(new Color(color_b.r, color_b.g, color_b.b));
+				if (d < distance || distance === null) {
+					name = n;
+					if (d == 0) {
+						return false;	// can't get much closer than 0
+					}
+					distance = d;
+				}
+			});
+
+			return name;
+		},
+
+        _parseHex = function(color) {
+            var c,
+                m;
+
+            // {#}rrggbb
+            m = /^#?([a-fA-F0-9]{1,6})$/.exec(color);
+            if (m) {
+                c = parseInt(m[1], 16);
+                return new Color(
+					((c >> 16) & 0xFF) / 255,
+                    ((c >>  8) & 0xFF) / 255,
+                    (c & 0xFF) / 255
+				);
+            }
+
+            return false;
+        },
+
+        _parseColor = function(color) {
+            var name = $.trim(color).toLowerCase(),
+                m;
+
+            if (color == '') {
+                return new Color();
+            }
+
+            if (_colors[name]) {
+                return new Color(_colors[name].r, _colors[name].g, _colors[name].b);
+            }
+
+            // rgba(r,g,b,a)
+            m = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/.exec(color);
+            if (m) {
+                return new Color(
+                    m[1] / 255,
+                    m[2] / 255,
+                    m[3] / 255,
+                    parseFloat(m[4])
+                );
+            }
+
+            // hsla(r,g,b,a)
+            m = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/.exec(color);
+            if (m) {
+				return (new Color()).setHSL(
+					m[1] / 255,
+					m[2] / 255,
+					m[3] / 255).setAlpha(parseFloat(m[4]));
+            }
+
+            // rgba(r%,g%,b%,a%)
+            m = /^rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/.exec(color);
+            if (m) {
+                return new Color(
+                    m[1] / 100,
+                    m[2] / 100,
+                    m[3] / 100,
+                    m[4] / 100
+                );
+            }
+
+            // hsla(r%,g%,b%,a%)
+            m = /^hsla?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/.exec(color);
+            if (m) {
+				return (new Color()).setHSL(
+					m[1] / 100,
+					m[2] / 100,
+					m[3] / 100).setAlpha(m[4] / 100);
+            }
+
+            // #rrggbb
+            m = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/.exec(color);
+            if (m) {
+                return new Color(
+                    parseInt(m[1], 16) / 255,
+                    parseInt(m[2], 16) / 255,
+                    parseInt(m[3], 16) / 255
+                );
+            }
+
+            // #rgb
+            m = /^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/.exec(color);
+            if (m) {
+                return new Color(
+                   parseInt(m[1] + m[1], 16) / 255,
+                   parseInt(m[2] + m[2], 16) / 255,
+                   parseInt(m[3] + m[3], 16) / 255
+                );
+            }
+
+            return _parseHex(color);
+        },
+
+		_layoutTable = function(layout, callback) {
+			var bitmap,
+				x,
+				y,
+				width, height,
+				columns, rows,
+				index,
+				cell,
+				html,
+				w,
+				h,
+				colspan,
+				walked;
+
+			layout.sort(function(a, b) {
+				if (a.pos[1] == b.pos[1]) {
+					return a.pos[0] - b.pos[0];
+				}
+				return a.pos[1] - b.pos[1];
+			});
+
+			// Determine dimensions of the table
+			width = 0;
+			height = 0;
+			$.each (layout, function(index, part) {
+				width = Math.max(width, part.pos[0] + part.pos[2]);
+				height = Math.max(height, part.pos[1] + part.pos[3]);
+			});
+
+			// Initialize bitmap
+			bitmap = [];
+			for (x = 0; x < width; ++x) {
+				bitmap.push([]);
+			}
+
+			// Mark rows and columns which have layout assigned
+			rows	= [];
+			columns = [];
+			$.each(layout, function(index, part) {
+				// mark columns
+				for (x = 0; x < part.pos[2]; x += 1) {
+					columns[part.pos[0] + x] = true;
+				}
+				for (y = 0; y < part.pos[3]; y += 1) {
+					rows[part.pos[1] + y] = true;
+				}
+			});
+
+			// Generate the table
+			html = '';
+			cell = layout[index = 0];
+			for (y = 0; y < height; ++y) {
+				html += '<tr>';
+				for (x = 0; x < width; x) {
+					if (typeof cell !== 'undefined' && x == cell.pos[0] && y == cell.pos[1]) {
+						// Create a "real" cell
+						html += callback(cell, x, y);
+
+						for (h = 0; h < cell.pos[3]; h +=1) {
+							for (w = 0; w < cell.pos[2]; w +=1) {
+								bitmap[x + w][y + h] = true;
+							}
+						}
+
+						x += cell.pos[2];
+						cell = layout[++index];
+					} else {
+						// Fill in the gaps
+						colspan = 0;
+						walked = false;
+
+						while (x < width && bitmap[x][y] === undefined && (cell === undefined || y < cell.pos[1] || (y == cell.pos[1] && x < cell.pos[0]))) {
+							if (columns[x] === true) {
+								colspan += 1;
+							}
+							walked = true;
+							x += 1;
+						}
+
+						if (colspan > 0) {
+							html += '<td colspan="'+colspan+'"></td>';
+						} else if (!walked) {
+							x += 1;
+						}
+					}
+				}
+				html += '</tr>';
+			}
+
+			return '<table cellspacing="0" cellpadding="0" border="0"><tbody>' + html + '</tbody></table>';
+		},
+
+        _parts = {
+            header: function (inst) {
+                var that	= this,
+                    e		= null,
+                    _html	=function() {
+						var title = inst.options.title || inst._getRegional('title'),
+							html = '<span class="ui-dialog-title">' + title + '</span>';
+
+						if (!inst.inline && inst.options.showCloseButton) {
+							html += '<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">'
+								+ '<span class="ui-icon ui-icon-closethick">close</span></a>';
+						}
+
+						return '<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">' + html + '</div>';
+					};
+
+                this.init = function() {
+                    e = $(_html()).prependTo(inst.dialog);
+
+                    var close = $('.ui-dialog-titlebar-close', e);
+                    inst._hoverable(close);
+                    inst._focusable(close);
+                    close.click(function(event) {
+						event.preventDefault();
+                        inst.close();
+                    });
+
+					if (!inst.inline && inst.options.draggable) {
+						inst.dialog.draggable({
+							handle: e
+						});
+					}
+                };
+            },
+
+            map: function (inst) {
+                var that	= this,
+                    e		= null,
+					mousemove_timeout = null,
+                    _mousedown, _mouseup, _mousemove, _html;
+
+                _mousedown = function (event) {
+                    if (!inst.opened) {
+                        return;
+                    }
+
+                    var div		= $('.ui-colorpicker-map-layer-pointer', e),
+                        offset	= div.offset(),
+                        width	= div.width(),
+                        height	= div.height(),
+                        x		= event.pageX - offset.left,
+                        y		= event.pageY - offset.top;
+
+                    if (x >= 0 && x < width && y >= 0 && y < height) {
+                        event.stopImmediatePropagation();
+                        event.preventDefault();
+						e.unbind('mousedown', _mousedown);
+                        $(document).bind('mouseup', _mouseup);
+                        $(document).bind('mousemove', _mousemove);
+                        _mousemove(event);
+                    }
+                };
+
+                _mouseup = function (event) {
+                    event.stopImmediatePropagation();
+                    event.preventDefault();
+                    $(document).unbind('mouseup', _mouseup);
+                    $(document).unbind('mousemove', _mousemove);
+                    e.bind('mousedown', _mousedown);
+                };
+
+                _mousemove = function (event) {
+                    event.stopImmediatePropagation();
+                    event.preventDefault();
+
+                    if (event.pageX === that.x && event.pageY === that.y) {
+                        return;
+                    }
+                    that.x = event.pageX;
+                    that.y = event.pageY;
+
+                    var div = $('.ui-colorpicker-map-layer-pointer', e),
+                        offset = div.offset(),
+                        width = div.width(),
+                        height = div.height(),
+                        x = event.pageX - offset.left,
+                        y = event.pageY - offset.top;
+
+                    x = Math.max(0, Math.min(x / width, 1));
+                    y = Math.max(0, Math.min(y / height, 1));
+
+                    // interpret values
+                    switch (inst.mode) {
+                    case 'h':
+						inst.color.setHSV(null, x, 1 - y);
+                        break;
+
+                    case 's':
+                    case 'a':
+						inst.color.setHSV(x, null, 1 - y);
+                        break;
+
+                    case 'v':
+						inst.color.setHSV(x, 1 - y, null);
+                        break;
+
+                    case 'r':
+						inst.color.setRGB(null, 1 - y, x);
+                        break;
+
+                    case 'g':
+						inst.color.setRGB(1 - y, null, x);
+                        break;
+
+                    case 'b':
+						inst.color.setRGB(x, 1 - y, null);
+                        break;
+                    }
+
+                    inst._change();
+                };
+
+                _html = function () {
+                    var html = '<div class="ui-colorpicker-map ui-colorpicker-border">'
+                            + '<span class="ui-colorpicker-map-layer-1">&nbsp;</span>'
+                            + '<span class="ui-colorpicker-map-layer-2">&nbsp;</span>'
+                            + (inst.options.alpha ? '<span class="ui-colorpicker-map-layer-alpha">&nbsp;</span>' : '')
+                            + '<span class="ui-colorpicker-map-layer-pointer"><span class="ui-colorpicker-map-pointer"></span></span></div>';
+                    return html;
+                };
+
+                this.update = function () {
+                    switch (inst.mode) {
+                    case 'h':
+                        $('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 0', 'opacity': ''}).show();
+                        $('.ui-colorpicker-map-layer-2', e).hide();
+                        break;
+
+                    case 's':
+                    case 'a':
+                        $('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -260px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-map-layer-2', e).css({'background-position': '0 -520px', 'opacity': ''}).show();
+                        break;
+
+                    case 'v':
+                        $(e).css('background-color', 'black');
+                        $('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -780px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-map-layer-2', e).hide();
+                        break;
+
+                    case 'r':
+                        $('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -1040px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-map-layer-2', e).css({'background-position': '0 -1300px', 'opacity': ''}).show();
+                        break;
+
+                    case 'g':
+                        $('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -1560px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-map-layer-2', e).css({'background-position': '0 -1820px', 'opacity': ''}).show();
+                        break;
+
+                    case 'b':
+                        $('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -2080px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-map-layer-2', e).css({'background-position': '0 -2340px', 'opacity': ''}).show();
+                        break;
+                    }
+                    that.repaint();
+                };
+
+                this.repaint = function () {
+                    var div = $('.ui-colorpicker-map-layer-pointer', e),
+                        x = 0,
+                        y = 0;
+
+                    switch (inst.mode) {
+                    case 'h':
+                        x = inst.color.getHSV().s * div.width();
+                        y = (1 - inst.color.getHSV().v) * div.width();
+                        $(e).css('background-color', inst.color.copy().normalize().toCSS());
+                        break;
+
+                    case 's':
+                    case 'a':
+                        x = inst.color.getHSV().h * div.width();
+                        y = (1 - inst.color.getHSV().v) * div.width();
+                        $('.ui-colorpicker-map-layer-2', e).css('opacity', 1 - inst.color.getHSV().s);
+                        break;
+
+                    case 'v':
+                        x = inst.color.getHSV().h * div.width();
+                        y = (1 - inst.color.getHSV().s) * div.width();
+                        $('.ui-colorpicker-map-layer-1', e).css('opacity', inst.color.getHSV().v);
+                        break;
+
+                    case 'r':
+                        x = inst.color.getRGB().b * div.width();
+                        y = (1 - inst.color.getRGB().g) * div.width();
+                        $('.ui-colorpicker-map-layer-2', e).css('opacity', inst.color.getRGB().r);
+                        break;
+
+                    case 'g':
+                        x = inst.color.getRGB().b * div.width();
+                        y = (1 - inst.color.getRGB().r) * div.width();
+                        $('.ui-colorpicker-map-layer-2', e).css('opacity', inst.color.getRGB().g);
+                        break;
+
+                    case 'b':
+                        x = inst.color.getRGB().r * div.width();
+                        y = (1 - inst.color.getRGB().g) * div.width();
+                        $('.ui-colorpicker-map-layer-2', e).css('opacity', inst.color.getRGB().b);
+                        break;
+                    }
+
+                    if (inst.options.alpha) {
+                        $('.ui-colorpicker-map-layer-alpha', e).css('opacity', 1 - inst.color.getAlpha());
+                    }
+
+                    $('.ui-colorpicker-map-pointer', e).css({
+                        'left': x - 7,
+                        'top': y - 7
+                    });
+                };
+
+                this.init = function () {
+                    e = $(_html()).appendTo($('.ui-colorpicker-map-container', inst.dialog));
+
+                    e.bind('mousedown', _mousedown);
+                };
+            },
+
+            bar: function (inst) {
+                var that		= this,
+                    e			= null,
+                    _mousedown, _mouseup, _mousemove, _html;
+
+                _mousedown = function (event) {
+                    if (!inst.opened) {
+                        return;
+                    }
+
+                    var div		= $('.ui-colorpicker-bar-layer-pointer', e),
+                        offset	= div.offset(),
+                        width	= div.width(),
+                        height	= div.height(),
+                        x		= event.pageX - offset.left,
+                        y		= event.pageY - offset.top;
+
+                    if (x >= 0 && x < width && y >= 0 && y < height) {
+                        event.stopImmediatePropagation();
+                        event.preventDefault();
+                        e.unbind('mousedown', _mousedown);
+                        $(document).bind('mouseup', _mouseup);
+                        $(document).bind('mousemove', _mousemove);
+                        _mousemove(event);
+                    }
+                };
+
+                _mouseup = function (event) {
+                    event.stopImmediatePropagation();
+                    event.preventDefault();
+                    $(document).unbind('mouseup', _mouseup);
+                    $(document).unbind('mousemove', _mousemove);
+                    e.bind('mousedown', _mousedown);
+                };
+
+                _mousemove = function (event) {
+                    event.stopImmediatePropagation();
+                    event.preventDefault();
+
+                    if (event.pageY === that.y) {
+                        return;
+                    }
+                    that.y = event.pageY;
+
+                    var div = $('.ui-colorpicker-bar-layer-pointer', e),
+                        offset  = div.offset(),
+                        height  = div.height(),
+                        y = event.pageY - offset.top;
+
+                    y = Math.max(0, Math.min(y / height, 1));
+
+                    // interpret values
+                    switch (inst.mode) {
+                    case 'h':
+                        inst.color.setHSV(1 - y, null, null);
+                        break;
+
+                    case 's':
+                        inst.color.setHSV(null, 1 - y, null);
+                        break;
+
+                    case 'v':
+                        inst.color.setHSV(null, null, 1 - y);
+                        break;
+
+                    case 'r':
+                        inst.color.setRGB(1 - y, null, null);
+                        break;
+
+                    case 'g':
+                        inst.color.setRGB(null, 1 - y, null);
+                        break;
+
+                    case 'b':
+                        inst.color.setRGB(null, null, 1 - y);
+                        break;
+
+                    case 'a':
+                        inst.color.setAlpha(1 - y);
+                        break;
+                    }
+
+                    inst._change();
+                };
+
+                _html = function () {
+                    var html = '<div class="ui-colorpicker-bar ui-colorpicker-border">'
+                            + '<span class="ui-colorpicker-bar-layer-1">&nbsp;</span>'
+                            + '<span class="ui-colorpicker-bar-layer-2">&nbsp;</span>'
+                            + '<span class="ui-colorpicker-bar-layer-3">&nbsp;</span>'
+                            + '<span class="ui-colorpicker-bar-layer-4">&nbsp;</span>';
+
+                    if (inst.options.alpha) {
+                        html += '<span class="ui-colorpicker-bar-layer-alpha">&nbsp;</span>'
+                            + '<span class="ui-colorpicker-bar-layer-alphabar">&nbsp;</span>';
+                    }
+
+                    html += '<span class="ui-colorpicker-bar-layer-pointer"><span class="ui-colorpicker-bar-pointer"></span></span></div>';
+
+                    return html;
+                };
+
+                this.update = function () {
+                    switch (inst.mode) {
+                    case 'h':
+                    case 's':
+                    case 'v':
+                    case 'r':
+                    case 'g':
+                    case 'b':
+                        $('.ui-colorpicker-bar-layer-alpha', e).show();
+                        $('.ui-colorpicker-bar-layer-alphabar', e).hide();
+                        break;
+
+                    case 'a':
+                        $('.ui-colorpicker-bar-layer-alpha', e).hide();
+                        $('.ui-colorpicker-bar-layer-alphabar', e).show();
+                        break;
+                    }
+
+                    switch (inst.mode) {
+                    case 'h':
+                        $('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 0', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-2', e).hide();
+                        $('.ui-colorpicker-bar-layer-3', e).hide();
+                        $('.ui-colorpicker-bar-layer-4', e).hide();
+                        break;
+
+                    case 's':
+                        $('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -260px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -520px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-3', e).hide();
+                        $('.ui-colorpicker-bar-layer-4', e).hide();
+                        break;
+
+                    case 'v':
+                        $('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -520px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-2', e).hide();
+                        $('.ui-colorpicker-bar-layer-3', e).hide();
+                        $('.ui-colorpicker-bar-layer-4', e).hide();
+                        break;
+
+                    case 'r':
+                        $('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -1560px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -1300px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-3', e).css({'background-position': '0 -780px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-4', e).css({'background-position': '0 -1040px', 'opacity': ''}).show();
+                        break;
+
+                    case 'g':
+                        $('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -2600px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -2340px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-3', e).css({'background-position': '0 -1820px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-4', e).css({'background-position': '0 -2080px', 'opacity': ''}).show();
+                        break;
+
+                    case 'b':
+                        $('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -3640px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -3380px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-3', e).css({'background-position': '0 -2860px', 'opacity': ''}).show();
+                        $('.ui-colorpicker-bar-layer-4', e).css({'background-position': '0 -3120px', 'opacity': ''}).show();
+                        break;
+
+                    case 'a':
+                        $('.ui-colorpicker-bar-layer-1', e).hide();
+                        $('.ui-colorpicker-bar-layer-2', e).hide();
+                        $('.ui-colorpicker-bar-layer-3', e).hide();
+                        $('.ui-colorpicker-bar-layer-4', e).hide();
+                        break;
+                    }
+                    that.repaint();
+                };
+
+                this.repaint = function () {
+                    var div = $('.ui-colorpicker-bar-layer-pointer', e),
+                        y = 0;
+
+                    switch (inst.mode) {
+                    case 'h':
+                        y = (1 - inst.color.getHSV().h) * div.height();
+                        break;
+
+                    case 's':
+                        y = (1 - inst.color.getHSV().s) * div.height();
+                        $('.ui-colorpicker-bar-layer-2', e).css('opacity', 1 - inst.color.getHSV().v);
+                        $(e).css('background-color', inst.color.copy().normalize().toCSS());
+                        break;
+
+                    case 'v':
+                        y = (1 - inst.color.getHSV().v) * div.height();
+                        $(e).css('background-color', inst.color.copy().normalize().toCSS());
+                        break;
+
+                    case 'r':
+                        y = (1 - inst.color.getRGB().r) * div.height();
+                        $('.ui-colorpicker-bar-layer-2', e).css('opacity', Math.max(0, (inst.color.getRGB().b - inst.color.getRGB().g)));
+                        $('.ui-colorpicker-bar-layer-3', e).css('opacity', Math.max(0, (inst.color.getRGB().g - inst.color.getRGB().b)));
+                        $('.ui-colorpicker-bar-layer-4', e).css('opacity', Math.min(inst.color.getRGB().b, inst.color.getRGB().g));
+                        break;
+
+                    case 'g':
+                        y = (1 - inst.color.getRGB().g) * div.height();
+                        $('.ui-colorpicker-bar-layer-2', e).css('opacity', Math.max(0, (inst.color.getRGB().b - inst.color.getRGB().r)));
+                        $('.ui-colorpicker-bar-layer-3', e).css('opacity', Math.max(0, (inst.color.getRGB().r - inst.color.getRGB().b)));
+                        $('.ui-colorpicker-bar-layer-4', e).css('opacity', Math.min(inst.color.getRGB().r, inst.color.getRGB().b));
+                        break;
+
+                    case 'b':
+                        y = (1 - inst.color.getRGB().b) * div.height();
+                        $('.ui-colorpicker-bar-layer-2', e).css('opacity', Math.max(0, (inst.color.getRGB().r - inst.color.getRGB().g)));
+                        $('.ui-colorpicker-bar-layer-3', e).css('opacity', Math.max(0, (inst.color.getRGB().g - inst.color.getRGB().r)));
+                        $('.ui-colorpicker-bar-layer-4', e).css('opacity', Math.min(inst.color.getRGB().r, inst.color.getRGB().g));
+                        break;
+
+                    case 'a':
+                        y = (1 - inst.color.getAlpha()) * div.height();
+                        $(e).css('background-color', inst.color.copy().normalize().toCSS());
+                        break;
+                    }
+
+                    if (inst.mode !== 'a') {
+                        $('.ui-colorpicker-bar-layer-alpha', e).css('opacity', 1 - inst.color.getAlpha());
+                    }
+
+                    $('.ui-colorpicker-bar-pointer', e).css('top', y - 3);
+                };
+
+                this.init = function () {
+                    e = $(_html()).appendTo($('.ui-colorpicker-bar-container', inst.dialog));
+
+                    e.bind('mousedown', _mousedown);
+                };
+            },
+
+            preview: function (inst) {
+                var that = this,
+                    e = null,
+                    _html;
+
+                _html = function () {
+                    return '<div class="ui-colorpicker-preview ui-colorpicker-border">'
+                        + '<div class="ui-colorpicker-preview-initial"><div class="ui-colorpicker-preview-initial-alpha"></div></div>'
+                        + '<div class="ui-colorpicker-preview-current"><div class="ui-colorpicker-preview-current-alpha"></div></div>'
+                        + '</div>';
+                };
+
+                this.init = function () {
+                    e = $(_html()).appendTo($('.ui-colorpicker-preview-container', inst.dialog));
+
+                    $('.ui-colorpicker-preview-initial', e).click(function () {
+                        inst.color = inst.currentColor.copy();
+                        inst._change();
+                    });
+
+                };
+
+                this.update = function () {
+                    if (inst.options.alpha) {
+                        $('.ui-colorpicker-preview-initial-alpha, .ui-colorpicker-preview-current-alpha', e).show();
+                    } else {
+                        $('.ui-colorpicker-preview-initial-alpha, .ui-colorpicker-preview-current-alpha', e).hide();
+                    }
+
+                    this.repaint();
+                };
+
+                this.repaint = function () {
+                    $('.ui-colorpicker-preview-initial', e).css('background-color', inst.currentColor.toCSS()).attr('title', inst.currentColor.toHex());
+                    $('.ui-colorpicker-preview-initial-alpha', e).css('opacity', 1 - inst.currentColor.getAlpha());
+                    $('.ui-colorpicker-preview-current', e).css('background-color', inst.color.toCSS()).attr('title', inst.color.toHex());
+                    $('.ui-colorpicker-preview-current-alpha', e).css('opacity', 1 - inst.color.getAlpha());
+                };
+            },
+
+            hsv: function (inst) {
+                var that = this,
+                    e = null,
+                    _html;
+
+                _html = function () {
+                    var html = '';
+
+                    if (inst.options.hsv) {
+                        html +=	'<div class="ui-colorpicker-hsv-h"><input class="ui-colorpicker-mode" type="radio" value="h"/><label>' + inst._getRegional('hsvH') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="360" size="10"/><span class="ui-colorpicker-unit">&deg;</span></div>'
+                            + '<div class="ui-colorpicker-hsv-s"><input class="ui-colorpicker-mode" type="radio" value="s"/><label>' + inst._getRegional('hsvS') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100" size="10"/><span class="ui-colorpicker-unit">%</span></div>'
+                            + '<div class="ui-colorpicker-hsv-v"><input class="ui-colorpicker-mode" type="radio" value="v"/><label>' + inst._getRegional('hsvV') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100" size="10"/><span class="ui-colorpicker-unit">%</span></div>';
+                    }
+
+                    return '<div class="ui-colorpicker-hsv">' + html + '</div>';
+                };
+
+                this.init = function () {
+                    e = $(_html()).appendTo($('.ui-colorpicker-hsv-container', inst.dialog));
+
+                    $('.ui-colorpicker-mode', e).click(function () {
+                        inst.mode = $(this).val();
+                        inst._updateAllParts();
+                    });
+
+                    $('.ui-colorpicker-number', e).bind('change keyup', function () {
+                        inst.color.setHSV(
+							$('.ui-colorpicker-hsv-h .ui-colorpicker-number', e).val() / 360,
+							$('.ui-colorpicker-hsv-s .ui-colorpicker-number', e).val() / 100,
+							$('.ui-colorpicker-hsv-v .ui-colorpicker-number', e).val() / 100
+						);
+                        inst._change();
+                    });
+                };
+
+                this.repaint = function () {
+					var hsv = inst.color.getHSV();
+					hsv.h *= 360;
+					hsv.s *= 100;
+					hsv.v *= 100;
+
+                    $.each(hsv, function (index, value) {
+						var input = $('.ui-colorpicker-hsv-' + index + ' .ui-colorpicker-number', e);
+                        value = Math.round(value);
+                        if (input.val() !== value) {
+                            input.val(value);
+                        }
+                    });
+                };
+
+                this.update = function () {
+                    $('.ui-colorpicker-mode', e).each(function () {
+                        $(this).attr('checked', $(this).val() === inst.mode);
+                    });
+                    this.repaint();
+                };
+            },
+
+            rgb: function (inst) {
+                var that = this,
+                    e = null,
+                    _html;
+
+                _html = function () {
+                    var html = '';
+
+                    if (inst.options.rgb) {
+                        html += '<div class="ui-colorpicker-rgb-r"><input class="ui-colorpicker-mode" type="radio" value="r"/><label>' + inst._getRegional('rgbR') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="255"/></div>'
+                            + '<div class="ui-colorpicker-rgb-g"><input class="ui-colorpicker-mode" type="radio" value="g"/><label>' + inst._getRegional('rgbG') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="255"/></div>'
+                            + '<div class="ui-colorpicker-rgb-b"><input class="ui-colorpicker-mode" type="radio" value="b"/><label>' + inst._getRegional('rgbB') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="255"/></div>';
+                    }
+
+                    return '<div class="ui-colorpicker-rgb">' + html + '</div>';
+                };
+
+                this.init = function () {
+                    e = $(_html()).appendTo($('.ui-colorpicker-rgb-container', inst.dialog));
+