<template>

<div>
<div class="dialog-overlay"></div>

<div class="dialog" :ref="'win'+number">
  <div class="dialogtitle">
    <div class="title">
        {{title}}
    </div>
    <div class="btn imgClose" @click="close()" title="Close"></div>
  </div>
  <div class="content">
      <slot></slot>
  </div>
</div>
</div>

</template>

<script>
    export default {
      props: ['title', 'number', 'width', 'height'],
      data: function () {
          return {
              drag: false,
              dragObject: this.dragObject,
              shiftX: this.shiftX,
              shiftY: this.shiftY,
              downX: this.downX,
              downY: this.downY
          }
      },
      methods: {
          close() {
              this.$emit('close')
          },
          /*
          moveOnTop() {
              // Change Z-Index for all windows
              let windows = document.getElementsByClassName('win')
              let xIndex = 0
              for (let window of windows) {
                xIndex = Math.max(xIndex, window.style.zIndex)
                window.style.zIndex--
              }
              // Set maximal Z-Index for current windows
              this.dragObject.style.zIndex = xIndex
          },
          mousedownTitle(e) {
              this.moveOnTop()

              let box = this.dragObject.getBoundingClientRect()
              this.shiftX = box.left
              this.shiftY = box.top

              if (e.type == 'mousedown') {
                  this.downX = e.pageX
                  this.downY = e.pageY
              }
              else {
                  if (e.type == 'touchstart') {
                      this.downX = e.touches[0].pageX
                      this.downY = e.touches[0].pageY
                  }
              }

              this.drag = true
          },
          mouseupTitle() {
              this.drag = false
          },
          */
          /*
          onMouseMove(e) {
              if (this.drag == true) {

                  let pageX = 0
                  let pageY = 0

                  if (e.type == 'mousemove') {
                      pageX = e.pageX
                      pageY = e.pageY
                  } else {
                      if (e.type == 'touchmove') {
                          pageX = e.touches[0].pageX
                          pageY = e.touches[0].pageY
                      }
                  }

                  this.dragObject.style.left = this.shiftX + (pageX - this.downX) + 'px'
                  this.dragObject.style.top = this.shiftY + (pageY - this.downY) + 'px'
                  this.dragObject.style.zIndex = 1001
              }
          },
          */
          setSize: function () {
            if (typeof this.width != 'undefined') {
                this.dragObject.style.width = this.width+'px'
            }

            if (typeof this.height != 'undefined') {
                this.dragObject.style.height = this.height+'px'
            }
          },
          onkey(event) {
            if (event.keyCode == 27) {
                this.close()
            }
          }
          
      },
      mounted: function () {
          this.dragObject = this.$refs["win"+this.number]
          //document.addEventListener('mousemove', this.onMouseMove)
          //document.addEventListener('touchmove', this.onMouseMove)
          this.setSize()
          window.addEventListener('keydown', this.onkey)
      },
      beforeUnmount: function () {
          //document.removeEventListener('mousemove', this.onMouseMove)
          //document.removeEventListener('touchmove', this.onMouseMove)
          window.removeEventListener('keydown', this.onkey)
      },


      watch: {
        width() {
          this.setSize()
        },
        height() {
          this.setSize()
        }
      }
    }
</script>

<style scoped>
.dialog {
  /* window style */
  padding: 0px;
  border: 0px none;
  background: transparent none repeat scroll 0% 0%;
  overflow: hidden;

  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 101;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  transform-origin: center center;

  margin-left: auto;
  margin-right: auto;

  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: block;
  width: 660px;
  height: 540px;
  min-width: 300px;
  min-height: 300px;
  max-width: 1280px;
  max-height: 768px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 2px;
  background-color: #FFF;
  transition: 0.05s;
}

.dialog.rolledup {
  min-height: 30px !important;
  height: 30px !important;
}

.dialog.hidden {
  display: none;
}

.dialog .dialogtitle {
  /* window title style */
  width: 100%;
  height: 2.0em;
  display: block;
  background-color:green;
  /*cursor: move;*/
}

/*
.dialog .dialogtitle .icon {

  float: left;
  margin: 4px;
  margin-left: 8px;
  text-align: left;
  cursor: default;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+Cgo8c3ZnCiAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIKICAgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIGhlaWdodD0iMTYiCiAgIHdpZHRoPSIxNiIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iQ2FwYV8xIgogICB2aWV3Qm94PSIwIDAgMS40ODQxNCAxLjQ4NDE0IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBzb2RpcG9kaTpkb2NuYW1lPSJjYW1lcmEuc3ZnIgogICBzdHlsZT0iZmlsbDojMDAwMDAwIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjUgKDIwNjBlYzFmOWYsIDIwMjAtMDQtMDgpIj48bWV0YWRhdGEKICAgaWQ9Im1ldGFkYXRhMTMiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48ZGM6dGl0bGU+PC9kYzp0aXRsZT48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMKICAgaWQ9ImRlZnMxMSIgLz48c29kaXBvZGk6bmFtZWR2aWV3CiAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjI1NjAiCiAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEzNTIiCiAgIGlkPSJuYW1lZHZpZXc5IgogICBzaG93Z3JpZD0iZmFsc2UiCiAgIGlua3NjYXBlOnpvb209IjM3Ljc2IgogICBpbmtzY2FwZTpjeD0iNi45NjUyMjQ4IgogICBpbmtzY2FwZTpjeT0iMy4xODQzNTI4IgogICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgaW5rc2NhcGU6d2luZG93LXk9IjI4IgogICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJnNiIgLz4KPGcKICAgaWQ9Imc2IgogICB0cmFuc2Zvcm09Im1hdHJpeCgwLjAxOTcyMjU2LDAsMCwwLjAxOTcyMjU2LDAuMDA4Njg1MTYsLTAuMDAzMzI0MzgpIj4KCTxwYXRoCiAgIGQ9Ik0gNTcuNzQ2LDE0LjY1OCBIIDU0Ljk4OSBMIDUzLjk2OCwxMS4yOTUgQyA1My4wMDMsOC4xMTcgNTAuMTI0LDUuOTgyIDQ2LjgwNCw1Ljk4MiBIIDI4LjgwMSBjIC0zLjMyMSwwIC02LjIwMSwyLjEzNSAtNy4xNjUsNS4zMTMgbCAtMS4wMjEsMy4zNjMgSCAxNi40NjIgQyA3LjM4NSwxNC42NTggMCwyMi4wNDMgMCwzMS4xMjEgdiAyMC42NDIgYyAwLDkuMDc3IDcuMzg1LDE2LjQ2MiAxNi40NjIsMTYuNDYyIGggNDEuMjgzIGMgOS4wNzcsMCAxNi40NjIsLTcuMzg1IDE2LjQ2MiwtMTYuNDYyIFYgMzEuMTIxIEMgNzQuMjA4LDIyLjA0MyA2Ni44MjMsMTQuNjU4IDU3Ljc0NiwxNC42NTggWiBtIDEwLjQ2MiwzNy4xMDQgYyAwLDUuNzY5IC00LjY5MywxMC40NjIgLTEwLjQ2MiwxMC40NjIgSCAxNi40NjIgQyAxMC42OTMsNjIuMjIzIDYsNTcuNTMgNiw1MS43NjIgViAzMS4xMjEgQyA2LDI1LjM1MiAxMC42OTMsMjAuNjU5IDE2LjQ2MiwyMC42NTkgaCA4LjYwMyBsIDIuMzEzLC03LjYyMSBjIDAuMTkyLC0wLjYzMSAwLjc2NCwtMS4wNTUgMS40MjMsLTEuMDU1IGggMTguMDAzIGMgMC42NTksMCAxLjIzLDAuNDI0IDEuNDIzLDEuMDU3IGwgMi4zMTQsNy42MTkgaCA3LjIwNCBjIDUuNzY5LDAgMTAuNDYyLDQuNjkzIDEwLjQ2MiwxMC40NjIgeiIKICAgaWQ9InBhdGgyIgogICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICBzdHlsZT0ic3Ryb2tlOiNmZmZmZmY7ZmlsbDojZmZmZmZmIiAvPgoJPHBhdGgKICAgZD0ibSAzNy4yMjgsMjUuNDA2IGMgLTguODQ0LDAgLTE2LjA0LDcuMTk1IC0xNi4wNCwxNi4wNCAwLDguODQ0IDcuMTk1LDE2LjAzOSAxNi4wNCwxNi4wMzkgOC44NDUsMCAxNi4wNDEsLTcuMTk1IDE2LjA0MSwtMTYuMDM5IDAsLTguODQ1IC03LjE5NiwtMTYuMDQgLTE2LjA0MSwtMTYuMDQgeiBtIDAsMjYuMDggYyAtNS41MzYsMCAtMTAuMDQsLTQuNTA0IC0xMC4wNCwtMTAuMDM5IDAsLTUuNTM2IDQuNTA0LC0xMC4wNCAxMC4wNCwtMTAuMDQgNS41MzcsMCAxMC4wNDEsNC41MDQgMTAuMDQxLDEwLjA0IDAsNS41MzUgLTQuNTA0LDEwLjAzOSAtMTAuMDQxLDEwLjAzOSB6IgogICBpZD0icGF0aDQiCiAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7c3Ryb2tlOiNmZmZmZmYiIC8+CjwvZz4KPC9zdmc+);
  width: 24px;
  height: 24px;
}
*/

.dialog .dialogtitle .title {
  /* window title text style */
  float: left;
  padding: 0.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 1em;
  right: 5em;
  color: #FFF;
}

/*
.dialog.minimized .dialogtitle {
  cursor: default;
}

.dialog.nomove .dialogtitle {
  cursor: default;
}
*/

.dialog .btn {
  /* common title button style */
  float: right;
  padding: 0px;
  margin: 0.2em;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  /*
  background-position-x: 0.3em;
  background-position-y: 0.3em;
  */
  cursor: pointer;
}

.dialog .imgClose {
  /*
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4wMyAxMi4wMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTEuMjc4IDBILjc1MkEuNzUyLjc1MiAwIDAgMCAwIC43NTJ2MTAuNTI2YzAgLjQxNi4zMzYuNzUyLjc1Mi43NTJoMTAuNTI2YS43NTIuNzUyIDAgMCAwIC43NTItLjc1MlYuNzUyQS43NTIuNzUyIDAgMCAwIDExLjI3OCAwem0wIDExLjI3OEguNzUyVi43NTJoMTAuNTI2eiIvPjxwYXRoIGQ9Ik0zLjQ4NSA4LjUzN2EuMzgzLjM4MyAwIDAgMCAuNTM4IDBsMi4wMDEtMS45ODUgMS45ODQgMS45ODNhLjM4LjM4IDAgMCAwIC41MzcgMCAuMzgyLjM4MiAwIDAgMCAwLS41MzhMNi41NjMgNi4wMTZsMS45Ny0xLjk1M2EuMzc0LjM3NCAwIDAgMCAwLS41MzIuMzgyLjM4MiAwIDAgMC0uNTM4IDBMNi4wMyA1LjQ4MSA0LjAzNCAzLjQ4NmEuMzguMzggMCAwIDAtLjUzNyAwIC4zODIuMzgyIDAgMCAwIDAgLjUzOUw1LjQ5IDYuMDE3IDMuNDg2IDguMDA1YS4zNzQuMzc0IDAgMCAwIDAgLjUzMnoiLz48L2c+PC9zdmc+);
  */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjE2IgogICBoZWlnaHQ9IjE2IgogICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzEwIgogICBzb2RpcG9kaTpkb2NuYW1lPSJjbG9zZS1zdmdyZXBvLWNvbS5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuNSAoMjA2MGVjMWY5ZiwgMjAyMC0wNC0wOCkiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTE2Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTQiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEzNTIiCiAgICAgaWQ9Im5hbWVkdmlldzEyIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIxOS42NjY2NjciCiAgICAgaW5rc2NhcGU6Y3g9IjYuNTY4NjY2MSIKICAgICBpbmtzY2FwZTpjeT0iOS4yNjQ1NjQ1IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyOCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzEwIiAvPgogIDxnCiAgICAgZGF0YS1uYW1lPSJMYXllciAyIgogICAgIGlkPSJnOCIKICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjkzMDA4NDc1LDAsMCwwLjkzMDA4NDc1LC0zLjE1MjU0MjQsLTMuMjcxMTg2NCkiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiI+CiAgICA8ZwogICAgICAgZGF0YS1uYW1lPSJjbG9zZSIKICAgICAgIGlkPSJnNiIKICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiPgogICAgICA8cmVjdAogICAgICAgICB3aWR0aD0iMjQiCiAgICAgICAgIGhlaWdodD0iMjQiCiAgICAgICAgIHRyYW5zZm9ybT0icm90YXRlKDE4MCwxMiwxMikiCiAgICAgICAgIGlkPSJyZWN0MiIKICAgICAgICAgeD0iMCIKICAgICAgICAgeT0iMCIKICAgICAgICAgc3R5bGU9Im9wYWNpdHk6MDtmaWxsOiNmZmZmZmYiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Im0gMTMuNDEsMTIgNC4zLC00LjI5IEEgMS4wMDQwOTE2LDEuMDA0MDkxNiAwIDEgMCAxNi4yOSw2LjI5IEwgMTIsMTAuNTkgNy43MSw2LjI5IEEgMS4wMDQwOTE2LDEuMDA0MDkxNiAwIDAgMCA2LjI5LDcuNzEgbCA0LjMsNC4yOSAtNC4zLDQuMjkgYSAxLDEgMCAwIDAgMCwxLjQyIDEsMSAwIDAgMCAxLjQyLDAgbCA0LjI5LC00LjMgNC4yOSw0LjMgYSAxLDEgMCAwIDAgMS40MiwwIDEsMSAwIDAgMCAwLC0xLjQyIHoiCiAgICAgICAgIGlkPSJwYXRoNCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=);
}

.dialog .content {
  /* window content style */
  padding: 4px;
  overflow-y: auto;
  position: absolute;
  top: 2em;
  bottom: 2em;
  left: 4px;
  right: 1px;
}

/* win modal */
.dialog-overlay {
  background-color: rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  z-index: 100;

  text-align: center;
  white-space: nowrap;
}

.dialog-overlay::after {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  content: '';
}

.dialog-overlay.hidden {
  display: none;
}

.dialog-overlay .middle {
  display: inline-block;
  vertical-align: middle;
}

.dialog-overlay .middle .modal {
  min-width: 200px;
  text-align: left;
  white-space: normal;
}

.dialog-overlay .middle .modal .win {
  position: relative;
  top: 0px !important;
  left: 0px !important;
}

.dialog-overlay .middle .modal .win .wintitle {
  cursor: default;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

</style>