Adding slide show ability to image player. Various changes to make app look better...
[profile/ivi/MediaPlayer.git] / index.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <!--
3 * Copyright (c) 2013, Intel Corporation.
4 *
5 * This program is licensed under the terms and conditions of the
6 * Apache License, version 2.0.  The full text of the Apache License is at
7 * http://www.apache.org/licenses/LICENSE-2.0
8 *
9 -->
10 <html>
11         <head>
12                 <title>Media Player</title>             
13                 <link rel="stylesheet" href="css/main.css">                     
14                 <script src="js/jquery-1.9.1.min.js"></script>  
15                 <script src="js/main.js"></script>
16                 <script src="js/textObject.js"></script>
17                 <script src="js/imageControls.js"></script>
18         </head>
19         <body>  
20         <div id="background"></div>
21                 <div id="mainMenuButtons">
22                         <img id="mainMusicButton" class="mainButton" src="images/musicButton.png" onClick="changeMenu(this.id)">
23                         <img id="mainVideoButton" class="mainButton" src="images/videoButton.png" onClick="changeMenu(this.id)">
24                         <img id="mainImageButton" class="mainButton" src="images/imageButton.png" onClick="changeMenu(this.id)">
25                 </div>  
26                 
27                 <div id="navigationButtons" style="position:absolute; visible:hidden">
28                         <!-- <div id="mediaName" ><font size="8" color="#F00"></font></div> -->                                    
29                         <img id="backButton" class="navButton" src="images/backButton.png" onClick="backButtonClick()" style="position:absolute; display: none">
30                         <img id="nextButton" class="navButton" src="images/nextButton.png" onClick="nextButtonClick()" style="position:absolute; display: none">
31                         <img id="returnButton" class="navButton" src="images/returnButton.png" onClick="showMainMenu()" style="position:absolute; display: none">
32                         <img id="listButton" class="navButton" src="images/listIconSmall.png" onClick="showMediaList()" style="position:absolute; display: none">
33                         <img id="playButton" class="navButton" src="images/playButton.png" onClick="playButtonClick()" style="position:absolute; display: none">
34                                                 
35                 </div>          
36                 
37                 <div id="sortButtons">
38                                 <img id="sortAllButton" class="sortButton" src="images/allButton.png" onClick="sortByAlpha()" style="display: none">
39                                 <img id="sortArtistButton" class="sortButton" src="images/artistButton.png" onClick="sortByArtist()" style="display: none">
40                                 <img id="sortAlbumButton" class="sortButton" src="images/albumButton.png" onClick="sortByAlbum()" style="display: none">
41                         </div>                                  
42                 
43                 <canvas id="mediaName" style="position:absolute; z-index : 0"></canvas> 
44
45                 
46                                 
47                 <audio id="audioPlayer" class="player" >
48                         
49                         <source id=audioSrc type="audio/mpeg">                  
50                 </audio>
51                                  
52                 <video id="videoPlayer" onClick="playButtonClick()" class="player" >
53                         <source id=videoSrc type="video/ogg">                   
54                 </video>
55
56                 <div id="imagePlayer" onClick="nextButtonClick()" class="player"></div>
57                                 
58                 <div id="mediaList">
59                    <ul id=mediaListItems>                               
60                    </ul>
61                 </div>  
62                                  
63         </body>
64 </html>