diff --git a/background.js b/background.js
index 3157d2db875fb1945efe527d6505b2b21f3c377d..2cd06189bb3716e990d3613719d6573a3b5f8468 100644
--- a/background.js
+++ b/background.js
@@ -1,4 +1,4 @@
-let css = "body {\n\tbackground-color:lightcoral[color,onset:E];\n\tbackground-color:lightgreen[color,onset:A];\n\tbackground-color:lightblue[onset:D];\n}\nh1, h2 {\n\tcolor: white[color,onset:B];\n\tcolor: lightslategray[color,onset:A];\n\tfont-size:[opacité]pxpx;\n}";
+let css = "body {\n\tbackground-color:lightcoral[color,onset:E];\n\tbackground-color:lightgreen[color,onset:A];\n\tbackground-color:lightblue[onset:D];\n}\nh1, h2 {\n\tcolor: white[color,onset:B];\n\tcolor: lightslategray[color,onset:A];\n\tfont-size:[opacité]px;\n}";
 let activate = false;
 let activateFav = "ressources/icon256.png";
 let audioB = false;
@@ -8,6 +8,7 @@ let midiI = false;
 let popup = false;
 let loopPlay = false;
 let parameters = '[["","chiffre","10:100","i:10","note:10",""],["","opacité","0:1","d","cc:60","loud"]]';
+let all = "";
 
 //Initialize the CSS storage on startup
 chrome.runtime.onInstalled.addListener(() => {
@@ -21,6 +22,7 @@ chrome.runtime.onInstalled.addListener(() => {
 	chrome.storage.sync.set({ popup });
 	chrome.storage.sync.set({ loopPlay });
 	chrome.storage.sync.set({ parameters });
+	chrome.storage.sync.set({ all });
 });
 
 /**
diff --git a/content.js b/content.js
index f08180afe2f7d68c9d5576f4ed85e07108ac2ba2..d0be03c4933bc301262eba916bcfad69a5b176ff 100644
--- a/content.js
+++ b/content.js
@@ -21,88 +21,35 @@ var recording = {
 var time;
 var playLoop = false;
 
-function parseCSS2(cssObj, parameters) {
-    var parser = new CSSParser();
-    // chrome.runtime.sendMessage({ type: 'updateUi', data: true });
-    var sheet = parser.parse(cssObj, false, true);
-    JSON.parse(parameters).forEach(p => {
-        sheet.cssRules.forEach(element => {
-            let els = document.querySelectorAll(element.mSelectorText);
-            element.declarations.forEach(css => {
-                var count = css.valueText.split("[").length - 1;
-                for (let index = 0; index < count; index++) {
-                    template = css.valueText.substring(
-                        css.valueText.indexOf("[") + 1,
-                        css.valueText.indexOf("]")
-                    );
-                    templateAll = template.split(",");
-                    if (templateAll[0] == p[1]) {
-                        p[4].split(' ').forEach(midiE => {
-                            if(midiE.includes(':')){
-                                eventType = midiE.split(':')[0];
-                                eventName = midiE.split(':')[1];
-                            }
-                            else {
-                                eventType = midiE;
-                                eventName = '';
-                            }
-                            var templateObj = {
-                                'name': templateAll[0],
-                                'eventType': eventType,
-                                'eventName': eventName,
-                                'templateFull': template,
-                                'options': p[3],
-                                'array':  (p[2].includes(';'))? p[2].split(';') : '',
-                                'min': (templateAll.length > 1)?templateAll[1].split(':')[0]:((p[2].includes(':'))? p[2].split(':')[0] : '0'),
-                                'max': (templateAll.length > 1)?templateAll[1].split(':')[1]:((p[2].includes(':'))? p[2].split(':')[1] : '1'),
-                            };
-    
-                            var property = {
-                                'selector': element.mSelectorText,
-                                'property': css.property,
-                                'value': css.valueText,
-                                'templates': [templateObj]
-                            };
-                            midiEvents.push(property);
-                        });
-                        p[5].split(' ').forEach(audioE => {
-                            if(audioE.includes(':')){
-                                eventType = audioE.split(':')[0];
-                                eventName = audioE.split(':')[1];
-                            }
-                            else {
-                                eventType = audioE;
-                                eventName = '';
-                            }
-                            var templateObj = {
-                                'name': templateAll[0],
-                                'eventType': eventType,
-                                'eventName': eventName,
-                                'templateFull': template,
-                                'options': p[3],
-                                'array':  (p[2].includes(';'))? p[2].split(';') : '',
-                                'min': (templateAll.length > 1)?templateAll[1].split(':')[0]:((p[2].includes(':'))? p[2].split(':')[0] : '0'),
-                                'max': (templateAll.length > 1)?templateAll[1].split(':')[1]:((p[2].includes(':'))? p[2].split(':')[1] : '1'),
-                            };
-    
-                            var property = {
-                                'selector': element.mSelectorText,
-                                'property': css.property,
-                                'value': css.valueText,
-                                'templates': [templateObj]
-                            };
-                            audioEvents.push(property);
-                        });
-                    }
-                }
-
-            });
-        });
-    });
+function range(template, value) {
+    if (template.options == 'r') {
+        console.log(template);
+        if (template.array != '') {
+            console.log(template.array[Math.floor(Math.random() * template.array.length)]);
+            return template.array[Math.floor(Math.random() * template.array.length)];
+        } else {
+            if (template.min[0] == '#') {
+                template.min = parseInt(template.min.replace('#', ''), 16);
+                template.max = parseInt(template.max.replace('#', ''), 16);
+                return '#' + ((Math.random() * (template.max - template.min) + template.min).toString(16)).split('.')[0];
+            }
+            else {
+                return (Math.random() * (parseInt(template.max) - parseInt(template.min)) + parseInt(template.min));
+            }
+        }
+    }
+    if (template.options == 'd') {
+        if (template.min[0] == '#') {
+            template.min = parseInt(template.min.replace('#', ''), 16);
+            template.max = parseInt(template.max.replace('#', ''), 16);
+            return '#' + ((template.min + Math.round(template.max - template.min) * value).toString(16)).split('.')[0];
+        }
+        else {
+            return (parseInt(template.min) + Math.round(parseInt(template.max) - parseInt(template.min)) * value);
+        }
+    }
 }
 
-
-
 /**
  * Initialize Midi
  */
@@ -174,35 +121,39 @@ function midiEvent(type, data) {
             }
         }
     });
-    midiEvents.forEach(event => {
-        midiValue = data.value;
-        templates = event['templates'];
-        templates.forEach(template => {
-            midiValue = (template['min'] + ((template['max'] - template['min']) * midiValue));
-            if (type == 'noteon' && template['eventType'] == 'note' && template['eventName'] == data.note.number) {
-                value = event['value'].replace('[' + template['templateFull'] + ']', midiValue);
-                let els = document.querySelectorAll(event['selector']);
-                els.forEach(e => {
-                    e.style[event['property']] = value; // Note velocity
-                });
-            }
-            if (type == 'controlchange' && template['eventType'] == 'cc' && template['eventName'] == data.controller.number) {
-                value = event['value'].replace('[' + template['templateFull'] + ']', midiValue);
-                let els = document.querySelectorAll(event['selector']);
-                els.forEach(e => {
-                    e.style[event['property']] = value; // Control value
-                });
-            }
-            if (type == 'pitchbend' && template['eventType'] == 'pb') {
-                value = event['value'].replace('[' + template['templateFull'] + ']', midiValue);
-                let els = document.querySelectorAll(event['selector']);
+
+    chrome.storage.sync.get(['all'], function (result) {
+        result.all.forEach(element => {
+            value = element.value;
+            midiValue = data.value;
+            eventIn = false;
+            element.templates.forEach(template => {
+                if (template.type == 'midi') {
+                    midiValue = range(template, midiValue);
+                    if (type == 'noteon' && template.eventType == 'note' && template.eventName == data.note.number) {
+                        value = element.value.replace('[' + template.templateFull + ']', midiValue);
+                        eventIn = true;
+                    }
+                    if (type == 'controlchange' && template.eventType == 'cc' && template.eventName == data.controller.number) {
+                        value = element.value.replace('[' + template.templateFull + ']', midiValue);
+                        eventIn = true;
+                    }
+                    if (type == 'pitchbend' && template.eventType == 'pb') {
+                        value = element.value.replace('[' + template.templateFull + ']', midiValue);
+                        eventIn = true;
+                    }
+                }
+            });
+            if (eventIn) {
+                let els = document.querySelectorAll(element.element);
                 els.forEach(e => {
-                    e.style[event['property']] = value; // Pitchbend value
+                    e.style[element.property] = value;
                 });
             }
         });
     });
 
+
     var newTime = new Date().getTime();
     bpm = ((1 / ((newTime - time) / 1000)) * 60);
     time = newTime;
@@ -465,37 +416,13 @@ function freqToBin(freq, rounding = 'round') {
     return bin < max ? bin : max;
 }
 
-function range(min, max, value) {
-    if (value == 'random') {
-        if (min[0] == '#') {
-            min = parseInt(min.replace('#', ''), 16);
-            max = parseInt(max.replace('#', ''), 16);
-            return '#' + ((Math.random() * (max - min) + min).toString(16)).split('.')[0];
-        }
-        else {
-            return (Math.random() * (parseInt(max) - parseInt(min)) + parseInt(min));
-        }
-    }
-    else {
-        if (min[0] == '#') {
-            min = parseInt(min.replace('#', ''), 16);
-            max = parseInt(max.replace('#', ''), 16);
-            return '#' + ((min + Math.round(max - min) * value).toString(16)).split('.')[0];
-        }
-        else {
-            return (parseInt(min) + Math.round(parseInt(max) - parseInt(min)) * value);
-        }
-    }
-}
+
 
 function audioEvent() {
     analyser.getFloatTimeDomainData(buf);
     var ac = autoCorrelate(buf, audioContext.sampleRate);
     if (ac == -1) {
         a = 5;
-        // $('#analyser1').text("--");
-        // $('#analyser2').text("-");
-        // $('#analyser3').text("--");
     } else {
         // $('#analyser1').text(Math.round(ac));
         var note = noteFromPitch(ac);
@@ -541,46 +468,43 @@ function audioEvent() {
     audioSample.shift();
     audioSample.push(meter.volume);
 
-
-    // allParametersAudio.forEach(param => {
-
-    // });
-
-    audioEvents.forEach(event => {
-        templates = event['templates'];
-        value = event['value'];
-        eventIn = false;
-        templates.forEach(template => {
-            Object.keys(presets).forEach(preset => {
-                if (template['eventType'] == preset) {
-                    eventIn = true;
-                    value = value.replace('[' + template['templateFull'] + ']', range((template['min']), (template['max']), energies[preset]));
+    chrome.storage.sync.get(['all'], function (result) {
+        result.all.forEach(element => {
+            value = element.value;
+            eventIn = false;
+            element.templates.forEach(template => {
+                if (template.type == 'audio') {
+                    Object.keys(presets).forEach(preset => {
+                        if (template.eventType == preset) {
+                            eventIn = true;
+                            value = value.replace('[' + template.templateFull + ']', range(template, energies[preset]));
+                        }
+                    });
+                    if (template.eventType == 'loud') {
+                        eventIn = true;
+                        volume = meter.volume * 1.4;
+                        value = value.replace('[' + template.templateFull + ']', (meter.volume * 1.4 < 1 ? range(template, volume) : 0));
+                    }
+                    if (template.eventType == 'onset' && template.eventName == noteStrings[note % 12]) {
+                        eventIn = true;
+                        value = value.replace('[' + template.templateFull + ']', range(template, 1));
+                    }
+                    if (attack && template.eventType == 'attack') {
+                        console.log('Attack');
+                        eventIn = true;
+                        value = value.replace('[' + template.templateFull + ']', '');
+                    }
                 }
             });
-            if (template['eventType'] == 'loud') {
-                eventIn = true;
-                volume = meter.volume * 1.4;
-                value = value.replace('[' + template['templateFull'] + ']', (meter.volume * 1.4 < 1 ? range((template['min']), (template['max']), volume) : 0));
-            }
-            if (template['eventType'] == 'onset' && template['eventName'] == noteStrings[note % 12]) {
-                eventIn = true;
-                value = value.replace('[' + template['templateFull'] + ']', '');
-            }
-            if (attack && template['eventType'] == 'attack') {
-                console.log('Attack');
-                eventIn = true;
-                value = value.replace('[' + template['templateFull'] + ']', '');
+            if (eventIn) {
+                let els = document.querySelectorAll(element.element);
+                els.forEach(e => {
+                    e.style[element.property] = value;
+                });
             }
         });
-        if (eventIn) {
-            let els = document.querySelectorAll(event['selector']);
-            els.forEach(e => {
-                e.style[event['property']] = value;
-            });
-        }
     });
 
-
     var newTime = new Date().getTime();
     bpm = ((1 / ((newTime - time) / 1000)) * 60);
     time = newTime;
@@ -605,9 +529,6 @@ function onMessage({ type, data }) {
             audioEvents = [];
             midiEvents = [];
             // parseCSS(css)
-            chrome.storage.sync.get(['parameters', 'css'], function (result) {
-                parseCSS2(result.css, result.parameters);
-            });
             break;
         }
         case 'updateP': {
@@ -618,17 +539,13 @@ function onMessage({ type, data }) {
             audioEvents = [];
             midiEvents = [];
             // parseCSS(css)
-            chrome.storage.sync.get(['parameters', 'css'], function (result) {
-                parseCSS2(result.css, result.parameters);
-            });
+
             break;
         }
         case 'start': {
             chrome.storage.sync.get(['activate'], function (result) {
                 if (result.activate) {
-                    chrome.storage.sync.get(['parameters', 'css'], function (result) {
-                        parseCSS2(result.css, result.parameters);
-                    });
+                    // zzz
                 }
                 else {
                     audioApi();
@@ -681,9 +598,6 @@ chrome.storage.sync.set({ popup: true });
 chrome.runtime.onMessage.addListener(onMessage);
 chrome.storage.sync.get(['activate'], function (result) {
     if (result.activate) {
-        chrome.storage.sync.get(['parameters', 'css'], function (result) {
-            parseCSS2(result.css, result.parameters);
-        });
         audioApi();
     }
 });
diff --git a/main.js b/main.js
index b1ac6a0cba5066f785ea1c1fa77058ad2d54bdba..049175fd9fa8b10e3150e45406a3ef44acd8a92a 100644
--- a/main.js
+++ b/main.js
@@ -155,11 +155,107 @@ document.getElementById("parameters").addEventListener("input", function () {
 }, false);
 
 
+function analyseAll() {
+	chrome.storage.sync.get(['parameters', 'css'], function (result) {
+		var all = [];
+		var parser = new CSSParser();
+		var sheet = parser.parse(result.css, false, true);
+		sheet.cssRules.forEach(element => {
+			element.declarations.forEach(css => {
+				var templates = [];
+				cssValue = css.valueText;
+				for (let index = 0; index < css.valueText.split("[").length - 1; index++) {
+					template = cssValue.substring(
+						cssValue.indexOf("[") + 1,
+						cssValue.indexOf("]")
+					);
+					cssValue = cssValue.replace("[" + template + "]", "");
+					var parameters = JSON.parse(result.parameters);
+					parameters.forEach(p => {
+						templateSplited = template.split(' ');
+						if (p[1] == templateSplited[0]) {
+							if (p[4] != "") {
+								p[4].split(' ').forEach(midiE => {
+									var obj = {
+										type: '',
+										name: templateSplited[0],
+										templateFull: template,
+										eventType: '',
+										eventName: '',
+										options: '',
+										array: templateSplited.length > 1 ? (templateSplited[1].includes(';') ? templateSplited[1].split(';') : '') : '',
+										min: templateSplited.length > 1 ? (templateSplited[1].includes(':') ? templateSplited[1].split(':')[0] : '') : '',
+										max: templateSplited.length > 1 ? (templateSplited[1].includes(':') ? templateSplited[1].split(':')[1] : '') : '',
+									}
+									obj.type = 'midi';
+									if (midiE.includes(':')) {
+										obj.eventType = midiE.split(':')[0];
+										obj.eventName = midiE.split(':')[1];
+									}
+									else {
+										obj.eventType = midiE;
+										obj.eventName = '';
+									}
+									obj.options = p[3];
+									obj.array = ((obj.array == '') ? (p[2].includes(';') ? p[2].split(';') : '') : obj.array);
+									obj.min = ((obj.min == '') ? (p[2].includes(':') ? p[2].split(':')[0] : 0) : obj.min);
+									obj.max = ((obj.max == '') ? (p[2].includes(':') ? p[2].split(':')[1] : 1) : obj.max);
+									templates.push(obj);
+								});
+							}
+							if (p[5] != "") {
+								p[5].split(' ').forEach(audioE => {
+									var obj = {
+										type: '',
+										name: templateSplited[0],
+										templateFull: template,
+										eventType: '',
+										eventName: '',
+										options: '',
+										array: templateSplited.length > 1 ? (templateSplited[1].includes(';') ? templateSplited[1].split(';') : '') : '',
+										min: templateSplited.length > 1 ? (templateSplited[1].includes(':') ? templateSplited[1].split(':')[0] : '') : '',
+										max: templateSplited.length > 1 ? (templateSplited[1].includes(':') ? templateSplited[1].split(':')[1] : '') : '',
+									}
+									obj.type = 'audio';
+									if (audioE.includes(':')) {
+										obj.eventType = audioE.split(':')[0];
+										obj.eventName = audioE.split(':')[1];
+									}
+									else {
+										obj.eventType = audioE;
+										obj.eventName = '';
+									}
+									obj.options = p[3];
+									obj.array = ((obj.array == '') ? (p[2].includes(';') ? p[2].split(';') : '') : obj.array);
+									obj.min = ((obj.min == '') ? (p[2].includes(':') ? p[2].split(':')[0] : 0) : obj.min);
+									obj.max = ((obj.max == '') ? (p[2].includes(':') ? p[2].split(':')[1] : 1) : obj.max);
+									templates.push(obj);
+								});
+							}
+						}
+					});
+
+				}
+				all.push({
+					element: element.mSelectorText,
+					property: css.property,
+					value: css.valueText,
+					templates: templates
+				});
+			});
+		});
+		chrome.storage.sync.set({ all: all });
+	});
+}
+
+
+
 /**
  * Save CSS in editor via save button
  */
 function updateCss() {
 	console.log('updateCss');
+	analyseAll();
 	chrome.tabs.query({ active: true, currentWindow: true },
 		function (tabs) {
 			let cssStr = editor.getValue();
@@ -380,4 +476,5 @@ chrome.runtime.connect({ name: "popup" });
 // Load the editor
 loadEditor();
 // Initialize the settings UI
-initUi();
\ No newline at end of file
+initUi();
+
diff --git a/popup.html b/popup.html
index db05a68eed503129d05276f94ab611f5076d7332..750533f807279cb344a7caae1ef3227dd1d2d4ec 100644
--- a/popup.html
+++ b/popup.html
@@ -86,6 +86,7 @@
 		</table>
 	</details>
 
+	<script src="cssParser.js" type="text/javascript" charset="utf-8"></script>
 	
 	<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
 	<script src="ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>