CoderLine · Danielku15 · Dec 20, 2019 · Aug 28, 2019 · Aug 31, 2019 · Aug 31, 2019
diff --git a/Build/Haxe/src/alphaTab/JsonSerializationBuilder.hx b/Build/Haxe/src/alphaTab/JsonSerializationBuilder.hx
diff --git a/Directory.Build.props b/Directory.Build.props
@@ -3,9 +3,9 @@
     <DebugType>full</DebugType>
     <DebugSymbols>true</DebugSymbols>
 
-    <Version>0.9.5</Version>
-    <AssemblyVersion>0.9.5.0</AssemblyVersion>
-    <FileVersion>0.9.5.0</FileVersion>
+    <Version>0.9.6</Version>
+    <AssemblyVersion>0.9.6.0</AssemblyVersion>
+    <FileVersion>0.9.6.0</FileVersion>
     <Authors>Danielku15</Authors>
     <Company>CoderLine</Company>
     <Product>AlphaTab</Product>

diff --git a/Documentation/input/Shared/_PropertyDescription.cshtml b/Documentation/input/Shared/_PropertyDescription.cshtml
@@ -0,0 +1,35 @@
+@{
+    string dotNetName = Model.String("Title");
+    string[] jsNames = Model.String("JsName").Split(new []{';'}, StringSplitOptions.RemoveEmptyEntries);
+    string[] jsonNames = Model.String("JsonName").Split(new []{';'}, StringSplitOptions.RemoveEmptyEntries);
+    string[] dataAttributeNames = Model.String("DataAttribute").Split(new []{';'}, StringSplitOptions.RemoveEmptyEntries);
+}
+
+
+<table class="table table-striped table-condensed type-table">
+    <tbody>    
+        <tr>
+            <td><code class="code-badge code-badge-net">@dotNetName <span>.net</span></code></td>
+        </tr> 
+        @foreach(var name in jsNames)
+        {
+            <tr>
+                <td><code class="code-badge code-badge-js">@name <span>JavaScript</span></code></td>
+            </tr>        
+        }
+
+        @foreach(var name in jsonNames)
+        {
+            <tr>
+                <td><code class="code-badge code-badge-json">@name <span>JSON</span></code></td>
+            </tr>        
+        }
+
+        @foreach(var name in dataAttributeNames)
+        {
+            <tr>
+                <td><code class="code-badge code-badge-html">@name <span>HTML</span></code></td>
+            </tr>        
+        }        
+    </tbody>
+</table>
diff --git a/Documentation/input/alphatex/exporter.cshtml b/Documentation/input/alphatex/exporter.cshtml
@@ -59,7 +59,6 @@ function exportFile(data) {
 }
 
 $('#exporterFile').change(function(e) {
-	debugger;
 	var files = e.originalEvent.target.files;
 	if(files.length > 0) {
 		var reader = new FileReader();

diff --git a/Documentation/input/assets/css/override.css b/Documentation/input/assets/css/override.css
@@ -1,3 +1,10 @@
+.layout-boxed .wrapper {
+    max-width: 80%;
+}
+.table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #FFF;    
+}
+
 .top-banner {
     background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%);
     background-repeat: repeat-x;
@@ -39,13 +46,44 @@
     white-space: nowrap;
 }
 
+.type-table code.code-badge span,
+.reference-table code.code-badge span {
+    border-left: 1px solid #DEDEDE;
+    padding-left: 5px;
+    opacity: 0.5;
+}
+
 .type-table code .code-badge,
 .reference-table code .code-badge {
     border-left: 1px solid #DEDEDE;
     padding-left: 5px;
     opacity: 0.5;
 }
 
+.code-badge {
+    margin-left: 3px;
+    margin-bottom: 3px;
+    display: inline-block;
+}
+
+.code-badge.code-badge-net { border-color: #5d99c6; }
+.code-badge.code-badge-net span { border-color: #5d99c6; color: #5d99c6; }
+
+.code-badge.code-badge-js { border-color: #75a478; }
+.code-badge.code-badge-js span { border-color: #75a478; color: #75a478; }
+
+.code-badge.code-badge-json { border-color: #b3bc6d; }
+.code-badge.code-badge-json span { border-color: #b3bc6d; color: #b3bc6d; }
+
+.code-badge.code-badge-html { border-color: #ba6b6c; }
+.code-badge.code-badge-html span { border-color: #ba6b6c; color: #ba6b6c; }
+
+.code-badge.code-badge-jquery { border-color: #c97b63; }
+.code-badge.code-badge-jquery span { border-color: #c97b63; color: #c97b63; }
+
+.code-badge.code-badge-all { border-color: #808e95; }
+.code-badge.code-badge-all span { border-color: #808e95; color: #808e95; }
+
 .main-header .navbar .sidebar-toggle {
     color: #777;
 }
@@ -92,4 +130,8 @@
     padding: initial;
     border-radius: initial;
     border-bottom: initial;
+}
+
+.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
+    border-top: 1px solid #c1c1c1;
 }
diff --git a/Documentation/input/examples/general/html5.cshtml b/Documentation/input/examples/general/html5.cshtml
@@ -4,7 +4,7 @@ Order: 3
 
 <div class="description">
     The music notation is rendered as SVG by default. To use HTML5 canvas as render
-    engine specify the option <code>engine: 'html5'</code> when initializing or by using <code>data-engine="html5"</code>.
+    engine specify the option <code>core.engine = 'html5'</code> when initializing or by using <code>data-core-engine="html5"</code>.
 </div>
 
 <div>
@@ -20,14 +20,16 @@ Order: 3
         <div class="js">
             <script type="text/x-alphatab">
                 $('#alphaTabScriptInit').alphaTab({
-                    engine: 'html5'
+                    core: {
+						engine: 'html5'
+					}
                 })
             </script>
         </div>
     </div>
     <div class="tab-pane example" id="dataInit">
         <div class="html">
-            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-engine="html5"></div>
+            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-core-engine="html5"></div>
         </div>
         <div class="js">
             <script type="text/x-alphatab">

diff --git a/Documentation/input/examples/layouts/horizontal.cshtml b/Documentation/input/examples/layouts/horizontal.cshtml
@@ -3,7 +3,7 @@ Order: 1
 ---
 
 <div class="description">
-    The horizontal layout be enabled via <code>layout: 'horizontal'</code> or <code>data-layout="horizontal"</code>. 
+    The horizontal layout be enabled via <code>display.layoutmode = 'horizontal'</code> or <code>data-display-layoutmode="horizontal"</code>. 
     The whole music notation is arranged as a single line. This layout is useful for small screen sizes. 
 </div>
 
@@ -22,14 +22,16 @@ Order: 1
             <script type="text/x-alphatab">
                 $('#alphaTabScriptInit').alphaTab({
                   file: '@Context.GetLink("/assets/files/player/Canon.gp5")',
-                  layout: 'horizontal'
+                  display: {
+					layoutMode: 'horizontal'
+				  }
                 })
             </script>
         </div>
     </div>
     <div class="tab-pane example" id="dataInit">
         <div class="html">
-            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-layout="horizontal"></div>
+            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-display-layoutmode="horizontal"></div>
         </div>
         <div class="js">
             <script type="text/x-alphatab">

diff --git a/Documentation/input/examples/layouts/page.cshtml b/Documentation/input/examples/layouts/page.cshtml
@@ -5,7 +5,7 @@ Order: 0
 <div class="description">
     The page layout is the default layout of alphaTab. The bars are aligned
     in a page like manner but without separation into individual pages. 
-    The layout can explicitely be set via <code>layout: 'page'</code> or <code>data-layout="page"</code>
+    The layout can explicitely be set via <code>display.layoutmode = 'page'</code> or <code>data-display-layoutmode="page"</code>
 </div>
 
 <div>
@@ -22,14 +22,16 @@ Order: 0
             <script type="text/x-alphatab">
                 $('#alphaTabScriptInit').alphaTab({
                   file: '@Context.GetLink("/assets/files/player/Canon.gp5")',
-                  layout: 'page'
+                  display: {
+					layoutMode: 'page'
+				  }
                 })
             </script>
         </div>
     </div>
     <div class="tab-pane example" id="dataInit">
         <div class="html">
-            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-layout="page"></div>
+            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-display-layoutmode="page"></div>
         </div>
         <div class="js">
             <script type="text/x-alphatab">

diff --git a/Documentation/input/examples/render-customization/colors-fonts.cshtml b/Documentation/input/examples/render-customization/colors-fonts.cshtml
@@ -75,25 +75,27 @@ Order: 10
             <script type="text/x-alphatab">
                 $('#alphaTabScriptInit').alphaTab({
                   file: '@Context.GetLink("/assets/files/features/Skillet.gp5")',
-                  resources: {
-                    copyrightFont: "bold 12px Roboto",
-                    titleFont: "32px 'Roboto Slab'",
-                    subTitleFont: "20px 'Roboto Slab'",
-                    wordsFont: "15px 'Roboto Slab'",
-                    effectFont: "italic 12px 'Roboto Slab'",
-                    fretboardNumberFont: "11px Roboto",
-                    tablatureFont: "13px Roboto",
-                    graceFont: "11px Roboto",
-                    barNumberFont: "11px Roboto",
-                    fingeringFont: "14px 'Roboto Slab'",
-                    markerFont: "bold 14px Roboto",
-
-                    staffLineColor: "rgba(255,255,255, 0.8)",
-                    barSeparatorColor: "rgb(255,255,255)",
-                    barNumberColor: "rgba(255,255,255, 0.8)",
-                    mainGlyphColor: "rgb(255,255,255)",
-                    secondaryGlyphColor: "rgba(255,255,255,0.40)",
-                    scoreInfoColor: "rgb(255,255,255)"
+				  display: {
+					  resources: {
+						copyrightFont: "bold 12px Roboto",
+						titleFont: "32px 'Roboto Slab'",
+						subTitleFont: "20px 'Roboto Slab'",
+						wordsFont: "15px 'Roboto Slab'",
+						effectFont: "italic 12px 'Roboto Slab'",
+						fretboardNumberFont: "11px Roboto",
+						tablatureFont: "13px Roboto",
+						graceFont: "11px Roboto",
+						barNumberFont: "11px Roboto",
+						fingeringFont: "14px 'Roboto Slab'",
+						markerFont: "bold 14px Roboto",
+
+						staffLineColor: "rgba(255,255,255, 0.8)",
+						barSeparatorColor: "rgb(255,255,255)",
+						barNumberColor: "rgba(255,255,255, 0.8)",
+						mainGlyphColor: "rgb(255,255,255)",
+						secondaryGlyphColor: "rgba(255,255,255,0.40)",
+						scoreInfoColor: "rgb(255,255,255)"
+					  }
                   }
                 })
             </script>
@@ -105,24 +107,24 @@ Order: 10
                 .alphaTabSurface { background: #000; }
             </style>
             <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/features/Skillet.gp5")"
-                data-resources-copyrightFont="bold 12px Roboto"
-                data-resources-titleFont="32px 'Roboto Slab'"
-                data-resources-subTitleFont="20px 'Roboto Slab'"
-                data-resources-wordsFont="15px 'Roboto Slab'"
-                data-resources-effectFont=" italic 12px 'Roboto Slab'"
-                data-resources-fretboardNumberFont="11px Roboto"
-                data-resources-tablatureFont="13px Roboto"
-                data-resources-graceFont="11px Roboto"
-                data-resources-barNumberFont="11px Roboto"
-                data-resources-fingeringFont="14px 'Roboto Slab'"
-                data-resources-markerFont=" bold 14px Roboto"
+                data-display-resources-copyrightFont="bold 12px Roboto"
+                data-display-resources-titleFont="32px 'Roboto Slab'"
+                data-display-resources-subTitleFont="20px 'Roboto Slab'"
+                data-display-resources-wordsFont="15px 'Roboto Slab'"
+                data-display-resources-effectFont=" italic 12px 'Roboto Slab'"
+                data-display-resources-fretboardNumberFont="11px Roboto"
+                data-display-resources-tablatureFont="13px Roboto"
+                data-display-resources-graceFont="11px Roboto"
+                data-display-resources-barNumberFont="11px Roboto"
+                data-display-resources-fingeringFont="14px 'Roboto Slab'"
+                data-display-resources-markerFont=" bold 14px Roboto"
 
-                data-resources-staffLineColor="rgba(255,255,255, 0.8)"
-                data-resources-barSeparatorColor="rgb(255,255,255)"
-                data-resources-barNumberColor="rgba(255,255,255, 0.8)"
-                data-resources-mainGlyphColor="rgb(255,255,255)"
-                data-resources-secondaryGlyphColor="rgba(255,255,255,0.40)"
-                data-resources-scoreInfoColor="rgb(255,255,255)"></div>
+                data-display-resources-staffLineColor="rgba(255,255,255, 0.8)"
+                data-display-resources-barSeparatorColor="rgb(255,255,255)"
+                data-display-resources-barNumberColor="rgba(255,255,255, 0.8)"
+                data-display-resources-mainGlyphColor="rgb(255,255,255)"
+                data-display-resources-secondaryGlyphColor="rgba(255,255,255,0.40)"
+                data-display-resources-scoreInfoColor="rgb(255,255,255)"></div>
         </div>
         <div class="js">
             <script type="text/x-alphatab">

diff --git a/Documentation/input/examples/render-customization/hideinfo.cshtml b/Documentation/input/examples/render-customization/hideinfo.cshtml
@@ -3,7 +3,7 @@ Order: 3
 ---
 
 <div class="description">
-    If you want to hide the song information like title or artist, the layout option <code>hideInfo</code> or data attribute <code>data-layout-hide-info</code> can be set. 
+    If you want to hide the song information like title or artist, the layout option <code>notation.hideInfo</code> or data attribute <code>data-notation-hideinfo</code> can be set. 
 </div>
 
 <div>
@@ -20,19 +20,16 @@ Order: 3
             <script type="text/x-alphatab">
                 $('#alphaTabScriptInit').alphaTab({
                   file: '@Context.GetLink("/assets/files/player/Canon.gp5")',
-                  layout: {
-                    mode: 'page',
-                    additionalSettings: {
-                        hideInfo: true
-                    }
+                  notation: {
+					hideInfo: true
                   }
                 })
             </script>
         </div>
     </div>
     <div class="tab-pane example" id="dataInit">
         <div class="html">
-            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-layout-hide-info="true"></div>
+            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-notation-hideinfo="true"></div>
         </div>
         <div class="js">
             <script type="text/x-alphatab">

diff --git a/Documentation/input/examples/render-customization/hidenames.cshtml b/Documentation/input/examples/render-customization/hidenames.cshtml
@@ -2,7 +2,7 @@ Title: Hide track names
 Order: 5
 ---
 <div class="description">
-    The track names are shown by default. To hide it the layout option <code>hideTrackNames</code> or data attribute <code>data-layout-hide-track-names</code> can be set.
+    The track names are shown by default. To hide it the layout option <code>notation.hideTrackNames</code> or data attribute <code>data-notation-hidetracknames</code> can be set.
 </div>
 
 <div>
@@ -19,19 +19,16 @@ Order: 5
             <script type="text/x-alphatab">
                 $('#alphaTabScriptInit').alphaTab({
                   file: '@Context.GetLink("/assets/files/player/Canon.gp5")',
-                  layout: {
-                    mode: 'page',
-                    additionalSettings: {
-                        hideTrackNames: true
-                    }
+                  notation: {
+					hideTrackNames: true
                   }
                 })
             </script>
         </div>
     </div>
     <div class="tab-pane example" id="dataInit">
         <div class="html">
-            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-layout-hide-track-names="true"></div>
+            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-notation-hidetracknames="true"></div>
         </div>
         <div class="js">
             <script type="text/x-alphatab">

diff --git a/Documentation/input/examples/render-customization/hidetuning.cshtml b/Documentation/input/examples/render-customization/hidetuning.cshtml
@@ -3,7 +3,7 @@ Order: 4
 ---
 
 <div class="description">
-    The guitar tuning is shown by default. To hide it the layout option <code>hideTuning</code> or data attribute <code>data-layout-hide-tuning</code> can be set.
+    The guitar tuning is shown by default. To hide it the layout option <code>notation.hideTuning</code> or data attribute <code>data-notation-hidetuning</code> can be set.
 </div>
 
 <div>
@@ -20,19 +20,16 @@ Order: 4
             <script type="text/x-alphatab">
                 $('#alphaTabScriptInit').alphaTab({
                   file: '@Context.GetLink("/assets/files/player/Canon.gp5")',
-                  layout: {
-                    mode: 'page',
-                    additionalSettings: {
-                        hideTuning: true
-                    }
+                  notation: {
+					hideTuning: true
                   }
                 })
             </script>
         </div>
     </div>
     <div class="tab-pane example" id="dataInit">
         <div class="html">
-            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-layout-hide-tuning="true"></div>
+            <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/player/Canon.gp5")" data-notation-hidetuning="true"></div>
         </div>
         <div class="js">
             <script type="text/x-alphatab">