FSN#35338 Alle CodeCharge schermen herschrijven naar gewoon ASP II

svn path=/Website/trunk/; revision=28429
2016-03-10 12:16:01 +00:00
parent 20765d360e
commit 8b9288d303
31 changed files with 2769 additions and 26 deletions
--- a/APPL/API2/api2.inc
+++ b/APPL/API2/api2.inc
@@ -56,8 +56,17 @@ api2 = {
                                var bit = fld.bits[b];
                                if (bit.typ == "check")
                                {
-                                    var invert = bit.invert;
-                                    val += ((Request.Form(bit.name).count==1)?(invert?0:bit.mask):(invert?bit.mask:0));
+                                    for (var r=0; r < bit.radios.length; r++)
+                                    {
+                                        var radio = bit.radios[r];
+                                        var invert = radio.invert;
+
+                                        val += ((Request.Form(radio.name).count==1)?(invert?0:radio.mask):(invert?radio.mask:0));
+                                    }
+                                }
+                                else if (bit.typ == "radio")
+                                {
+                                    val += parseInt(Request.Form(bit.name));
                                }
                                else if (bit.typ == "LOV")
                                {
--- a/APPL/API2/model_cad_label.inc
+++ b/APPL/API2/model_cad_label.inc
@@ -0,0 +1,168 @@
+<% /*
+    $Revision$
+    $Id$
+
+    File:           model_cad_label.inc
+
+    Description:    Vanuit CodeCharge gegenereerd model voor cad_label
+
+    Context:
+
+    Notes:
+*/
+%>
+<%
+
+function model_cad_label()
+{
+    this.table = "cad_label";
+    this.primary = "cad_label_key";
+    this.records_name = "cad_labels";
+    this.record_name = "cad_label";
+    this.autfunction = "WEB_CADMGT";
+    this.record_title = L("cad_label");
+    this.records_title = L("cad_label_m");
+
+
+    this.fields = {
+        "id": {
+            "dbs": "cad_label_key",
+            "label": "Key",
+            "typ": "key",
+            "required": true,
+            "filter": "exact",
+            "seq": "cad_s_cad_label_key"
+        },
+        "name": {
+            "dbs": "cad_label_omschrijving",
+            "label": L("cad_label_omschrijving"),
+            "typ": "varchar",
+            "translate": true
+        },
+        "view_name": {
+            "dbs": "cad_label_view",
+            "label": L("cad_label_view"),
+            "typ": "varchar"
+        },
+        "size": {
+            "dbs": "cad_label_size",
+            "label": L("cad_label_size"),
+            "typ": "key",
+            "defaultvalue": "800"
+        },
+        "authorization": {
+            "dbs": "fac_functie_key",
+            "label": L("fac_functie_key"),
+            "typ": "key",
+            "foreign": {
+                "tbl": "(SELECT f.fac_functie_key"
+                     + "      , f.fac_functie_code || ': ' || f.fac_functie_omschrijving fac_functie_omschrijving"
+                     + "   FROM fac_functie f"
+                     + "  ORDER BY 2)",
+                "key": "fac_functie_key",
+                "desc": "fac_functie_omschrijving"
+            },
+            "LOVinit": ""
+        },
+        "type_place": {
+            "dbs": "plaats.waar",
+            "label": L("cad_label_type_waar"),
+            "typ": "varchar",
+            "hidden_fld": true,
+            "LOV": type_place_LOV(),
+            "filter": "exact"
+        },
+        "type_situation": {
+            "dbs": "plaats.situatie",
+            "label": L("cad_label_type_situatie"),
+            "typ": "varchar",
+            "hidden_fld": true,
+            "LOV": type_situation_LOV(),
+            "filter": "exact"
+        },
+        "label_type": {
+            "dbs": "cad_label_type",
+            "label": L("cad_label_type"),
+            "typ": "number",
+            "bits": [
+                {
+                    "name": "waar",
+                    "label": L("cad_label_type_waar"),
+                    "typ": "radio",
+                    "mask": 27,
+                    "radios": [
+                        {
+                            "mask": 1,
+                            "label": L("cad_label_type_bi_rui")
+                        },
+                        {
+                            "mask": 9,
+                            "label": L("cad_label_type_bi_wp")
+                        },
+                        {
+                            "mask": 17,
+                            "label": L("cad_label_type_bi_obj")
+                        },
+                        {
+                            "mask": 2,
+                            "label": L("cad_label_type_bu_ts")
+                        },
+                        {
+                            "mask": 18,
+                            "label": L("cad_label_type_bu_obj")
+                        }
+                    ]
+                },
+                {
+                    "name": "situatie",
+                    "label": L("cad_label_type_situatie"),
+                    "typ": "radio",
+                    "mask": 4,
+                    "radios": [
+                        {
+                            "mask": 0,
+                            "label": L("cad_label_type_si_act")
+                        },
+                        {
+                            "mask": 4,
+                            "label": L("cad_label_type_si_sce")
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+
+
+    var ext_sql = "(SELECT BITAND(cad_label_type, 27) waar"
+                + "      , BITAND(cad_label_type,  4) situatie"
+                + "      , cad_label_key"
+                + "   FROM cad_label) plaats ";
+
+
+    this.REST_GET    = generic_REST_GET(this, {
+        "GET": {
+            "tables": [ext_sql],
+            "wheres": ["cad_label.cad_label_key = plaats.cad_label_key"]
+        }
+    });
+    this.REST_POST   = generic_REST_POST(this);
+    this.REST_PUT    = generic_REST_PUT(this);
+    this.REST_DELETE = generic_REST_DELETE(this);
+
+
+    function type_place_LOV()
+    {
+        return "1;"  + L("cad_label_type_bi_rui")
+            + ";9;"  + L("cad_label_type_bi_wp")
+            + ";17;" + L("cad_label_type_bi_obj")
+            + ";2;"  + L("cad_label_type_bu_ts")
+            + ";18;" + L("cad_label_type_bu_obj");
+    }
+    function type_situation_LOV()
+    {
+        return "0;" + L("cad_label_type_si_act")
+            + ";4;" + L("cad_label_type_si_sce");
+    }
+}
+%>
--- a/APPL/API2/model_cad_legenda.inc
+++ b/APPL/API2/model_cad_legenda.inc
@@ -0,0 +1,65 @@
+<% /*
+    $Revision$
+    $Id$
+
+    File:           model_cad_legenda.inc
+
+    Description:    Vanuit CodeCharge gegenereerd model voor cad_legenda
+
+    Context:
+
+    Notes:
+*/
+%>
+<!-- #include file="../api2/model_cad_legendawaarde.inc" -->
+<%
+
+function model_cad_legenda()
+{
+    this.table = "cad_legenda";
+    this.primary = "cad_legenda_key";
+    this.records_name = "cad_legendas";
+    this.record_name = "cad_legenda";
+    this.autfunction = "WEB_CADMGT";
+    this.record_title = L("cad_legenda");
+    this.records_title = L("cad_legenda_m");
+
+
+    this.fields = {
+        "id": {
+            "dbs": "cad_legenda_key",
+            "label": "Key",
+            "typ": "key",
+            "required": true,
+            "filter": "exact",
+            "seq": "cad_s_cad_legenda_key"
+        },
+        "name": {
+            "dbs": "cad_legenda_omschrijving",
+            "label": L("cad_legenda_omschrijving"),
+            "typ": "varchar",
+            "translate": true,
+            "filter": "like"
+        },
+        "exact": {
+            "dbs": "cad_legenda_discreet",
+            "label": L("cad_legenda_discreet"),
+            "typ": "check",
+            "defaultvalue": "1"
+        }
+    };
+
+    this.includes = {
+        "cad_values": {
+            "model": new model_cad_legendawaarde(),
+            "joinfield": "legenda"
+        }
+    };
+
+
+    this.REST_GET    = generic_REST_GET(this);
+    this.REST_POST   = generic_REST_POST(this);
+    this.REST_PUT    = generic_REST_PUT(this);
+    this.REST_DELETE = generic_REST_DELETE(this);
+}
+%>
--- a/APPL/API2/model_cad_legendawaarde.inc
+++ b/APPL/API2/model_cad_legendawaarde.inc
@@ -0,0 +1,132 @@
+<% /*
+    $Revision$
+    $Id$
+
+    File:           model_cad_legendawaarde.inc
+
+    Description:    Vanuit CodeCharge gegenereerd model voor cad_legendawaarde
+
+    Context:
+
+    Notes:
+*/
+%>
+<%
+
+function model_cad_legendawaarde()
+{
+    this.table = "cad_legendawaarde";
+    this.primary = "cad_legendawaarde_key";
+    this.records_name = "cad_legendawaardes";
+    this.record_name = "cad_legendawaarde";
+    this.autfunction = "WEB_CADMGT";
+    this.record_title = L("cad_legendawaarde");
+    this.records_title = L("cad_legendawaarde_m");
+
+
+    this.fields = {
+        "id": {
+            "dbs": "cad_legendawaarde_key",
+            "label": "Key",
+            "typ": "key",
+            "required": true,
+            "filter": "exact",
+            "seq": "cad_s_cad_legendawaarde_key"
+        },
+        "legenda": {
+            "dbs": "cad_legenda_key",
+            "label": L("cad_legenda"),
+            "typ": "key",
+            "foreign": {
+                "tbl": "cad_legenda",
+                "key": "cad_legenda_key",
+                "desc": "cad_legenda_omschrijving"
+            }
+        },
+        "value_name": {
+            "dbs": "cad_legendawaarde_value",
+            "label": L("cad_legendawaarde_value"),
+            "typ": "varchar",
+            "translate": true
+        },
+        "value_desc": {
+            "dbs": "cad_legendawaarde_omschr",
+            "label": L("cad_legendawaarde_omschr"),
+            "typ": "varchar",
+            "translate": true
+        },
+        "value_rgb": {
+            "dbs": "cad_legendawaarde_rgb",
+            "label": L("cad_legendawaarde_rgb"),
+            "typ": "varchar",
+            "defaultvalue": "FFFFFF",
+            "listfunction": fnshowcolor
+        }
+    };
+
+
+    this.list = {
+        "columns": [
+            "id",
+            "legenda",
+            "value_name",
+            "value_desc",
+            "value_rgb"
+        ]
+    };
+    this.search = {
+        "autosearch": true
+    };
+    this.edit = {
+        "requires": {
+            "js": [
+                "../localscripts/colorpicker/js/evol.colorpicker.min.js",
+                "../mgt/cad_legendawaarde.js"
+            ],
+            "css": [
+            	"../localscripts/colorpicker/css/evol.colorpicker.min.css",
+            	"../localscripts/colorpicker/css/colorpicker.css"
+            ]
+        },
+        "modal": true
+    };
+
+    function fnshowcolor(oRs)
+    {
+        var kleur = oRs.Fields("value_rgb").Value;
+
+        return "<div style='width:20px; background-color:#" + safe.html(kleur) + "'><span style='padding:25px'>" + safe.html(kleur) + "</span></div>";
+    }
+
+    this.hook_pre_edit = function (obj, fld)
+    {
+        // Niet-model velden toevoegen.
+        fld._color = {
+            "dbs": "",
+            "label": "",
+            "typ": "button"
+        };
+        var color_panel_def = '<div id="color_select"></div><br/>'
+                            + '<div class="">'
+                            + '<button id="btn_cp_accept">' + L("cad_legendawaarde_accept") + '</button>'
+                            + '<button id="btn_cp_hide">' + L("cad_legendawaarde_hide") + '</button>'
+                            + '</div>';
+        fld.color_panel = {
+            "dbs": "",
+            "label": "",
+            "typ": "div",
+            "defaultvalue": color_panel_def,
+            "hidden": true
+        };
+
+        var kleur = '<span style="border:1px;width:16px;display: inline-block;background-color:#' + obj.value_rgb + '">&nbsp;</span>'
+                  + '&nbsp;' + L("cad_legendawaarde_select");
+        fld._color.defaultvalue = kleur;
+    }
+
+    this.REST_GET    = generic_REST_GET(this);
+    this.REST_POST   = generic_REST_POST(this);
+    this.REST_PUT    = generic_REST_PUT(this);
+    this.REST_DELETE = generic_REST_DELETE(this);
+}
+%>
--- a/APPL/API2/model_cad_thema.inc
+++ b/APPL/API2/model_cad_thema.inc
@@ -0,0 +1,203 @@
+<% /*
+    $Revision$
+    $Id$
+
+    File:           model_cad_thema.inc
+
+    Description:    Vanuit CodeCharge gegenereerd model voor cad_thema
+
+    Context:
+
+    Notes:      TODO: JGL: Ik ben er nog niet helemaal uit hoe de bitjes netjes op te lossen
+*/
+%>
+<%
+
+function model_cad_thema()
+{
+    this.table = "cad_thema";
+    this.primary = "cad_thema_key";
+    this.records_name = "cad_themas";
+    this.record_name = "cad_thema";
+    this.autfunction = "WEB_CADMGT";
+    this.record_title = L("cad_thema");
+    this.records_title = L("cad_thema_m");
+
+
+    this.fields = {
+        "id": {
+            "dbs": "cad_thema_key",
+            "label": "Key",
+            "typ": "key",
+            "required": true,
+            "filter": "exact",
+            "seq": "cad_s_cad_thema_key"
+        },
+        "name": {
+            "dbs": "cad_thema_omschrijving",
+            "label": L("cad_thema_omschrijving"),
+            "typ": "varchar",
+            "translate": true,
+            "filter": "like"
+        },
+        "view_name": {
+            "dbs": "cad_thema_view",
+            "label": L("cad_label_view"),
+            "typ": "varchar",
+            "filter": "like"
+        },
+        "legenda": {
+            "dbs": "cad_legenda_key",
+            "label": L("cad_legenda"),
+            "typ": "key",
+            "foreign": {
+                "tbl": "cad_legenda",
+                "key": "cad_legenda_key",
+                "desc": "cad_legenda_omschrijving"
+            },
+            "filter": "exact"
+        },
+        "authorization": {
+            "dbs": "fac_functie_key",
+            "label": L("fac_functie_key"),
+            "typ": "key",
+            "foreign": {
+                "tbl": "(SELECT f.fac_functie_key"
+                     + "      , f.fac_functie_code || ': ' || f.fac_functie_omschrijving fac_functie_omschrijving"
+                     + "   FROM fac_functie f"
+                     + "  ORDER BY 2)",
+                "key": "fac_functie_key",
+                "desc": "fac_functie_omschrijving"
+            },
+            "LOVinit": ""
+        },
+        "type_place": {
+            "dbs": "plaats.waar",
+            "label": L("cad_label_type_waar"),
+            "typ": "varchar",
+            "hidden_fld": true,
+            "LOV": type_place_LOV(),
+            "filter": "exact"
+        },
+        "type_situation": {
+            "dbs": "plaats.situatie",
+            "label": L("cad_label_type_situatie"),
+            "typ": "varchar",
+            "hidden_fld": true,
+            "LOV": type_situation_LOV(),
+            "filter": "exact"
+        },
+        "thema_type": {
+            "dbs": "cad_thema_type",
+            "label": L("cad_label_type"),
+            "typ": "number",
+            "bits": [
+                {
+                    "name": "waar",
+                    "label": L("cad_label_type_waar"),
+                    "typ": "radio",
+                    "mask": 27,
+                    "radios": [
+                        {
+                            "mask": 1,
+                            "label": L("cad_label_type_bi_rui")
+                        },
+                        {
+                            "mask": 9,
+                            "label": L("cad_label_type_bi_wp")
+                        },
+                        {
+                            "mask": 17,
+                            "label": L("cad_label_type_bi_obj")
+                        },
+                        {
+                            "mask": 2,
+                            "label": L("cad_label_type_bu_ts")
+                        },
+                        {
+                            "mask": 18,
+                            "label": L("cad_label_type_bu_obj")
+                        }
+                    ]
+                },
+                {
+                    "name": "situatie",
+                    "label": L("cad_label_type_situatie"),
+                    "typ": "radio",
+                    "mask": 4,
+                    "radios": [
+                        {
+                            "mask": 0,
+                            "label": L("cad_label_type_si_act")
+                        },
+                        {
+                            "mask": 4,
+                            "label": L("cad_label_type_si_sce")
+                        }
+                    ]
+                },
+                {
+                    "name": "",
+                    "label": "",
+                    "typ": "check",
+                    "mask": 128,
+                    "radios": [
+                        {
+                            "name": "sleepbaar",
+                            "label": "Sleepbaar",
+                            "mask": 128
+                        }
+                    ]
+                }
+            ]
+        },
+        "thema_url": {
+            "dbs": "cad_thema_onclick_url",
+            "label": L("cad_thema_onclick_url"),
+            "typ": "varchar"
+        },
+        "_generate": {
+            "dbs": "dual.dummy",
+            "label": "Genereer legenda",
+            "typ": "check",
+            "hidden": true
+        },
+        "_update": {
+            "dbs": "dual.dummy",
+            "label": "Bijwerken legenda",
+            "typ": "check",
+            "hidden": true
+        }
+    };
+
+
+    var ext_sql = "(SELECT BITAND(cad_thema_type, 27) waar"
+                + "      , BITAND(cad_thema_type,  4) situatie"
+                + "      , cad_thema_key"
+                + "   FROM cad_thema) plaats ";
+    this.REST_GET    = generic_REST_GET(this, {
+        "GET": {
+            "tables": [ext_sql],
+            "wheres": ["cad_thema.cad_thema_key = plaats.cad_thema_key"]
+        }
+    });
+    this.REST_POST   = generic_REST_POST(this);
+    this.REST_PUT    = generic_REST_PUT(this);
+    this.REST_DELETE = generic_REST_DELETE(this);
+
+
+    function type_place_LOV()
+    {
+        return "1;"  + L("cad_label_type_bi_rui")
+            + ";9;"  + L("cad_label_type_bi_wp")
+            + ";17;" + L("cad_label_type_bi_obj")
+            + ";2;"  + L("cad_label_type_bu_ts")
+            + ";18;" + L("cad_label_type_bu_obj");
+    }
+    function type_situation_LOV()
+    {
+        return "0;" + L("cad_label_type_si_act")
+            + ";4;" + L("cad_label_type_si_sce");
+    }
+}
+%>
--- a/APPL/Localscripts/colorpicker/.gitattributes
+++ b/APPL/Localscripts/colorpicker/.gitattributes
@@ -0,0 +1,49 @@
+*.doc  diff=astextplain
+*.DOC	diff=astextplain
+*.docx	diff=astextplain
+*.DOCX	diff=astextplain
+*.dot	diff=astextplain
+*.DOT	diff=astextplain
+*.pdf	diff=astextplain
+*.PDF	diff=astextplain
+*.rtf	diff=astextplain
+*.RTF	diff=astextplain
+
+*.jpg  	binary
+*.png 	binary
+*.gif 	binary
+
+*.cs text=auto diff=csharp 
+*.vb text=auto
+*.c text=auto
+*.cpp text=auto
+*.cxx text=auto
+*.h text=auto
+*.hxx text=auto
+*.py text=auto
+*.rb text=auto
+*.java text=auto
+*.html text=auto
+*.htm text=auto
+*.css text=auto
+*.scss text=auto
+*.sass text=auto
+*.less text=auto
+*.js text=auto
+*.lisp text=auto
+*.clj text=auto
+*.sql text=auto
+*.php text=auto
+*.lua text=auto
+*.m text=auto
+*.asm text=auto
+*.erl text=auto
+*.fs text=auto
+*.fsx text=auto
+*.hs text=auto
+
+*.csproj text=auto merge=union 
+*.vbproj text=auto merge=union 
+*.fsproj text=auto merge=union 
+*.dbproj text=auto merge=union 
+*.sln text=auto eol=crlf merge=union 
--- a/APPL/Localscripts/colorpicker/.gitignore
+++ b/APPL/Localscripts/colorpicker/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+Thumbs.db
+Desktop.ini
+.DS_Store
+.idea
--- a/APPL/Localscripts/colorpicker/Gruntfile.js
+++ b/APPL/Localscripts/colorpicker/Gruntfile.js
@@ -0,0 +1,108 @@
+
+/*
+           _                  _      _             
+  ___ ___ | | ___  _ __ _ __ (_) ___| | _____ _ __ 
+ / __/ _ \| |/ _ \| '__| '_ \| |/ __| |/ / _ \ '__|
+| (_| (_) | | (_) | |  | |_) | | (__|   <  __/ |   
+ \___\___/|_|\___/|_|  | .__/|_|\___|_|\_\___|_|   
+                       |_|                         
+                                                   
+*/
+
+module.exports = function (grunt) {
+    grunt.initConfig({
+
+        // *************************************************************************************
+        //      CONFIG OPTIONS
+        // *************************************************************************************
+
+        pkg: grunt.file.readJSON('package.json'),
+
+        banner :  '/*\n   <%= pkg.name %> <%= pkg.version %>\n   <%= pkg.copyright %>\n   <%= pkg.homepage %>\n*/\n',
+
+        // *************************************************************************************
+        //      JSHINT options
+        // *************************************************************************************
+        jshint: {
+            all: [
+                'Gruntfile.js',
+                'package.json',
+                'js/evol.colorpicker.js'
+            ]
+        },
+
+        // *************************************************************************************
+        //      UGLIFY options
+        // *************************************************************************************
+        uglify: {
+            options: {
+                banner: '<%= banner %>',
+                mangle: true
+            },
+            js: {
+                files: { 
+                    'js/evol.colorpicker.min.js': ['js/evol.colorpicker.js']
+                }
+            }
+        },
+
+        // *************************************************************************************
+        //      LESS
+        // *************************************************************************************
+        less: {
+            dev: {
+                options: {
+                    banner: '<%= banner %>'
+                },
+                files: {
+                    "css/evol.colorpicker.css": "less/evol.colorpicker.less",
+                    "css/demo.css": "less/demo.less"
+                }
+            },
+            prod: {
+                options: {
+                    banner: '<%= banner %>',
+                    compress: true
+                },
+                files: {
+                    "css/evol.colorpicker.min.css": "less/evol.colorpicker.less"
+                }
+            }
+        }
+
+    });
+
+// Load the plugin that provides the tasks.
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-less');
+
+// Custom tasks
+
+    grunt.registerTask('header', 'evol.colorpicker version', function(arg1) {
+        var pkg=grunt.file.readJSON('package.json');
+        console.log(
+            (new Date()).toString() + '\n' + 
+'            _                  _      _\n'+
+'   ___ ___ | | ___  _ __ _ __ (_) ___| | _____ _ __\n'+
+'  / __/ _ \\| |/ _ \\| \'__| \'_ \\| |/ __| |/ / _ \\ \'__|\n'+
+' | (_| (_) | | (_) | |  | |_) | | (__|   <  __/ |\n'+
+'  \\___\\___/|_|\\___/|_|  | .__/|_|\\___|_|\\_\\___|_|   \n'+
+'                        |_|     '+ 
+            arg1 + ' '+ pkg.version
+        );
+    });
+    // *************************************************************************************
+    //      BUILD TASKS : dev prod
+    // *************************************************************************************
+    // Default task(s).
+    grunt.registerTask('default', ['prod']);
+
+    // Dev only task(s).
+    grunt.registerTask('dev', ['header:dev', 'jshint', 'less:dev']);
+
+    // Prod task(s).
+    grunt.registerTask('prod', ['header:prod', 'jshint', 'uglify', 'less']);
+
+};
+
--- a/APPL/Localscripts/colorpicker/LICENSE.md
+++ b/APPL/Localscripts/colorpicker/LICENSE.md
@@ -0,0 +1,23 @@
+# evol.colorpicker
+
+Released under the [MIT License](http://en.wikipedia.org/wiki/MIT_License)
+
+Copyright (c) 2016 by Olivier Giulieri
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/APPL/Localscripts/colorpicker/README.md
+++ b/APPL/Localscripts/colorpicker/README.md
@@ -0,0 +1,266 @@
+# evol.colorpicker
+
+evol.colorpicker is a web color picker which looks like the one in Microsoft Office 2010. 
+It can be used inline or as a popup bound to a text box. 
+It comes with several color palettes, can track selection history and supports "transparent" color.
+It is a full jQuery UI widget, supporting various configurations and themes. 
+
+## Demo
+
+![screenshot 1](https://raw.github.com/evoluteur/colorpicker/master/screenshot1.png) &nbsp; ![screenshot 2](https://raw.github.com/evoluteur/colorpicker/master/screenshot2.png)
+
+Check the [demo](http://evoluteur.github.com/colorpicker/index.html) for several examples.
+
+
+## Usage
+
+First, load [jQuery](http://jquery.com/) (v1.7 or greater), [jQuery UI](http://jqueryui.com/) (v1.8 or greater), and the plugin:
+
+```html
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
+```
+
+The widget requires a jQuery UI theme to be present, as well as its own included base CSS file ([evol.colorpicker.css](http://github.com/evoluteur/colorpicker/raw/master/css/evol.colorpicker.css)). Here we use the "ui-lightness" theme as an example:
+
+```html
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css">
+<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
+```
+
+Now, let's attach it to an existing `<input>` tag:
+
+```html
+<script type="text/javascript">
+    $(document).ready(function() {
+        $("#mycolor").colorpicker();
+    });
+</script>
+
+<input style="width:100px;" id="mycolor" />
+```
+
+This will wrap it into a "holder" `<div>` and add another `<div>` beside it for the color box:
+
+```html
+<div style="width:128px;">
+   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
+   <div class="evo-colorind" style="background-color:#8db3e2"></div>
+</div>
+```
+
+Using the same syntax, the widget can also be instanciated on a `<div>` or a `<span>` tag to show inline. In that case the generated HTML is the full palette.
+
+
+## Theming
+
+evol.colorpicker is as easily themeable as any jQuery UI widget, using one of the [jQuery UI themes](http://jqueryui.com/themeroller/#themeGallery) or your own custom theme made with [Themeroller](http://jqueryui.com/themeroller/).
+
+
+## Options
+
+evol.colorpicker provides several options to customize its behaviour:
+
+### color (String)
+
+Used to set the color value.
+
+```javascript
+$("#mycolor").colorpicker({
+    color: "#ffffff"
+});
+```
+
+Defaults to *null*.
+
+### defaultPalette (String)
+
+Used to set the default color palette. Possible values are "theme" or "web".
+
+```javascript
+$("#mycolor").colorpicker({
+    defaultPalette: 'web'
+});
+```
+
+Defaults to *theme*.
+
+### displayIndicator (Boolean)
+
+Used to show color value on hover and click inside the palette.
+
+```javascript
+$("#mycolor").colorpicker({
+    displayIndicator: false
+});
+```
+
+Defaults to *true*.
+
+### hideButton (Boolean)
+
+When binding the colorpicker to a textbox, a colored button will be added to the right of the textbox unless hideButton is set to true. 
+This option doens't have any effect if the colorpicker is bound to a DIV.
+
+```javascript
+$("#mycolor").colorpicker({
+    hideButton: true
+});
+```
+
+Defaults to *false*.
+
+### history (Boolean)
+
+Used to track selection history (shared among all instances of the colorpicker). The history keeps the last 28 colors selections.
+
+```javascript
+$("#mycolor").colorpicker({
+    history: false
+});
+```
+
+Defaults to *true*.
+
+### initialHistory (Array strings)
+
+Used to provide a color selection history. Colors are provided as strings of hexadecimal color values.
+
+```javascript
+$("#mycolor").colorpicker({
+    initialHistory: ["#ff0000", "#00ff00", "#0000ff"]
+});
+```
+
+Defaults to *null*.
+
+### showOn (String)
+
+Have the colorpicker appear automatically when the field receives focus ("focus"), appear only when a button is clicked ("button"), or appear when either event takes place ("both").
+This option only takes effect when the color picker is instanciated on a textbox.
+
+```javascript
+$("#mycolor").colorpicker({
+    showOn: "button"
+});
+```
+
+Defaults to *"both"*.
+
+### strings (String)
+
+Used to translate the widget. It is a coma separated list of all labels used in the UI. 
+
+```javascript
+$("#mycolor").colorpicker({
+    strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
+});
+```
+
+Defaults to *"Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet."*.
+
+### transparentColor (Boolean)
+
+Allow for selection of the "transparent color". The hexadecimal value for the transparent color is "#0000ffff".
+
+```javascript
+$("#mycolor").colorpicker({
+    transparentColor: true
+});
+```
+
+Defaults to *false*.
+
+
+## Methods
+
+### clear()
+Clears the color value (and close the popup palette if opened).
+
+```javascript
+$("#mycolor").colorpicker("clear");
+```
+
+### enable()
+Get the currently selected color value (returned as a string).
+
+```javascript
+$("#mycolor").colorpicker("enable");
+```
+
+### disable()
+Get the currently selected color value (returned as a string).
+
+```javascript
+$("#mycolor").colorpicker("disable");
+```
+
+### isDisabled()
+Get the currently selected color value (returned as a string).
+
+```javascript
+$("#mycolor").colorpicker("isDisabled");
+```
+
+### val([color])
+Get or set the currently selected color value (as a string, ie. "#d0d0d0").
+
+```javascript
+var colorValue = $("#mycolor").colorpicker("val");
+
+$("#mycolor").colorpicker("val", "#d0d0d0");
+```
+
+### showPalette()
+Show the palette (when using the widget as a popup).
+
+```javascript
+$("#mycolor").colorpicker("showPalette");
+```
+
+### hidePalette()
+Hide the palette (when using the widget as a popup).
+
+```javascript
+$("#mycolor").colorpicker("hidePalette");
+```
+
+## Events
+
+### change.color
+
+This event is triggered when a color is selected.
+
+```javascript
+$("#mycolor").on("change.color", function(event, color){
+    $('#title').css('background-color', color);
+});
+```
+
+### mouseover.color
+
+This event is triggered when the mouse moves over a color box on the palette.
+
+```javascript
+$("#mycolor").on("mouseover.color", function(event, color){
+    $('#title').css('background-color', color);
+});
+```
+
+## Browser Support
+
+evol.colorpicker.js has been tested for the following browsers:
+
+  - Internet Explorer 7+
+  - Firefox 9+
+  - Chrome 21+
+  - Safari 5+
+
+
+## License
+
+Copyright (c) 2016 Olivier Giulieri.
+
+evol.colorpicker is released under the [MIT license](http://github.com/evoluteur/colorpicker/raw/master/LICENSE.md).
+
--- a/APPL/Localscripts/colorpicker/bower.json
+++ b/APPL/Localscripts/colorpicker/bower.json
@@ -0,0 +1,23 @@
+{
+	"name": "evol.colorpicker",
+	"version": "3.2.4",
+	"description": "jQuery UI widget for web color picking which looks like the one in Microsoft Office 2010.",
+	"homepage": "http://evoluteur.github.io/colorpicker/",
+	"main": [
+		"js/evol.colorpicker.min.js",
+		"css/evol.colorpicker.min.css"
+	],
+	"authors": [
+		{ "name": "Olivier Giulieri", "homepage": "https://github.com/evoluteur" }
+	],
+	"license": "MIT",
+	"keywords": [
+		"colorpicker",
+		"color",
+		"jquery",
+		"jquery-ui",
+		"widget",
+		"ui",
+		"web"
+	]
+}
--- a/APPL/Localscripts/colorpicker/colorpicker.jquery.json
+++ b/APPL/Localscripts/colorpicker/colorpicker.jquery.json
@@ -0,0 +1,33 @@
+{
+	"name": "colorpicker",
+	"title": "Evol ColorPicker",
+	"version": "3.2.4",
+	"copyright": "(c) 2016 Olivier Giulieri",
+	"description": "A jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).",
+	"keywords": [
+		"colorpicker",
+		"color",
+		"input",
+		"form",
+		"picker",
+		"palette",
+		"ui",
+		"widget"
+	],
+	"author": {
+		"name": "Olivier Giulieri",
+		"url": "http://github.com/evoluteur"
+	},
+	"licenses": [{
+		"type": "MIT",
+		"url": "https://github.com/evoluteur/colorpicker/blob/master/LICENSE.md"
+	}],
+	"dependencies": {
+		"jquery": ">=1.7",
+		"jquery-ui": ">=1.8"
+	},
+	"homepage": "https://github.com/evoluteur/colorpicker",
+	"docs": "https://github.com/evoluteur/colorpicker#readme",
+	"demo": "http://evoluteur.github.io/colorpicker/index.html",
+	"bugs": "https://github.com/evoluteur/colorpicker/issues"
+}
--- a/APPL/Localscripts/colorpicker/css/colorpicker.css
+++ b/APPL/Localscripts/colorpicker/css/colorpicker.css
@@ -0,0 +1,48 @@
+/*  demo page CSS for evol.colorpicker  */
+/*  https://github.com/evoluteur/colorpicker */
+body {
+  padding: 10px 20px;
+  font-size: 11pt;
+  font-family: "Century Gothic", arial;
+  color: #777;
+  font-weight: 300;
+}
+a {
+  color: #39C;
+  font-weight: 400;
+}
+a:hover {
+  color: #FF9900;
+}
+a.sel {
+  color: #000;
+  text-decoration: none;
+}
+#github {
+  position: absolute;
+  right: 30px;
+  top: 7px;
+}
+@media only screen and (max-width: 465px) {
+  #github {
+    display: none;
+  }
+}
+.colorPanel {
+  float: left;
+  border: 2px solid #A7C8E2;
+  margin: 4px 3px;
+  padding: 10px;
+  width: 212px;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+}
+.colorPanel input {
+  width: 100px;
+}
+.footer {
+  text-align: center;
+  font-size: smaller;
+  color: Gray;
+}
--- a/APPL/Localscripts/colorpicker/css/evol.colorpicker.css
+++ b/APPL/Localscripts/colorpicker/css/evol.colorpicker.css
@@ -0,0 +1,171 @@
+/*
+   evol.colorpicker 3.2.4
+   (c) 2016 Olivier Giulieri
+   http://evoluteur.github.io/colorpicker/
+*/
+.evo-pop {
+  z-index: 10000;
+  width: 204px;
+  padding: 3px 3px 0;
+}
+.evo-pop-ie {
+  z-index: 10000;
+  width: 212px;
+  padding: 3px;
+}
+.evo-palette td {
+  font-size: 1px;
+  border: solid 1px #c0c0c0;
+  padding: 7px;
+  cursor: pointer;
+}
+.evo-palette tr.top > td {
+  border-bottom: 0;
+}
+.evo-palette tr.in > td {
+  border-top: 0;
+  border-bottom: 0;
+}
+.evo-palette tr.bottom > td {
+  border-top: 0;
+}
+.evo-palette div.sep {
+  height: 3px;
+}
+.evo-palette,
+.evo-palette-ie {
+  border-collapse: separate;
+  border-spacing: 4px 0px;
+  *border-collapse: expression('separate', cellSpacing='2px');
+}
+.evo-palette th,
+.evo-palette-ie th {
+  border: 0;
+  padding: 5px 3px;
+  text-align: left;
+  font-weight: normal;
+  background: transparent !important;
+}
+.evo-palette-ie td {
+  font-size: 1px;
+  border: solid 1px #c0c0c0;
+  padding: 7px;
+  cursor: pointer;
+}
+.evo-palette2,
+.evo-palette2-ie {
+  margin: auto;
+  border-collapse: collapse;
+}
+.evo-palette2 td,
+.evo-palette2-ie td {
+  font-size: 1px;
+  cursor: pointer;
+}
+.evo-palette2 td {
+  padding: 6px 7px;
+}
+.evo-palette2-ie td {
+  padding: 5px;
+}
+.evo-palcenter {
+  padding: 5px;
+  text-align: center;
+}
+.evo-colorind,
+.evo-colorind-ie,
+.evo-colorind-ff {
+  border: solid 1px #c3c3c3;
+  width: 18px;
+  height: 18px;
+  float: right;
+}
+.evo-colorind-ie {
+  position: relative;
+  top: -23px;
+}
+.evo-colorbox-ie {
+  font-size: 8px;
+  padding: 3px 9px !important;
+}
+/*
+.evo-colortxt-ie {
+	position:relative;
+	top:-6px;
+}*/
+.evo-pop:after,
+.evo-pop-ie:after,
+.evo-colorind:after,
+.evo-colorind-ie:after,
+.evo-colorind-ff:after,
+.evo-color span:after,
+.evo-cHist:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+}
+.evo-color {
+  width: 94px;
+  padding: 1px 3px 0 4px;
+}
+.evo-color div {
+  border: solid 1px #808080;
+  border-right: solid 1px #c0c0c0;
+  border-bottom: solid 1px #c0c0c0;
+  padding: 3px;
+  margin-bottom: 5px;
+  width: 10px;
+  height: 10px;
+  float: left;
+}
+.evo-color span {
+  font-size: 15px;
+  margin: 1px 0 4px 3px;
+  float: left;
+}
+.evo-sep {
+  height: 10px;
+  font-size: 0;
+}
+.evo-more {
+  padding: 4px 5px 4px;
+  font-size: smaller;
+}
+.evo-cHist {
+  padding: 3px;
+}
+.evo-cHist div {
+  cursor: pointer;
+  border: solid 1px #c0c0c0;
+  padding: 3px;
+  margin: 5px;
+  width: 10px;
+  height: 10px;
+  float: left;
+}
+.evo-transparent {
+  background-image: repeating-linear-gradient(135deg, #000000, #000000 1px, #ffffff 1px, #ffffff 3px);
+}
+.evo-tr-box {
+  cursor: pointer;
+  border: solid 1px #c0c0c0;
+  padding: 3px;
+  width: 7px;
+  height: 7px;
+  float: right;
+  position: relative;
+  right: -3px;
+  top: 2px;
+}
+a.evo-hist {
+  margin-left: 6px;
+}
+.evo-pointer {
+  cursor: pointer;
+}
+.evo-hidden-button {
+  display: none;
+}
--- a/APPL/Localscripts/colorpicker/css/evol.colorpicker.min.css
+++ b/APPL/Localscripts/colorpicker/css/evol.colorpicker.min.css
@@ -0,0 +1 @@
+.evo-pop{z-index:10000;width:204px;padding:3px 3px 0}.evo-pop-ie{z-index:10000;width:212px;padding:3px}.evo-palette td{font-size:1px;border:solid 1px #c0c0c0;padding:7px;cursor:pointer}.evo-palette tr.top>td{border-bottom:0}.evo-palette tr.in>td{border-top:0;border-bottom:0}.evo-palette tr.bottom>td{border-top:0}.evo-palette div.sep{height:3px}.evo-palette,.evo-palette-ie{border-collapse:separate;border-spacing:4px 0px;*border-collapse:expression('separate', cellSpacing='2px')}.evo-palette th,.evo-palette-ie th{border:0;padding:5px 3px;text-align:left;font-weight:normal;background:transparent !important}.evo-palette-ie td{font-size:1px;border:solid 1px #c0c0c0;padding:7px;cursor:pointer}.evo-palette2,.evo-palette2-ie{margin:auto;border-collapse:collapse}.evo-palette2 td,.evo-palette2-ie td{font-size:1px;cursor:pointer}.evo-palette2 td{padding:6px 7px}.evo-palette2-ie td{padding:5px}.evo-palcenter{padding:5px;text-align:center}.evo-colorind,.evo-colorind-ie,.evo-colorind-ff{border:solid 1px #c3c3c3;width:18px;height:18px;float:right}.evo-colorind-ie{position:relative;top:-23px}.evo-colorbox-ie{font-size:8px;padding:3px 9px !important}.evo-pop:after,.evo-pop-ie:after,.evo-colorind:after,.evo-colorind-ie:after,.evo-colorind-ff:after,.evo-color span:after,.evo-cHist:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0}.evo-color{width:94px;padding:1px 3px 0 4px}.evo-color div{border:solid 1px #808080;border-right:solid 1px #c0c0c0;border-bottom:solid 1px #c0c0c0;padding:3px;margin-bottom:5px;width:10px;height:10px;float:left}.evo-color span{font-size:15px;margin:1px 0 4px 3px;float:left}.evo-sep{height:10px;font-size:0}.evo-more{padding:4px 5px 4px;font-size:smaller}.evo-cHist{padding:3px}.evo-cHist div{cursor:pointer;border:solid 1px #c0c0c0;padding:3px;margin:5px;width:10px;height:10px;float:left}.evo-transparent{background-image:repeating-linear-gradient(135deg, #000, #000 1px, #fff 1px, #fff 3px)}.evo-tr-box{cursor:pointer;border:solid 1px #c0c0c0;padding:3px;width:7px;height:7px;float:right;position:relative;right:-3px;top:2px}a.evo-hist{margin-left:6px}.evo-pointer{cursor:pointer}.evo-hidden-button{display:none}
--- a/APPL/Localscripts/colorpicker/index.html
+++ b/APPL/Localscripts/colorpicker/index.html
@@ -0,0 +1,214 @@
+<html xmlns="http://www.w3.org/1999/xhtml" > 
+<head>
+<title>evol.colorpicker</title>
+    <meta charset="utf-8">
+	<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
+	<link href="css/demo.css" rel="stylesheet" /> 
+	<link href="css/evol.colorpicker.min.css" rel="stylesheet" />
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
+	<script src="js/evol.colorpicker.min.js" type="text/javascript"></script>
+</head>
+
+<body>   
+
+<h1 id="title">evol.colorpicker demo</h1>
+
+<h2 id="github">
+    <a href="https://github.com/evoluteur/colorpicker">GitHub</a>
+</h2>
+
+<p>evol.colorpicker (currently v3.2.4) is a web color picker which looks like the one in Microsoft Office 2010.
+    It can be used inline or as a popup bound to a text box.
+    It is a full jQuery UI widget, supporting various configurations and themes.
+</p>
+
+<div style="padding:2px 40px">
+
+<p>Themes:
+    <a href="#" class="css sel">ui-lightness</a> -
+    <a href="#" class="css">ui-darkness</a> -
+    <a href="#" class="css">redmond</a> -
+    <a href="#" class="css">sunny</a> -
+    <a href="#" class="css">le-frog</a>
+</p>
+
+<div class="demoPanel">
+	Inline (using a DIV tag):<br/><br/>
+	<div id="cpDiv"></div>
+	<br/>
+	<div class="demo-links">
+		<a href="#" id="getVal2">Get Value</a>
+		<a href="#" id="setVal2">Set Value</a><br/>
+		<a href="#" id="enable2">Enable</a>
+		<a href="#" id="disable2">Disable</a>
+		<a href="#" id="destroy2">Destroy</a><br/><br/>
+	</div> 
+</div>
+
+<div class="demoPanel">
+	Inline with "web" default palette:<br/><br/>
+	<div id="cpDiv2"></div> 
+</div>
+
+<div class="demoPanel" style="width:130px">
+	Using "showOn" option:<br/><br/>
+	button
+	<input id="cpButton" value="#92cddc" />
+	focus 
+	<input id="cpFocus" value="#dbeef3" />
+	both
+	<input id="cpBoth" value="#31859b" />
+	<a href="#" id="show">link</a>
+	<input id="cpOther" value="#002060" />
+</div>
+
+<div id="cpb" class="demoPanel" style="width:170px">
+	Event binding:<br/>
+	change.color and mouseover.color<br/><br/>
+	<input id="cp1"/><br/> 
+	<div id="tests" class="demo-links">
+	<a href="#" id="getVal">Get Value</a>
+	<a href="#" id="setVal">Set Value</a><br/>
+	<a href="#" id="enable">Enable</a>
+	<a href="#" id="disable">Disable</a>
+	<a href="#" id="clear">Clear</a>
+	<a href="#" id="destroy1">Destroy</a>
+	</div>
+</div>
+
+<div class="demoPanel" style="width:130px">
+	With transparent color:<br/>
+	<br/> 
+	<input id="transColor" value="#0000ffff" /><br/> 
+</div>
+
+<div class="demoPanel" style="width:130px">
+	Using "hideButton" option:<br/>
+	<br/>
+	<input id="hideButton" value="#92cddc" /><br/>
+</div>
+
+<div class="demoPanel" style="width:130px">
+	No color indicator on the palette:<br/>
+	<br/> 
+	<input id="noIndColor" value="#92cddc" /><br/> 
+</div>
+
+<div class="demoPanel" style="width:130px">
+	In French:<br/>
+	<br/> 
+	<input id="frenchColor" value="#92cddc" /><br/>
+	Using the "strings" option you can translate the colorpicker.<br/>
+</div>
+<div style="clear:both;"></div>
+
+</div>
+
+<script>
+
+$(document).ready(function(){
+
+	// Change theme
+    $('.css').on('click', function(evt){ 
+        $('#jquiCSS').attr('href','http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/'+this.innerHTML+'/jquery-ui.css');
+        $('.css').removeClass('sel');
+        $(this).addClass('sel');
+    });
+	
+	// Events demo
+	$('#cp1').colorpicker({color:'#8db3e2',
+		initialHistory: ['#ff0000','#000000','red']
+})
+		.on('change.color', function(evt, color){
+			$('#cpb').css('background-color',color);
+		})
+		.on('mouseover.color', function(evt, color){
+            if(color){
+                $('#cpb').css('background-color',color);
+            }
+		});
+	
+	$('#getVal').on('click', function(){
+		alert('Selected color = "' + $('#cp1').colorpicker("val") + '"');
+	});
+	$('#setVal').on('click', function(){
+		$('#cp1').colorpicker("val",'#31859b');
+	});
+	$('#enable').on('click', function(){
+		$('#cp1').colorpicker("enable");
+	});
+	$('#disable').on('click', function(){
+		$('#cp1').colorpicker("disable");
+	});
+	$('#clear').on('click', function(){
+		var v=$('#cp1').colorpicker("clear") ;
+	});
+	$('#destroy1').on('click', function(){
+		var v=$('#cp1').colorpicker("destroy") ;
+	});
+	
+	// Instanciate colorpickers
+    $('#cpBoth').colorpicker();
+    $('#cpDiv').colorpicker({color:'#31859b'});
+    $('#cpDiv2').colorpicker({color:'#31859b', defaultPalette:'web'});
+    $('#cpFocus').colorpicker({showOn:'focus'});
+    $('#cpButton').colorpicker({showOn:'button'});
+    $('#cpOther').colorpicker({showOn:'none'});
+	$('#show').on('click', function(evt){
+		evt.stopImmediatePropagation();
+		$('#cpOther').colorpicker("showPalette");
+	});
+	
+	// With transparent color
+	$('#transColor').colorpicker({
+		transparentColor: true
+	});
+
+	// With hidden button
+	$('#hideButton').colorpicker({
+		hideButton: true
+	});
+
+	// No color indicator
+	$('#noIndColor').colorpicker({
+		displayIndicator: false
+	});
+
+	// French colorpicker
+	$('#frenchColor').colorpicker({
+		strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
+	});
+
+	// Inline colorpicker
+	$('#getVal2').on('click', function(){
+		alert('Selected color = "' + $('#cpDiv').colorpicker("val") + '"');
+	});
+	$('#setVal2').on('click', function(){
+		$('#cpDiv').colorpicker("val",'#31859b');
+	});
+	$('#enable2').on('click', function(){
+		$('#cpDiv').colorpicker("enable");
+	});
+	$('#disable2').on('click', function(){
+		$('#cpDiv').colorpicker("disable");
+	});
+	$('#destroy2').on('click', function(){
+		$('#cpDiv').colorpicker("destroy");
+	});
+
+	// Fix links
+	$('a[href="#"]').attr('href', 'javascript:void(0)');
+
+});
+
+</script>
+
+<p><br/><a href="https://github.com/evoluteur/colorpicker/archive/master.zip">Download</a>, documentation, and source code are available at <a href="https://github.com/evoluteur/colorpicker" target="download">GitHub</a> under the <a href="http://github.com/evoluteur/colorpicker/raw/master/LICENSE.md">MIT license</a>.</p>
+
+<br/><br/>
+<div class="footer">&#169; 2016 Olivier Giulieri</div>
+
+</body>
+
+</html>
--- a/APPL/Localscripts/colorpicker/js/evol.colorpicker.js
+++ b/APPL/Localscripts/colorpicker/js/evol.colorpicker.js
@@ -0,0 +1,562 @@
+/*
+ evol.colorpicker 3.2.4
+ ColorPicker widget for jQuery UI
+
+ https://github.com/evoluteur/colorpicker
+ (c) 2016 Olivier Giulieri
+
+ * Depends:
+ *	jquery.ui.core.js
+ *	jquery.ui.widget.js
+ */
+
+(function( $, undefined ) {
+
+var _idx=0,
+	ua=window.navigator.userAgent,
+	isIE=ua.indexOf("MSIE ")>0,
+	_ie=isIE?'-ie':'',
+	isMoz=isIE?false:/mozilla/.test(ua.toLowerCase()) && !/webkit/.test(ua.toLowerCase()),
+	history=[],
+	baseThemeColors=['ffffff','000000','eeece1','1f497d','4f81bd','c0504d','9bbb59','8064a2','4bacc6','f79646'],
+	subThemeColors=['f2f2f2','7f7f7f','ddd9c3','c6d9f0','dbe5f1','f2dcdb','ebf1dd','e5e0ec','dbeef3','fdeada',
+		'd8d8d8','595959','c4bd97','8db3e2','b8cce4','e5b9b7','d7e3bc','ccc1d9','b7dde8','fbd5b5',
+		'bfbfbf','3f3f3f','938953','548dd4','95b3d7','d99694','c3d69b','b2a2c7','92cddc','fac08f',
+		'a5a5a5','262626','494429','17365d','366092','953734','76923c','5f497a','31859b','e36c09',
+		'7f7f7f','0c0c0c','1d1b10','0f243e','244061','632423','4f6128','3f3151','205867','974806'],
+	standardColors=['c00000','ff0000','ffc000','ffff00','92d050','00b050','00b0f0','0070c0','002060','7030a0'],
+	webColors=[
+		['003366','336699','3366cc','003399','000099','0000cc','000066'],
+		['006666','006699','0099cc','0066cc','0033cc','0000ff','3333ff','333399'],
+		['669999','009999','33cccc','00ccff','0099ff','0066ff','3366ff','3333cc','666699'],
+		['339966','00cc99','00ffcc','00ffff','33ccff','3399ff','6699ff','6666ff','6600ff','6600cc'],
+		['339933','00cc66','00ff99','66ffcc','66ffff','66ccff','99ccff','9999ff','9966ff','9933ff','9900ff'],
+		['006600','00cc00','00ff00','66ff99','99ffcc','ccffff','ccccff','cc99ff','cc66ff','cc33ff','cc00ff','9900cc'],
+		['003300','009933','33cc33','66ff66','99ff99','ccffcc','ffffff','ffccff','ff99ff','ff66ff','ff00ff','cc00cc','660066'],
+		['333300','009900','66ff33','99ff66','ccff99','ffffcc','ffcccc','ff99cc','ff66cc','ff33cc','cc0099','993399'],
+		['336600','669900','99ff33','ccff66','ffff99','ffcc99','ff9999','ff6699','ff3399','cc3399','990099'],
+		['666633','99cc00','ccff33','ffff66','ffcc66','ff9966','ff6666','ff0066','d60094','993366'],
+		['a58800','cccc00','ffff00','ffcc00','ff9933','ff6600','ff0033','cc0066','660033'],
+		['996633','cc9900','ff9900','cc6600','ff3300','ff0000','cc0000','990033'],
+		['663300','996600','cc3300','993300','990000','800000','993333']
+	],
+	transColor='#0000ffff',
+	int2Hex=function(i){
+		var h=i.toString(16);
+		if(h.length==1){
+			h='0'+h;
+		}
+		return h;
+	},
+	st2Hex=function(s){
+		return int2Hex(Number(s));
+	},
+	int2Hex3=function(i){
+		var h=int2Hex(i);
+		return h+h+h;
+	},
+	toHex3=function(c){
+		if(c.length>10){ // IE9
+			var p1=1+c.indexOf('('),
+				p2=c.indexOf(')'),
+				cs=c.substring(p1,p2).split(',');
+			return ['#',st2Hex(cs[0]),st2Hex(cs[1]),st2Hex(cs[2])].join('');
+		}else{
+			return c;
+		}
+	};
+
+$.widget( "evol.colorpicker", {
+
+	version: '3.2.1',
+	
+	options: {
+		color: null, // example:'#31859B'
+		showOn: 'both', // possible values: 'focus','button','both'
+		hideButton: false,
+		displayIndicator: true,
+		transparentColor: false,
+		history: true,
+		defaultPalette: 'theme', // possible values: 'theme', 'web'
+		strings: 'Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.'
+	},
+
+	// this is only true while showing the palette until color is chosen
+	_active: false,
+
+	_create: function() {
+		var that=this;
+		this._paletteIdx=this.options.defaultPalette=='theme'?1:2;
+		this._id='evo-cp'+_idx++;
+		this._enabled=true;
+		this.options.showOn=this.options.hideButton?'focus':this.options.showOn;
+		switch(this.element.get(0).tagName){
+			case 'INPUT':
+				var color=this.options.color,
+					e=this.element,
+					css=((this.options.showOn==='focus')?'':'evo-pointer ')+'evo-colorind'+(isMoz?'-ff':_ie)+(this.options.hideButton?' evo-hidden-button':''),
+					style='';
+				this._isPopup=true;
+				this._palette=null;
+				var v=e.val();
+				if(color!==null){
+					if (color != v) e.val(color).change();
+				}else{
+					if(v!==''){
+						color=this.options.color=v;
+					}
+				}
+				if(color===transColor){
+					css+=' evo-transparent';
+				}else{
+					style=(color!==null)?('background-color:'+color):'';
+				}
+				e.addClass('colorPicker '+this._id)
+					.wrap('<div style="width:'+(this.options.hideButton?this.element.width():this.element.width()+32)+'px;'+
+						(isIE?'margin-bottom:-21px;':'')+
+						(isMoz?'padding:1px 0;':'')+
+						'" class="evo-cp-wrap"></div>')
+					.after('<div class="'+css+'" style="'+style+'"></div>')
+					.on('keyup onpaste', function(evt){
+						var c=$(this).val();
+						if(c!=that.options.color){
+							that._setValue(c, true);
+						}
+					});
+				var showOn=this.options.showOn;
+				if(showOn==='both' || showOn==='focus'){
+					e.on('focus', function(){
+						that.showPalette();
+					});
+				}
+				if(showOn==='both' || showOn==='button'){
+					e.next().on('click', function(evt){
+						evt.stopPropagation();
+						that.showPalette();
+						return false;
+					});
+				}
+				break;
+			default:
+				this._isPopup=false;
+				this._palette=this.element.html(this._paletteHTML())
+					.attr('aria-haspopup','true');
+				this._bindColors();
+		}
+		if(this.options.history){
+			if(color){
+				this._add2History(color);
+			}
+			if (this.options.initialHistory) {
+				var c = this.options.initialHistory;
+				for (var i in c){
+					this._add2History(c[i]);
+				}
+			}
+		}
+	},
+
+	_paletteHTML: function() {
+		var pIdx=this._paletteIdx=Math.abs(this._paletteIdx),
+			opts=this.options,
+			labels=opts.strings.split(',');
+
+		var h='<div class="evo-pop'+_ie+' ui-widget ui-widget-content ui-corner-all"'+
+			(this._isPopup?' style="position:absolute"':'')+'>'+
+			// palette
+			'<span>'+this['_paletteHTML'+pIdx]()+'</span>'+
+			// links
+			'<div class="evo-more"><a href="javascript:void(0)">'+labels[1+pIdx]+'</a>';
+		if(opts.history){
+			h+='<a href="javascript:void(0)" class="evo-hist">'+labels[5]+'</a>';
+		}
+		h+='</div>';
+		// indicator
+		if(opts.displayIndicator){
+			h+=this._colorIndHTML(this.options.color)+this._colorIndHTML('');
+		}
+		h+='</div>';
+		return h;
+	},
+
+	_colorIndHTML: function(c) {
+		var css=isIE?'evo-colorbox-ie ':'',
+			style='';
+
+		if(c){
+			if(c===transColor){
+				css+='evo-transparent';
+			}else{
+				style='background-color:'+c;
+			}
+		}else{
+			style='display:none';
+		}
+		return '<div class="evo-color" style="float:left">'+
+			'<div style="'+style+'" class="'+css+'"></div><span>'+ // class="evo-colortxt-ie"
+			(c?c:'')+'</span></div>';
+	},
+
+	_paletteHTML1: function() {
+		var opts=this.options,
+			labels=opts.strings.split(','),
+			oTD='<td style="background-color:#',
+			cTD=isIE?'"><div style="width:2px;"></div></td>':'"><span/></td>',
+			oTRTH='<tr><th colspan="10" class="ui-widget-content">';
+
+		// base theme colors
+		var h='<table class="evo-palette'+_ie+'">'+oTRTH+labels[0]+'</th></tr><tr>';
+		for(var i=0;i<10;i++){ 
+			h+=oTD+baseThemeColors[i]+cTD;
+		}
+		h+='</tr>';
+		if(!isIE){
+			h+='<tr><th colspan="10"></th></tr>';
+		}
+		h+='<tr class="top">';
+		// theme colors
+		for(i=0;i<10;i++){ 
+			h+=oTD+subThemeColors[i]+cTD;
+		}
+		for(var r=1;r<4;r++){
+			h+='</tr><tr class="in">';
+			for(i=0;i<10;i++){ 
+				h+=oTD+subThemeColors[r*10+i]+cTD;
+			}
+		}
+		h+='</tr><tr class="bottom">';
+		for(i=40;i<50;i++){ 
+			h+=oTD+subThemeColors[i]+cTD;
+		}
+		h+='</tr>'+oTRTH;
+		// transparent color
+		if(opts.transparentColor){
+			h+='<div class="evo-transparent evo-tr-box"></div>';
+		}
+		h+=labels[1]+'</th></tr><tr>';
+		// standard colors
+		for(i=0;i<10;i++){ 
+			h+=oTD+standardColors[i]+cTD;
+		}
+		h+='</tr></table>';
+		return h; 
+	},
+
+	_paletteHTML2: function() {
+		var i, iMax,
+			oTD='<td style="background-color:#',
+			cTD=isIE?'"><div style="width:5px;"></div></td>':'"><span/></td>',
+			oTableTR='<table class="evo-palette2'+_ie+'"><tr>',
+			cTableTR='</tr></table>';
+
+		var h='<div class="evo-palcenter">';
+		// hexagon colors
+		for(var r=0,rMax=webColors.length;r<rMax;r++){
+			h+=oTableTR;
+			var cs=webColors[r];
+			for(i=0,iMax=cs.length;i<iMax;i++){ 
+				h+=oTD+cs[i]+cTD;
+			}
+			h+=cTableTR;
+		}
+		h+='<div class="evo-sep"/>';
+		// gray scale colors
+		var h2='';
+		h+=oTableTR;
+		for(i=255;i>10;i-=10){
+			h+=oTD+int2Hex3(i)+cTD;
+			i-=10;
+			h2+=oTD+int2Hex3(i)+cTD;
+		}
+		h+=cTableTR+oTableTR+h2+cTableTR+'</div>';
+		return h;
+	},
+
+	_switchPalette: function(link) {
+		if(this._enabled){
+			var idx, 
+				content, 
+				label,
+				opts=this.options,
+				labels=opts.strings.split(',');
+			if($(link).hasClass('evo-hist')){
+				// history
+				var h='<table class="evo-palette"><tr><th class="ui-widget-content">'+
+					labels[5]+'</th></tr></tr></table>'+
+					'<div class="evo-cHist">';
+				if(history.length===0){
+					h+='<p>&nbsp;'+labels[6]+'</p>';
+				}else{
+					for(var i=history.length-1;i>-1;i--){
+						if(history[i].length===9){
+							if(opts.transparentColor){
+								h+='<div class="evo-transparent"></div>';
+							}
+						}else{
+							h+='<div style="background-color:'+history[i]+'"></div>';
+						}
+					}
+				}
+				h+='</div>';
+				idx=-this._paletteIdx;
+				content=h;
+				label=labels[4];
+			}else{
+				// palette
+				if(this._paletteIdx<0){
+					idx=-this._paletteIdx;
+					this._palette.find('.evo-hist').show();
+				}else{
+					idx=(this._paletteIdx==2)?1:2;
+				}
+				content=this['_paletteHTML'+idx]();
+				label=labels[idx+1];
+				this._paletteIdx=idx;
+			}
+			this._paletteIdx=idx;
+			var e=this._palette.find('.evo-more')
+				.prev().html(content).end()
+				.children().eq(0).html(label);
+			if(idx<0){
+				e.next().hide();
+			}
+		}
+	},
+
+	_downOrUpPositioning: function() {
+		var el = this.element,
+			i = 0;
+		while (el !== null && i < 100) {
+			// Look up the first parent with non-visibile overflow and compute the relative position
+			if (el.css('overflow') != 'visible') {
+				var bott = this._palette.offset().top + this._palette.height(),
+					pBott = el.offset().top + el.height(),
+					top = this._palette.offset().top - this._palette.height() - this.element.outerHeight(),
+					pTop = el.offset().top,
+					openUp = bott > pBott && top > pTop;
+				if (openUp) {
+					this._palette.css({ bottom: this.element.outerHeight()+'px' });
+				} else {
+					this._palette.css({ bottom: 'auto' });
+				}
+				break;
+			}
+			if (el[0].tagName == 'HTML') break;
+			else el = el.offsetParent();
+			i++;
+		}
+	},
+
+	showPalette: function() {
+		if(this._enabled){
+			this._active=true;
+			$('.colorPicker').not('.'+this._id).colorpicker('hidePalette');
+			if(this._palette===null){
+				this._palette=this.element.next()
+					.after(this._paletteHTML()).next()
+					.on('click',function(evt){
+						evt.stopPropagation();
+						return false;
+					});
+				this._bindColors();
+				var that=this;
+				if(this._isPopup){
+					this._downOrUpPositioning();
+					$(document.body).on('click.'+that._id, function(evt){
+						if(evt.target!=that.element.get(0)){
+							that.hidePalette();
+						}
+					}).on('keyup.'+that._id, function(evt){
+						if(evt.keyCode===27){
+							that.hidePalette();
+						}
+					});
+				}
+			}
+		}
+		return this;
+	},
+
+	hidePalette: function() {
+		if(this._isPopup && this._palette){
+			$(document.body).off('click.'+this._id);
+			var that=this;
+			this._palette.off('mouseover click', 'td,.evo-transparent')
+				.fadeOut(function(){
+					that._palette.remove();
+					that._palette=that._cTxt=null;
+				})
+				.find('.evo-more a').off('click');
+		}
+		return this;
+	},
+
+	_bindColors: function() {
+		var that=this,
+			opts=this.options,
+			es=this._palette.find('div.evo-color'),
+			sel=opts.history?'td,.evo-cHist>div':'td';
+
+		if(opts.transparentColor){
+			sel+=',.evo-transparent';
+		}
+		this._cTxt1=es.eq(0).children().eq(0);
+		this._cTxt2=es.eq(1).children().eq(0);
+		this._palette
+			.on('click', sel, function(evt){
+				if(that._enabled){
+					var $this=$(this);
+					that._setValue($this.hasClass('evo-transparent')?transColor:toHex3($this.attr('style').substring(17)));
+					that._active=false;
+				}
+			})
+			.on('mouseover', sel, function(evt){
+				if(that._enabled){
+					var $this=$(this),
+						c=$this.hasClass('evo-transparent')?transColor:toHex3($this.attr('style').substring(17));
+					if(that.options.displayIndicator){
+						that._setColorInd(c,2);
+					}
+					if(that._active){
+						that.element.trigger('mouseover.color', c);
+					}
+				}
+			})
+			.find('.evo-more a').on('click', function(){
+				that._switchPalette(this);
+			});
+	},
+
+	val: function(value) {
+		if (typeof value=='undefined') {
+			return this.options.color;
+		}else{
+			this._setValue(value);
+			return this;
+		}
+	},
+
+	_setValue: function(c, noHide) {
+		c = c.replace(/ /g,'');
+		this.options.color=c;
+		if(this._isPopup){
+			if(!noHide){
+				this.hidePalette();
+			}
+			this._setBoxColor(this.element.val(c).change().next(), c);
+		}else{
+			this._setColorInd(c,1);
+		}
+		if(this.options.history && this._paletteIdx>0){
+			this._add2History(c);
+		}
+		this.element.trigger('change.color', c);
+	},
+
+	_setColorInd: function(c, idx) {
+		var $box=this['_cTxt'+idx];
+		this._setBoxColor($box, c);
+		$box.next().html(c);
+	},
+
+	_setBoxColor: function($box, c) {
+		if(c===transColor){
+			$box.addClass('evo-transparent')
+				.removeAttr('style');
+		}else{
+			$box.removeClass('evo-transparent')
+				.attr('style','background-color:'+c);
+		}
+	},
+
+	_setOption: function(key, value) {
+		if(key=='color'){
+			this._setValue(value, true);
+		}else{
+			this.options[key]=value;
+		}
+	},
+
+	_add2History: function(c) {
+		var iMax=history.length;
+		// skip color if already in history
+		for(var i=0;i<iMax;i++){
+			if(c==history[i]){
+				return;
+			}
+		}
+		// limit of 28 colors in history
+		if(iMax>27){
+			history.shift();
+		}
+		// add to history
+		history.push(c);
+	},
+
+	clear: function(){
+		this.hidePalette().val('');
+	},
+
+	enable: function() {
+		var e=this.element;
+		if(this._isPopup){
+			e.removeAttr('disabled');
+		}else{
+			e.css({
+				'opacity': '1', 
+				'pointer-events': 'auto'
+			});
+		}
+		if(this.options.showOn!=='focus'){
+			this.element.next().addClass('evo-pointer');
+		}
+		e.removeAttr('aria-disabled');
+		this._enabled=true;
+		return this;
+	},
+
+	disable: function() {
+		var e=this.element;
+		if(this._isPopup){
+			e.attr('disabled', 'disabled');
+		}else{
+			this.hidePalette();
+			e.css({
+				'opacity': '0.3', 
+				'pointer-events': 'none'
+			});
+		}
+		if(this.options.showOn!=='focus'){
+			this.element.next().removeClass('evo-pointer');
+		}
+		e.attr('aria-disabled','true');
+		this._enabled=false;
+		return this;
+	},
+
+	isDisabled: function() {
+		return !this._enabled;
+	},
+
+	destroy: function() {
+		$(document.body).off('click.'+this._id);
+		if(this._palette){
+			this._palette.off('mouseover click', 'td,.evo-cHist>div,.evo-transparent')
+				.find('.evo-more a').off('click');
+			if(this._isPopup){
+				this._palette.remove();
+			}
+			this._palette=this._cTxt=null;
+		}
+		if(this._isPopup){
+			this.element
+				.next().off('click').remove()
+				.end().off('focus').unwrap();
+		}
+		this.element.removeClass('colorPicker '+this.id).empty();
+		$.Widget.prototype.destroy.call(this);
+	}
+
+});
+
+})(jQuery);
--- a/APPL/Localscripts/colorpicker/js/evol.colorpicker.min.js
+++ b/APPL/Localscripts/colorpicker/js/evol.colorpicker.min.js
--- a/APPL/Localscripts/colorpicker/less/demo.less
+++ b/APPL/Localscripts/colorpicker/less/demo.less
@@ -0,0 +1,51 @@
+// CSS for evol.colorpicker demo page
+
+body{
+	padding: 10px 20px;
+	font-size: 11pt;
+	font-family: "Century Gothic",arial;
+	color: #777;
+	font-weight: 300;
+}
+a {
+	color: #39C;
+	font-weight: 400;
+
+	&:hover {
+		color: #FF9900;
+	}
+
+	&.sel{
+		color: #000;
+		text-decoration: none;
+	}
+
+}
+#github{
+	position:absolute;
+	right:30px;
+	top: 7px;
+	@media only screen and (max-width: 465px) {
+		display: none;
+	}
+}
+.demoPanel{ 
+	float:left;
+	border: 2px solid #A7C8E2;
+	margin: 4px 3px;
+	padding: 10px; 
+	width:212px;
+	border-radius: 10px;
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+
+	input{
+		width:100px;
+	}
+
+}
+	.footer{
+	text-align: center;
+	font-size:smaller;
+	color:Gray;
+}
--- a/APPL/Localscripts/colorpicker/less/evol.colorpicker.less
+++ b/APPL/Localscripts/colorpicker/less/evol.colorpicker.less
@@ -0,0 +1,180 @@
+//  evol.colorpicker = ColorPicker widget for jQuery UI
+//  (c) 2016 Olivier Giulieri
+
+.evo-pop {
+	z-index:10000;
+	width:204px;
+	padding:3px 3px 0;
+}
+.evo-pop-ie {
+	z-index:10000;
+	width:212px;
+	padding:3px;
+}
+
+.evo-palette {
+  td {
+    font-size:1px;
+    border:solid 1px #c0c0c0;
+    padding:7px;
+    cursor:pointer;
+  }
+  tr.top > td {
+    border-bottom:0;
+  }
+  tr.in > td {
+    border-top:0;
+    border-bottom:0;
+  }
+  tr.bottom > td {
+    border-top:0;
+  }
+  div.sep {
+    height:3px;
+  }
+
+}
+.evo-palette,
+.evo-palette-ie {
+	border-collapse: separate;
+	border-spacing: 4px 0px;
+	*border-collapse: expression('separate', cellSpacing = '2px');
+
+  th {
+    border:0;
+    padding:5px 3px;
+    text-align:left;
+    font-weight:normal;
+    background:transparent !important;
+  }
+
+}
+
+.evo-palette-ie td {
+	font-size:1px;
+	border:solid 1px #c0c0c0;
+	padding:7px;
+	cursor:pointer;
+} 
+
+.evo-palette2,
+.evo-palette2-ie {
+	margin:auto;
+	border-collapse:collapse;
+
+  td {
+    font-size:1px;
+    cursor:pointer;
+  }
+}
+.evo-palette2 td {
+	padding:6px 7px;
+}
+.evo-palette2-ie td {
+	padding:5px;
+} 
+.evo-palcenter {
+	padding:5px;
+	text-align:center;
+}
+
+.evo-colorind,
+.evo-colorind-ie,
+.evo-colorind-ff {
+	border:solid 1px #c3c3c3;
+	width:18px;
+	height:18px;
+	float:right;
+}
+.evo-colorind-ie {
+	position:relative;
+	top:-23px;
+}
+.evo-colorbox-ie {
+	font-size:8px;
+	padding:3px 9px !important;
+}/*
+.evo-colortxt-ie {
+	position:relative;
+	top:-6px;
+}*/
+.evo-pop:after,
+.evo-pop-ie:after,
+.evo-colorind:after, 
+.evo-colorind-ie:after, 
+.evo-colorind-ff:after, 
+.evo-color span:after,
+.evo-cHist:after {
+	content: ".";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+	font-size: 0;
+}
+.evo-color {
+	width:94px;
+	padding: 1px 3px 0 4px;
+
+  div {
+    border:solid 1px #808080;
+    border-right:solid 1px #c0c0c0;
+    border-bottom:solid 1px #c0c0c0;
+    padding:3px;
+    margin-bottom:5px;
+    width:10px;
+    height:10px;
+    float:left;
+  }
+  span {
+    font-size:15px;
+    margin: 1px 0 4px 3px;
+    float:left;
+  }
+}
+
+.evo-sep {
+	height:10px;
+	font-size:0;
+}
+.evo-more {
+	padding:4px 5px 4px;
+	font-size:smaller;
+}
+.evo-cHist {
+	padding:3px;
+  div {
+    cursor: pointer;
+    border:solid 1px #c0c0c0;
+    padding:3px;
+    margin:5px;
+    width:10px;
+    height:10px;
+    float:left;
+  }
+}
+.evo-transparent{
+  background-image: repeating-linear-gradient(
+      135deg, black, black 1px, white 1px, white 3px
+  );
+}
+.evo-tr-box{
+  cursor: pointer;
+  border:solid 1px #c0c0c0;
+  padding:3px;
+  width:7px;
+  height:7px;
+  float:right;
+  position: relative;
+  right: -3px;
+  top: 2px;
+}
+a.evo-hist {
+	margin-left:6px;
+}
+.evo-pointer {
+	cursor:pointer;
+}
+.evo-hidden-button {
+  display: none;
+}
--- a/APPL/Localscripts/colorpicker/package.json
+++ b/APPL/Localscripts/colorpicker/package.json
@@ -0,0 +1,36 @@
+{
+    "name": "evol.colorpicker",
+    "version": "3.2.4",
+    "description": "jQuery UI widget for web color picking which looks like the one in Microsoft Office 2010.",
+    "copyright": "(c) 2016 Olivier Giulieri",
+    "homepage": "http://evoluteur.github.io/colorpicker/",
+    "author": {
+        "name": "Olivier Giulieri",
+        "url": "https://github.com/evoluteur"
+    },
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/evoluteur/colorpicker.git"
+    },
+    "bugs": "https://github.com/evoluteur/colorpicker/issues",
+    "dependencies": {
+        "jquery": "~1.7.0",
+        "jquery-ui": "~1.8.0"
+    },
+    "devDependencies": {
+        "grunt": "~0.4.5",
+        "grunt-contrib-jshint": "~0.11.0",
+        "grunt-contrib-uglify": "~0.7.0",
+        "grunt-contrib-less": "~1.0.0"
+    },
+    "keywords": [
+        "color",
+        "picker",
+        "colorpicker",
+        "input",
+        "widget",
+        "jquery",
+        "jquery-ui"
+    ]
+}
--- a/APPL/Localscripts/colorpicker/screenshot1.png
+++ b/APPL/Localscripts/colorpicker/screenshot1.png
--- a/APPL/Localscripts/colorpicker/screenshot2.png
+++ b/APPL/Localscripts/colorpicker/screenshot2.png
--- a/APPL/MGT/cad_label.asp
+++ b/APPL/MGT/cad_label.asp
@@ -0,0 +1,51 @@
+<%@language = "javascript" %>
+<% /*
+    $Revision$
+    $Id$
+
+    File:           cad_label.asp
+
+    Description:    fac_management aanroep van model_cad_label
+
+    Context:
+
+    Notes:
+*/
+%>
+<!-- #include file="../scf/scaffolding.inc" -->
+<!-- #include file="../api2/model_cad_label.inc" -->
+<%
+var this_model = new model_cad_label();
+
+this_model.hook_pre_edit = function (obj, fld)
+{
+    var labeltype = obj.cad_label_type;
+    var situatie = (labeltype & 4 ? "scenario" : "actueel");
+
+%>
+<script type="text/javascript">
+  var module = "CAD";
+</script>
+<%
+}
+
+scaffolding(this_model,
+    {
+        "search": {
+            "autosearch": true,
+            "filters": [
+                "view_name",
+                "type_place",
+                "type_situation"
+            ]
+        },
+        "list": {
+            "columns": [
+                "name",
+                "view_name",
+                "type_place",
+                "type_situation"
+            ]
+        }
+    });
+%>
--- a/APPL/MGT/cad_legenda.asp
+++ b/APPL/MGT/cad_legenda.asp
@@ -0,0 +1,47 @@
+<%@language = "javascript" %>
+<% /*
+    $Revision$
+    $Id$
+
+    File:           cad_legenda.asp
+
+    Description:    fac_management aanroep van model_cad_legenda
+
+    Context:
+
+    Notes:
+*/
+%>
+<!-- #include file="../scf/scaffolding.inc" -->
+<!-- #include file="../api2/model_cad_legenda.inc" -->
+<%
+var this_model = new model_cad_legenda();
+
+scaffolding(this_model,
+    {
+        "search": {
+            "autosearch": true,
+            "filters": [
+                "name"
+            ]
+        },
+        "list": {
+            "columns": [
+                "id",
+                "name"
+            ]
+        },
+        "show": {
+            "js": [
+                "./mgt_tools.js"
+            ],
+            "buttons": [
+                {
+                    "title": "lcl_lcl_terminologie",
+                    "action": "edit_terminologie",
+                    "icon": "doc_text_image.png"
+                }
+            ]
+        }
+    });
+%>
--- a/APPL/MGT/cad_legendawaarde.js
+++ b/APPL/MGT/cad_legendawaarde.js
@@ -0,0 +1,68 @@
+/*
+     $Revision$
+     $Id$
+*/
+
+$(document).ready(function () {
+    setTimeout("init_cad_legendawaarde()", 100);
+  });
+
+
+function init_cad_legendawaarde()
+{
+    var kleur = "#" + $("#value_rgb").val();
+
+    $("#value_rgb").on("change", function() { change_value_rgb(); });
+    $("#_color").on("click", function() { showColor(); });
+    $("#btn_cp_accept").on("click", function() { acceptColor(); });
+    $("#btn_cp_hide").on("click", function()   { hideColor();   });
+
+    $("#color_panel").addClass("colorPanel");
+    $("#color_panel").hide();
+
+  	$("#color_select").colorpicker(
+	    {
+		    defaultPalette: "web",
+		    history: false,
+		    displayIndicator: true,
+		    color: kleur,
+		    hideButton: true,
+		    showOn: "button"
+	    });
+    FcltMgr.resized();
+}
+
+function showColor()
+{
+    $("#color_panel").show();
+    FcltMgr.resized();
+}
+
+function acceptColor()
+{
+    var kleur = $("#color_select").colorpicker("val");
+    var rgb = kleur.replace("#","");
+
+    $("#value_rgb").val(rgb);
+    $("#_color span").css("background-color", kleur);
+    $("#color_panel").hide();
+    FcltMgr.resized();
+}
+
+function hideColor()
+{
+    $("#color_panel").hide();
+    FcltMgr.resized();
+}
+
+function change_value_rgb()
+{
+    var rgb = $("#value_rgb").val();
+
+    $("#_color span").css("background-color", "#"+rgb);
+}
+
+//function pre_submit()
+//{
+//    return true;
+//}
--- a/APPL/MGT/cad_thema.asp
+++ b/APPL/MGT/cad_thema.asp
@@ -0,0 +1,116 @@
+<%@language = "javascript" %>
+<% /*
+    $Revision$
+    $Id$
+
+    File:           cad_thema.asp
+
+    Description:    fac_management aanroep van model_cad_thema
+
+    Context:
+
+    Notes:
+*/
+%>
+<!-- #include file="../scf/scaffolding.inc" -->
+<!-- #include file="../api2/model_cad_thema.inc" -->
+<%
+var this_model = model_cad_thema;
+
+this_model.hook_pre_put = function(params, jsondata, key)
+{   // update
+    refresh_legenda(jsondata);
+}
+this_model.hook_pre_post = function(params, jsondata)
+{   // insert
+    refresh_legenda(jsondata);
+}
+
+scaffolding(this_model,
+    {
+        "search": {
+            "autosearch": true,
+            "filters": [
+                "name",
+                "legenda",
+                "type_place",
+                "type_situation"
+                ]
+        },
+        "list": {
+            "columns": [
+                "id",
+                "name",
+                "legenda",
+                "type_place",
+                "type_situation"
+            ]
+          }
+    });
+
+
+    function refresh_legenda(data)
+    {
+        if (data._generate == 1)
+            GenerateLegenda(data);
+        if (data._update == 1)
+            UpdateLegenda(data);
+    }
+
+    function GenerateLegenda(data)
+    {   // Genereer een legenda aan de hand van voorkomende waarden.
+        //
+        var rndSQL = "to_char(dbms_utility.get_hash_value(WAARDE,0,power(2,24)), '0XXXXX')";
+        var legendaName = "Legenda_" + Date.parse(new Date());
+        var sql = "INSERT INTO cad_legenda"
+                + " (cad_legenda_omschrijving, cad_legenda_discreet)"
+                + " VALUES"
+                + "(" + safe.quoted_sql(legendaName)
+                + ", 1)";
+        Oracle.Execute(sql);
+
+        sql = "SELECT cad_legenda_key"
+            + "  FROM cad_legenda"
+            + " WHERE cad_legenda_omschrijving = " + safe.quoted_sql(legendaName)
+        var oRs = Oracle.Execute(sql);
+        var legenda_key = oRs("cad_legenda_key").Value;
+
+        sql = "INSERT INTO cad_legendawaarde"
+            + " ( cad_legenda_key"
+            + " , cad_legendawaarde_value"
+            + " , cad_legendawaarde_rgb"
+            + " , cad_legendawaarde_omschr"
+            + " ) SELECT DISTINCT " + legenda_key
+            + "        , waarde"
+            + "        , " + rndSQL
+            + "        , waarde"
+            + "     FROM " + data.view_name
+
+        Oracle.Execute(sql);
+
+        data.legenda = legenda_key;
+    }
+
+    function UpdateLegenda(data)
+    {   // Breid een legenda uit aan de hand van voorkomende nieuwe waarden.
+        var rndSQL = "to_char(dbms_utility.get_hash_value(WAARDE,0,power(2,24)), '0XXXXX')";
+
+        var sql = "INSERT INTO cad_legendawaarde"
+                + " ( cad_legenda_key"
+                + " , cad_legendawaarde_value"
+                + " , cad_legendawaarde_rgb"
+                + " , cad_legendawaarde_omschr"
+                + " ) SELECT DISTINCT " + data.legenda
+                + "        , waarde"
+                + "        , " + rndSQL
+                + "        , waarde"
+                + "     FROM " + data.view_name + " thv"
+                + "    WHERE waarde IS NOT NULL "
+                + "      AND NOT EXISTS (SELECT cl.cad_legendawaarde_value"
+                                    + "    FROM cad_legendawaarde cl"
+                                    + "   WHERE cl.cad_legendawaarde_value = thv.waarde"
+                                    + "     AND cl.cad_legenda_key = " + data.legenda
+                                    + " )";
+        Oracle.Execute(sql);
+    }
+%>
--- a/APPL/SCF/scaffolding.inc
+++ b/APPL/SCF/scaffolding.inc
@@ -137,12 +137,16 @@ function scf_ROFIELDTR(model, fld, val, key, params)
    {   // Vanuit scaffolding_search
        field = model.fields[fld.replace(/^(start_|end_)/,"")];
    }
-
    var txt = val;
    if (txt === null || typeof txt === "undefined")
    {
        if (field.typ == "check")
            txt = 0;
+        else if (field.typ == "label")
+        {
+            scf_LABELTR(fld, field, params);
+            return;
+        }
        else
            return; // Altijd suppressEmpty
    }
@@ -174,13 +178,21 @@ function scf_ROFIELDTR(model, fld, val, key, params)

    if (field.bits)
    {
+        var params_bits = params;
+        scf_GROUP_START(model, fld, val, params_bits);
+
        for (var i=0; i < field.bits.length; i++)
        {
            var bit = field.bits[i];
            if (bit.typ == "check")
            {
-                var data = (val & bit.mask);
-                ROCHECKBOXTR("fldtxt", bit.label, data, params);
+                params_bits.readonly = true;
+                scf_GROUP_CHECK(bit, "bit_group", val, params_bits);
+            }
+            if (bit.typ == "radio")
+            {
+                params_bits.readonly = true;
+                scf_GROUP_RADIO(bit, "bit_group", val, params_bits);
            }
            else if (bit.typ == "LOV")
            {
@@ -188,6 +200,7 @@ function scf_ROFIELDTR(model, fld, val, key, params)
                ROFIELDTR("fldtxt", bit.label, data, params);
            }
        }
+        scf_GROUP_END();
    }
    else if (field.typ == "check" || field.typ == "check0")
        ROCHECKBOXTR("fldtxt", field.label, txt, params);
@@ -335,31 +348,21 @@ function scf_RWFIELDTR(model, fld, val, key, params)
            }
        }
    }
-    else if (field.BITS)
-    {
-        for (var bit in field.BITS)
-        {
-            var bits = field.BITS[bit];
-            var data = (val.id & bits.mask);
-            var sql = api2.splitLOV2sql(bits.LOV);
-            FCLTselector(fld, sql, { label: bits.label,
-                                     initKey: params.search?"":data
-                                     // geen empty gedoe: de eerste is altijd de default
-                                   });
-        }
-    }
    else if (field.bits)
    {
        var params_bits = params;
-        params_bits.hidden_fld = true;
-        RWFIELDTR(fld, "fld", field.label, val, params_bits);
+        scf_GROUP_START(model, fld, val, params_bits);
+
        for (var i=0; i < field.bits.length; i++)
        {
            var bit = field.bits[i];
            if (bit.typ == "check")
            {
-                var data = (val & bit.mask);
-                RWCHECKBOXTR(bit.name, "fldcheck", bit.label, data);
+                scf_GROUP_CHECK(bit, "bit_group", val, params_bits);
+            }
+            else if (bit.typ == "radio")
+            {
+                scf_GROUP_RADIO(bit, "bit_group", val, params_bits);
            }
            else if (bit.typ == "LOV")
            {
@@ -372,6 +375,7 @@ function scf_RWFIELDTR(model, fld, val, key, params)
                             });
            }
        }
+        scf_GROUP_END();
    }
    else if (field.LOV)
    {
@@ -437,6 +441,10 @@ function scf_RWFIELDTR(model, fld, val, key, params)
    {
        scf_BUTTONTR(fld, field, params);
    }
+    else if (field.typ == "div")
+    {
+        scf_DIV(fld, field, params);
+    }
    else if (field.flexmodule)
    {
        FCLTflexfileselector(fld,
@@ -488,13 +496,100 @@ function scf_RWHIDDENTR(model, fld, val)

 function scf_LABELTR(fld, field, params)
 {
-Response.Write('<div id="'+fld+'"><tr><td><b>'+field.label+'</b></td><td><b>'+field.defaultvalue+'</b></td></tr></div>');
+var labelname = (field.label ? field.label : (field.defaultvalue ? "" : field.label));
+var labelvalue = (field.label ? (field.defaultvalue ? field.defaultvalue : "") : field.defaultvalue);
+Response.Write('<div id="label_'+fld+'"><tr><td><b>'+field.label+'</b></td><td><b>'+labelvalue+'</b></td></tr></div>');
 }

 function scf_BUTTONTR(fld, field, params)
 {
 Response.Write('<div id="tr_'+fld+'"><tr><td class="label">'
              +'<label for="'+fld+'">'+(field.label?field.label+':':'')+'</label>'
-              +'</td><td><button id="'+fld+'">'+field.defaultvalue+'</button></td></tr></div>');
+              +'</td><td><button id="'+fld+'" name="'+fld+'">'+field.defaultvalue+'</button></td></tr></div>');
 }
+
+function scf_DIV(fld, field, params)
+{
+Response.Write('<div id="'+fld+'" name="'+fld+'">'+field.defaultvalue+'</div>');
+}
+
+function scf_GROUP_START(model, fld, val, params)
+{
+    var field = model.fields[fld];
+
+    scf_RWHIDDENTR(model, fld, val);
+    scf_LABELTR(fld, field, params);
+}
+function scf_GROUP_END()
+{
+}
+function scf_GROUP_CHECK(pgroup, pclass, pvalue, params)
+{
+    var params = params||{};
+    var group_val = pvalue & pgroup.mask;
+    var isreadonly = params.readonly || (mode == "show");
+
+    Response.Write("<tr " + (params.trclass?"class=\""+params.trclass+"\"":"") +">");
+    Response.Write("<td class=\"label " + pclass + "\">");
+    Response.Write("<label>" + (pgroup.label?safe.html(pgroup.label):"") + "</label>");
+    Response.Write("</td>");
+
+    Response.Write("<td>");
+    for (var i=0; i<pgroup.radios.length; i++)
+    {
+        var bit = pgroup.radios[i];
+        var ischecked = (bit.mask == 0
+                        ? (group_val == bit.mask)
+                        : ((group_val & bit.mask) == bit.mask)
+                        );
+
+        Response.Write("<input type=\"hidden\" id=\"has_" + bit.name + "\" name=\"has_" + bit.name + "\" value=\"1\""
+                      + (params.readonly ? " disabled" : "")
+                      +">");
+        Response.Write("<input type=\"checkbox\" id=\"" + bit.name + "\" name=\"" + bit.name + "\""
+                      +" class=\"fldcheck\""
+                      + (ischecked ? " CHECKED" : "")
+                      + (params.hidden ? " style=\"visibility:hidden\"" : "")
+                      + (isreadonly? " disabled" : "")
+                      + (params.html ? params.html : "")
+                      +">");
+        if (bit.label)
+        {
+            Response.Write("<label for=\"" + bit.name + "\">" + (bit.label ? bit.label :"") + "</label>");
+        }
+        Response.Write("<br>");
+    }
+    Response.Write("</td>");
+    Response.Write("</tr>");
+}
+function scf_GROUP_RADIO(pgroup, pclass, pvalue, params)
+{
+    var params = params||{};
+    var group_val = pvalue & pgroup.mask;
+    var isreadonly = params.readonly || (mode == "show");
+
+    Response.Write("<tr " + (params.trclass?"class=\""+params.trclass+"\"":"") +">");
+    Response.Write("<td class=\"label " + pclass + "\">");
+    Response.Write("<label>" + (pgroup.label?safe.html(pgroup.label):"") + "</label>");
+    Response.Write("</td>");
+
+    Response.Write("<td>");
+    for (var i=0; i<pgroup.radios.length; i++)
+    {
+        var bit = pgroup.radios[i];
+        var ischecked = (group_val == bit.mask);
+
+        if (ischecked || mode=="edit")  // In show alleen de geselecteerde waarde laten zien.
+        {
+            Response.Write("<input name=\"" + pgroup.name + "\" type=\"radio\" value=\"" + bit.mask + "\""
+                          + (ischecked?" checked":"")
+                          + (isreadonly? " disabled" : "")
+                          +">");
+            Response.Write("&nbsp;" + safe.html(bit.label) + "<br>");
+        }
+    }
+    Response.Write("</td>");
+    Response.Write("</tr>");
+}
+
 %>
--- a/APPL/SCF/scaffolding_edit.inc
+++ b/APPL/SCF/scaffolding_edit.inc
@@ -22,6 +22,8 @@ function scaffolding_edit(model, scf_params)

    if (scf_params.edit && "requires" in scf_params.edit)
        FCLTHeader.Requires(scf_params.edit.requires);
+    if (model.edit && "requires" in model.edit)  // Voor het included model.
+        FCLTHeader.Requires(model.edit.requires);

    var transit = "";
    if ("transit" in scf_params)
--- a/APPL/SCF/scaffolding_list.inc
+++ b/APPL/SCF/scaffolding_list.inc
@@ -209,6 +209,13 @@ function scaffolding_list(model, scf_params)
                    return "<span class='facmgtmultilang' onclick='"+safe.htmlattr(fn)+"'>" + safe.html(plabel) + "</span>";
                }
        }
+        function fnfncolFunction(fn)
+        {
+            return function (oRs)
+                {
+                    return fn(oRs);
+                }
+        }
        function fnfncolInclude(inctable, fld)
        {
            return function (oRs)
@@ -304,6 +311,10 @@ function scaffolding_list(model, scf_params)
            {
               coldata.content = fnfncolCheck(fld);
            }
+            if (field.listfunction)
+            {
+                coldata.content = fnfncolFunction(field.listfunction);
+            }
            // Child tabellen kunnen we inline localizen
            if (field.translate && S("multi_language_option") && model.edit.modal)
                coldata.content = fnfncolTranslatable(fld);
--- a/APPL/Shared/iface.inc
+++ b/APPL/Shared/iface.inc
@@ -414,7 +414,7 @@ function RWCHECKBOXTR(pname, pclass, plabel, pvalue, params)
        %><td class="label"></td><td><%
      }
      CHECKBOX(pclass, pname, pvalue, params)
-      if (!plabel) { %></td><% }
+      if (plabel) { %></td><% }
    } else {
      %><td colspan="2"><% CHECKBOX(pclass, pname, pvalue, params) %><%
    if (plabel) {
@@ -428,7 +428,7 @@ function RWCHECKBOXTR(pname, pclass, plabel, pvalue, params)

 function CHECKBOXTR(plabel, pclass, pid, pvalue, params) // DEPCRECATED, backward compatible
 {
-    RWCHECKBOXTR(pid, pclass, plabel, pvalue, params)
+    RWCHECKBOXTR(pid, pclass, plabel, pvalue, params);
 };

 function ROCHECKBOXTR(pclass, plabel, pvalue, params)
				`@@ -0,0 +1 @@`
				.evo-pop{z-index:10000;width:204px;padding:3px 3px 0}.evo-pop-ie{z-index:10000;width:212px;padding:3px}.evo-palette td{font-size:1px;border:solid 1px #c0c0c0;padding:7px;cursor:pointer}.evo-palette tr.top>td{border-bottom:0}.evo-palette tr.in>td{border-top:0;border-bottom:0}.evo-palette tr.bottom>td{border-top:0}.evo-palette div.sep{height:3px}.evo-palette,.evo-palette-ie{border-collapse:separate;border-spacing:4px 0px;*border-collapse:expression('separate', cellSpacing='2px')}.evo-palette th,.evo-palette-ie th{border:0;padding:5px 3px;text-align:left;font-weight:normal;background:transparent !important}.evo-palette-ie td{font-size:1px;border:solid 1px #c0c0c0;padding:7px;cursor:pointer}.evo-palette2,.evo-palette2-ie{margin:auto;border-collapse:collapse}.evo-palette2 td,.evo-palette2-ie td{font-size:1px;cursor:pointer}.evo-palette2 td{padding:6px 7px}.evo-palette2-ie td{padding:5px}.evo-palcenter{padding:5px;text-align:center}.evo-colorind,.evo-colorind-ie,.evo-colorind-ff{border:solid 1px #c3c3c3;width:18px;height:18px;float:right}.evo-colorind-ie{position:relative;top:-23px}.evo-colorbox-ie{font-size:8px;padding:3px 9px !important}.evo-pop:after,.evo-pop-ie:after,.evo-colorind:after,.evo-colorind-ie:after,.evo-colorind-ff:after,.evo-color span:after,.evo-cHist:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0}.evo-color{width:94px;padding:1px 3px 0 4px}.evo-color div{border:solid 1px #808080;border-right:solid 1px #c0c0c0;border-bottom:solid 1px #c0c0c0;padding:3px;margin-bottom:5px;width:10px;height:10px;float:left}.evo-color span{font-size:15px;margin:1px 0 4px 3px;float:left}.evo-sep{height:10px;font-size:0}.evo-more{padding:4px 5px 4px;font-size:smaller}.evo-cHist{padding:3px}.evo-cHist div{cursor:pointer;border:solid 1px #c0c0c0;padding:3px;margin:5px;width:10px;height:10px;float:left}.evo-transparent{background-image:repeating-linear-gradient(135deg, #000, #000 1px, #fff 1px, #fff 3px)}.evo-tr-box{cursor:pointer;border:solid 1px #c0c0c0;padding:3px;width:7px;height:7px;float:right;position:relative;right:-3px;top:2px}a.evo-hist{margin-left:6px}.evo-pointer{cursor:pointer}.evo-hidden-button{display:none}