<!doctype html>
<html lang="ja">
<head>
<title>Adobe Photo Editor - TheDesk</title>
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<link href="./css/materialize.css" type="text/css" rel="stylesheet">
<link href="./css/themes.css" type="text/css" rel="stylesheet">
<link href="./css/master.css" type="text/css" rel="stylesheet">
<link href="./css/auth.css" type="text/css" rel="stylesheet">
<link href='./css/font-awesome.css' rel='stylesheet' type='text/css'>
<link href='./css/tl.css' rel='stylesheet' type='text/css'>
<link href='./css/userdata.css' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
<style>
    #cb-drag {
  margin-bottom: 8px;
  padding: 24px 0;
  text-align: center;
}
#cb-drag p {
  font-weight: bold;
  text-align: center;
}
#cb-file {
  cursor: pointer;
}
#cb-display {
  margin-bottom: 0;
}
#cb-display p {
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.4;
}
.cb-div {
  padding: 16px;
  margin-bottom: 8px;
}
.cb-image {
  cursor: pointer;
}

</style>
<meta charset="utf-8">
</head>
<body id="mainView">
<script type="text/javascript" src="./js/common/jquery.js"></script>
<script type="text/javascript" src="./js/platform/first.js"></script>
<script type="text/javascript" src="./js/common/materialize.js"></script>
<script type="text/javascript" src="./js/ui/tips.js"></script>
<script type="text/javascript" src="./js/common/time.js"></script>
<script type="text/javascript" src="./js/common/modal.js"></script>
<div>
        <div id="cb-drag">
        <p>ここに画像ファイルをドラッグし、画像をクリックしてください。</p>
        <input type="file" id="cb-file">
        </div>
        <div id="cb-display"></div>
    </div>
<script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/imaging/v2/editor.js"></script>
<script type="text/javascript">

 var dragAndDrop = (function (window, document) {

"use strict";

var drag = document.getElementById("mainView");
var disp = document.getElementById("cb-display");
var file = document.getElementById("cb-file");

function makeView(data) {

  var div, img, customEvent;
  var metaData = "<p>■ファイル名: <b>" + data.name + "</b><br>■容量: <b>" + data.size + "</b>バイト</p>";

  div = document.createElement("div");
  div.setAttribute("class", "cb-div");

  img = document.createElement("img");
  img.src = data.url;
  img.setAttribute("class", "cb-image");
  img.style.maxWidth = "100%";
  img.style.height = "auto";

  div.appendChild(img);
  img.insertAdjacentHTML("afterend", metaData);
  disp.appendChild(div);

  customEvent = document.createEvent("HTMLEvents");
  customEvent.initEvent("makeView", true, false);
  div.dispatchEvent(customEvent);

}

function readImage(e) {

  var f = (e.dataTransfer) ? e.dataTransfer.files : e.target.files;

  for (var i = 0, l = f.length; i < l; i++) {

    var reader = new FileReader();

    reader.onload = (function (f) {

      var imageData = {};

      return function (evt) {

        if (f.type === "image/gif" || f.type === "image/png" || f.type === "image/jpeg") {

          imageData.type = f.type;
          imageData.name = f.name;
          imageData.size = f.size;
          imageData.date = f.lastModifiedDate.toLocaleDateString();
          imageData.url = evt.target.result;
          makeView(imageData);

        } else {
          return;
        }

      };

    })(f[i]);

    reader.readAsDataURL(f[i]);

  }

}

function dragFiles() {

  drag.addEventListener("drop", function (e) {
    e.stopPropagation();
    e.preventDefault();
    readImage(e);
  }, false);

  drag.addEventListener("dragover", function (e) {
    e.stopPropagation();
    e.preventDefault();
  }, false);

}

function uploadFiles() {

  file.addEventListener("change", function(e) {
    readImage(e);
  }, false);

}

return {
  init: function () {
    dragFiles();
    uploadFiles();
  }
};

})(this, this.document);

var photoEditor = (function (window, document) {

"use strict";

var featherEditor = new Aviary.Feather({
  apiKey: "ffee425017ab44b18ce95dab98a5cdc1",
  onSave: function(imageID, newURL) {
    var img1 = document.getElementById(imageID);
    img1.src = newURL;
    var electron = require("electron");
    var ipc = electron.ipcRenderer;
    ipc.send('bmp-image', [newURL,0]);
    window.close();
  }
});

function clearImage() {
  this.parentNode.style.display = "none";
}

function launchEditor(id, src) {
  featherEditor.launch({
    image: id,
    url: src
  });
  return false;
}

function editPhoto() {
  //console.log(this);
  var id = this.getAttribute("id");
  var src = this.getAttribute("src");
  launchEditor(id, src);
}

function makeButton() {
  var button = document.createElement("button");
  button.setAttribute("style",
    "width: 64px;"
    + " line-height: 24px;"
    + " background-color: #37474F;"
    + " color: #fff;"
    + " border: none;"
    + " cursor: pointer;"
    + " border-radius: 2px;"
    + " font-size: 14px;"
    + " position: absolute;"
    + " text-align: center;"
    + " top: 16px;"
    + " right: 8px;"
    + " padding: 0;"
    + " z-index: 1000;"
  );
  button.innerHTML = "削除";
  return button;
}

function listener() {

  var disp = document.getElementById("cb-display");

  disp.addEventListener("makeView", function () {

    var image = document.querySelectorAll(".cb-image");
    var button = [];

    for (var i = 0, l = image.length; i < l; i++) {

      button[i] = makeButton();
      image[i].setAttribute("id", "cb-image_" + i);
      image[i].parentNode.style.position = "relative";
      image[i].parentNode.appendChild(button[i]);

      button[i].addEventListener("click", clearImage, false);
      image[i].addEventListener("click", editPhoto, false);
    }

  }, false);

}

return {
  init: function () {
    listener();
  }
};

})(this, this.document);

dragAndDrop.init();
photoEditor.init();
</script>

<script type="text/javascript" src="./js/ui/theme.js"></script>
<script type="text/javascript" src="./js/platform/end.js"></script>
</body>
</html>