diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index be37ce94..9788e6f8 100755
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1475,7 +1475,7 @@
     },
 
     "ledStripHelp": {
-        "message": "The flight controller can control colors and effects of individual LEDs on a strip.<br />Configure LEDs on the grid, configure wiring order then attach LEDs on your aircraft according to grid positions."
+        "message": "The flight controller can control colors and effects of individual LEDs on a strip.<br />Configure LEDs on the grid, configure wiring order then attach LEDs on your aircraft according to grid positions. LEDs without wire ordering number will not be saved.<br />Double-click on a color to edit the HSV values."
     },
     "ledStripButtonSave": {
         "message": "Save"
diff --git a/js/backup_restore.js b/js/backup_restore.js
index f91fc140..56890083 100644
--- a/js/backup_restore.js
+++ b/js/backup_restore.js
@@ -93,7 +93,8 @@ function configuration_backup(callback) {
         MSP_codes.MSP_RX_MAP,
         MSP_codes.MSP_BF_CONFIG,
         MSP_codes.MSP_CF_SERIAL_CONFIG,
-        MSP_codes.MSP_LED_STRIP_CONFIG
+        MSP_codes.MSP_LED_STRIP_CONFIG,
+        MSP_codes.MSP_LED_COLORS
     ];
 
     function update_unique_data_list() {
@@ -110,6 +111,9 @@ function configuration_backup(callback) {
             uniqueData.push(MSP_codes.MSP_FAILSAFE_CONFIG);
             uniqueData.push(MSP_codes.MSP_RXFAIL_CONFIG);
         }
+        if (semver.gte(CONFIG.apiVersion, "1.19.0")) {
+            uniqueData.push(MSP_codes.MSP_LED_STRIP_MODECOLOR);
+        }
     }
 
     update_unique_data_list();
@@ -129,7 +133,11 @@ function configuration_backup(callback) {
                 configuration.BF_CONFIG = jQuery.extend(true, {}, BF_CONFIG);
                 configuration.SERIAL_CONFIG = jQuery.extend(true, {}, SERIAL_CONFIG);
                 configuration.LED_STRIP = jQuery.extend(true, [], LED_STRIP);
+                configuration.LED_COLORS = jQuery.extend(true, [], LED_COLORS);
 
+                if (semver.gte(CONFIG.apiVersion, "1.19.0")) {
+                    configuration.LED_MODE_COLORS = jQuery.extend(true, [], LED_MODE_COLORS);
+                }
                 if (semver.gte(CONFIG.apiVersion, "1.8.0")) {
                     configuration.FC_CONFIG = jQuery.extend(true, {}, FC_CONFIG);
                     configuration.ARMING_CONFIG = jQuery.extend(true, {}, ARMING_CONFIG);
@@ -164,7 +172,7 @@ function configuration_backup(callback) {
             now = (d.getMonth() + 1) + '.' + d.getDate() + '.' + d.getFullYear() + '.' + d.getHours() + '.' + d.getMinutes();
 
         // create or load the file
-        chrome.fileSystem.chooseEntry({type: 'saveFile', suggestedName: 'cleanflight_backup_' + now, accepts: accepts}, function (fileEntry) {
+        chrome.fileSystem.chooseEntry({type: 'saveFile', suggestedName: 'inav_backup_' + now, accepts: accepts}, function (fileEntry) {
             if (chrome.runtime.lastError) {
                 console.error(chrome.runtime.lastError.message);
                 return;
@@ -583,6 +591,21 @@ function configuration_restore(callback) {
             appliedMigrationsCount++;
         }
 
+        if (!compareVersions(migratedVersion, '1.3.1')) {
+            
+            // LED_COLORS & LED_MODE_COLORS support was added.
+            if (!configuration.LED_COLORS) {
+                configuration.LED_COLORS = [];
+            }
+            if (!configuration.LED_MODE_COLORS) {
+                configuration.LED_MODE_COLORS = [];
+            }
+
+            migratedVersion = '1.3.1';
+            GUI.log(chrome.i18n.getMessage('configMigratedTo', [migratedVersion]));
+            appliedMigrationsCount++;
+        }
+
         if (appliedMigrationsCount > 0) {
             GUI.log(chrome.i18n.getMessage('configMigrationSuccessful', [appliedMigrationsCount]));
         }
@@ -709,6 +732,8 @@ function configuration_restore(callback) {
                     BF_CONFIG = configuration.BF_CONFIG;
                     SERIAL_CONFIG = configuration.SERIAL_CONFIG;
                     LED_STRIP = configuration.LED_STRIP;
+                    LED_COLORS = configuration.LED_COLORS;
+                    LED_MODE_COLORS = configuration.LED_MODE_COLORS;
                     ARMING_CONFIG = configuration.ARMING_CONFIG;
                     FC_CONFIG = configuration.FC_CONFIG;
                     _3D = configuration._3D;
@@ -738,7 +763,18 @@ function configuration_restore(callback) {
             }
 
             function send_led_strip_config() {
-                MSP.sendLedStripConfig(send_rxfail_config);
+                MSP.sendLedStripConfig(send_led_strip_colors);
+            }
+
+            function send_led_strip_colors() {
+                MSP.sendLedStripColors(send_led_strip_mode_colors);
+            }
+
+            function send_led_strip_mode_colors() {
+                if (semver.gte(CONFIG.apiVersion, "1.19.0"))
+                    MSP.sendLedStripModeColors(send_rxfail_config);
+                else
+                    send_rxfail_config();
             }
 
             function send_rxfail_config() {
diff --git a/js/fc.js b/js/fc.js
index 0369086e..6f1e080c 100644
--- a/js/fc.js
+++ b/js/fc.js
@@ -4,6 +4,8 @@
 var CONFIG;
 var BF_CONFIG;
 var LED_STRIP;
+var LED_COLORS;
+var LED_MODE_COLORS;
 var PID;
 var PID_names;
 var PIDs;
@@ -75,9 +77,10 @@ var FC = {
         };
 
         LED_STRIP = [];
+        LED_COLORS = [];
+        LED_MODE_COLORS = [];
 
         PID = {
-
         };
 
         PID_names = [];
diff --git a/js/msp.js b/js/msp.js
index 0f3675aa..c47e9932 100644
--- a/js/msp.js
+++ b/js/msp.js
@@ -15,6 +15,8 @@ var MSP_codes = {
     MSP_SET_MODE_RANGE:         35,
     MSP_RX_CONFIG:              44,
     MSP_SET_RX_CONFIG:          45,
+    MSP_LED_COLORS:             46,
+    MSP_SET_LED_COLORS:         47,
     MSP_LED_STRIP_CONFIG:       48,
     MSP_SET_LED_STRIP_CONFIG:   49,
     MSP_ADJUSTMENT_RANGES:      52,
@@ -66,6 +68,7 @@ var MSP_codes = {
     MSP_3D:                 124,
     MSP_RC_DEADBAND:        125,
     MSP_SENSOR_ALIGNMENT:   126,
+    MSP_LED_STRIP_MODECOLOR:127,
     MSP_STATUS_EX:          150,
 
     MSP_SET_RAW_RC:         200,
@@ -86,6 +89,7 @@ var MSP_codes = {
     MSP_SET_RC_DEADBAND:    218,
     MSP_SET_RESET_CURR_PID: 219,
     MSP_SET_SENSOR_ALIGNMENT: 220,
+    MSP_SET_LED_STRIP_MODECOLOR:221,
 
     // MSP_BIND:               240,
 
@@ -127,8 +131,10 @@ var MSP = {
     packet_error:               0,
     unsupported:                0,
 
-    ledDirectionLetters:        ['n', 'e', 's', 'w', 'u', 'd'],      // in LSB bit order
-    ledFunctionLetters:         ['i', 'w', 'f', 'a', 't', 'r', 'c'], // in LSB bit order
+    ledDirectionLetters:        ['n', 'e', 's', 'w', 'u', 'd'],        // in LSB bit order
+    ledFunctionLetters:         ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b', 'l'], // in LSB bit order
+    ledBaseFunctionLetters:     ['c', 'f', 'a', 'l', 's', 'g', 'r'], // in LSB bit 
+    ledOverlayLetters:          ['t', 'o', 'b', 'n', 'i', 'w'], // in LSB bit 
 
     last_received_timestamp:   null,
     analog_last_received_timestamp: null,
@@ -887,45 +893,142 @@ var MSP = {
                 LED_STRIP = [];
 
                 var ledCount = data.byteLength / 7; // v1.4.0 and below incorrectly reported 4 bytes per led.
+                if (semver.gte(CONFIG.apiVersion, "1.20.0"))
+                    ledCount = data.byteLength / 4;
 
                 var offset = 0;
                 for (var i = 0; offset < data.byteLength && i < ledCount; i++) {
 
-                    var directionMask = data.getUint16(offset, 1);
-                    offset += 2;
+                    if (semver.lt(CONFIG.apiVersion, "1.20.0")) {
+                      var directionMask = data.getUint16(offset, 1);
+                      offset += 2;
 
-                    var directions = [];
-                    for (var directionLetterIndex = 0; directionLetterIndex < MSP.ledDirectionLetters.length; directionLetterIndex++) {
-                        if (bit_check(directionMask, directionLetterIndex)) {
-                            directions.push(MSP.ledDirectionLetters[directionLetterIndex]);
-                        }
-                    }
+                      var directions = [];
+                      for (var directionLetterIndex = 0; directionLetterIndex < MSP.ledDirectionLetters.length; directionLetterIndex++) {
+                          if (bit_check(directionMask, directionLetterIndex)) {
+                              directions.push(MSP.ledDirectionLetters[directionLetterIndex]);
+                          }
+                      }
 
-                    var functionMask = data.getUint16(offset, 1);
-                    offset += 2;
+                      var functionMask = data.getUint16(offset, 1);
+                      offset += 2;
 
-                    var functions = [];
-                    for (var functionLetterIndex = 0; functionLetterIndex < MSP.ledFunctionLetters.length; functionLetterIndex++) {
-                        if (bit_check(functionMask, functionLetterIndex)) {
-                            functions.push(MSP.ledFunctionLetters[functionLetterIndex]);
-                        }
-                    }
+                      var functions = [];
+                      for (var functionLetterIndex = 0; functionLetterIndex < MSP.ledFunctionLetters.length; functionLetterIndex++) {
+                          if (bit_check(functionMask, functionLetterIndex)) {
+                              functions.push(MSP.ledFunctionLetters[functionLetterIndex]);
+                          }
+                      }
 
-                    var led = {
-                        directions: directions,
-                        functions: functions,
-                        x: data.getUint8(offset++, 1),
-                        y: data.getUint8(offset++, 1),
-                        color: data.getUint8(offset++, 1)
-                    };
+                      var led = {
+                          directions: directions,
+                          functions: functions,
+                          x: data.getUint8(offset++, 1),
+                          y: data.getUint8(offset++, 1),
+                          color: data.getUint8(offset++, 1)
+                      };
 
-                    LED_STRIP.push(led);
+                      LED_STRIP.push(led);
+                    } else {
+                        var mask = data.getUint32(offset, 1);
+                        offset +=4;
+                        
+                        var functionId = (mask >> 8) & 0xF;
+                        var functions = [];
+                        for (var baseFunctionLetterIndex = 0; baseFunctionLetterIndex < MSP.ledBaseFunctionLetters.length; baseFunctionLetterIndex++) {
+                            if (functionId == baseFunctionLetterIndex) {
+                                functions.push(MSP.ledBaseFunctionLetters[baseFunctionLetterIndex]);
+                                break;
+                            }
+                }
+                        
+                        var overlayMask = (mask >> 12) & 0x3F;
+                        for (var overlayLetterIndex = 0; overlayLetterIndex < MSP.ledOverlayLetters.length; overlayLetterIndex++) {
+                            if (bit_check(overlayMask, overlayLetterIndex)) {
+                                functions.push(MSP.ledOverlayLetters[overlayLetterIndex]);
+                            }
+                        }
+                        
+                        var directionMask = (mask >> 22) & 0x3F;
+                        var directions = [];
+                        for (var directionLetterIndex = 0; directionLetterIndex < MSP.ledDirectionLetters.length; directionLetterIndex++) {
+                            if (bit_check(directionMask, directionLetterIndex)) {
+                                directions.push(MSP.ledDirectionLetters[directionLetterIndex]);
+                            }
+                        }
+                        var led = {
+                            y: (mask) & 0xF,
+                            x: (mask >> 4) & 0xF,
+                            functions: functions,
+                            color: (mask >> 18) & 0xF,
+                            directions: directions,
+                            parameters: (mask >> 28) & 0xF
+                        };
+                        
+                        LED_STRIP.push(led);
+                    }
                 }
-
                 break;
             case MSP_codes.MSP_SET_LED_STRIP_CONFIG:
                 console.log('Led strip config saved');
                 break;
+            case MSP_codes.MSP_LED_COLORS:
+                
+                LED_COLORS = [];
+                
+                var colorCount = data.byteLength / 4;
+                
+                var offset = 0;
+                for (var i = 0; offset < data.byteLength && i < colorCount; i++) {
+
+                    var h = data.getUint16(offset, 1);
+                    var s = data.getUint8(offset + 2, 1);
+                    var v = data.getUint8(offset + 3, 1);
+                    offset += 4;
+
+                    var color = {
+                        h: h,
+                        s: s,
+                        v: v
+                    };
+                    
+                    LED_COLORS.push(color);
+                }
+                
+                break;
+            case MSP_codes.MSP_SET_LED_COLORS:
+                console.log('Led strip colors saved');
+                break;
+            case MSP_codes.MSP_LED_STRIP_MODECOLOR:
+                if (semver.gte(CONFIG.apiVersion, "1.19.0")) {
+
+                    LED_MODE_COLORS = [];
+                    
+                    var colorCount = data.byteLength / 3;
+                    
+                    var offset = 0;
+                    for (var i = 0; offset < data.byteLength && i < colorCount; i++) {
+
+                        var mode = data.getUint8(offset++, 1);
+                        var direction = data.getUint8(offset++, 1);
+                        var color = data.getUint8(offset++, 1);
+
+                        var mode_color = {
+                            mode: mode,
+                            direction: direction,
+                            color: color
+                        };
+                        
+                        LED_MODE_COLORS.push(mode_color);
+                    }
+                }
+                break;
+            case MSP_codes.MSP_SET_LED_STRIP_MODECOLOR:
+                console.log('Led strip mode colors saved');
+                break;
+                
+                
+
             case MSP_codes.MSP_DATAFLASH_SUMMARY:
                 if (data.byteLength >= 13) {
                     var
@@ -1022,18 +1125,20 @@ var MSP = {
 
         // trigger callbacks, cleanup/remove callback after trigger
         for (var i = this.callbacks.length - 1; i >= 0; i--) { // itterating in reverse because we use .splice which modifies array length
-            if (this.callbacks[i].code == code) {
-                // save callback reference
-                var callback = this.callbacks[i].callback;
-
-                // remove timeout
-                clearInterval(this.callbacks[i].timer);
-
-                // remove object from array
-                this.callbacks.splice(i, 1);
-
-                // fire callback
-                if (callback) callback({'command': code, 'data': data, 'length': message_length});
+            if (i < this.callbacks.length) {
+                if (this.callbacks[i].code == code) {
+                    // save callback reference
+                    var callback = this.callbacks[i].callback;
+    
+                    // remove timeout
+                    clearInterval(this.callbacks[i].timer);
+    
+                    // remove object from array
+                    this.callbacks.splice(i, 1);
+    
+                    // fire callback
+                    if (callback) callback({'command': code, 'data': data, 'length': message_length});
+                }
             }
         }
     },
@@ -1083,10 +1188,14 @@ var MSP = {
 
         var requestExists = false;
         for (var i = 0; i < MSP.callbacks.length; i++) {
-            if (MSP.callbacks[i].code == code) {
-                // request already exist, we will just attach
-                requestExists = true;
-                break;
+            if (i < MSP.callbacks.length) {
+                if (MSP.callbacks[i].code == code) {
+                    // request already exist, we will just attach
+                    requestExists = true;
+                    break;
+                }
+            } else {
+                console.log("Callback index error: "+ i);
             }
         }
 
@@ -1108,7 +1217,6 @@ var MSP = {
                 }
             });
         }
-
         return true;
     },
     callbacks_cleanup: function () {
@@ -1368,7 +1476,7 @@ MSP.crunch = function (code) {
             buffer.push(SENSOR_ALIGNMENT.align_gyro);
             buffer.push(SENSOR_ALIGNMENT.align_acc);
             buffer.push(SENSOR_ALIGNMENT.align_mag);
-            break
+            break;
 
         default:
             return false;
@@ -1604,49 +1712,148 @@ MSP.sendLedStripConfig = function(onCompleteCallback) {
     }
 
     function send_next_led_strip_config() {
-
+        
         var led = LED_STRIP[ledIndex];
-
+        /*
+        var led = {
+            directions: directions,
+            functions: functions,
+            x: data.getUint8(offset++, 1),
+            y: data.getUint8(offset++, 1),
+            color: data.getUint8(offset++, 1)
+        };
+        */       
         var buffer = [];
-
+        
         buffer.push(ledIndex);
 
-        var directionMask = 0;
-        for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) {
-            var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]);
-            if (bitIndex >= 0) {
-                directionMask = bit_set(directionMask, bitIndex);
+        if (semver.lt(CONFIG.apiVersion, "1.20.0")) {
+            var directionMask = 0;
+            for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) {
+                var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]);
+                if (bitIndex >= 0) {
+                    directionMask = bit_set(directionMask, bitIndex);
+                }
             }
-        }
-        buffer.push(specificByte(directionMask, 0));
-        buffer.push(specificByte(directionMask, 1));
-
-        var functionMask = 0;
-        for (var functionLetterIndex = 0; functionLetterIndex < led.functions.length; functionLetterIndex++) {
-            var bitIndex = MSP.ledFunctionLetters.indexOf(led.functions[functionLetterIndex]);
-            if (bitIndex >= 0) {
-                functionMask = bit_set(functionMask, bitIndex);
+            buffer.push(specificByte(directionMask, 0));
+            buffer.push(specificByte(directionMask, 1));
+    
+            var functionMask = 0;
+            for (var functionLetterIndex = 0; functionLetterIndex < led.functions.length; functionLetterIndex++) {
+                var bitIndex = MSP.ledFunctionLetters.indexOf(led.functions[functionLetterIndex]);
+                if (bitIndex >= 0) {
+                    functionMask = bit_set(functionMask, bitIndex);
+                }
             }
+            buffer.push(specificByte(functionMask, 0));
+            buffer.push(specificByte(functionMask, 1));
+    
+            buffer.push(led.x);
+            buffer.push(led.y);
+    
+            buffer.push(led.color);
+        } else {
+            var mask = 0;
+            /*
+    ledDirectionLetters:        ['n', 'e', 's', 'w', 'u', 'd'],      // in LSB bit order
+    ledFunctionLetters:         ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b', 'l'], // in LSB bit order
+    ledBaseFunctionLetters:     ['c', 'f', 'a', 'l', 's', 'g', 'r'], // in LSB bit 
+    ledOverlayLetters:          ['t', 'o', 'b', 'n', 'i', 'w'], // in LSB bit 
+    
+             */
+            mask |= (led.y << 0);
+            mask |= (led.x << 4);
+
+            for (var functionLetterIndex = 0; functionLetterIndex < led.functions.length; functionLetterIndex++) {
+                var fnIndex = MSP.ledBaseFunctionLetters.indexOf(led.functions[functionLetterIndex]);
+                if (fnIndex >= 0) {
+                    mask |= (fnIndex << 8);
+                    break;
+                }
+            }
+            
+            for (var overlayLetterIndex = 0; overlayLetterIndex < led.functions.length; overlayLetterIndex++) {
+                var bitIndex = MSP.ledOverlayLetters.indexOf(led.functions[overlayLetterIndex]);
+                if (bitIndex >= 0) {
+                    mask |= bit_set(mask, bitIndex + 12);
+                }
+            }
+
+            mask |= (led.color << 18);
+
+            for (var directionLetterIndex = 0; directionLetterIndex < led.directions.length; directionLetterIndex++) {
+                var bitIndex = MSP.ledDirectionLetters.indexOf(led.directions[directionLetterIndex]);
+                if (bitIndex >= 0) {
+                    mask |= bit_set(mask, bitIndex + 22);
+                }
+            }
+            
+            mask |= (0 << 28); // parameters
+            
+            
+            buffer.push(specificByte(mask, 0));
+            buffer.push(specificByte(mask, 1));
+            buffer.push(specificByte(mask, 2));
+            buffer.push(specificByte(mask, 3));
         }
-        buffer.push(specificByte(functionMask, 0));
-        buffer.push(specificByte(functionMask, 1));
-
-        buffer.push(led.x);
-        buffer.push(led.y);
-
-        buffer.push(led.color);
-
-
+        
         // prepare for next iteration
         ledIndex++;
         if (ledIndex == LED_STRIP.length) {
             nextFunction = onCompleteCallback;
         }
-
+        
         MSP.send_message(MSP_codes.MSP_SET_LED_STRIP_CONFIG, buffer, false, nextFunction);
     }
 }
 
+MSP.sendLedStripColors = function(onCompleteCallback) {
+    if (LED_COLORS.length == 0) {
+        onCompleteCallback();
+    } else {
+        var buffer = [];
+        
+        for (var colorIndex = 0; colorIndex < LED_COLORS.length; colorIndex++) {
+            var color = LED_COLORS[colorIndex];
+            
+            buffer.push(specificByte(color.h, 0));
+            buffer.push(specificByte(color.h, 1));
+            buffer.push(color.s);
+            buffer.push(color.v);
+        }
+        MSP.send_message(MSP_codes.MSP_SET_LED_COLORS, buffer, false, onCompleteCallback);
+    }
+}
+
+MSP.sendLedStripModeColors = function(onCompleteCallback) {
+    
+    var nextFunction = send_next_led_strip_mode_color; 
+    var index = 0;
+    
+    if (LED_MODE_COLORS.length == 0) {
+        onCompleteCallback();
+    } else {
+        send_next_led_strip_mode_color();
+    }
+    
+    function send_next_led_strip_mode_color() {
+        var buffer = [];
+        
+        var mode_color = LED_MODE_COLORS[index];
+        
+        buffer.push(mode_color.mode);
+        buffer.push(mode_color.direction);
+        buffer.push(mode_color.color);
+
+        // prepare for next iteration
+        index++;
+        if (index == LED_MODE_COLORS.length) {
+            nextFunction = onCompleteCallback;
+        }
+
+        MSP.send_message(MSP_codes.MSP_SET_LED_STRIP_MODECOLOR, buffer, false, nextFunction);
+    }
+}
 MSP.serialPortFunctionMaskToFunctions = function(functionMask) {
     var functions = [];
 
@@ -1709,4 +1916,4 @@ MSP.SDCARD_STATE_NOT_PRESENT = 0;
 MSP.SDCARD_STATE_FATAL       = 1;
 MSP.SDCARD_STATE_CARD_INIT   = 2;
 MSP.SDCARD_STATE_FS_INIT     = 3;
-MSP.SDCARD_STATE_READY       = 4;
+MSP.SDCARD_STATE_READY       = 4;
\ No newline at end of file
diff --git a/js/serial_backend.js b/js/serial_backend.js
index cfe34beb..7e68e54d 100755
--- a/js/serial_backend.js
+++ b/js/serial_backend.js
@@ -280,7 +280,6 @@ function onConnect() {
     dataflash.show();
 
     startLiveDataRefreshTimer();
-
 }
 
 function onClosed(result) {
@@ -317,7 +316,7 @@ function read_serial(info) {
 function sensor_status(sensors_detected) {
     // initialize variable (if it wasn't)
     if (!sensor_status.previous_sensors_detected) {
-        sensor_status.previous_sensors_detected = 0;
+        sensor_status.previous_sensors_detected = -1; // Otherwise first iteration will not be run if sensors_detected == 0
     }
 
     // update UI (if necessary)
diff --git a/tabs/led_strip.css b/tabs/led_strip.css
index db6ebc7f..797ed2b5 100644
--- a/tabs/led_strip.css
+++ b/tabs/led_strip.css
@@ -17,6 +17,8 @@
     float: left;
     margin-right: 10px;
     border-radius: 3px;
+    background-color: #dcdcdc;
+    border: silver;
 }
 
 .tab-led-strip .mainGrid .gPoint {
@@ -26,84 +28,117 @@
     height: 23px;
     margin: 3px;
     border-radius: 7px;
-    background: #ececec;;
+    background: #ececec;
     cursor: pointer;
 }
 
-.tab-led-strip .gPoint.function-w { /* Warning */
-    background: red;
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
-    border-color: red;
-}
-
-.tab-led-strip .gPoint.function-f { /* Flight mode & orientation */
-    background: rgb(50, 205, 50);
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
-    border-color: rgb(50, 205, 50);
-}
-
-.tab-led-strip .gPoint.function-i { /* Indicator */
-    background: yellow;
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
-    border-color: yellow;
-}
-
-.tab-led-strip .gPoint.function-a { /* Armed Mode */
-    background: rgb(52, 155, 255);
+.tab-led-strip .gPoint.function-s { /* RSSI */
+    background: brown;
     box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
     border-color: rgb(52, 155, 255);
 }
 
-.tab-led-strip .gPoint.function-t { /* Thrust Mode */
-    background: orange;
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
-    border-color: orange;
-}
-
 .tab-led-strip .gPoint.function-c { /* Color */
     background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%);
     box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
     border-color: grey;
 }
 
+.tab-led-strip .gPoint.function-f { /* Flight mode & orientation */
+    background: rgb(50, 205, 50);
+    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
+    border-color: rgb(50, 205, 50);
+}
+
+.tab-led-strip .gPoint.function-a { /* Armed Mode */
+    background: rgb(52, 155, 255);
+    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
+    border-color: rgb(52, 155, 255);
+}
+
+.tab-led-strip .gPoint.function-l { /* Battery */
+    background: magenta;
+    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
+    border-color: rgb(52, 155, 255);
+}
+
 .tab-led-strip .gPoint.function-r { /* Ring */
     background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, white 60%,white 70%,black 70%, black 100%);
     box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
     border-color: black;
 }
 
-.tab-led-strip .gPoint.function-i.function-f {
-    background: linear-gradient(to bottom, yellow 0%,yellow 50%,rgb(50, 205, 50) 50%, rgb(50, 205, 50) 100%);
+.tab-led-strip .gPoint.function-g { /* GPS */
+    background: green;
+    box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
+    border-color: rgb(52, 155, 255);
 }
 
-.tab-led-strip .gPoint.function-i.function-a {
-    background: linear-gradient(to bottom, yellow 0%,yellow 50%,rgb(52, 155, 255) 50%, rgb(52, 155, 255) 100%);
+.tab-led-strip .gPoint.function-c .overlay-color,
+.tab-led-strip .gPoint.function-r .overlay-color {
+    float: left;
+    height: 15px;
+    width: 15px;
+    margin-top: -23px;
+    margin-left: 4px;
+    border-radius: 4px;
 }
 
-.tab-led-strip .gPoint.function-i.function-f.function-a {
-    background: linear-gradient(to bottom, yellow 0%,yellow 33%,rgb(50, 205, 50) 33%, rgb(50, 205, 50) 66%, rgb(52, 155, 255) 66%, rgb(52, 155, 255) 100%);
+.tab-led-strip .gPoint.function-s .overlay-s,
+.tab-led-strip .gPoint.function-w .overlay-w,
+.tab-led-strip .gPoint.function-i .overlay-i,
+.tab-led-strip .gPoint.function-t .overlay-t,
+.tab-led-strip .gPoint.function-o .overlay-o,
+.tab-led-strip .gPoint.function-b .overlay-b,
+.tab-led-strip .gPoint.function-n .overlay-n {
+    float: left;
+    height: 6px;
+    width: 16px;
 }
 
-.tab-led-strip .gPoint.function-i.function-w.function-a {
-    background: linear-gradient(to bottom, yellow 0%,yellow 33%,red 33%, red 66%, rgb(52, 155, 255) 66%, rgb(52, 155, 255) 100%);
+.tab-led-strip .gPoint.function-w .overlay-w {
+    background-image: radial-gradient(1px at 8px 50% , red 0%, red 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
+    margin-top: -30px;
+    margin-left: -9px;
 }
 
-.tab-led-strip .gPoint.function-t.function-f.function-w {
-    background: linear-gradient(to bottom, orange 0%,orange 33%,rgb(50, 205, 50) 33%, rgb(50, 205, 50) 66%, red 66%, red 100%);
+.tab-led-strip .gPoint.function-i .overlay-i {
+    background-image: radial-gradient(1px at 8px 50% , yellow 0%, yellow 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
+    margin-top: -30px;
+    margin-left: 16px;
 }
 
-.tab-led-strip .gPoint.function-i.function-w {
-    background: linear-gradient(to bottom, yellow 0%,yellow 50%,#ff5454 50%,#ba3535 100%);
+.tab-led-strip .gPoint.function-t .overlay-t {
+    background-image: radial-gradient(1px at 8px 50% , orange 0%, orange 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
+    margin-top: -6px;
+    margin-left: -9px;
 }
 
-.tab-led-strip .gPoint.function-f.function-w {
-    background: linear-gradient(to bottom, rgb(50, 205, 50) 0%,rgb(50, 205, 50) 50%,#ff5454 50%,#ba3535 100%);
+.tab-led-strip .gPoint.function-s .overlay-s {
+    background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
+    margin-top: -6px;
+    margin-left: 16px;
 }
 
-.tab-led-strip .gPoint.function-f.function-t {
-    background: linear-gradient(to bottom, rgb(50, 205, 50) 0%,rgb(50, 205, 50) 50%,orange 50%,orange 100%);
+.tab-led-strip .gPoint.function-o .overlay-o {
+    background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
+    margin-top: -6px;
+    margin-left: 16px;
 }
 
+.tab-led-strip .gPoint.function-b .overlay-b {
+    background-image: radial-gradient(1px at 8px 50% , rgb(52, 155, 255) 0%, rgb(52, 155, 255) 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
+    margin-top: -18px;
+    margin-left: -9px;
+}
+
+.tab-led-strip .gPoint.function-n .overlay-n {
+    background-image: radial-gradient(1px at 8px 50% , blue 0%, blue 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px);
+    margin-top: -18px;
+    margin-left: 16px;
+}
+
+
 .tab-led-strip .gPoint select {
     background: #000;
     width: 13px;
@@ -137,10 +172,9 @@
 .tab-led-strip button {
     text-align: center;
     font-weight: bold;
-
     border: 1px solid silver;
     background-color: #ececec;
-
+    border-radius: 3px;
     padding: 7px 6px;
     margin: 3px 0;
 }
@@ -162,16 +196,46 @@
     width: 49%;
 }
 
-.tab-led-strip .functions .function-w.btnOn {background: red;}
-.tab-led-strip .functions .function-f.btnOn {background: rgb(50, 205, 50);}
-.tab-led-strip .functions .function-i.btnOn {background: yellow; color: #333;}
-.tab-led-strip .functions .function-a.btnOn {background: blue;}
-.tab-led-strip .functions .function-t.btnOn {background: orange;}
-.tab-led-strip .functions .function-r.btnOn {background: #acacac;}
-.tab-led-strip .functions .function-c.btnOn {
+/* Drop-down boxes */
+
+.tab-led-strip .select {    background: white;}
+.tab-led-strip .select .function-c {
     background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%);
 }
 
+.tab-led-strip .select .function-f {    background: rgb(50, 205, 50);}
+.tab-led-strip .select .function-a {    background: rgb(52, 155, 255);}
+.tab-led-strip .select .function-l {    background: magenta;}
+.tab-led-strip .select .function-s {    background: brown;}
+.tab-led-strip .select .function-g {    background: green;}
+/* .tab-led-strip .select .function-b {    background: white;    color:black;} */
+.tab-led-strip .select .function-r {    background: #acacac;}
+
+.tab-led-strip .select .functionSelect option {
+    background: white;
+    color: black;
+}
+
+
+.tab-led-strip .overlays,
+.tab-led-strip .blinkers,
+.tab-led-strip .modifiers {
+    display: inline-block;
+}
+
+.tab-led-strip .colorDefineSliders {
+    display: inline-block;
+    position: absolute;
+    z-index: 10000;
+    background: white;
+    padding: 5px;
+    margin: 10px;
+    border-color: #565656;
+    border-style: solid;
+    border-radius: 6px;
+    border-width: 2px;
+}
+
 .tab-led-strip .color-1 {background: white;}
 .tab-led-strip .color-2 {background: red;}
 .tab-led-strip .color-3 {background: orange;}
@@ -188,8 +252,9 @@
 
 
 .tab-led-strip .directions button.btnOn,
-.tab-led-strip .functions button.btnOn,
-.tab-led-strip .colors .btnOn {
+.tab-led-strip .colors .btnOn,
+.tab-led-strip .special_colors button.btnOn,
+.tab-led-strip .mode_colors button.btnOn {
     border-color: #000;
 }
 
@@ -269,6 +334,14 @@
     position: relative;
     float: left;
     width: 285px;
+    margin-right: 10px;
+}
+
+.colorDefineSliderValue,
+.colorDefineSliderLabel {
+    width: 10px;
+    display: inline-table;
+    margin-bottom: 5px;
 }
 
 .tab-led-strip .directions,
@@ -304,8 +377,9 @@
 
 .tab-led-strip .wires-remaining div {
     font-size: 40px;
-    color: #37a8db;
-    font-family: monospace;
+    color: #ffbb00;
+    margin-bottom: -5px;
+    margin-top: -10px;
 }
 
 .tab-led-strip .wires-remaining.error div {
diff --git a/tabs/led_strip.html b/tabs/led_strip.html
index 8ee3b461..3a0cf02d 100644
--- a/tabs/led_strip.html
+++ b/tabs/led_strip.html
@@ -28,6 +28,24 @@
             <div class="block"></div>
             <div class="block"></div>
         </div>
+        <div class="colorDefineSliders">
+            <div class="">Color setup</div>
+            <div class="colorDefineSliderContainer">
+                <Label class="colorDefineSliderLabel">H</Label>
+                <input class="sliderHSV" type="range" min="0" max="359" value="0">
+                <Label class="colorDefineSliderValue Hvalue">0</Label>
+            </div>
+            <div class="colorDefineSliderContainer">
+                <Label class="colorDefineSliderLabel">S</Label>
+                <input class="sliderHSV" type="range" min="0" max="255" value="0">
+                <Label class="colorDefineSliderValue Svalue">0</Label>
+            </div>
+            <div class="colorDefineSliderContainer">
+                <Label class="colorDefineSliderLabel">V</Label>
+                <input class="sliderHSV" type="range" min="0" max="255" value="0">
+                <Label class="colorDefineSliderValue Vvalue">0</Label>
+            </div>
+        </div>
         <div class="controls">
             <div class="wires-remaining">
                 <div></div>
@@ -37,16 +55,79 @@
             <button class="funcClearAll">Clear ALL</button>
 
             <div class="section">LED Functions</div>
-            <div class="functions">
-                <button class="function-w w50">Warnings</button>
-                <button class="function-f w50">Modes &amp; Orientation</button>
-                <button class="function-i w50">Indicator</button>
-                <button class="function-a w50">Arm State</button>
-                <button class="function-t w50">Throttle</button>
-                <button class="function-r w50">Ring</button>
-                <button class="function-c w50">Color</button>
+            
+            
+            <div class="select">
+                <span class="color_section">Function</span>
+                <select class="functionSelect">
+                    <option value="">None</option>
+                    <option value="function-c" class="">Color</option>
+                    <option value="function-f" class="">Modes &amp; Orientation</option>
+                    <option value="function-a" class="">Arm State</option>
+                    <option value="function-l" class="extra_functions20">Battery</option>
+                    <option value="function-s" class="extra_functions20">RSSI</option>
+                    <option value="function-g" class="extra_functions20">GPS</option>
+                    <option value="function-r" class="">Ring</option>
+                </select>
             </div>
+            
 
+            <div class="modifiers">
+                <span class="color_section">Color modifier</span>
+                <div class="checkbox">
+                    <input type="checkbox" name="ThrottleHue" class="toggle function-t" />
+                    <label> <span>Throttle</span></label>
+                </div>
+                <div class="checkbox extra_functions20">
+                    <input type="checkbox" name="LarsonScanner" class="toggle function-o" />
+                    <label> <span>Larson scanner</span></label>
+                </div>
+            </div>
+            
+            <div class="blinkers extra_functions20">
+                <span class="color_section">Blink</span>
+                <div class="checkbox blinkOverlay">
+                    <input type="checkbox" name="blink" class="toggle function-b" />
+                    <label> <span>Blink always</span></label>
+                </div>
+                <div class="checkbox landingBlinkOverlay">
+                    <input type="checkbox" name="landingBlink" class="toggle function-n" />
+                    <label> <span>Blink on landing</span></label>
+                </div>
+            </div>
+                        
+            <div class="overlays">
+                <span class="color_section">Overlay</span>
+                <div class="checkbox warningOverlay">
+                    <input type="checkbox" name="Warnings" class="toggle function-w" />
+                    <label> <span>Warnings</span></label>
+                </div>
+                <div class="checkbox indicatorOverlay">
+                    <input type="checkbox" name="Indicator" class="toggle function-i" />
+                    <label> <span>Indicator</span></label>
+                </div>
+            </div>
+            
+            <div class="mode_colors">
+                <div class="section">Mode colors</div>
+                
+                <select class="modeSelect">
+                    <option value="0">Orientation</option>
+                    <option value="1">Headfree</option>
+                    <option value="2">Horizon</option>
+                    <option value="3">Angle</option>
+                    <option value="4">Mag</option>
+                    <option value="5">Baro</option>
+                </select>
+
+                <button class="mode_color-0-0 dir-n">N</button>
+                <button class="mode_color-0-1 dir-e">E</button>
+                <button class="mode_color-0-2 dir-s">S</button>
+                <button class="mode_color-0-3 dir-w">W</button>
+                <button class="mode_color-0-4 dir-u">U</button>
+                <button class="mode_color-0-5 dir-d">D</button>
+            </div>
+            
             <div class="section">LED Orientation and Color</div>
             <div class="directions">
                 <button class="dir-n">N</button>
@@ -56,6 +137,7 @@
                 <button class="dir-u">U</button>
                 <button class="dir-d">D</button>
             </div>
+            
             <div class="colors">
                 <button class="color-0" title="black">0</button>
                 <button class="color-1" title="white">1</button>
@@ -75,7 +157,18 @@
                 <button class="color-15" title="black">15</button>
             </div>
 
-
+            <div class="special_colors mode_colors">
+                <div class="section">Special colors</div>
+                <button class="mode_color-6-0" title="green">Disarmed</button>
+                <button class="mode_color-6-1" title="blue">Armed</button>
+                <button class="mode_color-6-2" title="white">Animation</button>
+                <!-- button class="mode_color-6-3" title="black">Background</button -->
+                <button class="mode_color-6-4" title="black">Blink background</button>
+                <button class="mode_color-6-5" title="red">GPS: no sats</button>
+                <button class="mode_color-6-6" title="orange">GPS: no lock</button>
+                <button class="mode_color-6-7" title="green">GPS: locked</button>
+            </div>
+            
             <div class="section">LED Strip Wiring</div>
             <div class="wiringMode">
                 <button class="funcWire w100">Wire Ordering Mode</button>
@@ -86,6 +179,11 @@
             </div>
             <p>LEDs without wire ordering number will not be saved.</p>
         </div>
+        
+        <div class="colorControls">
+
+        </div>
+        
         <div class="clear-both"></div>
     </div>
     <div class="content_toolbar">
@@ -93,4 +191,4 @@
             <a class="save" href="#" i18n="ledStripButtonSave"></a>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/tabs/led_strip.js b/tabs/led_strip.js
index a29c77a7..33532d2c 100644
--- a/tabs/led_strip.js
+++ b/tabs/led_strip.js
@@ -2,12 +2,24 @@
 
 TABS.led_strip = {
     wireMode: false,
-    functions: ['w', 'f', 'i', 'a', 't', 'r', 'c'],
-    directions: ['n', 'e', 's', 'w', 'u', 'd'],
+        directions: ['n', 'e', 's', 'w', 'u', 'd'],
 };
 
+
 TABS.led_strip.initialize = function (callback, scrollPosition) {
     var self = this;
+    var selectedColorIndex = null;
+    var selectedModeColor = null;
+
+    if (semver.lt(CONFIG.apiVersion, "1.20.0")) {
+        TABS.led_strip.functions = ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b'];
+        TABS.led_strip.baseFuncs = ['c', 'f', 'a', 'b', 'g', 'r'];
+        TABS.led_strip.overlays = ['t', 's', 'i', 'w'];
+    } else {
+        TABS.led_strip.functions = ['i', 'w', 'f', 'a', 't', 'r', 'c', 'g', 's', 'b', 'l', 'o', 'n'];
+        TABS.led_strip.baseFuncs = ['c', 'f', 'a', 'l', 's', 'g', 'r'];
+        TABS.led_strip.overlays = ['t', 'o', 'b', 'n', 'i', 'w'];
+    }
 
     TABS.led_strip.wireMode = false;
 
@@ -17,9 +29,24 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
     }
 
     function load_led_config() {
-        MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_html);
+        MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_led_colors);
     }
 
+    function load_led_colors() {
+        MSP.send_message(MSP_codes.MSP_LED_COLORS, false, false, load_led_mode_colors);
+    }
+
+    function load_led_mode_colors() {
+        if (semver.gte(CONFIG.apiVersion, "1.19.0"))
+            MSP.send_message(MSP_codes.MSP_LED_STRIP_MODECOLOR, false, false, load_html);
+        else
+            load_html();
+    }
+
+
+    
+    
+    
     function load_html() {
         $('#content').load("./tabs/led_strip.html", process_html);
     }
@@ -47,7 +74,10 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
         var theHTML = [];
         var theHTMLlength = 0;
         for (var i = 0; i < 256; i++) {
-            theHTML[theHTMLlength++] = ('<div class="gPoint"><div class="indicators"><span class="north"></span><span class="south"></span><span class="west"></span><span class="east"></span><span class="up">U</span><span class="down">D</span></div><span class="wire"></span></div>');
+            if (semver.lte(CONFIG.apiVersion, "1.19.0"))
+                theHTML[theHTMLlength++] = ('<div class="gPoint"><div class="indicators"><span class="north"></span><span class="south"></span><span class="west"></span><span class="east"></span><span class="up">U</span><span class="down">D</span></div><span class="wire"></span><span class="overlay-t"> </span><span class="overlay-s"> </span><span class="overlay-w"> </span><span class="overlay-i"> </span><span class="overlay-color"> </span></div>');
+            else
+                theHTML[theHTMLlength++] = ('<div class="gPoint"><div class="indicators"><span class="north"></span><span class="south"></span><span class="west"></span><span class="east"></span><span class="up">U</span><span class="down">D</span></div><span class="wire"></span><span class="overlay-t"> </span><span class="overlay-o"> </span><span class="overlay-b"> </span><span class="overlay-n"> </span><span class="overlay-w"> </span><span class="overlay-i"> </span><span class="overlay-color"> </span></div>');
         }
         $('.mainGrid').html(theHTML.join(''));
 
@@ -82,8 +112,11 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
 
         function removeFunctionsAndDirections(element) {
             var classesToRemove = [];
-            
-            TABS.led_strip.functions.forEach(function(letter) {
+
+            TABS.led_strip.baseFuncs.forEach(function(letter) {
+                classesToRemove.push('function-' + letter);
+            });
+            TABS.led_strip.overlays.forEach(function(letter) {
                 classesToRemove.push('function-' + letter);
             });
             TABS.led_strip.directions.forEach(function(letter) {
@@ -92,7 +125,6 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
             $(element).removeClass(classesToRemove.join(' '));
         }
 
-
         // Directional Buttons
         $('.directions').on('click', 'button', function() {
             var that = this;
@@ -109,51 +141,126 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
                     }
                 });
 
+                clearModeColorSelection();
                 updateBulkCmd();
             }
         });
-
-
-        // Mode Buttons
-        $('.functions').on('click', 'button', function() {
+        
+        // Mode Color Buttons
+        $('.mode_colors').on('click', 'button', function() {
             var that = this;
-            if ($('.ui-selected').length > 0) {
-                TABS.led_strip.functions.forEach(function(letter) {
-                    if ($(that).is('.function-' + letter)) {
+            LED_MODE_COLORS.forEach(function(mc) {
+                if ($(that).is('.mode_color-' + mc.mode + '-' + mc.direction)) {
+                    if ($(that).is('.btnOn')) {
+                        $(that).removeClass('btnOn');
+                        $('.ui-selected').removeClass('mode_color-' + mc.mode + '-' + mc.direction);
+                        selectedModeColor = null;
+                    } else {
+                        $(that).addClass('btnOn');
+                        selectedModeColor = { mode: mc.mode, direction: mc.direction };
 
-                        if ($(that).is('.btnOn')) {
-                            $(that).removeClass('btnOn');
-                            $('.ui-selected').removeClass('function-' + letter);
-                        } else {
-                            $(that).addClass('btnOn');
-                            $('.ui-selected').addClass('function-' + letter);
+                        // select the color button
+                        for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
+                            var className = '.color-' + colorIndex;
+                            if (colorIndex == getModeColor(mc.mode, mc.direction)) {
+                                $(className).addClass('btnOn');
+                                selectedColorIndex = colorIndex;
+                                setColorSliders(colorIndex);
+                                
+                            } else {
+                                $(className).removeClass('btnOn');
+                            }
                         }
                     }
-                });
+                }
+            });
 
-                updateBulkCmd();
-            }
+            $('.mode_colors').each(function() {
+                $(this).children().each(function() {
+                    if (! $(this).is($(that))) {
+                        if ($(this).is('.btnOn')) {
+                            $(this).removeClass('btnOn');
+                        }                            
+                    }
+                });
+            });
+            
+            updateBulkCmd();
+            
         });
+        
+        // Color sliders
+        var ip = $('div.colorDefineSliders input');
+        ip.eq(0).on("input change", function() { updateColors($(this).val(), 0); });
+        ip.eq(1).on("input change", function() { updateColors($(this).val(), 1); });
+        ip.eq(2).on("input change", function() { updateColors($(this).val(), 2); });
+        for (var i = 0; i < 3; i++) {
+            updateColors(ip.eq(i).val(), i);
+        }
 
         // Color Buttons
-        $('.colors').on('click', 'button', function() {            
+        $('.colors').on('click', 'button', function(e) {
             var that = this;
             var colorButtons = $(this).parent().find('button');
             
             for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
                 colorButtons.removeClass('btnOn');
-                $('.ui-selected').removeClass('color-' + colorIndex);
+                if (selectedModeColor == undefined)
+                    $('.ui-selected').removeClass('color-' + colorIndex);
                 
                 if ($(that).is('.color-' + colorIndex)) {
-                    $('.ui-selected').addClass('color-' + colorIndex);
+                    selectedColorIndex = colorIndex;
+                    if (selectedModeColor == undefined)
+                        $('.ui-selected').addClass('color-' + colorIndex);
                 }
             }
 
+
+            setColorSliders(selectedColorIndex);
+            
             $(this).addClass('btnOn');
 
+            if (selectedModeColor) {
+                setModeColor(selectedModeColor.mode, selectedModeColor.direction, selectedColorIndex);
+            }
+
+            drawColorBoxesInColorLedPoints();
+
+            // refresh color buttons 
+            $('.colors').children().each(function() { setBackgroundColor($(this)); });
+            $('.overlay-color').each(function() { setBackgroundColor($(this)); });
+            
+            $('.mode_colors').each(function() { setModeBackgroundColor($(this)); });
+            $('.special_colors').each(function() { setModeBackgroundColor($(this)); });
+            
             updateBulkCmd();
         });
+        
+        $('.colors').on('dblclick', 'button', function(e) {
 
+            var pp = $('.tab-led-strip').position();
+            var moveLeft = $('.tab-led-strip').position().left + ($('.colorDefineSliders').width() / 2);
+            var moveUp =   $('.tab-led-strip').position().top  + $('.colorDefineSliders').height() + 20;
+            
+            $('.colorDefineSliders').css('left', e.pageX - e.offsetX - moveLeft);
+            $('.colorDefineSliders').css('top', e.pageY - e.offsetY - moveUp);
+            $('.colorDefineSliders').show();
+            
+        });
+        
+        $('.colorDefineSliders').on({
+            mouseleave: function () {
+                $('.colorDefineSliders').hide();
+            }
+        });
+
+        $('.colors').children().on({
+            mouseleave: function () {
+                if (!$('.colorDefineSliders').is(":hover"))
+                    $('.colorDefineSliders').hide();
+            }
+        });
+        
         $('.funcWire').click(function() {
             $(this).toggleClass('btnOn');
             TABS.led_strip.wireMode = $(this).hasClass('btnOn'); 
@@ -181,8 +288,10 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
                 var functionsInSelection = [];
                 var directionsInSelection = [];
 
-                $('.ui-selected').each(function() {
+                clearModeColorSelection();
 
+                var that;
+                $('.ui-selected').each(function() {
                     
                     var usedWireNumbers = buildUsedWireNumbers();
                     
@@ -199,38 +308,85 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
                         }
                     }
 
-                    var that = this;
+                    if ($(this).find('.wire').text() != '') {
 
-                    TABS.led_strip.directions.forEach(function(letter) {
-                        var className = '.dir-' + letter;
-                        if ($(that).is(className)) {
-                            directionsInSelection.push(className);
-                        }
-                    });
+                        that = this;
 
-                    TABS.led_strip.functions.forEach(function(letter) {
-                        var className = '.function-' + letter;
-                        if ($(that).is(className)) {
-                            functionsInSelection.push(className);
-                        }
-                    });
+                        // Get function & overlays or current cell
+                        TABS.led_strip.directions.forEach(function(letter) {
+                            var className = '.dir-' + letter;
+                            if ($(that).is(className)) {
+                                directionsInSelection.push(className);
+                            }
+                        });
+    
+                        TABS.led_strip.baseFuncs.forEach(function(letter) {
+                            var className = '.function-' + letter;
+                            if ($(that).is(className)) {
+                                functionsInSelection.push(className);
+                            }
+                        });
+                        
+                        TABS.led_strip.overlays.forEach(function(letter) {
+                            var className = '.function-' + letter;
+                            if ($(that).is(className)) {
+                                functionsInSelection.push(className);
+                            }
+                        });
+                    }
+                });
 
+                var uiSelectedLast = that;
+                $('select.functionSelect').val("");
+
+                TABS.led_strip.baseFuncs.forEach(function(letter) {
+                    var className = 'function-' + letter;
+                    if ($('select.functionSelect').is("." + className)) {
+                        $('select.functionSelect').removeClass(className);
+                    }
+                });
+                
+                selectedColorIndex = 0;
+                
+                if (uiSelectedLast) {
+                    
+                    // set active color
                     for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
                         var className = '.color-' + colorIndex;
-                        if ($(this).is(className)) {
+                        if ($(uiSelectedLast).is(className)) {
                             $(className).addClass('btnOn');
+                            selectedColorIndex = colorIndex;
+                            
                         } else {
                             $(className).removeClass('btnOn');
                         }
                     }
-
-                    updateBulkCmd();
-                });
+                    
+                    // set checkbox values
+                    TABS.led_strip.overlays.forEach(function(letter) {
+                        var feature_o = $('.checkbox').find('input.function-' + letter);
+    
+                        var newVal = ($(uiSelectedLast).is('.function-' + letter));
+                        
+                        if (feature_o.is(':checked') != newVal) {
+                            feature_o.prop('checked', newVal);
+                            feature_o.change();
+                        }
+                    });
+                    
+                    // Update active function in combobox
+                    TABS.led_strip.baseFuncs.forEach(function(letter) {
+                        if ($(uiSelectedLast).is('.function-' + letter)) {
+                            $('select.functionSelect').val("function-" + letter);
+                            $('select.functionSelect').addClass("function-" + letter);
+                        }
+                    });  
+                }
+                updateBulkCmd();
                 
-                $('.functions button').removeClass('btnOn');
-                functionsInSelection.forEach(function(function_e) {
-                    $(function_e).addClass('btnOn');
-                });
+                setColorSliders(selectedColorIndex);
+                
+                setOptionalGroupsVisibility();
 
                 $('.directions button').removeClass('btnOn');
                 directionsInSelection.forEach(function(direction_e) {
@@ -239,6 +395,115 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
             }
         });
 
+        // UI: select LED function from drop-down
+        $('.functionSelect').on('change', function() {
+            clearModeColorSelection();
+            applyFunctionToSelectedLeds();
+            drawColorBoxesInColorLedPoints();
+            setOptionalGroupsVisibility();
+            updateBulkCmd();
+        });
+
+        // UI: select mode from drop-down
+        $('.modeSelect').on('change', function() {
+
+            var that = this;
+            
+            var mode = Number($(that).val());
+            $('.mode_colors').find('button').each(function() {
+                for (var i = 0; i < 6; i++)
+                    for (var j = 0; j < 6; j++)
+                        if ($(this).hasClass('mode_color-' + i + '-' + j)) {
+                            $(this).removeClass('mode_color-' + i + '-' + j);
+                            $(this).addClass('mode_color-' + mode + '-' + j);
+                        }
+                            });
+
+            $('.mode_colors').each(function() { setModeBackgroundColor($(this)); });
+        });
+        
+        function toggleSwitch(that, letter)
+        {
+            if ($(that).is(':checked')) {
+                $('.ui-selected').find('.wire').each(function() {
+                    if ($(this).text() != "") {
+                        
+                        var p = $(this).parent();
+
+                        TABS.led_strip.functions.forEach(function(f) {
+                            if (p.is('.function-' + f)) {
+
+                                switch (letter) {
+                                case 't':
+                                case 'o':
+                                case 's':
+                                    if (areModifiersActive('function-' + f))
+                                        p.addClass('function-' + letter);
+                                    break;
+                                case 'b':
+                                case 'n':
+                                    if (areBlinkersActive('function-' + f))
+                                        p.addClass('function-' + letter);
+                                    break;
+                                case 'i':
+                                    if (areOverlaysActive('function-' + f))
+                                        p.addClass('function-' + letter);
+                                    break;
+                                case 'w':
+                                    if (areOverlaysActive('function-' + f))
+                                        if (isWarningActive('function-' + f))
+                                            p.addClass('function-' + letter);
+                                    break;
+                                }
+                            }
+                        });
+                    }
+                });
+            } else {
+                $('.ui-selected').removeClass('function-' + letter);
+            }
+            return $(that).is(':checked');
+        }
+        
+        // UI: check-box toggle
+        $('.checkbox').change(function(e) { 
+            if (e.originalEvent) {
+                // user-triggered event
+                var that = $(this).find('input');
+                if ($('.ui-selected').length > 0) {
+                    
+                    TABS.led_strip.overlays.forEach(function(letter) {
+                        if ($(that).is('.function-' + letter)) {
+                            var ret = toggleSwitch(that, letter);
+                            
+                            var cbn = $('.checkbox .function-n'); // blink on landing
+                            var cbb = $('.checkbox .function-b'); // blink
+                            
+                            if (ret) {
+                                if (letter == 'b' && cbn.is(':checked')) {
+                                    cbn.prop('checked', false);
+                                    cbn.change();
+                                    toggleSwitch(cbn, 'n');
+                                } else if (letter == 'n' && cbb.is(':checked')) {
+                                    cbb.prop('checked', false);
+                                    cbb.change();
+                                    toggleSwitch(cbb, 'b');
+                                }    
+                            }
+                        }
+                    });
+                    
+                    clearModeColorSelection();
+                    updateBulkCmd();
+                    setOptionalGroupsVisibility();
+                }
+            } else {
+                // code-triggered event
+            }
+        });
+        
+
+        
         $('.mainGrid').disableSelection();
 
         $('.gPoint').each(function(){
@@ -257,7 +522,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
             var ledIndex = ledResult.index;
             var led = ledResult.led;
             
-            if (led.functions.length == 0 && led.directions.length == 0 && led.color == 0) {
+            if (led.functions[0] == 'c' && led.functions.length == 1 && led.directions.length == 0 && led.color == 0 && led.x == 0 && led.y == 0) {
                 return;
             }
             
@@ -274,12 +539,22 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
             $(this).addClass('color-' + led.color);
 
         });
-        updateBulkCmd(); 
-        
+
         $('a.save').click(function () {
 
-            MSP.sendLedStripConfig(save_to_eeprom);
-
+            MSP.sendLedStripConfig(send_led_strip_colors);
+             
+            function send_led_strip_colors() {
+                MSP.sendLedStripColors(send_led_strip_mode_colors);
+            }
+            
+            function send_led_strip_mode_colors() {
+                if (semver.gte(CONFIG.apiVersion, "1.19.0"))
+                    MSP.sendLedStripModeColors(save_to_eeprom);
+                else
+                    save_to_eeprom();
+            }
+            
             function save_to_eeprom() {
                 MSP.send_message(MSP_codes.MSP_EEPROM_WRITE, false, false, function() {
                     GUI.log(chrome.i18n.getMessage('ledStripEepromSaved'));
@@ -287,10 +562,24 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
             }
 
         });
+
+        $('.colorDefineSliders').hide();
+        
+        applyFunctionToSelectedLeds();
+        drawColorBoxesInColorLedPoints();
+        setOptionalGroupsVisibility();
+        
+        updateBulkCmd();
         
         GUI.content_ready(callback);
     }
     
+    
+    
+    
+
+
+
     function findLed(x, y) {
         for (var ledIndex = 0; ledIndex < LED_STRIP.length; ledIndex++) {
             var led = LED_STRIP[ledIndex];
@@ -300,12 +589,15 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
         }
         return undefined;
     }
+    
         
     function updateBulkCmd() {
         var counter = 0;
 
         var lines = [];
         var ledStripLength = LED_STRIP.length;
+        var ledColorsLength = LED_COLORS.length;
+        var ledModeColorsLenggth = LED_MODE_COLORS.length;
         
         LED_STRIP = [];
         
@@ -326,8 +618,13 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
                 if (match) {
                     colorIndex = match[2];
                 }
-                
-                TABS.led_strip.functions.forEach(function(letter){
+
+                TABS.led_strip.baseFuncs.forEach(function(letter){
+                    if ($(that).is('.function-' + letter)) {
+                        functions += letter;
+                    }
+                });
+                TABS.led_strip.overlays.forEach(function(letter){
                     if ($(that).is('.function-' + letter)) {
                         functions += letter;
                     }
@@ -375,8 +672,423 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
         $('.wires-remaining div').html(remaining);
     }
 
+    // refresh mode color buttons
+    function setModeBackgroundColor(element) {
+        if (semver.gte(CONFIG.apiVersion, "1.19.0")) {
+            element.find('[class*="mode_color"]').each(function() { 
+                var m = 0;
+                var d = 0;
+                
+                var match = $(this).attr("class").match(/(^|\s)mode_color-([0-9]+)-([0-9]+)(\s|$)/);
+                if (match) {
+                    m = Number(match[2]);
+                    d = Number(match[3]);
+                    $(this).css('background-color', HsvToColor(LED_COLORS[getModeColor(m, d)]));
+                }
+            });
+        }
+    }
+    
+    function setBackgroundColor(element) {
+        if (element.is('[class*="color"]')) {
+            var colorIndex = 0;
+            
+            var match = element.attr("class").match(/(^|\s)color-([0-9]+)(\s|$)/);
+            if (match) {
+                colorIndex = match[2];
+                element.css('background-color', HsvToColor(LED_COLORS[colorIndex]));
+            }
+        }
+    }
+    
+    function areModifiersActive(activeFunction) {
+        switch (activeFunction) {
+            case "function-c": 
+            case "function-a": 
+            case "function-f":
+                return true;
+            break;
+        }
+        return false;
+    }
+
+    function areOverlaysActive(activeFunction) {
+        if (semver.lt(CONFIG.apiVersion, "1.20.0")) {
+            switch (activeFunction) {
+                case "function-c": 
+                case "function-a": 
+                case "function-f":
+                case "function-g":
+                    return true;
+                break;
+            }
+        } else {
+            switch (activeFunction) {
+                case "": 
+                case "function-c": 
+                case "function-a": 
+                case "function-f":
+                case "function-s":
+                case "function-l":
+                case "function-r": 
+                case "function-o":
+                case "function-g":
+                    return true;
+                break;
+            }
+        }
+        return false;
+    }
+
+    function areBlinkersActive(activeFunction) {
+        if (semver.gte(CONFIG.apiVersion, "1.20.0")) {
+            switch (activeFunction) {
+                case "function-c": 
+                case "function-a": 
+                case "function-f":
+                    return true;
+                break;
+            }
+        }
+        return false;
+    }
+
+    function isWarningActive(activeFunction) {
+        switch (activeFunction) {
+            case "function-l": 
+            case "function-s":
+            case "function-g":
+                return false;
+                break;
+            case "function-r":
+            case "function-b":
+                if (semver.lt(CONFIG.apiVersion, "1.20.0"))
+                    return false;
+            break;
+            default: 
+                return true;
+            break; 
+        }
+    }
+    
+    function setOptionalGroupsVisibility() {
+        
+        var activeFunction = $('select.functionSelect').val();
+        $('select.functionSelect').addClass(activeFunction);
+
+        
+        if (semver.lte(CONFIG.apiVersion, "1.18.0")) { 
+            // <= 18
+            // Hide GPS (Func)
+            // Hide RSSI (O/L), Blink (Func)
+            // Hide Battery, RSSI (Func), Larson (O/L), Blink (O/L), Landing (O/L)
+            $(".extra_functions20").hide();
+            $(".mode_colors").hide();
+        } else { 
+            // >= 20
+            // Show GPS (Func)
+            // Hide RSSI (O/L), Blink (Func)
+            // Show Battery, RSSI (Func), Larson (O/L), Blink (O/L), Landing (O/L)
+            $(".extra_functions20").show();
+            $(".mode_colors").show();
+        }
+        
+        
+        // set color modifiers (check-boxes) visibility
+        $('.overlays').hide();
+        $('.modifiers').hide();
+        $('.blinkers').hide();
+        $('.warningOverlay').hide();
+        
+        if (areOverlaysActive(activeFunction))
+            $('.overlays').show();
+
+        if (areModifiersActive(activeFunction))
+            $('.modifiers').show();
+
+        if (areBlinkersActive(activeFunction))
+            $('.blinkers').show();
+
+        if (isWarningActive(activeFunction))
+            $('.warningOverlay').show();
+
+          
+
+        // set directions visibility
+        if (semver.lt(CONFIG.apiVersion, "1.20.0")) {
+            switch (activeFunction) {
+                case "function-r":
+                    $('.indicatorOverlay').hide();
+                    $('.directions').hide();
+                break;
+                default: 
+                    $('.indicatorOverlay').show();
+                    $('.directions').show();
+                break; 
+            }
+        }
+        
+        $('.mode_colors').hide();
+        if (semver.gte(CONFIG.apiVersion, "1.19.0")) { 
+            // set mode colors visibility
+
+            if (semver.gte(CONFIG.apiVersion, "1.20.0"))
+	            if (activeFunction == "function-f")
+	                $('.mode_colors').show(); 
+            
+            // set special colors visibility
+            $('.special_colors').show();
+            $('.mode_color-6-0').hide();
+            $('.mode_color-6-1').hide();
+            $('.mode_color-6-2').hide();
+            $('.mode_color-6-3').hide();
+            $('.mode_color-6-4').hide();
+            $('.mode_color-6-5').hide();
+            $('.mode_color-6-6').hide();
+            $('.mode_color-6-7').hide();
+            
+            switch (activeFunction) {
+                case "":           // none
+                case "function-f": // Modes & Orientation
+                case "function-l": // Battery 
+                    // $('.mode_color-6-3').show(); // background
+                    $('.special_colors').hide();
+                    break;
+                case "function-g": // GPS
+                    $('.mode_color-6-5').show(); // no sats
+                    $('.mode_color-6-6').show(); // no lock
+                    $('.mode_color-6-7').show(); // locked
+                    // $('.mode_color-6-3').show(); // background
+                    break;
+                case "function-b": // Blink
+                    $('.mode_color-6-4').show(); // blink background 
+                    break;
+                case "function-a": // Arm state
+                    $('.mode_color-6-0').show(); // disarmed 
+                    $('.mode_color-6-1').show(); // armed 
+                    break;
+                    
+                case "function-r": // Ring
+                default:
+                    $('.special_colors').hide();
+                break; 
+            }
+        }
+    }
+    
+    function applyFunctionToSelectedLeds() {
+        var activeFunction = $('select.functionSelect').val();
+        TABS.led_strip.baseFuncs.forEach(function(letter) {
+            
+            if (activeFunction == 'function-' + letter) {
+                $('select.functionSelect').addClass('function-' + letter);
+                
+                $('.ui-selected').find('.wire').each(function() {
+                    if ($(this).text() != "")
+                        $(this).parent().addClass('function-' + letter);
+                });
+                
+                unselectOverlays(letter);
+
+            } else {
+                $('select.functionSelect').removeClass('function-' + letter);
+                $('.ui-selected').removeClass('function-' + letter);
+            }
+            
+            if (activeFunction == '') {
+                unselectOverlays(activeFunction);
+            }
+
+        });
+    }
+    
+    function unselectOverlays(letter) {
+        if (semver.lt(CONFIG.apiVersion, "1.20.0")) {
+            if (letter == 'b' || letter == 'r') {
+                unselectOverlay(letter, 'i');
+            }
+            if (letter == 'b' || letter == 'r' || letter == 'l' || letter == 'g') {
+                unselectOverlay(letter, 'w');
+                unselectOverlay(letter, 't');
+                unselectOverlay(letter, 's');
+            }
+        } else {
+            // MSP 1.20
+            if (letter == 'r' || letter == '') {
+                unselectOverlay(letter, 'o');
+                unselectOverlay(letter, 'b');
+                unselectOverlay(letter, 'n');
+                unselectOverlay(letter, 't');
+            }
+            if (letter == 'l' || letter == 'g' || letter == 's') {
+                unselectOverlay(letter, 'w');
+                unselectOverlay(letter, 't');
+                unselectOverlay(letter, 'o');
+                unselectOverlay(letter, 'b');
+                unselectOverlay(letter, 'n');
+            }
+        }
+    }
+    
+    function unselectOverlay(func, overlay) {
+        $('input.function-' + overlay).prop('checked', false);
+        $('input.function-' + overlay).change();
+        $('.ui-selected').each(function() {
+            if (func == '' || $(this).is('.function-' + func)) {
+                $(this).removeClass('function-' + overlay);
+            }
+        });
+    }
+    
+    function updateColors(value, hsvIndex) {
+        var change = false;
+        
+        value = Number(value);
+        
+        var className = '.color-' + selectedColorIndex;
+        if ($(className).hasClass('btnOn')) {
+            switch (hsvIndex) {
+                case 0:
+                    if (LED_COLORS[selectedColorIndex].h != value) {
+                        LED_COLORS[selectedColorIndex].h = value;
+                        $('.colorDefineSliderValue.Hvalue').text(LED_COLORS[selectedColorIndex].h);
+                        change = true
+                    }
+                    break;
+                case 1: 
+                    if (LED_COLORS[selectedColorIndex].s != value) {
+                        LED_COLORS[selectedColorIndex].s = value;
+                        $('.colorDefineSliderValue.Svalue').text(LED_COLORS[selectedColorIndex].s);
+                        change = true
+                    }
+                    break;
+                case 2: 
+                    if (LED_COLORS[selectedColorIndex].v != value) {
+                        LED_COLORS[selectedColorIndex].v = value;
+                        $('.colorDefineSliderValue.Vvalue').text(LED_COLORS[selectedColorIndex].v);
+                        change = true
+                    }
+                    break;
+            }                
+        }
+        
+
+        // refresh color buttons 
+        $('.colors').children().each(function() { setBackgroundColor($(this)); });
+        $('.overlay-color').each(function() { setBackgroundColor($(this)); });
+        
+        $('.mode_colors').each(function() { setModeBackgroundColor($(this)); });
+        $('.special_colors').each(function() { setModeBackgroundColor($(this)); });
+        
+        if (change)
+            updateBulkCmd();
+    }
+    
+    function drawColorBoxesInColorLedPoints() {
+        $('.gPoint').each(function() {
+            if ($(this).is('.function-c') || $(this).is('.function-r') || $(this).is('.function-b')) {
+                $(this).find('.overlay-color').show();
+                
+                for (var colorIndex = 0; colorIndex < 16; colorIndex++) {
+                    var className = 'color-' + colorIndex;
+                    if ($(this).is('.' + className)) {
+                        $(this).find('.overlay-color').addClass(className);
+                        $(this).find('.overlay-color').css('background-color', HsvToColor(LED_COLORS[colorIndex]))
+                    } else {
+                        if ($(this).find('.overlay-color').is('.' + className))
+                            $(this).find('.overlay-color').removeClass(className);
+                    }
+                }
+            } else {
+                $(this).find('.overlay-color').hide();
+            }
+        });
+    }
+    
+    function setColorSliders(colorIndex) {
+
+        var sliders = $('div.colorDefineSliders input');
+        var change = false;
+        
+        if (!LED_COLORS[colorIndex])
+            return;
+        
+        if (LED_COLORS[colorIndex].h != Number(sliders.eq(0).val())) {
+            sliders.eq(0).val(LED_COLORS[colorIndex].h);
+            $('.colorDefineSliderValue.Hvalue').text(LED_COLORS[colorIndex].h);
+            change = true;
+        }
+        
+        if (LED_COLORS[colorIndex].s != Number(sliders.eq(1).val())) {
+            sliders.eq(1).val(LED_COLORS[colorIndex].s);
+            $('.colorDefineSliderValue.Svalue').text(LED_COLORS[colorIndex].s);
+            change = true;
+        }
+        
+        if (LED_COLORS[colorIndex].v != Number(sliders.eq(2).val())) {
+            sliders.eq(2).val(LED_COLORS[colorIndex].v);
+            $('.colorDefineSliderValue.Vvalue').text(LED_COLORS[colorIndex].v);
+            change = true;
+        }
+
+        // only fire events when all values are set
+        if (change)
+            sliders.trigger('input');
+        
+    }
+    
+    function HsvToColor(input) {
+        if (input == undefined)
+            return "";
+        
+        var HSV = { h:Number(input.h), s:Number(input.s), v:Number(input.v) };
+        
+        if (HSV.s == 0 && HSV.v == 0)
+            return "";
+        
+        HSV = { h:HSV.h, s:1 - HSV.s / 255, v:HSV.v / 255 };
+        
+        var HSL = { h:0, s:0, v:0};
+        HSL.h = HSV.h;
+        HSL.l = (2 - HSV.s) * HSV.v / 2;
+        HSL.s = HSL.l && HSL.l < 1 ? HSV.s * HSV.v / (HSL.l < 0.5 ? HSL.l * 2 : 2 - HSL.l * 2) : HSL.s;
+        
+        var ret = 'hsl(' + HSL.h + ', ' + HSL.s * 100 + '%, ' + HSL.l * 100 + '%)';
+        return ret;
+    }
+
+    function getModeColor(mode, dir) {
+        for (var i = 0; i < LED_MODE_COLORS.length; i++) {
+            var mc = LED_MODE_COLORS[i];
+            if (mc.mode == mode && mc.direction == dir)
+                return mc.color;
+        }
+        return "";
+    }
+
+    function setModeColor(mode, dir, color) {
+        for (var i = 0; i < LED_MODE_COLORS.length; i++) {
+            var mc = LED_MODE_COLORS[i];
+            if (mc.mode == mode && mc.direction == dir) {
+                mc.color = color;
+                return 1;
+            }
+        }
+        return 0;
+    }
+    
+    function clearModeColorSelection() {
+        selectedModeColor = null;
+        $('.mode_colors').each(function() {
+            $(this).children().each(function() {
+                if ($(this).is('.btnOn')) {
+                    $(this).removeClass('btnOn');
+                }                            
+            });
+        });
+    }
 };
 
 TABS.led_strip.cleanup = function (callback) {
     if (callback) callback();
-};
+};
\ No newline at end of file