assets loader

  var images = [];
  for (var i = 0; i < 50; i++) {
      images.push({
          url: 'http://lorempixel.com/100/100?' + i,
          type: 'jpg'
      });
  }

  var loader = assetsLoader({
          log: true,
          assets: images
      })
      .on('error', function(error) {
          container.innerHTML = error;
      })
      .on('progress', function(progress) {
          container.innerHTML = (progress * 100).toFixed() + '%';
      })
      .on('complete', function(map) {
          console.log(map);
          container.innerHTML = '';
          loader.get().forEach(function(image) {
              container.appendChild(image);
          })
      })
      .start();
      

  var container = document.querySelector('[data-js="container-video"]');
  var loader = assetsLoader({ log: true })
      .add({
          id: 'video',
          url: 'https://dl.dropboxusercontent.com/u/15470024/prototypes/video/counter.webm',
          blob: true
      })
      .on('error', function(error) {
          container.innerHTML = error;
      })
      .on('progress', function(progress) {
          container.innerHTML = (progress * 100).toFixed() + '%';
      })
      .on('complete', function(map) {
          console.log(map);
          container.innerHTML = '';
          var el = document.createElement('video');
          container.appendChild(el);
          // var url = files[0];
          var url = map.video;
          if (window.Blob && url instanceof window.Blob) {
              url = window.URL.createObjectURL(url);
              var revoke = function() {
                  el.removeEventListener('canplaythrough', revoke);
                  window.URL.revokeObjectURL(url);
              };
              el.addEventListener('canplaythrough', revoke);
          }
          el.preload = 'auto';
          el.controls = 'controls';
          el.src = url;
          el.load();
      })
      .start();
      

    var loader = assetsLoader()
        .add({
            id: 'groupA',
            assets: [{
                id: 'image0',
                url: 'http://lorempixel.com/300/300?0',
                type: 'jpg'
            },{
                id: 'image1',
                url: 'http://lorempixel.com/300/300?1',
                type: 'jpg'
            },{
                id: 'image2',
                url: 'http://lorempixel.com/300/300?2',
                type: 'jpg'
            }]
        })
        .add({
            id: 'groupB',
            basePath: 'https://dl.dropboxusercontent.com/u/15470024/prototypes/audio/',
            assets: [{
                id: 'select',
                url: 'select.ogg'
            },{
                id: 'collect',
                url: 'collect.ogg'
            },{
                id: 'hit',
                url: 'hit.ogg'
            }]
        })
        .on('error', function(error) {
            container.innerHTML = error;
        })
        .on('complete', function(map) {
            console.log(map);
            containerImages.innerHTML = '';
            containerAudio.innerHTML = '';

            loader.get('groupA')
                .forEach(function(asset) {
                    asset.file.alt = asset.id;
                    containerImages.appendChild(asset.file);
                });

            loader.get('groupB')
                .forEach(function(asset) {
                    asset.file.controls = 'controls';
                    containerAudio.appendChild(asset.file);
                });

        })
        .start();

        loader.group('groupA')
            .on('progress', function(progress) {
                containerImages.innerHTML = (progress * 100).toFixed() + '%';
            });

        loader.group('groupB')
            .on('progress', function(progress) {
                containerAudio.innerHTML = (progress * 100).toFixed() + '%';
            });