<html>
<head>
  <title>comments-sk demo</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <script src="/res/common/js/common.js"></script>
  <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <script type="text/javascript" charset="utf-8">
    // Comments to display.
    var comments = [
      {
        id: 0,
        user: "user@google.com",
        time: 15000000,
        message: "Hi! Check this out: http://www.google.com skia:4253",
        extraBool: true,
        extraText: "extra",
      },
      {
        id: 1,
        user: "me@google.com",
        time: 140000,
        message: "Helloworld",
        extraBool: true,
        extraText: "extra",
      },
      {
        id: 2,
        user: "user@google.com",
        time: 1500002330,
        message: "asdfkl",
        extraBool: false,
        extraText: "extra",
      },
      {
        id: 3,
        user: "user@google.com",
        time: 15000000,
        message: "Hdsfai!",
        extraBool: true,
        extraText: "extra",
      },
      {
        id: 4,
        user: "user@google.com",
        time: 15000000,
        message: "Hi42!",
        extraBool: false,
        extraText: "extra",
      },
      {
        id: 5,
        user: "user@google.com",
        time: 15000000,
        message: "Hiasdkfj24390r8934!",
        extraBool: true,
        extraText: "extra",
      },
      {
        id: 6,
        user: "user@google.com",
        time: 15000000,
        message: "H42094532985439849!",
        extraBool: true,
        extraText: "extra",
      }
    ];

    function updateDemos() {
      comments = comments.slice();
      var commentBoxes = $$("comments-sk");
      for (var i = 0; i < commentBoxes.length; i++) {
        commentBoxes[i].comments = comments;
      }
    }

    function deleteComment(id) {
      for (var i = 0; i < comments.length; i++) {
        if (comments[i].id == id) {
          comments.splice(i, 1);
          updateDemos();
          return true;
        }
      }
      return false;
    }

    function addComment(comment) {
      var maxId = 0;
      for (var i = 0; i < comments.length; i++) {
        if (comments[i].id > maxId) {
          maxId = comments[i].id;
        }
      }
      comment.id = maxId + 1,
      comment.user = "YOU@google.com",
      comment.time = 15000000,
      comment.message = comment.comment,
      comments.push(comment);

      updateDemos();
    }

    // Mock out sk.get() to return the login info.
    sk.get = function(url) {
      return new Promise(function (resolve, reject) {
        resolve('{"Email":"user@google.com","LoginURL":"https://accounts.google.com/"}');
      });
    };

    // Mock out sk.post() and sk.delete() to pretend to support adding and
    // deleting comments.
    sk.post = function(url, body) {
      return new Promise(function (resolve, reject) {
        addComment(JSON.parse(body));
        resolve("Added the comment.");
      });
    }

    sk.delete = function(url) {
      return new Promise(function (resolve, reject) {
        var split = url.split("/");
        var id = split[split.length - 1];
        if (deleteComment(id)) {
          resolve("");
        } else {
          reject("Failed to delete the comment.");
        }
      });
    };
  </script>
  <link rel="import" href="comments-sk.html">
  <link rel="import" href="error-toast-sk.html">
  <link rel="import" href="login.html">
  <style>
  div.demo {
    background-color: #EEEEEE;
    padding: 10px;
    margin: 10px;
  }
  comments-sk {
    width: 100%;
  }
  </style>
</head>
<body>
  <h1>comments-sk demo</h1>
  <login-sk style="display:none;"></login-sk>

  <hr/>
  <h2>Simple</h2>
  <comments-sk></comments-sk>

  <hr/>
  <h2>Allow Add Comments</h2>
  <comments-sk allow_add_comment></comments-sk>

  <hr/>
  <h2>Allow Delete Comments</h2>
  <comments-sk allow_delete_comment></comments-sk>

  <hr/>
  <h2>Allow Add and Delete</h2>
  <comments-sk allow_add_comment allow_delete_comment></comments-sk>

  <hr/>
  <h2>Collapsible</h2>
  <comments-sk collapsible></comments-sk>

  <hr/>
  <h2>Extra Fields</h2>
  <comments-sk allow_add_comment extra_fields='[{"name":"extraText","label":"Extra Text","type":"text"},{"name":"extraBool","label":"Extra Bool","type":"bool"}]'></comments-sk>

  <error-toast-sk></error-toast-sk>
  <script type="text/javascript" charset="utf-8">
    updateDemos();
  </script>
</body>
</html>