diff --git a/web_advanced_filters/wizard/ir_filters_combine_with_existing.py b/web_advanced_filters/wizard/ir_filters_combine_with_existing.py
index 7cb48206..b6d6668c 100644
--- a/web_advanced_filters/wizard/ir_filters_combine_with_existing.py
+++ b/web_advanced_filters/wizard/ir_filters_combine_with_existing.py
@@ -19,6 +19,7 @@
 #
 ##############################################################################
 import time
+import json
 from openerp.osv.orm import TransientModel
 from openerp.osv import fields, expression
 from openerp.tools.safe_eval import safe_eval
@@ -41,7 +42,7 @@ class IrFiltersCombineWithExisting(TransientModel):
     def button_save(self, cr, uid, ids, context=None):
         assert len(ids) == 1
         this = self.browse(cr, uid, ids[0], context=context)
-        domain = safe_eval(this.domain)
+        domain = json.loads(this.domain)
         is_frozen = (len(domain) == 1 and
                      expression.is_leaf(domain[0]) and
                      domain[0][0] == 'id')
diff --git a/web_m2x_options/README.rst b/web_m2x_options/README.rst
index 2b1fafdb..ef7d2841 100644
--- a/web_m2x_options/README.rst
+++ b/web_m2x_options/README.rst
@@ -6,15 +6,17 @@ Add new options for many2one field
 Description
 -----------
 
-This modules modifies "many2one" form fields so as to add some new display
-control options.
+This module changes "many2one" and "many2manytags" form widgets, so as to
+add some new display control options.
 
 ** New: support many2manytags widget ! **
 
-Options provided includes possibility to remove "Create..." and/or "Create and
-Edit..." entries from many2one drop down. You can also change default number of
-proposition appearing in the drop-down. Or prevent the dialog box poping in
-case of validation error.
+** New: support global option management with ir.config_parameter ! **
+
+The options provided include the possibility to remove "Create..." and/or
+"Create and Edit..." entries from many2one and many2many drop down lists. You
+can also change the default number of entries appearing in the drop-down, or
+ prevent the dialog box poping in case of validation error occurring.
 
 If not specified, the module will avoid proposing any of the create options
 if the current user have no permission rights to create the related object.
@@ -46,6 +48,31 @@ New option
   Number of displayed record in drop-down panel
 
 
+ir.config_parameter options
+---------------------------
+
+Now you can disable "Create..." and "Create and Edit..." entry for all widgets in the odoo instance.
+If you disable one option, you can enable it for particular field by setting "create: True" option directly on the field definition.
+
+``web_m2x_options.create`` *boolean* (Default: depends if user have create rights)
+
+  Whether to display the "Create..." entry in dropdown panel for all fields in the odoo instance.
+
+``web_m2x_options.create_edit`` *boolean* (Default: depends if user have create rights)
+
+  Whether to display "Create and Edit..." entry in dropdown panel for all fields in the odoo instance.
+
+``web_m2x_options.limit`` *int* (Default: openerp default value is ``7``)
+
+  Number of displayed records in drop-down panel for all fields in the odoo instance
+
+To add these parameters go to Configuration -> Technical -> Parameters -> System Parameters and add new parameters like:
+
+- web_m2x_options.create: False
+- web_m2x_options.create_edit: False
+- web_m2x_options.limit: 10
+
+
 Example
 -------
 
@@ -59,5 +86,5 @@ Note
 ----
 
 Double check that you have no inherited view that remote ``options`` you set on a field ! 
-If nothing work, add a debugger in the first ligne of ``get_search_result method`` and enable debug mode in OpenERP. When you write something in a many2one field, javascript debugger should pause. If not verify your installation.
+If nothing work, add a debugger in the first line of ``get_search_result`` method and enable debug mode in OpenERP. When you write something in a many2one field, javascript debugger should pause. If not verify your installation.
 
diff --git a/web_m2x_options/static/src/js/form.js b/web_m2x_options/static/src/js/form.js
index 00885a09..e4540567 100644
--- a/web_m2x_options/static/src/js/form.js
+++ b/web_m2x_options/static/src/js/form.js
@@ -8,8 +8,35 @@ openerp.web_m2x_options = function (instance) {
         _t  = instance.web._t,
         _lt = instance.web._lt;
 
+    var OPTIONS = ['web_m2x_options.create',
+                   'web_m2x_options.create_edit',
+                   'web_m2x_options.limit',];
+
     instance.web.form.FieldMany2One.include({
 
+        start: function() {
+            this._super.apply(this, arguments);
+            return this.get_options();
+        },
+
+        get_options: function() {
+            var self = this;
+            if (!_.isUndefined(this.view) && _.isUndefined(this.view.ir_options_loaded)) {
+            this.view.ir_options_loaded = $.Deferred();
+            this.view.ir_options = {};
+            (new instance.web.Model("ir.config_parameter"))
+                .query(["key", "value"]).filter([['key', 'in', OPTIONS]])
+                .all().then(function(records) {
+                _(records).each(function(record) {
+                    self.view.ir_options[record.key] = record.value;
+                });
+                self.view.ir_options_loaded.resolve();
+                });
+                return this.view.ir_options_loaded;
+            }
+            return $.when();
+        },
+
         show_error_displayer: function () {
             if ((typeof this.options.m2o_dialog === 'undefined' && this.can_create) ||
                 this.options.m2o_dialog) {
@@ -24,6 +51,12 @@ openerp.web_m2x_options = function (instance) {
             // add options limit used to change number of selections record
             // returned.
 
+            if (_.isUndefined(this.view))
+                    return this._super.apply(this, arguments);
+            if (!_.isUndefined(this.view.ir_options['web_m2x_options.limit'])) {
+                this.limit = parseInt(this.view.ir_options['web_m2x_options.limit']);
+            }
+
             if (typeof this.options.limit === 'number') {
                 this.limit = this.options.limit;
             }
@@ -65,7 +98,7 @@ openerp.web_m2x_options = function (instance) {
                     };
                 });
 
-                // search more... if more results that max
+                // search more... if more results than max
 
                 if (values.length > self.limit) {
                     values = values.slice(0, self.limit);
@@ -88,7 +121,8 @@ openerp.web_m2x_options = function (instance) {
                     return x[1];
                 });
 
-                if ((typeof self.options.create === 'undefined' && can_create) ||
+                if ((_.isUndefined(self.options.create) && _.isUndefined(self.view.ir_options['web_m2x_options.create']) && can_create) ||
+		            (_.isUndefined(self.options.create) && self.view.ir_options['web_m2x_options.create'] == "True") ||
                     self.options.create) {
 
                     if (search_val.length > 0 &&
@@ -106,9 +140,11 @@ openerp.web_m2x_options = function (instance) {
                     }
                 }
 
+
                 // create...
 
-                if ((typeof self.options.create_edit === 'undefined' && can_create) ||
+                if ((_.isUndefined(self.options.create_edit) && _.isUndefined(self.view.ir_options['web_m2x_options.create_edit']) && can_create) ||
+		            (_.isUndefined(self.options.create) && self.view.ir_options['web_m2x_options.create_edit'] == "True") ||
                     self.options.create_edit) {
 
                     values.push({
@@ -138,6 +174,28 @@ openerp.web_m2x_options = function (instance) {
             }
         },
 
+        start: function() {
+            this._super.apply(this, arguments);
+            return this.get_options();
+        },
+
+        get_options: function() {
+            var self = this;
+            if (_.isUndefined(this.view.ir_options_loaded)) {
+                this.view.ir_options_loaded = $.Deferred();
+                this.view.ir_options = {};
+                (new instance.web.Model("ir.config_parameter"))
+                        .query(["key", "value"]).filter([['key', 'in', OPTIONS]])
+                        .all().then(function(records) {
+                        _(records).each(function(record) {
+                    self.view.ir_options[record.key] = record.value;
+                    });
+                self.view.ir_options_loaded.resolve();
+            });
+            }
+            return this.view.ir_options_loaded;
+        },
+
         /**
         * Call this method to search using a string.
         */
@@ -148,6 +206,10 @@ openerp.web_m2x_options = function (instance) {
             // add options limit used to change number of selections record
             // returned.
 
+            if (!_.isUndefined(this.view.ir_options['web_m2x_options.limit'])) {
+                this.limit = parseInt(this.view.ir_options['web_m2x_options.limit']);
+            }
+
             if (typeof this.options.limit === 'number') {
                 this.limit = this.options.limit;
             }
@@ -186,7 +248,8 @@ openerp.web_m2x_options = function (instance) {
                 }
                 // quick create
 
-                if ((typeof self.options.create === 'undefined') ||
+                if ((_.isUndefined(self.options.create) && _.isUndefined(self.view.ir_options['web_m2x_options.create'])) ||
+		            (_.isUndefined(self.options.create) && self.view.ir_options['web_m2x_options.create'] == 'True') ||
                     self.options.create) {
 
                     var raw_result = _(data.result).map(function(x) {return x[1];});
@@ -201,10 +264,10 @@ openerp.web_m2x_options = function (instance) {
                         });
                     }
                 }
-
                 // create...
 
-                if ((typeof self.options.create_edit === 'undefined') ||
+                if ((_.isUndefined(self.options.create_edit === 'undefined') && _.isUndefined(self.view.ir_options['web_m2x_options.create_edit'])) ||
+	            (_.isUndefined(self.options.create) && self.view.ir_options['web_m2x_options.create_edit'] == 'True') ||
                     self.options.create_edit) {
 
                     values.push({
diff --git a/web_widget_color/__init__.py b/web_widget_color/__init__.py
new file mode 100644
index 00000000..c18661e9
--- /dev/null
+++ b/web_widget_color/__init__.py
@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+############################################################################
+#
+# Odoo, Open Source Web Color
+# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
+# Copyright (C) 2014 Anybox <http://anybox.fr>
+# Copyright (C) 2015 Taktik SA <http://taktik.be>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>
+# @author Adil Houmadi <ah@taktik.be>
+#
+##############################################################################
diff --git a/web_widget_color/__openerp__.py b/web_widget_color/__openerp__.py
new file mode 100644
index 00000000..4d00eb83
--- /dev/null
+++ b/web_widget_color/__openerp__.py
@@ -0,0 +1,140 @@
+# -*- encoding: utf-8 -*-
+############################################################################
+#
+# Odoo, Open Source Web Widget Color
+# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
+# Copyright (C) 2014 Anybox <http://anybox.fr>
+# Copyright (C) 2015 Taktik SA <http://taktik.be>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>
+# @author Adil Houmadi <ah@taktik.be>
+#
+##############################################################################
+{
+    'name': "Web Widget Color",
+    'category': "web",
+    'version': "1.0",
+    'depends': ['base', 'web'],
+    'description': '''
+Color widget for Odoo web client
+================================
+
+This module aims to add a color picker to Odoo.
+
+It's a `jsColor <http://jscolor.com/>`_ lib integration.
+
+
+Features
+========
+
+* The picker allow the user to quickly select a color on edit mode
+
+  |picker|
+
+  .. note::
+
+      Notice how html code and the background color is updating when selecting
+      a color.
+
+
+* Display the color on form view when you are not editing it
+
+  |formview|
+
+* Display the color on list view to quickly find what's wrong!
+
+  |listview|
+
+
+Requirements
+============
+
+This module has been ported to 8.0
+
+
+Usage
+=====
+
+You need to declare a char field of at least size 7::
+
+    _columns = {
+        'color': fields.char(
+            u"Couleur",
+            help=u"Toutes couleur valid css, exemple blue ou #f57900"
+        ),
+    }
+
+    OR
+
+    color = fields.Char(
+        string="Color",
+        help="Choose your color"
+    )
+
+
+In the view declaration, put widget='color' attribute in the field tag::
+
+    ...
+    <field name="arch" type="xml">
+        <tree string="View name">
+            ...
+            <field name="name"/>
+            <field name="color" widget="color"/>
+            ...
+        </tree>
+    </field>
+    ...
+
+.. |picker| image:: /web_widget_color/static/src/img/picker.png
+.. |formview| image:: /web_widget_color/static/src/img/form_view.png
+.. |listview| image:: /web_widget_color/static/src/img/list_view.png
+
+Credits
+=======
+
+Contributors
+------------
+
+* Adil Houmadi <adil.houmadi@gmail.com>
+
+Maintainer
+----------
+
+.. image:: http://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: http://odoo-community.org
+
+This module is maintained by the OCA.
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+To contribute to this module, please visit http://odoo-community.org.''',
+    'qweb': [
+        'static/src/xml/widget.xml',
+    ],
+    'css': [
+        'static/src/css/widget.css',
+    ],
+    'js': [
+        'static/lib/jscolor/jscolor.js',
+        'static/src/js/widget.js',
+    ],
+    'auto_install': False,
+    'installable': True,
+    'web_preload': True,
+}
diff --git a/web_widget_color/static/lib/jscolor/arrow.gif b/web_widget_color/static/lib/jscolor/arrow.gif
new file mode 100644
index 00000000..246478a8
Binary files /dev/null and b/web_widget_color/static/lib/jscolor/arrow.gif differ
diff --git a/web_widget_color/static/lib/jscolor/cross.gif b/web_widget_color/static/lib/jscolor/cross.gif
new file mode 100644
index 00000000..0ee9c7ac
Binary files /dev/null and b/web_widget_color/static/lib/jscolor/cross.gif differ
diff --git a/web_widget_color/static/lib/jscolor/demo.html b/web_widget_color/static/lib/jscolor/demo.html
new file mode 100644
index 00000000..cb860664
--- /dev/null
+++ b/web_widget_color/static/lib/jscolor/demo.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+	<title>jscolor demo</title>
+</head>
+<body>
+
+	<script type="text/javascript" src="jscolor.js"></script>
+
+	Click here: <input class="color" value="66ff00">
+
+</body>
+</html>
diff --git a/web_widget_color/static/lib/jscolor/hs.png b/web_widget_color/static/lib/jscolor/hs.png
new file mode 100644
index 00000000..3d94486c
Binary files /dev/null and b/web_widget_color/static/lib/jscolor/hs.png differ
diff --git a/web_widget_color/static/lib/jscolor/hv.png b/web_widget_color/static/lib/jscolor/hv.png
new file mode 100644
index 00000000..1c5e01f8
Binary files /dev/null and b/web_widget_color/static/lib/jscolor/hv.png differ
diff --git a/web_widget_color/static/lib/jscolor/jscolor.js b/web_widget_color/static/lib/jscolor/jscolor.js
new file mode 100644
index 00000000..47c89616
--- /dev/null
+++ b/web_widget_color/static/lib/jscolor/jscolor.js
@@ -0,0 +1,1010 @@
+/**
+ * jscolor, JavaScript Color Picker
+ *
+ * @version 1.4.4
+ * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
+ * @author  Jan Odvarko, http://odvarko.cz
+ * @created 2008-06-15
+ * @updated 2014-12-09
+ * @link    http://jscolor.com
+ */
+
+
+var jscolor = {
+
+
+	dir : '', // location of jscolor directory (leave empty to autodetect)
+	bindClass : 'color', // class name
+	binding : true, // automatic binding via <input class="...">
+	preloading : true, // use image preloading?
+
+
+	install : function() {
+		jscolor.addEvent(window, 'load', jscolor.init);
+	},
+
+
+	init : function() {
+		if(jscolor.binding) {
+			jscolor.bind();
+		}
+		if(jscolor.preloading) {
+			jscolor.preload();
+		}
+	},
+
+
+	getDir : function() {
+		if(!jscolor.dir) {
+			var detected = jscolor.detectDir();
+			jscolor.dir = detected!==false ? detected : 'jscolor/';
+		}
+		return jscolor.dir;
+	},
+
+
+	detectDir : function() {
+		var base = location.href;
+
+		var e = document.getElementsByTagName('base');
+		for(var i=0; i<e.length; i+=1) {
+			if(e[i].href) { base = e[i].href; }
+		}
+
+		var e = document.getElementsByTagName('script');
+		for(var i=0; i<e.length; i+=1) {
+			if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
+				var src = new jscolor.URI(e[i].src);
+				var srcAbs = src.toAbsolute(base);
+				srcAbs.path = srcAbs.path.replace(/[^\/]+$/, ''); // remove filename
+				srcAbs.query = null;
+				srcAbs.fragment = null;
+				return srcAbs.toString();
+			}
+		}
+		return false;
+	},
+
+
+	bind : function() {
+		var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
+		var e = document.getElementsByTagName('input');
+		for(var i=0; i<e.length; i+=1) {
+			if(jscolor.isColorAttrSupported && e[i].type.toLowerCase() == 'color') {
+				// skip inputs of type 'color' if the browser supports this feature
+				continue;
+			}
+			var m;
+			if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) {
+				var prop = {};
+				if(m[4]) {
+					try {
+						prop = (new Function ('return (' + m[4] + ')'))();
+					} catch(eInvalidProp) {}
+				}
+				e[i].color = new jscolor.color(e[i], prop);
+			}
+		}
+	},
+
+
+	preload : function() {
+		for(var fn in jscolor.imgRequire) {
+			if(jscolor.imgRequire.hasOwnProperty(fn)) {
+				jscolor.loadImage(fn);
+			}
+		}
+	},
+
+
+	images : {
+		pad : [ 181, 101 ],
+		sld : [ 16, 101 ],
+		cross : [ 15, 15 ],
+		arrow : [ 7, 11 ]
+	},
+
+
+	imgRequire : {},
+	imgLoaded : {},
+
+
+	requireImage : function(filename) {
+		jscolor.imgRequire[filename] = true;
+	},
+
+
+	loadImage : function(filename) {
+		if(!jscolor.imgLoaded[filename]) {
+			jscolor.imgLoaded[filename] = new Image();
+			jscolor.imgLoaded[filename].src = jscolor.getDir()+filename;
+		}
+	},
+
+
+	fetchElement : function(mixed) {
+		return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
+	},
+
+
+	addEvent : function(el, evnt, func) {
+		if(el.addEventListener) {
+			el.addEventListener(evnt, func, false);
+		} else if(el.attachEvent) {
+			el.attachEvent('on'+evnt, func);
+		}
+	},
+
+
+	fireEvent : function(el, evnt) {
+		if(!el) {
+			return;
+		}
+		if(document.createEvent) {
+			var ev = document.createEvent('HTMLEvents');
+			ev.initEvent(evnt, true, true);
+			el.dispatchEvent(ev);
+		} else if(document.createEventObject) {
+			var ev = document.createEventObject();
+			el.fireEvent('on'+evnt, ev);
+		} else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5)
+			el['on'+evnt]();
+		}
+	},
+
+
+	getElementPos : function(e) {
+		var e1=e, e2=e;
+		var x=0, y=0;
+		if(e1.offsetParent) {
+			do {
+				x += e1.offsetLeft;
+				y += e1.offsetTop;
+			} while(e1 = e1.offsetParent);
+		}
+		while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
+			x -= e2.scrollLeft;
+			y -= e2.scrollTop;
+		}
+		return [x, y];
+	},
+
+
+	getElementSize : function(e) {
+		return [e.offsetWidth, e.offsetHeight];
+	},
+
+
+	getRelMousePos : function(e) {
+		var x = 0, y = 0;
+		if (!e) { e = window.event; }
+		if (typeof e.offsetX === 'number') {
+			x = e.offsetX;
+			y = e.offsetY;
+		} else if (typeof e.layerX === 'number') {
+			x = e.layerX;
+			y = e.layerY;
+		}
+		return { x: x, y: y };
+	},
+
+
+	getViewPos : function() {
+		if(typeof window.pageYOffset === 'number') {
+			return [window.pageXOffset, window.pageYOffset];
+		} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
+			return [document.body.scrollLeft, document.body.scrollTop];
+		} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
+			return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
+		} else {
+			return [0, 0];
+		}
+	},
+
+
+	getViewSize : function() {
+		if(typeof window.innerWidth === 'number') {
+			return [window.innerWidth, window.innerHeight];
+		} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
+			return [document.body.clientWidth, document.body.clientHeight];
+		} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
+			return [document.documentElement.clientWidth, document.documentElement.clientHeight];
+		} else {
+			return [0, 0];
+		}
+	},
+
+
+	URI : function(uri) { // See RFC3986
+
+		this.scheme = null;
+		this.authority = null;
+		this.path = '';
+		this.query = null;
+		this.fragment = null;
+
+		this.parse = function(uri) {
+			var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/);
+			this.scheme = m[3] ? m[2] : null;
+			this.authority = m[5] ? m[6] : null;
+			this.path = m[7];
+			this.query = m[9] ? m[10] : null;
+			this.fragment = m[12] ? m[13] : null;
+			return this;
+		};
+
+		this.toString = function() {
+			var result = '';
+			if(this.scheme !== null) { result = result + this.scheme + ':'; }
+			if(this.authority !== null) { result = result + '//' + this.authority; }
+			if(this.path !== null) { result = result + this.path; }
+			if(this.query !== null) { result = result + '?' + this.query; }
+			if(this.fragment !== null) { result = result + '#' + this.fragment; }
+			return result;
+		};
+
+		this.toAbsolute = function(base) {
+			var base = new jscolor.URI(base);
+			var r = this;
+			var t = new jscolor.URI;
+
+			if(base.scheme === null) { return false; }
+
+			if(r.scheme !== null && r.scheme.toLowerCase() === base.scheme.toLowerCase()) {
+				r.scheme = null;
+			}
+
+			if(r.scheme !== null) {
+				t.scheme = r.scheme;
+				t.authority = r.authority;
+				t.path = removeDotSegments(r.path);
+				t.query = r.query;
+			} else {
+				if(r.authority !== null) {
+					t.authority = r.authority;
+					t.path = removeDotSegments(r.path);
+					t.query = r.query;
+				} else {
+					if(r.path === '') {
+						t.path = base.path;
+						if(r.query !== null) {
+							t.query = r.query;
+						} else {
+							t.query = base.query;
+						}
+					} else {
+						if(r.path.substr(0,1) === '/') {
+							t.path = removeDotSegments(r.path);
+						} else {
+							if(base.authority !== null && base.path === '') {
+								t.path = '/'+r.path;
+							} else {
+								t.path = base.path.replace(/[^\/]+$/,'')+r.path;
+							}
+							t.path = removeDotSegments(t.path);
+						}
+						t.query = r.query;
+					}
+					t.authority = base.authority;
+				}
+				t.scheme = base.scheme;
+			}
+			t.fragment = r.fragment;
+
+			return t;
+		};
+
+		function removeDotSegments(path) {
+			var out = '';
+			while(path) {
+				if(path.substr(0,3)==='../' || path.substr(0,2)==='./') {
+					path = path.replace(/^\.+/,'').substr(1);
+				} else if(path.substr(0,3)==='/./' || path==='/.') {
+					path = '/'+path.substr(3);
+				} else if(path.substr(0,4)==='/../' || path==='/..') {
+					path = '/'+path.substr(4);
+					out = out.replace(/\/?[^\/]*$/, '');
+				} else if(path==='.' || path==='..') {
+					path = '';
+				} else {
+					var rm = path.match(/^\/?[^\/]*/)[0];
+					path = path.substr(rm.length);
+					out = out + rm;
+				}
+			}
+			return out;
+		}
+
+		if(uri) {
+			this.parse(uri);
+		}
+
+	},
+
+
+	//
+	// Usage example:
+	// var myColor = new jscolor.color(myInputElement)
+	//
+
+	color : function(target, prop) {
+
+
+		this.required = true; // refuse empty values?
+		this.adjust = true; // adjust value to uniform notation?
+		this.hash = false; // prefix color with # symbol?
+		this.caps = true; // uppercase?
+		this.slider = true; // show the value/saturation slider?
+		this.valueElement = target; // value holder
+		this.styleElement = target; // where to reflect current color
+		this.onImmediateChange = null; // onchange callback (can be either string or function)
+		this.hsv = [0, 0, 1]; // read-only  0-6, 0-1, 0-1
+		this.rgb = [1, 1, 1]; // read-only  0-1, 0-1, 0-1
+		this.minH = 0; // read-only  0-6
+		this.maxH = 6; // read-only  0-6
+		this.minS = 0; // read-only  0-1
+		this.maxS = 1; // read-only  0-1
+		this.minV = 0; // read-only  0-1
+		this.maxV = 1; // read-only  0-1
+
+		this.pickerOnfocus = true; // display picker on focus?
+		this.pickerMode = 'HSV'; // HSV | HVS
+		this.pickerPosition = 'bottom'; // left | right | top | bottom
+		this.pickerSmartPosition = true; // automatically adjust picker position when necessary
+		this.pickerButtonHeight = 20; // px
+		this.pickerClosable = false;
+		this.pickerCloseText = 'Close';
+		this.pickerButtonColor = 'ButtonText'; // px
+		this.pickerFace = 10; // px
+		this.pickerFaceColor = 'ThreeDFace'; // CSS color
+		this.pickerBorder = 1; // px
+		this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight'; // CSS color
+		this.pickerInset = 1; // px
+		this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow'; // CSS color
+		this.pickerZIndex = 10000;
+
+
+		for(var p in prop) {
+			if(prop.hasOwnProperty(p)) {
+				this[p] = prop[p];
+			}
+		}
+
+
+		this.hidePicker = function() {
+			if(isPickerOwner()) {
+				removePicker();
+			}
+		};
+
+
+		this.showPicker = function() {
+			if(!isPickerOwner()) {
+				var tp = jscolor.getElementPos(target); // target pos
+				var ts = jscolor.getElementSize(target); // target size
+				var vp = jscolor.getViewPos(); // view pos
+				var vs = jscolor.getViewSize(); // view size
+				var ps = getPickerDims(this); // picker size
+				var a, b, c;
+				switch(this.pickerPosition.toLowerCase()) {
+					case 'left': a=1; b=0; c=-1; break;
+					case 'right':a=1; b=0; c=1; break;
+					case 'top':  a=0; b=1; c=-1; break;
+					default:     a=0; b=1; c=1; break;
+				}
+				var l = (ts[b]+ps[b])/2;
+
+				// picker pos
+				if (!this.pickerSmartPosition) {
+					var pp = [
+						tp[a],
+						tp[b]+ts[b]-l+l*c
+					];
+				} else {
+					var pp = [
+						-vp[a]+tp[a]+ps[a] > vs[a] ?
+							(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
+							tp[a],
+						-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
+							(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
+							(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
+					];
+				}
+				drawPicker(pp[a], pp[b]);
+			}
+		};
+
+
+		this.importColor = function() {
+			if(!valueElement) {
+				this.exportColor();
+			} else {
+				if(!this.adjust) {
+					if(!this.fromString(valueElement.value, leaveValue)) {
+						styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+						styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+						styleElement.style.color = styleElement.jscStyle.color;
+						this.exportColor(leaveValue | leaveStyle);
+					}
+				} else if(!this.required && /^\s*$/.test(valueElement.value)) {
+					valueElement.value = '';
+					styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+					styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+					styleElement.style.color = styleElement.jscStyle.color;
+					this.exportColor(leaveValue | leaveStyle);
+
+				} else if(this.fromString(valueElement.value)) {
+					// OK
+				} else {
+					this.exportColor();
+				}
+			}
+		};
+
+
+		this.exportColor = function(flags) {
+			if(!(flags & leaveValue) && valueElement) {
+				var value = this.toString();
+				if(this.caps) { value = value.toUpperCase(); }
+				if(this.hash) { value = '#'+value; }
+				valueElement.value = value;
+			}
+			if(!(flags & leaveStyle) && styleElement) {
+				styleElement.style.backgroundImage = "none";
+				styleElement.style.backgroundColor =
+					'#'+this.toString();
+				styleElement.style.color =
+					0.213 * this.rgb[0] +
+					0.715 * this.rgb[1] +
+					0.072 * this.rgb[2]
+					< 0.5 ? '#FFF' : '#000';
+			}
+			if(!(flags & leavePad) && isPickerOwner()) {
+				redrawPad();
+			}
+			if(!(flags & leaveSld) && isPickerOwner()) {
+				redrawSld();
+			}
+		};
+
+
+		this.fromHSV = function(h, s, v, flags) { // null = don't change
+			if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
+			if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
+			if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
+
+			this.rgb = HSV_RGB(
+				h===null ? this.hsv[0] : (this.hsv[0]=h),
+				s===null ? this.hsv[1] : (this.hsv[1]=s),
+				v===null ? this.hsv[2] : (this.hsv[2]=v)
+			);
+
+			this.exportColor(flags);
+		};
+
+
+		this.fromRGB = function(r, g, b, flags) { // null = don't change
+			if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
+			if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
+			if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
+
+			var hsv = RGB_HSV(
+				r===null ? this.rgb[0] : r,
+				g===null ? this.rgb[1] : g,
+				b===null ? this.rgb[2] : b
+			);
+			if(hsv[0] !== null) {
+				this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
+			}
+			if(hsv[2] !== 0) {
+				this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
+			}
+			this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
+
+			// update RGB according to final HSV, as some values might be trimmed
+			var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
+			this.rgb[0] = rgb[0];
+			this.rgb[1] = rgb[1];
+			this.rgb[2] = rgb[2];
+
+			this.exportColor(flags);
+		};
+
+
+		this.fromString = function(hex, flags) {
+			var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
+			if(!m) {
+				return false;
+			} else {
+				if(m[1].length === 6) { // 6-char notation
+					this.fromRGB(
+						parseInt(m[1].substr(0,2),16) / 255,
+						parseInt(m[1].substr(2,2),16) / 255,
+						parseInt(m[1].substr(4,2),16) / 255,
+						flags
+					);
+				} else { // 3-char notation
+					this.fromRGB(
+						parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
+						parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
+						parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
+						flags
+					);
+				}
+				return true;
+			}
+		};
+
+
+		this.toString = function() {
+			return (
+				(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
+				(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
+				(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
+			);
+		};
+
+
+		function RGB_HSV(r, g, b) {
+			var n = Math.min(Math.min(r,g),b);
+			var v = Math.max(Math.max(r,g),b);
+			var m = v - n;
+			if(m === 0) { return [ null, 0, v ]; }
+			var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
+			return [ h===6?0:h, m/v, v ];
+		}
+
+
+		function HSV_RGB(h, s, v) {
+			if(h === null) { return [ v, v, v ]; }
+			var i = Math.floor(h);
+			var f = i%2 ? h-i : 1-(h-i);
+			var m = v * (1 - s);
+			var n = v * (1 - s*f);
+			switch(i) {
+				case 6:
+				case 0: return [v,n,m];
+				case 1: return [n,v,m];
+				case 2: return [m,v,n];
+				case 3: return [m,n,v];
+				case 4: return [n,m,v];
+				case 5: return [v,m,n];
+			}
+		}
+
+
+		function removePicker() {
+			delete jscolor.picker.owner;
+			document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
+		}
+
+
+		function drawPicker(x, y) {
+			if(!jscolor.picker) {
+				jscolor.picker = {
+					box : document.createElement('div'),
+					boxB : document.createElement('div'),
+					pad : document.createElement('div'),
+					padB : document.createElement('div'),
+					padM : document.createElement('div'),
+					sld : document.createElement('div'),
+					sldB : document.createElement('div'),
+					sldM : document.createElement('div'),
+					btn : document.createElement('div'),
+					btnS : document.createElement('span'),
+					btnT : document.createTextNode(THIS.pickerCloseText)
+				};
+				for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) {
+					var seg = document.createElement('div');
+					seg.style.height = segSize+'px';
+					seg.style.fontSize = '1px';
+					seg.style.lineHeight = '0';
+					jscolor.picker.sld.appendChild(seg);
+				}
+				jscolor.picker.sldB.appendChild(jscolor.picker.sld);
+				jscolor.picker.box.appendChild(jscolor.picker.sldB);
+				jscolor.picker.box.appendChild(jscolor.picker.sldM);
+				jscolor.picker.padB.appendChild(jscolor.picker.pad);
+				jscolor.picker.box.appendChild(jscolor.picker.padB);
+				jscolor.picker.box.appendChild(jscolor.picker.padM);
+				jscolor.picker.btnS.appendChild(jscolor.picker.btnT);
+				jscolor.picker.btn.appendChild(jscolor.picker.btnS);
+				jscolor.picker.box.appendChild(jscolor.picker.btn);
+				jscolor.picker.boxB.appendChild(jscolor.picker.box);
+			}
+
+			var p = jscolor.picker;
+
+			// controls interaction
+			p.box.onmouseup =
+			p.box.onmouseout = function() { target.focus(); };
+			p.box.onmousedown = function() { abortBlur=true; };
+			p.box.onmousemove = function(e) {
+				if (holdPad || holdSld) {
+					holdPad && setPad(e);
+					holdSld && setSld(e);
+					if (document.selection) {
+						document.selection.empty();
+					} else if (window.getSelection) {
+						window.getSelection().removeAllRanges();
+					}
+					dispatchImmediateChange();
+				}
+			};
+			if('ontouchstart' in window) { // if touch device
+				var handle_touchmove = function(e) {
+					var event={
+						'offsetX': e.touches[0].pageX-touchOffset.X,
+						'offsetY': e.touches[0].pageY-touchOffset.Y
+					};
+					if (holdPad || holdSld) {
+						holdPad && setPad(event);
+						holdSld && setSld(event);
+						dispatchImmediateChange();
+					}
+					e.stopPropagation(); // prevent move "view" on broswer
+					e.preventDefault(); // prevent Default - Android Fix (else android generated only 1-2 touchmove events)
+				};
+				p.box.removeEventListener('touchmove', handle_touchmove, false)
+				p.box.addEventListener('touchmove', handle_touchmove, false)
+			}
+			p.padM.onmouseup =
+			p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change'); } };
+			p.padM.onmousedown = function(e) {
+				// if the slider is at the bottom, move it up
+				switch(modeID) {
+					case 0: if (THIS.hsv[2] === 0) { THIS.fromHSV(null, null, 1.0); }; break;
+					case 1: if (THIS.hsv[1] === 0) { THIS.fromHSV(null, 1.0, null); }; break;
+				}
+				holdSld=false;
+				holdPad=true;
+				setPad(e);
+				dispatchImmediateChange();
+			};
+			if('ontouchstart' in window) {
+				p.padM.addEventListener('touchstart', function(e) {
+					touchOffset={
+						'X': e.target.offsetParent.offsetLeft,
+						'Y': e.target.offsetParent.offsetTop
+					};
+					this.onmousedown({
+						'offsetX':e.touches[0].pageX-touchOffset.X,
+						'offsetY':e.touches[0].pageY-touchOffset.Y
+					});
+				});
+			}
+			p.sldM.onmouseup =
+			p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change'); } };
+			p.sldM.onmousedown = function(e) {
+				holdPad=false;
+				holdSld=true;
+				setSld(e);
+				dispatchImmediateChange();
+			};
+			if('ontouchstart' in window) {
+				p.sldM.addEventListener('touchstart', function(e) {
+					touchOffset={
+						'X': e.target.offsetParent.offsetLeft,
+						'Y': e.target.offsetParent.offsetTop
+					};
+					this.onmousedown({
+						'offsetX':e.touches[0].pageX-touchOffset.X,
+						'offsetY':e.touches[0].pageY-touchOffset.Y
+					});
+				});
+			}
+
+			// picker
+			var dims = getPickerDims(THIS);
+			p.box.style.width = dims[0] + 'px';
+			p.box.style.height = dims[1] + 'px';
+
+			// picker border
+			p.boxB.style.position = 'absolute';
+			p.boxB.style.clear = 'both';
+			p.boxB.style.left = x+'px';
+			p.boxB.style.top = y+'px';
+			p.boxB.style.zIndex = THIS.pickerZIndex;
+			p.boxB.style.border = THIS.pickerBorder+'px solid';
+			p.boxB.style.borderColor = THIS.pickerBorderColor;
+			p.boxB.style.background = THIS.pickerFaceColor;
+
+			// pad image
+			p.pad.style.width = jscolor.images.pad[0]+'px';
+			p.pad.style.height = jscolor.images.pad[1]+'px';
+
+			// pad border
+			p.padB.style.position = 'absolute';
+			p.padB.style.left = THIS.pickerFace+'px';
+			p.padB.style.top = THIS.pickerFace+'px';
+			p.padB.style.border = THIS.pickerInset+'px solid';
+			p.padB.style.borderColor = THIS.pickerInsetColor;
+
+			// pad mouse area
+			p.padM.style.position = 'absolute';
+			p.padM.style.left = '0';
+			p.padM.style.top = '0';
+			p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px';
+			p.padM.style.height = p.box.style.height;
+			p.padM.style.cursor = 'crosshair';
+
+			// slider image
+			p.sld.style.overflow = 'hidden';
+			p.sld.style.width = jscolor.images.sld[0]+'px';
+			p.sld.style.height = jscolor.images.sld[1]+'px';
+
+			// slider border
+			p.sldB.style.display = THIS.slider ? 'block' : 'none';
+			p.sldB.style.position = 'absolute';
+			p.sldB.style.right = THIS.pickerFace+'px';
+			p.sldB.style.top = THIS.pickerFace+'px';
+			p.sldB.style.border = THIS.pickerInset+'px solid';
+			p.sldB.style.borderColor = THIS.pickerInsetColor;
+
+			// slider mouse area
+			p.sldM.style.display = THIS.slider ? 'block' : 'none';
+			p.sldM.style.position = 'absolute';
+			p.sldM.style.right = '0';
+			p.sldM.style.top = '0';
+			p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px';
+			p.sldM.style.height = p.box.style.height;
+			try {
+				p.sldM.style.cursor = 'pointer';
+			} catch(eOldIE) {
+				p.sldM.style.cursor = 'hand';
+			}
+
+			// "close" button
+			function setBtnBorder() {
+				var insetColors = THIS.pickerInsetColor.split(/\s+/);
+				var pickerOutsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
+				p.btn.style.borderColor = pickerOutsetColor;
+			}
+			p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
+			p.btn.style.position = 'absolute';
+			p.btn.style.left = THIS.pickerFace + 'px';
+			p.btn.style.bottom = THIS.pickerFace + 'px';
+			p.btn.style.padding = '0 15px';
+			p.btn.style.height = '18px';
+			p.btn.style.border = THIS.pickerInset + 'px solid';
+			setBtnBorder();
+			p.btn.style.color = THIS.pickerButtonColor;
+			p.btn.style.font = '12px sans-serif';
+			p.btn.style.textAlign = 'center';
+			try {
+				p.btn.style.cursor = 'pointer';
+			} catch(eOldIE) {
+				p.btn.style.cursor = 'hand';
+			}
+			p.btn.onmousedown = function () {
+				THIS.hidePicker();
+			};
+			p.btnS.style.lineHeight = p.btn.style.height;
+
+			// load images in optimal order
+			switch(modeID) {
+				case 0: var padImg = 'hs.png'; break;
+				case 1: var padImg = 'hv.png'; break;
+			}
+			p.padM.style.backgroundImage = "url('"+jscolor.getDir()+"cross.gif')";
+			p.padM.style.backgroundRepeat = "no-repeat";
+			p.sldM.style.backgroundImage = "url('"+jscolor.getDir()+"arrow.gif')";
+			p.sldM.style.backgroundRepeat = "no-repeat";
+			p.pad.style.backgroundImage = "url('"+jscolor.getDir()+padImg+"')";
+			p.pad.style.backgroundRepeat = "no-repeat";
+			p.pad.style.backgroundPosition = "0 0";
+
+			// place pointers
+			redrawPad();
+			redrawSld();
+
+			jscolor.picker.owner = THIS;
+			document.getElementsByTagName('body')[0].appendChild(p.boxB);
+		}
+
+
+		function getPickerDims(o) {
+			var dims = [
+				2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[0] +
+					(o.slider ? 2*o.pickerInset + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
+				o.pickerClosable ?
+					4*o.pickerInset + 3*o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
+					2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[1]
+			];
+			return dims;
+		}
+
+
+		function redrawPad() {
+			// redraw the pad pointer
+			switch(modeID) {
+				case 0: var yComponent = 1; break;
+				case 1: var yComponent = 2; break;
+			}
+			var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1));
+			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1));
+			jscolor.picker.padM.style.backgroundPosition =
+				(THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
+				(THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px';
+
+			// redraw the slider image
+			var seg = jscolor.picker.sld.childNodes;
+
+			switch(modeID) {
+				case 0:
+					var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
+					for(var i=0; i<seg.length; i+=1) {
+						seg[i].style.backgroundColor = 'rgb('+
+							(rgb[0]*(1-i/seg.length)*100)+'%,'+
+							(rgb[1]*(1-i/seg.length)*100)+'%,'+
+							(rgb[2]*(1-i/seg.length)*100)+'%)';
+					}
+					break;
+				case 1:
+					var rgb, s, c = [ THIS.hsv[2], 0, 0 ];
+					var i = Math.floor(THIS.hsv[0]);
+					var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i);
+					switch(i) {
+						case 6:
+						case 0: rgb=[0,1,2]; break;
+						case 1: rgb=[1,0,2]; break;
+						case 2: rgb=[2,0,1]; break;
+						case 3: rgb=[2,1,0]; break;
+						case 4: rgb=[1,2,0]; break;
+						case 5: rgb=[0,2,1]; break;
+					}
+					for(var i=0; i<seg.length; i+=1) {
+						s = 1 - 1/(seg.length-1)*i;
+						c[1] = c[0] * (1 - s*f);
+						c[2] = c[0] * (1 - s);
+						seg[i].style.backgroundColor = 'rgb('+
+							(c[rgb[0]]*100)+'%,'+
+							(c[rgb[1]]*100)+'%,'+
+							(c[rgb[2]]*100)+'%)';
+					}
+					break;
+			}
+		}
+
+
+		function redrawSld() {
+			// redraw the slider pointer
+			switch(modeID) {
+				case 0: var yComponent = 2; break;
+				case 1: var yComponent = 1; break;
+			}
+			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1));
+			jscolor.picker.sldM.style.backgroundPosition =
+				'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px';
+		}
+
+
+		function isPickerOwner() {
+			return jscolor.picker && jscolor.picker.owner === THIS;
+		}
+
+
+		function blurTarget() {
+			if(valueElement === target) {
+				THIS.importColor();
+			}
+			if(THIS.pickerOnfocus) {
+				THIS.hidePicker();
+			}
+		}
+
+
+		function blurValue() {
+			if(valueElement !== target) {
+				THIS.importColor();
+			}
+		}
+
+
+		function setPad(e) {
+			var mpos = jscolor.getRelMousePos(e);
+			var x = mpos.x - THIS.pickerFace - THIS.pickerInset;
+			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
+			switch(modeID) {
+				case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break;
+				case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break;
+			}
+		}
+
+
+		function setSld(e) {
+			var mpos = jscolor.getRelMousePos(e);
+			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
+			switch(modeID) {
+				case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break;
+				case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break;
+			}
+		}
+
+
+		function dispatchImmediateChange() {
+			if (THIS.onImmediateChange) {
+				var callback;
+				if (typeof THIS.onImmediateChange === 'string') {
+					callback = new Function (THIS.onImmediateChange);
+				} else {
+					callback = THIS.onImmediateChange;
+				}
+				callback.call(THIS);
+			}
+		}
+
+
+		var THIS = this;
+		var modeID = this.pickerMode.toLowerCase()==='hvs' ? 1 : 0;
+		var abortBlur = false;
+		var
+			valueElement = jscolor.fetchElement(this.valueElement),
+			styleElement = jscolor.fetchElement(this.styleElement);
+		var
+			holdPad = false,
+			holdSld = false,
+			touchOffset = {};
+		var
+			leaveValue = 1<<0,
+			leaveStyle = 1<<1,
+			leavePad = 1<<2,
+			leaveSld = 1<<3;
+
+		jscolor.isColorAttrSupported = false;
+		var el = document.createElement('input');
+		if(el.setAttribute) {
+			el.setAttribute('type', 'color');
+			if(el.type.toLowerCase() == 'color') {
+				jscolor.isColorAttrSupported = true;
+			}
+		}
+
+		// target
+		jscolor.addEvent(target, 'focus', function() {
+			if(THIS.pickerOnfocus) { THIS.showPicker(); }
+		});
+		jscolor.addEvent(target, 'blur', function() {
+			if(!abortBlur) {
+				window.setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false; }, 0);
+			} else {
+				abortBlur = false;
+			}
+		});
+
+		// valueElement
+		if(valueElement) {
+			var updateField = function() {
+				THIS.fromString(valueElement.value, leaveValue);
+				dispatchImmediateChange();
+			};
+			jscolor.addEvent(valueElement, 'keyup', updateField);
+			jscolor.addEvent(valueElement, 'input', updateField);
+			jscolor.addEvent(valueElement, 'blur', blurValue);
+			valueElement.setAttribute('autocomplete', 'off');
+		}
+
+		// styleElement
+		if(styleElement) {
+			styleElement.jscStyle = {
+				backgroundImage : styleElement.style.backgroundImage,
+				backgroundColor : styleElement.style.backgroundColor,
+				color : styleElement.style.color
+			};
+		}
+
+		// require images
+		switch(modeID) {
+			case 0: jscolor.requireImage('hs.png'); break;
+			case 1: jscolor.requireImage('hv.png'); break;
+		}
+		jscolor.requireImage('cross.gif');
+		jscolor.requireImage('arrow.gif');
+
+		this.importColor();
+	}
+
+};
+
+
+jscolor.install();
diff --git a/web_widget_color/static/src/css/widget.css b/web_widget_color/static/src/css/widget.css
new file mode 100644
index 00000000..06201af1
--- /dev/null
+++ b/web_widget_color/static/src/css/widget.css
@@ -0,0 +1,23 @@
+.openerp .oe_form .oe_form_field_color input {
+    width: 100%;
+}
+
+.openerp .oe_form .oe_form_field_color div {
+    border: 1px solid;
+    display: inline-block;
+    height: 14px;
+    margin-right: 10px;
+    position: relative;
+    top: 3px;
+    width: 40px;
+}
+
+.oe_list_field_color div {
+    border: 1px solid;
+    display: inline-block;
+    height: 14px;
+    margin-right: 10px;
+    position: relative;
+    top: 3px;
+    width: 40px;
+}
diff --git a/web_widget_color/static/src/img/form_view.png b/web_widget_color/static/src/img/form_view.png
new file mode 100644
index 00000000..db1026b9
Binary files /dev/null and b/web_widget_color/static/src/img/form_view.png differ
diff --git a/web_widget_color/static/src/img/icon.png b/web_widget_color/static/src/img/icon.png
new file mode 100644
index 00000000..540f72db
Binary files /dev/null and b/web_widget_color/static/src/img/icon.png differ
diff --git a/web_widget_color/static/src/img/list_view.png b/web_widget_color/static/src/img/list_view.png
new file mode 100644
index 00000000..f4965fd5
Binary files /dev/null and b/web_widget_color/static/src/img/list_view.png differ
diff --git a/web_widget_color/static/src/img/picker.png b/web_widget_color/static/src/img/picker.png
new file mode 100644
index 00000000..4c3f5e07
Binary files /dev/null and b/web_widget_color/static/src/img/picker.png differ
diff --git a/web_widget_color/static/src/js/widget.js b/web_widget_color/static/src/js/widget.js
new file mode 100644
index 00000000..44299752
--- /dev/null
+++ b/web_widget_color/static/src/js/widget.js
@@ -0,0 +1,59 @@
+openerp.web_widget_color = function (instance) {
+
+    var _super_getDir = jscolor.getDir.prototype;
+    jscolor.getDir = function () {
+        var dir = _super_getDir.constructor();
+        if (dir.indexOf('web_widget_color') === -1) {
+            jscolor.dir = 'web_widget_color/static/lib/jscolor/';
+        }
+        return jscolor.dir;
+    };
+
+    instance.web.form.widgets.add('color', 'instance.web.form.FieldColor');
+
+    instance.web.search.fields.add('color', 'instance.web.search.CharField');
+
+    instance.web.form.FieldColor = instance.web.form.FieldChar.extend({
+        template: 'FieldColor',
+        widget_class: 'oe_form_field_color',
+        is_syntax_valid: function () {
+            var $input = this.$('input');
+            if (!this.get("effective_readonly") && $input.size() > 0) {
+                var val = $input.val();
+                var isOk = /^#[0-9A-F]{6}$/i.test(val);
+                if (!isOk) {
+                    return false;
+                }
+                try {
+                    this.parse_value(this.$('input').val(), '');
+                    return true;
+                } catch (e) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        render_value: function () {
+            var show_value = this.format_value(this.get('value'), '');
+            if (!this.get("effective_readonly")) {
+                var $input = this.$el.find('input');
+                $input.val(show_value);
+                $input.css("background-color", show_value)
+                jscolor.init(this.$el[0]);
+            } else {
+                this.$(".oe_form_char_content").text(show_value);
+                this.$('div').css("background-color", show_value)
+            }
+        }
+    });
+
+    /*
+     * Init jscolor for each editable mode on view form
+     */
+    instance.web.FormView.include({
+        to_edit_mode: function () {
+            this._super();
+            jscolor.init(this.$el[0]);
+        }
+    });
+};
diff --git a/web_widget_color/static/src/xml/widget.xml b/web_widget_color/static/src/xml/widget.xml
new file mode 100644
index 00000000..c62ae1cf
--- /dev/null
+++ b/web_widget_color/static/src/xml/widget.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="FieldColor">
+        <span t-att-class="'oe_form_field '+widget.widget_class" t-att-style="widget.node.attrs.style">
+            <t t-if="!widget.get('effective_readonly')">
+                <input type="text"
+                       t-att-id="widget.id_for_label"
+                       t-att-tabindex="widget.node.attrs.tabindex"
+                       t-att-autofocus="widget.node.attrs.autofocus"
+                       t-att-placeholder="widget.node.attrs.placeholder"
+                       t-att-maxlength="widget.field.size"
+                       class="color {hash:true}"
+                        />
+            </t>
+            <t t-if="widget.get('effective_readonly')">
+                <div/>
+                <span class="oe_form_char_content"></span>
+            </t>
+        </span>
+    </t>
+    <tr t-extend="ListView.row">
+        <t t-jquery="t td t" t-operation="replace"><t t-if="column.widget =='color' || column.type == 'color'"><div t-att-style="'background-color:' + render_cell(record, column)"/></t><t t-raw="render_cell(record, column)"/></t>
+    </tr>
+</templates>