Directory Player Code

  <link rel="stylesheet" type="text/css" href="mobile.css" title="dark" media="screen" />

  <!-- script type="text/javascript" src="script/soundmanager2-jsmin.js"></script -->
  <script type="text/javascript" language="javascript">
    var scanned = false;
    var web_prefix = '<?=$web_prefix?>';
    var drop = 0;
    var dropFx = 0;
    var sortie = false;
    var collection = false;

    var IScroll = new Class({

      options: {
        onComplete: function(el){
          // not implemented yet
        },
        className: 'cn',
        idName: 'cn',
      },

      initialize: function(element, options){
        this.setOptions(options);

        this.draggable = $(element);
        this.frame = $(element).parentNode;

        /* --- Modify Visuals --- */
        var frameHeight = this.frame.scrollHeight;
        this.draggable.setStyles({
          'top': frameHeight,
        });

        /* --- Variables --- */
        var distance=0;
        var prevY=0;
        this.boundTop = 0;
        this.boundBottom = frameHeight / 2 - this.draggable.scrollHeight;

        /* -- Scroll In --- */
        this.draggable.effect('top',{
          transition: Fx.Transitions.Cubic.easeOut,
          duration: 20,
          fps: 60
        }).start(0);

        /* --- Drag --- */
        this.draggable.makeDraggable({
          modifiers:{x:'', y:'top'},
          onDrag: function(){
            var topy = this.draggable.getTop();
            distance = topy - prevY;
            prevY = topy;
          }.bind(this),
          onComplete: function(){
            var decdis = distance*10;
            var to = prevY+decdis;
            var computedHeight = -(this.draggable.scrollHeight - this.frame.scrollHeight);
            if ((distance > 0) && (to > 0))
              to = 0;
            if ((distance < 0) && (to < computedHeight) && (this.draggable.scrollHeight < this.frame.scrollHeight))
              to = computedHeight;
            var dura = Math.abs(decdis);
            this.draggable.effect('top',{
              transition: Fx.Transitions.Cubic.easeOut,
              duration: dura,
              fps: 50
            }).start(to);
          }.bind(this)
        });

      }

    });

    IScroll.implement(new Options);

    function loadCollection(file) {
      var xr = new Ajax(file, {
                                method: 'get',
                                onRequest: function() {
                                  new Element('DIV', { 'id': 'loader' }).addClass('loader').inject($('view'));
                                },
                                onComplete: function(el) {
                                              //collection = Json.evaluate(el);
                                              //traverse(collection.root.content, $('tree'));
//                                              $('loader').remove();
                                              new Element('div', {id:'cn'}).set('html', el).inject($('tree'));
                                              var myIScroll = new IScroll($('cn'),{});
                                              //attachEvents();
                                            },
                                onFailure: function() {
                                  $('loader').remove();
                                  new Ajax('scanner.php', {method: 'get', evalResponse: false, onComplete: function() { loadCollection('collection.json.php') }}).request();
                                }
                              }).request();
    }

    function nodeclick(event) {
      event = new Event(event);
      if (event.target.getSize().size.y == '14') {
        event.target.style.height = 'auto';
        event.target.style.background = 'url("image/minus.gif") left 2px no-repeat';
      } else {
        event.target.style.height = '14px';
        event.target.style.background = 'url("image/plus.gif") left 2px no-repeat';
      }
      event.stopPropagation();
    }

    //function leafclick(event) {
    //  event = new Event(event);
    //  event.stopPropagation();
    //
    //  if ($(event.target).uids) {
    //    if ($('songs')) $('songs').remove();
    //    var songs = new Element('TABLE', {
    //      'id': 'songs',
    //      'class': 'songs',
    //      'border': '0',
    //      'cellspacing': '0',
    //      'cellpadding': '2'
    //    })
    //    var trbody = new Element('TBODY').inject(songs);
    //    var tr = new Element('TR').inject(trbody);
    //    new Element('TH').setHTML('#').inject(tr);
    //    new Element('TH').setHTML('Artist').inject(tr);
    //    new Element('TH').setHTML('Album').inject(tr);
    //    new Element('TH').setHTML('Song Title').inject(tr);
    //    $(event.target).uids.each(function(value, key) {
    //      if (typeof(value) == 'string') {
    //        var tr = new Element('TR', { 'events': { 'mouseover': songover, 'mouseout': songout } } ).inject(trbody);
    //        if ( key % 2 != 0 ) tr.className = 'even';
    //
    //        tr.addEvent('mousedown', function(e) {
    //          e = new Event(e).stop();
    //
    //          var clone = this.clone()
    //            .setStyles(this.getCoordinates([$('view')]))
    //            .setStyles({'opacity': 0.7, 'position': 'absolute', 'border': '1px solid #999', 'z-index': '100'})
    //            .addEvent('emptydrop', function() {
    //              this.remove();
    //              drop.removeEvents();
    //            }).inject(document.body);
    //
    //          drop.addEvents({
    //            'drop': function() {
    //              drop.removeEvents();
    //              clone.remove();
    //              $('lst').empty();
    //              soundPlayer.oPlaylist.links[soundPlayer.oPlaylist.links.length] = new Element('A', {href: tr.file}).setHTML(tr.song);
    //              soundPlayer.oPlaylist.addItem({url:tr.file, name:tr.song})
    //              soundPlayer.oPlaylist.createPlaylist();
    //              soundPlayer.oPlaylist.createTweens();
    //              sortie = new Sortables('lst', { handles: $$('#lst span'), ghost: false });
    //              dropFx.start('7389AE').chain(dropFx.start.pass('000000', dropFx));
    //            },
    //            'over': function() {
    //              dropFx.start('98B5C1');
    //            },
    //            'leave': function() {
    //              dropFx.start('000000');
    //            }
    //          });
    //
    //          var drag = clone.makeDraggable({
    //            droppables: [drop]
    //          });
    //
    //          drag.start(e);
    //        });
    //
    //        new Element('TD', {'class': 'track'} ).setHTML(this.track.get(key)).inject(tr);
    //        new Element('TD', {'class': 'artist'} ).setHTML(this.artist.get(key)).inject(tr);
    //        new Element('TD', {'class': 'album'} ).setHTML(this.album.get(key)).inject(tr);
    //        new Element('TD', {'class': 'title'} ).setHTML(this.titles.get(key)).inject(tr);
    //        tr.file = web_prefix+this.uids.get(key); //.replace(/\w+\/\.\.\//i, '');
    //        tr.song = this.titles.get(key);
    //      }
    //    }, $(event.target));
    //
    //    songs.inject($('view'));
    //  }
    //}

    //function songover(event) {
    //  event = new Event(event);
    //  event.target.parentNode.addClass('songover');
    //}
    //
    //function songout(event) {
    //  event = new Event(event);
    //  event.target.parentNode.removeClass('songover');
    //}

    //function attachEvents() {
    //  drop = $('droptarget');
    //  dropFx = drop.effect('background-color', {wait: false});
    //
    //  $$('.leaf').each(function(item){
    //
    //    item.addEvent('mousedown', function(e) {
    //      e = new Event(e).stop();
    //
    //      var clone = this.clone()
    //        .setStyles(this.getCoordinates([$('tree')]))
    //        .setStyles({'opacity': 0.7, 'position': 'absolute', 'border': '1px solid #999'})
    //        .addEvent('emptydrop', function() {
    //          this.remove();
    //          drop.removeEvents();
    //        }).inject(document.body);
    //
    //      drop.addEvents({
    //        'drop': function() {
    //          drop.removeEvents();
    //          clone.remove();
    //          $('lst').empty();
    //          item.uids.each(function(fl, key) {
    //            var slink = (web_prefix+fl).replace(/\w+\/\.\.\//i, '');
    //            soundPlayer.oPlaylist.links[soundPlayer.oPlaylist.links.length] = new Element('A', {href: slink}).setHTML(this.titles.get(key));
    //            soundPlayer.oPlaylist.addItem({url:slink, name:this.titles.get(key)})
    //          }, item);
    //          soundPlayer.oPlaylist.createPlaylist();
    //          soundPlayer.oPlaylist.createTweens();
    //          sortie = new Sortables('lst', { handles: $$('#lst span'), ghost: false });
    //          dropFx.start('7389AE').chain(dropFx.start.pass('000000', dropFx));
    //        },
    //        'over': function() {
    //          dropFx.start('98B5C1');
    //        },
    //        'leave': function() {
    //          dropFx.start('000000');
    //        }
    //      });
    //
    //      var drag = clone.makeDraggable({
    //        droppables: [drop]
    //      });
    //
    //      drag.start(e);
    //    });
    //
    //  });
    //}

    function initialize() {
      loadCollection('collection.json.php');
    }
    window.addEvent('domready', initialize);

  </script>
</head>

<body>

<div id="logo"><img src="image/mobilelogo.gif"></div>
<div id="tree"></div>
<div id="view"></div>
<div>

</div>

<!-- script type="text/javascript">soundManager.createMovie('soundmanager2.swf');</script -->

</body>
</html>