Adding layout choice

index.html

@@ -65,11 +65,11 @@
                 margin-right:auto;
             }
 
-            #level-chars {
+            #level-chars, #layout{
                 font-size: 16px;
                 width:95%;
                 text-align: center;
-                padding: 16px;
+                padding-bottom: 16px;
                 margin-left: auto;
                 margin-right:auto;
                 word-wrap: break-word;
@@ -124,6 +124,9 @@
 
         <div id='container'>
 
+            <div id='layout'>
+            </div>
+
             <div id='level-chars'>
             </div>
 

keyzen.js

@@ -8,7 +8,12 @@ var ratio = 0;
 data.chars = " jfkdlsahgyturieowpqbnvmcxz6758493021`-=[]\\;',./ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+{}|:\"<>?";
 data.consecutive = 5;
 data.word_length = 7;
-
+data.current_layout = "qwerty";
+layouts={};
+layouts["qwerty"] = " jfkdlsahgyturieowpqbnvmcxz6758493021`-=[]\\;',./ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+{}|:\"<>?";
+layouts["azerty"] = " jfkdlsmqhgyturieozpabnvcxw6758493021`-=[]\\;',./ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+{}|:\"<>?";
+layouts["colemak"] = " ntesiroahdjglpufywqbkvmcxz1234567890'\",.!?:;/@$%&#*()_ABCDEFGHIJKLMNOPQRSTUVWXYZ~+-={}|^<>`[]\\";
+layouts["bépo"] = " tesirunamc,èvodpléjbk'.qxghyfàzw6758493021`-=[]\\;/ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+{}|:\"<>?";
 
 $(document).ready(function() {
     if (localStorage.data != undefined) {
@@ -55,6 +60,21 @@ function set_level(l) {
     render();
 }
 
+function set_layout(l) {
+    data.current_layout = l
+	data.chars = layouts[l]
+    data.in_a_row = {};
+    for(var i = 0; i < data.chars.length; i++) {
+        data.in_a_row[data.chars[i]] = data.consecutive;
+    }
+    data.word_index = 0;
+    data.word_errors = {};
+    data.word = generate_word();
+    data.keys_hit = "";
+    save();
+    render();
+}
+
 
 function keyHandler(e) {
     start_stats();
@@ -117,13 +137,27 @@ function load() {
 
 
 function render() {
+    render_layout();
     render_level();
     render_word();
     render_level_bar();
     render_rigor();
     render_stats();
 }
 
+function render_layout() {
+	var layouts_html = "<span id='layout'>";
+	for(var layout in layouts){
+		if(data.current_layout == layout){
+			layouts_html += "<span style='color: #F00' onclick='set_layout(\"" + layout + "\");'> "
+		} else {
+		 layouts_html += "<span style='color: #AAA' onclick='set_layout(\"" + layout + "\");'> "
+		}
+		layouts_html += layout + "</span>";
+	}
+	layouts_html += "</span>";
+	$("#layout").html('Choose layout : ' + layouts_html);
+}
 
 function render_level() {
     var chars = "<span id='level-chars-wrap'>";