Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: press Ctrl-F5, Mozilla: hold down Shift while clicking Reload (or press Ctrl-Shift-R), Opera/Konqueror: press F5, Safari: hold down Shift + Alt while clicking Reload, Chrome: hold down Shift while clicking Reload.
var warper = {
  domain: 'https://warper.wmflabs.org',
  commons: 'https://commons.wikimedia.org',
  token: undefined,
  user: undefined,

  Init: function() {
    if (localStorage.getItem('warperToken') !== null && localStorage.getItem('warperUser') !== null) {
      warper.token = localStorage.getItem('warperToken');
      warper.user = localStorage.getItem('warperUser');
      // check if the token is valid, if not it will be removed
      warper.validateToken();
    }
  },

  getMapFromPageId: function(pageId, callback) {
    $.ajax({
      url: warper.domain + '/api/v1/maps?field=page_id&query=' + pageId,
      success: function(result) {
        if (!result.data.length <= 0) {
          typeof callback === 'function' && callback(result);
        } else {
          typeof callback === 'function' && callback(false);
        }
      }
    });
  },

  createMap: function(pageId, title, callback) {
    var action = function() {
      $.ajax({
        url: warper.domain + '/api/v1/maps',
        type: 'POST',
        headers: {
          'X-User-Token': warper.token,
          'X-User-Id': warper.user
        },
        data: '{"data": {"type": "maps","attributes": {"page_id":"' + pageId + '","title": "' + title + '"}}}',
        success: function(result) {
          typeof callback === 'function' && callback(result);
        },
        error: function(result) {
          typeof callback === 'function' && callback(false);
        }
      });
    };

    if (warper.token) {
      action();
    } else {
      warper.getToken(function() {
        action();
      });
    }
  },
  
  getToken: function(callback) {
    // create popup window
    //?omniauth_window_type=newWindow&auth_origin_url=' + window.location.href
    var myPopup = window.open(warper.domain + '/u/auth/mediawiki?auth_origin_url=' + window.location.href, 'myWindow');

    // periodical message sender
    var messenger = setInterval(function() {
      var message = 'requestCredentials';
      // send the message and target URI
      myPopup.postMessage(message, warper.domain);
    }, 500);

    // listen to response
    window.addEventListener('message', function(event) {
      // the message listener gets triggered by any URL make sure it's the right one
      if (event.origin !== warper.domain) return;
      clearInterval(messenger);
      localStorage.setItem('warperToken', event.data.auth_token);
      localStorage.setItem('warperUser', event.data.id);
      wraper.token = event.data.auth_token;
      wraper.user = event.data.id;
      typeof callback === 'function' && callback(event.data);
    }, false);
  },

  validateToken: function(callback) {
    $.ajax({
      url: warper.domain + '/api/v1/auth/validate_token.json?user_id=' + warper.user + '&user_token=' + warper.token,
      success: function(result) {
        // check if the token returned matches the stored one
        if (warper.token === result.meta.auth_token) {
          typeof callback === 'function' && callback(true);
        } else {
          warper.token = undefined;
          warper.user = undefined;
          localStorage.removeItem('warperToken');
          localStorage.removeItem('warperUser');
          typeof callback === 'function' && callback(false);
        }
      }
    });
  }
};