function setAlbums(albums) {
    var dAlbums = document.getElementById('albums');
    dAlbums.innerHTML = '';
    Array.prototype.forEach.call(albums, function(alb, i){
        var a = addAlbumDom(dAlbums, alb, true);
        a.setAttribute('data-id', alb.id);
        a.setAttribute('title', alb.cover.src);
        a.addEventListener('click', function() {
            jsonGET('/api/albums/' + alb.id + '/', function (alb) {
                startGallery(alb.photos, 0, alb.id);
            });
        });
    });
}

function setIncoming(albums, parent) {
    parent.innerHTML = '';
    Array.prototype.forEach.call(albums, function(alb, i){
        var div = appendElement(parent, 'div', null, 'incoming-album');
        var a = addAlbumDom(div, alb, true);
        a.addEventListener('click', function(e) {
            e.preventDefault();
            startGallery(alb.photos, 0, i);
        });
        var form = appendElement(div, 'form', null, null, '<div><p><label>Title</label><input type="text"/></p><p><label>Path</label><input type="text"/></p><p><input type="submit" value="Import"/></p>');
        form[0].value = alb.title;
        form[1].value = alb.dest;
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            form[2].disabled = true;

            var paths = Array.prototype.map.call(alb.photos, function(p) {return p.path});
            var data = JSON.stringify({name: form[0].value,
                                       dest: form[1].value,
                                       paths: paths});
            jsonPOST('/api/incoming/import/', data, function(resp) {
                alert('Added album ' + resp.id);
                div.innerHTML = '';
            }, function(err, req) {
                alert(err);
                form[2].disabled = false;
            });
        });
    });
}

function addAlbumDom(parent, alb, add_count) {
    var a = appendElement(parent, 'a');
    var img = appendElement(a, 'img');
    img.src = alb.cover.src;
    if (alb.title) {
        var fig = appendElement(a, 'figure');
        fig.textContent = alb.title;
        if (add_count)
            fig.textContent += ' [' + (alb.count || alb.photos.length) + ']';
    };
    return a;
}

function startGallery(items, index, uid) {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    var options = {
        preload: [1, 3],
        loadingIndicatorDelay: 300,
        index: index || 0,
        galleryUID: uid || 1
    };

    // Initializes and opens PhotoSwipe
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();

    return gallery;
}

  function appendElement(parent, tag, id, className, innerHTML) {
    var el = document.createElement(tag);
    if (id) el.id = id;
    if (className) el.className = className;
    if (innerHTML) el.innerHTML = innerHTML;
    parent.appendChild(el);
    return el;
  }

  function xdr(url, method, data, callback, errback) {
    var req;
    if (!callback)
      callback = function(){};
    if (!errback)
      errback = function(){};

    if(XMLHttpRequest && ('withCredentials' in (req = new XMLHttpRequest()))) {
      req.open(method, url, true);
      req.withCredentials = "true";
      req.onerror = errback;
      req.onreadystatechange = function() {
        if (req.readyState === 4) {
          if (req.status >= 200 && req.status < 400) {
            callback(req.responseText);
          } else {
            errback(new Error('Response returned with non-OK status'), req);
          }
        }
      };
      req.setRequestHeader("Accept", "application/json");
      if (data)
        req.setRequestHeader("Content-type", "application/json");
      req.send(data);
    } else if(XDomainRequest) {
      var reqUrl = url;
      if (url.indexOf('http:') === 0) {
        reqUrl = url.substr(5);
      }
      else if (url.indexOf('https:') === 0) {
        reqUrl = url.substr(6);
      }
      req = new XDomainRequest();
      req.open(method, reqUrl);
      req.onerror = function(err) { errback(err, req); };
      req.onload = function() {
        callback(req.responseText);
      };
      req.ontimeout = function() {};
      req.onprogress = function() {};
      req.timeout = 0;
      req.send(data);
    } else {
      errback(new Error('CORS not supported'));
    }
  };
  function jsonGET(url, callback, errback){
    xdr(url, 'GET', null, function(data){
      callback(JSON.parse(data));
    }, errback);
  }
  function jsonPOST(url, data, callback, errback){
    xdr(url, 'POST', data, function(data){
      callback(JSON.parse(data));
    }, errback);
  }