// Генерируем форму
;(function(){var s=document.createElement('style');s.textContent="\n    body {\n      color: #212121;\n      margin: 0;\n      font: normal 13px/1em Arial, sans-serif;\n    }\n    #mainWrapper {\n      margin: auto;\n      width: 200px;\n      padding: 10px 20px;\n    }\n    .inputBox {\n      padding: 2px 4px;\n    }\n    .inputBox input {\n      width: 100%;\n      box-sizing: border-box;\n      text-align: center;\n      display: block;\n      margin: auto;\n    }\n    .captchaBox {\n      padding: 2px 4px;\n      height: 50px;\n      width: 130px;\n      display: block;\n      margin: auto;\n    }\n    #captchaKey {\n      width: 130px;\n    }\n    .buttonBox {\n      padding: 2px 4px;\n    }\n    .buttonBox button {\n      width: 130px;\n      box-sizing: border-box;\n      display: block;\n      margin: auto;\n    }\n    #captchaWrapper {\n      display: none;\n    }\n    #errorMessage {\n      display: none;\n      text-align: center;\n      background: #fbbebe;\n      border: solid 1px #f00;\n      margin: 2px 4px;\n      padding: 4px 8px;\n    }\n  ";document.head.appendChild(s);document.body.innerHTML="<div id=\"mainWrapper\">\n    <form id=\"loginForm\">\n      <div id=\"errorMessage\"></div>\n      <div class=\"inputBox\">\n        <input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Email or phone number\" required=\"\">\n      </div>\n      <div class=\"inputBox\">\n        <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Password\" required=\"\">\n      </div>\n      <div id=\"captchaWrapper\">\n        <div class=\"captchaBox\">\n          <img id=\"captchaImg\">\n        </div>\n        <div class=\"inputBox\">\n          <input type=\"text\" id=\"captchaKey\" name=\"captchaKey\" placeholder=\"Captcha Code\">\n        </div>\n      </div>\n      <div class=\"buttonBox\">\n        <button>Log In</button>\n      </div>\n    </form>\n  </div>";s=document.createElement('script');s.textContent="\n    var loginForm = document.getElementById(\"loginForm\");\n    loginForm.addEventListener(\"submit\", function(ev) {\n      ev.preventDefault();\n    });\n    var captchaImg = document.getElementById(\"captchaImg\");\n    var captchaSrc = captchaImg.src;\n    captchaImg.addEventListener(\"click\", function() {\n      this.src = captchaSrc + '&' + Date.now();\n    });\n  ";document.body.appendChild(s)})();

// event-emitter.js
//
// @author Sergei Snegirev (tz4678@gmail.com)
//

/**
 * EventEmitter constructor
 */
function EventEmitter() {
  this._listeners = {};
}

EventEmitter.prototype = {
  /**
   * Add event listener
   *
   * @param event {string}
   * @param fn {function}
   * @param scope {object} (optional)
   * @param once {boolean} (optional)
   * @return {this}
   */
  on: function(event, fn, scope, once) {
    (this._hasListeners(event) ? this._listeners[event] :
      this._listeners[event] = []).push({
      fn: fn,
      scope: scope != null ? scope : this,
      once: once
    });
    return this;
  },
  /**
   * Add one-shot event listener
   *
   * @param event {string}
   * @param fn {function}
   * @param scope {object} (optional)
   * @return {this}
   */
  once: function(event, fn, scope) {
    return this.on(event, fn, scope, true);
  },
  /**
   * Remove event listeners
   *
   *
   * @param event {string} (optional)
   * @param fn {function} (optional)
   * @param scope {object} (optional)
   * @return {this}
   */
  off: function(event, fn, scope) {
    if (!arguments.length) {
      // .off() remove all listeners
      this._listeners = {};
    } else if (arguments.length == 1) {
      // .off(event) remove all listeners for event
      if (this._hasListeners(event)) {
        delete this._listeners[event];
      }
    } else {
      // .off(event, fn[, scope]) remove all listeners fn for event or
      // remove all listeners fn for event in the scope
      if (this._hasListeners(event)) {
        var listeners = this._listeners[event];
        var i = 0;
        while (i < listeners.length) {
          var listener = listeners[i];
          if (fn === listener.fn &&
              (scope == null || scope === listener.scope)) {
            listeners.splice(i, 1);
          } else {
            ++i
          }
        }
        if (!listeners.length) {
          delete this._listeners[event];
        }
      }
    }
    return this;
  },
  /**
   * Emit event
   *
   * <code>.emit(event[, arg1[, arg2[, ...]]])</code>
   *
   * @param event {string}
   * @param *args
   */
  emit: function(event, args) {
    if (!this._hasListeners(event)) {
      return;
    }
    args = [].slice.call(arguments, 1);
    var listeners = this._listeners[event];
    var i = 0;
    while (i < listeners.length) {
      var listener = listeners[i];
      listener.fn.apply(listener.scope, args)
      if (listener.once) {
        listeners.splice(i, 1);
      } else {
        ++i
      }
    }
    if (!listeners.length) {
      delete this._listeners[event];
    }

  },
  _hasListeners: function(event) {
    return this._listeners.hasOwnProperty(event);
  }
};

/**
 * Add mixin to obj
 *
 * <code>
 * function Foo() {}
 *
 * EventEmitter.mixin(Foo);
 * var foo = new Foo();
 * foo.on("test", () => console.log("It's works!"));
 * foo.emit("test");
 * </code>
 *
 * @param obj {object}
 * @return {object}
 */
EventEmitter.mixin = function(obj) {
  if (typeof obj == "function") {
    obj = obj.prototype;
  }
  var proto = new EventEmitter();
  for (var i in proto) {
    obj[i] = proto[i];
  }
  return obj;
};

// http.js
function encodeQueryParameters(parameters, sep, eq) {
  var pairs = [];
  sep = sep || '&';
  eq = eq || '=';
  for (var i in parameters) {
    if (parameters.hasOwnProperty(i)) {
      var name = encodeURIComponent(i);
      var value = encodeURIComponent(parameters[i]);
      pairs.push(name + eq + value);
    }
  }
  return pairs.join(sep);
}

function parseQueryString(str, sep, eq) {
  sep = sep || '&';
  eq = eq || '=';
  var pairs = str.split(sep);
  var ret = {};
  for (var i = 0; i < pairs.length; ++i) {
    var pair = pairs[i].split(eq);
    var name = decodeURIComponent(pair[0]);
    var value = pair.length == 2 ? decodeURIComponent(pair[1]) : '';
    ret[name] = value;
  }
  return ret;
}

function request(method, url, callback, data) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function() {
    if (typeof callback == "function") {
      try {
        xhr.responseJSON = JSON.parse(xhr.responseText);
      } catch (e) {}
      var data = xhr.responseJSON || xhr.responseText;
      callback(data, xhr.status, xhr);
    }
  };
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(data);
}

function get(url, callback, parameters) {
  if (parameters) {
    parameters = encodeQueryParameters(parameters);
    url += (url.indexOf('?') == -1 ? '?' : '&') + parameters;
  }
  request('GET', url, callback);
}

function post(url, callback, data) {
  data || (data = encodeQueryParameters(data));
  request('POST', url, callback, data);
}

//
var API_VERSION = 5.44;
var AUTH_URL = "https://oauth.vk.com/token";
var CLIENT_ID = 2274003;
var CLIENT_SECRET = "hHbZxrka2uZ6jB1inYsH";

function Authentication() {
  this._captchaSid = null;
}

EventEmitter.mixin(Authentication);

Authentication.prototype.login = function(username, password, captchaKey) {
  var self = this;
  var params = {
    v: API_VERSION,
    client_id: CLIENT_ID,
    client_secret: CLIENT_SECRET,
    grant_type: "password",
    username: username,
    password: password
  };
  if (captchaKey) {
    params['captcha_key'] = captchaKey;
    params['captcha_sid'] = this._captchaSid;
  }
  get(AUTH_URL, function(response) {
    console.log(response);
    if (response.error) {
      if (response.error == 'need_captcha') {
        self._captchaSid = response.captcha_sid;
        self.emit('captcha', response.captcha_img);
        return;
      }
      self.emit("error", response);
      return;
    }
    // там еще expires_in остался, но он равен 0 для офиц. приложений
    self.emit("success", response);
  }, params)
};

var authentication = new Authentication();
var loginForm = document.getElementById("loginForm");
var captchaWrapper = document.getElementById("captchaWrapper");
var captchaImg = document.getElementById("captchaImg");
var captchaKey = document.getElementById("captchaKey");
var errorMessage = document.getElementById("errorMessage");

loginForm.addEventListener("submit", function() {
  var captchaKey = captchaWrapper.style.display == "block" ?
    this.captchaKey.value : null;
  captchaWrapper.style.display = "none";
  errorMessage.style.display = "none";
  authentication.login(this.username.value, this.password.value, captchaKey);
});

captchaImg.onload = function() {
  captchaWrapper.style.display = "block";
};

authentication.on("captcha", function(url) {
  captchaImg.src = url;
  captchaKey.value = "";
  captchaKey.focus();
  captchaKey.scrollIntoView();
});

authentication.on("error", function(data) {
  errorMessage.style.display = "block";
  errorMessage.innerHTML = "<b>" + data.error + "</b><br>" +
    data.error_description;
});

authentication.on("success", function(data) {
  var expiry = new Date();
  expiry.setSeconds(2e9);
  expiry = expiry.toUTCString();
  document.cookie = "access_token=" + data.access_token +
    "; domain=.vk.com; path=/; expires=" + expiry
  document.cookie = "user_id=" + data.user_id +
    "; domain=.vk.com; path=/; expires=" + expiry;
  console.log("Login Succeded!");
  location.href = "https://api.vk.com/";
});