JQuery Mobile based radiotime browser

Perhaps JQuery Mobile could be used for a good looking mobile interface.
We could probably also use Angular JS and/or Ionic: http://learn.ionicframework.com/formulas/backend-data/
Here is something that is beginning to work:
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   <body>

      <div data-role="page" id="home">
         <div data-theme="a" data-role="header">
            <h3>Radio</h3>
         </div>
         <div data-role="content">
            <div class="example-wrapper" data-iscroll>
               <ul data-role="listview" id="movie-list" data-theme="a">
               </ul>
            </div>
         </div>
      </div>

      <div data-role="page" id="headline">
         <div data-theme="a" data-role="header">
            <a href="#home" class="ui-btn-left" data-transition="slide" data-direction="reverse">Back</a>
            <h3>Details</h3>
         </div>
         <div data-role="content">
            <ul data-role="listview" id="detail-info" data-theme="a">
            </ul>
         </div>
      </div>

      <script>
         // Based on http://jsfiddle.net/gajotres/8uac7/

         $(document).on('pageinit', '#home', function() {
           var url = 'http://opml.radiotime.com/Browse.ashx?c=local&render=json';

           $.ajax({
             url: url,
             dataType: "jsonp",
             async: true,
             success: function(result) {
               ajax.parseJSONP(result);
             },
             error: function(request, error) {
               alert('Network error, please try again');
             }
           });
         });

         $(document).on('pagebeforeshow', '#headline', function() {
           $('#detail-info').empty();
           $.each(movieInfo.result, function(i, row) {
             if (row.preset_id == movieInfo.id) {
               $('#detail-info').append('<li><img src="' + row.image + '"></li>');
               $('#detail-info').append('<li>Subtext: ' + row.subtext + '</li>');
               $('#detail-info').append('<li>Text: ' + row.text + '</li>');
               $('#detail-info').append('<li>URL: ' + row.URL + '</li>');
               $('#detail-info').append('<li>Bitrate: ' + row.bitrate + '</li>');
               $('#detail-info').append('<li>Reliability: ' + row.reliability + '</li>');
               $('#detail-info').append('<li>Item:  : ' + row.item + '</li>');
               $('#detail-info').append('<li>now_playing_id :' + row.now_playing_id + '</li>');
               $('#detail-info').listview('refresh');
             }
           });
         });

         $(document).on('vclick', '#movie-list li a', function() {
           movieInfo.id = $(this).attr('data-id');
           $.mobile.changePage("#headline", {
             transition: "slide",
             changeHash: false
           });
         });

         var movieInfo = {
           id: null,
           result: null
         }

         var ajax = {
           parseJSONP: function(result) {
             // console.log(JSON.stringify(result));
             $.each(result.body, function(index, item) {
               movieInfo.result = item.children
               $.each(item.children, function(index, row) {
                 console.log(row.text);
                 console.log(JSON.stringify(row));
                 $('#movie-list').append('<li><a href="" data-id="' + row.preset_id + '"><img src="' + row.image + '"/><h3>' + row.text + '</h3><p>' + row.subtext + '</p></a></li>');
               });
             });

             $('#movie-list').listview('refresh');
           }
         }
      </script>
   </body>
</html>
probonopd / minikrebs

JQuery Mobile based radiotime browser #7
