Merge pull request #1 from webkmua/master

adding menu and cover

google-translate/index.html

@@ -4,6 +4,7 @@
 
     <style type="text/css">
         article#content {
+            clear:both;
             float: left;
             width: 70%;
         }
@@ -16,12 +17,27 @@
             text-decoration: none;
             color: blue;
         }
+        menu {
+            color:#6495ed;
+            font-size: 9px;
+            float:left;
+            cursor:pointer;
+        }
+        menu li:hover{
+            color: #0e1aff;
+        }
+        #cover{
+            margin:0 40px;
+            float:left;
+        }
+
     </style>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
     <script type="text/javascript">
         $(document).ready(function() {
+
             function readSingleFile(evt) {
                 //Retrieve the first (and only!) File from the FileList object
                 var f = evt.target.files[0];
@@ -30,7 +46,32 @@
                     var r = new FileReader();
                     r.onload = function(e) {
                         var contents = e.target.result;
-                        book = $(contents).find('section').html();
+                        titles = $(contents).find('section');
+
+                        // create menu from section titles
+                        var html = '<menu>';
+                        for (var i = 0; i < titles.length; i++){
+                            html += '<li id="'+ i +'">' + titles.find('title').eq(i).text() + '</li>';
+                        }
+                        html += '</menu>';
+
+                        // insert menu
+                        $('article#content').before(html);
+                        console.log(html);
+
+                        // binding menu click and inserting paragraph
+                        $("menu li").click(function(){
+                            book = $(contents).find('section').eq(this.id).html();
+                            $('article#content').html(book);
+                         });
+
+                        // insert cover
+                        cover = $(contents).find('binary').html();
+                        html='<div id="cover"><img src="data:image/jpg;base64,' + cover +'"></div> ';
+                        $('article#content').before(html);
+
+                        // insert first
+                        book = $(contents).find('section').eq(0).html();
                         $('article#content').html(book);
 
                         // split text to individual words and wrap them in <span></span> tags
@@ -45,13 +86,17 @@
 
                             getTranslateFromYandexTranslate(word);
                         });
+
+
                     }
                     r.readAsText(f);
                 } else {
                     alert("Failed to load file");
                 }
             }
 
+
+
             // file upload listener
             document.getElementById('fileinput').addEventListener('change', readSingleFile, false);