help link for index page

index.html

@@ -27,5 +27,10 @@
     </table>
   </div>
   <div id="leaflet_map"></div>
+  <div id='help_button' title='Help'>?</div>
+  <div id='help_content'>
+    <h2>Help</h2>
+    Please, follow <a href='https://blog.elphel.com/2017/09/long-range-multi-view-stereo-camera-with-4-sensors/#Scene_viewer'>this link</a>.
+  </div>
   </body>
 </html>

js/index.css

@@ -67,4 +67,49 @@ body {
 img{
   border-spacing:0px;
   display: block;
-}
\ No newline at end of file
+}
+
+#help_button{
+
+    position: absolute;
+    top:2px;
+    left: 208px;
+    z-index: 500;
+    cursor: pointer;
+
+    background: white;
+    border: 0px solid white;
+    border-radius: 2px;
+    font-size: 20px;
+    font-weight: bold;
+    padding: 5px 10px;
+    margin-bottom: 2px;
+}
+
+#help_button:focus {outline:0;}
+
+#help_button:hover {
+    background: rgba(240,240,240,1);
+}
+
+#help_content{
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    position:absolute;
+    top:0px;
+    left:0px;
+    width:100%;
+    height:100%;
+    border-radius:2px;
+    border: 0px solid gray;
+    color:white;
+    font-size:16px;
+    padding: 20px 100px;
+    background:rgba(50,50,50,0.9);
+    overflow:auto;
+    display:none;
+    z-index:10000;
+}
+
+#help_content a{
+  color:rgba(100,190,250,1);
+}

js/index.js

@@ -12,6 +12,7 @@ $(function(){
     //init();
     parseURL();
     init_maps();
+    init_help();
 
     var url = 'list.php?rating='+SETTINGS.rating;
 
@@ -434,6 +435,21 @@ function init_maps(){
 
 }
 
+function init_help(){
+
+  var help = $("#help_content");
+  help.hide();
+
+  $("#help_button").on('click',function(){
+    help.show();
+  });
+
+  help.on('click',function(){
+    help.hide();
+  });
+
+}
+
 function wheelEvent_list(event){
       shiftKey= (event.shiftKey==1);
       var delta = 0;