optimize interface

src/audioplayer/audioplayer.css

+.progress_volume{
+    position: absolute;
+    top: 0%;
+    margin: 30px 0 20px 0; 
+}
 .title {
     position: absolute;
-    top: 10px;
-    margin: 50px 0 20px 0;
+    top: 1%;
+    margin: 30px 0 20px 0;
 }
 input.notice{
-    width:400px;
     background: black;
     color: white;
 }
 
 .progress_time{
     position: absolute;
-    top: 400px;
-    margin: 50px 0 20px 0;
-}
-
-.progress_volume{
-    position: absolute;
-    top: 310px;
+    top: 65%;
     margin: 50px 0 20px 0;
 }
 
-
-progress.pro{
-    width:400px;
-}
-
-progress.volume{
-    width:400px;
-}
\ No newline at end of file

src/audioplayer/audioplayer.js

 /*global window, rJS, RSVP, console, $, jQuery, URL, location */
 /*jslint nomen: true*/
 
-(function (window, rJS, $) {
+(function (window, rJS, $, RSVP) {
   "use strict";
+  $.mobile.ajaxEnabled = false;
+  $.mobile.linkBindingEnabled = false;
+  $.mobile.hashListeningEnabled = false;
+  $.mobile.pushStateEnabled = false;
   var control,
     animation,
     time,
     volume,
     title,
     io,
+    error,
     totalId = -1,
     that,
     next_context,
@@ -17,6 +22,7 @@
     addMusic_context,
     currentId = -1,
     initializeFlag = false,
+    newPage,
     playlist = [];
   function nextId() {
     if (totalId === -1) {
@@ -28,9 +34,6 @@
   }
   rJS(window)
     .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
-    .declareAcquiredMethod("showPage", "showPage")
-    .declareAcquiredMethod("addPage", "addPage")
-    .declareAcquiredMethod("ErrorPage", "ErrorPage")
     .allowPublicAcquisition("setCurrentTime", function (value) {
       control.setCurrentTime(value[0]);
     })
@@ -75,6 +78,7 @@
       play_context = g.__element.getElementsByTagName('a')[1];
       stop_context = g.__element.getElementsByTagName('a')[2];
       addMusic_context = g.__element.getElementsByTagName('a')[3];
+      newPage = false;
       that = g;
       initializeFlag = false;
       RSVP.all([
@@ -95,6 +99,9 @@
         ),
         g.getDeclaredGadget(
           "io"
+        ),
+        g.getDeclaredGadget(
+          "error"
         )
       ])
         .then(function (all_param) {
@@ -104,6 +111,9 @@
           volume = all_param[3];
           title = all_param[4];
           io = all_param[5];
+          error = all_param[6];
+          error.noDisplay();
+          io.noDisplay();
           that.display();
           window.setInterval(function () {
             control.getCurrentTime()
@@ -164,9 +174,18 @@
       stop_context.style.display = "none";
       addMusic_context.style.display = "none";
     })
+    .declareMethod("showPage", function (param) {
+      return this.aq_pleasePublishMyState({page: param});
+    })
     .declareMethod("render", function (options) {
       var id = nextId(),
         name = playlist[id];
+      if (newPage === true) {
+        newPage = false;
+        error.noDisplay();
+        that.display();
+        return;
+      }
       if (initializeFlag === false) {
         return;
       }
@@ -190,14 +209,21 @@
         if (options.page === "addMusic") {
           animation.stopAnimation();
           control.stopSong()
-            .then(that.addPage());
+            .then(function () {
+              that.noDisplay("addPage");
+              newPage = true;
+            });
           return;
         }
 
         if (playlist.indexOf(options.page) === -1) {
           animation.stopAnimation();
           control.stopSong()
-            .then(that.ErrorPage())
+            .then(function () {
+              error.display();
+              that.noDisplay();
+              newPage = true;
+            })
             .fail(function (e) {
               console.log("error drop gadget " + e);
             });
@@ -212,4 +238,4 @@
         });
       }
     });
-}(window, rJS, jQuery));
+}(window, rJS, jQuery, RSVP));

src/audioplayer/index.html

@@ -8,15 +8,59 @@
   <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
   <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
   <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
+
+  <script src="../<%= curl.jquerymobilejs.relative_dest %>"></script>  
+  <link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
   
   <!-- custom script -->
-  <script src="./interface.js" type="text/javascript"></script>
+  <script src="./audioplayer.js" type="text/javascript"></script>
+  
+  <link rel="stylesheet" href="../../src/audioplayer/audioplayer.css" media="screen" ></link>  
   </head>
   <body>
-    <div class = "audioplayer" data-gadget-url="./audioplayer.html" data-gadget-scope="audioplayer">
-    </div>
-    <div class = "error" data-gadget-url="./error.html" data-gadget-scope="error">
+    <div data-role="page">
+    <div data-role="header" data-position="fullscreen">
+      <div data-role="navbar">
+        <ul>
+          <li> <a class ="next" data-transition="slide" >next</a></li>
+          <li> <a class ="play" data-transition="slide" >play</a></li>
+        </ul>
+      </div>
     </div>
     
+    <div class = "audioplayer">
+      <!-- data-gadget-sandbox="iframe" -->
+      <div class = "control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control">
+      </div>
+      
+      <div class = "animation" data-gadget-url="../audioplayer_animation/index.html" data-gadget-scope="animation">
+      </div> 
+      
+      <div class = "progress_time" data-gadget-url="../audioplayer_progress/index.html" data-gadget-scope="time">
+      </div>          
+      
+      
+      <div class = "progress_volume" data-gadget-url="../audioplayer_volume/index.html" data-gadget-scope="volume">
+      </div>
+      
+      <div class = "title" data-gadget-url="../audioplayer_title/index.html" data-gadget-scope="title" >
+      </div>
+      
+      <div class = "io" data-gadget-url="../audioplayer_io/index.html" data-gadget-scope="io" >
+      </div>
+
+      <div class = "error" data-gadget-url="./error.html" data-gadget-scope="error">
+      </div>
+      
+      <div data-role="footer" data-position="fullscreen">
+        <div data-role="navbar">
+          <ul>
+            <li> <a class ="stop" data-transition="slide" >stop</a></li>
+            <li> <a class ="addMusic" data-transition="slide">addMusic</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    </div>
   </body>
 </html>

src/audioplayer_animation/animation.css

 #visualizer {
-    text-align: relative;
+    text-align: center;
 }
 
 #visualizer #canvas {
-    margin-top: 2%;
-    position: relative;
+    margin-top: 4%;
 }
 
 canvas#mirror{
@@ -17,14 +16,14 @@ canvas#mirror{
     transform: scaleY(-0.3);
 }
 div#mirrorWrapper{
-    height: 100px;
+    height: 150px;
 }
 
 
 div#mirrorWrapper:after {
     display: block;
     height: 100px;
-    width: 400px;
+    width: 100%;
     position: relative;
     top: -257px;
     content: " ";

src/audioplayer_animation/animation.js

@@ -16,7 +16,7 @@
         cheight = canvas.height - 2,
         meterWidth = 10, //width of the meters in the spectrum
         capHeight = 2,
-        meterNum = 50,
+        meterNum = 300,
         array,
         drawFrame,
         step,

src/audioplayer_animation/index.html

@@ -17,11 +17,11 @@
 
   <body>
     <div id="visualizer">
-      <canvas width="400" height="350" id="canvas">
+      <canvas width="800" height="350" id="canvas">
         !Canvas not supported by your browser
       </canvas>
       <div id="mirrorWrapper">
-        <canvas width="400" height="250" id="mirror"></canvas>
+        <canvas width="800" height="250" id="mirror"></canvas>
       </div>
     </div> 
     

src/audioplayer_io/io.js

@@ -63,6 +63,7 @@
     .declareAcquiredMethod("sendPlaylist", "sendPlaylist");
   gk.ready(function (g) {
     input_context = g.__element.getElementsByTagName('input')[0];
+    input_context.style.display = "none";
     g.playlist = [];
     g.createIO({ "type" : "indexeddb",
                  "database": "test"},

src/audioplayer_progress/progress.css

 progress {
     height: 25px;
     padding: 5px;
-    width: 350px;
     margin: 50px 0 20px 0;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;

src/audioplayer_progress/progress.js

@@ -29,6 +29,7 @@
     g.bar = g.__element.getElementsByTagName('progress')[0];
     g.bar.value = 0;
     g.bar.max = 1000;
+    g.bar.style.width = window.screen.availWidth + "px";
     g.bar.onclick = function (e) {
       var posX = e.clientX,
         targetLeft = $(g.bar).offset().left;

src/audioplayer_title/index.html

@@ -15,6 +15,6 @@
   
 
   <body>
-    <input type="text" class="notice" size="50" >
+    <input type="text" class="notice" size="150">
   </body>
 </html>

src/audioplayer_title/title.js

@@ -10,7 +10,7 @@
     this.out = " ";
     this.Position = 0;
     this.pos = 0;
-    this.delay = 200;
+    this.delay = 50;
     this.i = 0;
     this.size = 0;
     this.reset = function () {
@@ -44,6 +44,7 @@
   gk.ready(function (g) {
     g.scroll = new BannerObject();
     g.input = g.__element.getElementsByTagName('input')[0];
+    g.input.style.width =  window.screen.availWidth + "px";
     g.scroll.size = g.input.size;
     function scroller() {
       g.scroll.out += " ";

src/audioplayer_volume/index.html

@@ -18,7 +18,7 @@
 <body>
 
 
-  <progress class="volume">
+  <progress class="volume" >
   </progress>
   
   

src/audioplayer_volume/volume.css

 progress {
     height: 25px;
     padding: 5px;
-    width: 350px;
     margin: 50px 0 20px 0;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;

src/audioplayer_volume/volume.js

@@ -28,7 +28,7 @@
   gk.ready(function (g) {
     g.bar = g.__element.getElementsByTagName('progress')[0];
     g.bar.max = 1000;
-    //g.bar.style.display = "none";
+    g.bar.style.width = window.screen.availWidth + "px";
     g.bar.onclick = function (e) {
       var posX = e.clientX,
         targetLeft = $(g.bar).offset().left;