<template>
  <div class="berlinclock">
  <h1>Berlin-Clock</h1>
  <div class="content">
    <div id="background">
      <img id="second" alt="" src="/static/clockimages/second.png" />
      <img id="hour05" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour10" alt="" src="/static/clockimages/hour-middle.png" />
      <img id="hour15" alt="" src="/static/clockimages/hour-middle.png" />
      <img id="hour20" alt="" src="/static/clockimages/hour-right.png" />
      <img id="hour01" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour02" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour03" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour04" alt="" src="/static/clockimages/hour-left.png" />
      <img id="minute05" alt="" src="/static/clockimages/minute-small-left.png" />
      <img id="minute10" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute15" alt="" src="/static/clockimages/minute-small-red.png" />
      <img id="minute20" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute25" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute30" alt="" src="/static/clockimages/minute-small-red.png" />
      <img id="minute35" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute40" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute45" alt="" src="/static/clockimages/minute-small-red.png" />
      <img id="minute50" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute55" alt="" src="/static/clockimages/minute-small-right.png" />
      <img id="minute01" alt="" src="/static/clockimages/minute-left.png" />
      <img id="minute02" alt="" src="/static/clockimages/minute-middle.png" />
      <img id="minute03" alt="" src="/static/clockimages/minute-middle.png" />
      <img id="minute04" alt="" src="/static/clockimages/minute-right.png" />
    </div>
  </div>
  <p><b>Autor:</b></p>
  <p>Rüdiger Appel</p>
  <p><b>Quelle:</b></p>
  <p>http://www.3quarks.com/de/Mengenlehreuhr/index.html</p>
  <p>
   {{ getTimeStamp()}}
  </p>
</template>

<script>
export default {
  name: 'berlinclock',
  methods: {
    getTimeStamp: function () {
      // check if parts of the time in or out of the
      // current datetime

      var datum = new Date()
      var timestamp = {}
      // Sekunden
      timestamp.seconds = datum.getSeconds() % 2 > '0'
      // 5-hour parts
      timestamp.hour05 = datum.getHours() > '4'
      timestamp.hour10 = datum.getHours() > '9'
      timestamp.hour15 = datum.getHours() > '14'
      timestamp.hour20 = datum.getHours() > '19'
      // 1-hour parts
      timestamp.hour01 = datum.getHours() % 5 > '0'
      timestamp.hour02 = datum.getHours() % 5 > '1'
      timestamp.hour03 = datum.getHours() % 5 > '2'
      timestamp.hour04 = datum.getHours() % 5 > '3'
      //  5-minute parts
      timestamp.minute05 = datum.getMinutes() > '4'
      timestamp.minute10 = datum.getMinutes() > '9'
      timestamp.minute15 = datum.getMinutes() > '14'
      timestamp.minute20 = datum.getMinutes() > '19'
      timestamp.minute25 = datum.getMinutes() > '24'
      timestamp.minute30 = datum.getMinutes() > '29'
      timestamp.minute35 = datum.getMinutes() > '34'
      timestamp.minute40 = datum.getMinutes() > '39'
      timestamp.minute45 = datum.getMinutes() > '44'
      timestamp.minute50 = datum.getMinutes() > '49'
      timestamp.minute55 = datum.getMinutes() > '54'
      //  1-minute parts
      timestamp.minute01 = datum.getMinutes() % 5 > '0'
      timestamp.minute02 = datum.getMinutes() % 5 > '1'
      timestamp.minute03 = datum.getMinutes() % 5 > '2'
      timestamp.minute04 = datum.getMinutes() % 5 > '3'
      return timestamp
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#background {
  width: 190px;
  height: 265px;
  margin: auto;
  position: relative;
  background: transparent url(/static/clockimages/background.png)
  no-repeat top right;
 }
 #second{
  position: absolute;
  left: 70px;
  top: 10px;
  width: 50px;
  height: 50px;
  visibility:hidden;
}
#hour05{
  position: absolute;
  left: 10px; top: 78px;
  width: 38px; height: 27px;
  visibility:hidden;
}
#hour10{
  position: absolute;
  left: 54px;
  top: 78px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour15{
  position: absolute;
  left: 98px;
  top: 78px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour20{
  position: absolute;
  left: 142px;
  top: 78px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour01{
  position: absolute;
  left: 10px;
  top: 127px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour02{
  position: absolute;
  left: 54px;
  top: 127px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour03{ 
  position: absolute;
  left: 98px;
  top: 127px;
  width: 38px;
  height: 27px;
 visibility:hidden;
}
#hour04{
  position: absolute;
  left: 142px;
  top: 127px;
  width: 38px;
  height: 27px;
 visibility:hidden;
}
#minute05{
  position: absolute;
  left: 10px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute10{
  position: absolute;
  left: 26px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute15{
  position: absolute;
  left: 42px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute20{
  position: absolute;
  left: 58px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute25{
  position: absolute;
  left: 74px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute30{
  position: absolute;
  left: 90px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute35{
  position: absolute;
  left: 106px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute40{
  position: absolute;
  left: 122px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute45{
  position: absolute;
  left: 138px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute50{
  position: absolute;
  left: 154px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute55{
  position: absolute;
  left: 170px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute01{
  position: absolute;
  left: 10px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#minute02{
  position: absolute;
  left: 54px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#minute03{
  position: absolute;
  left: 98px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#minute04{
  position: absolute;
  left: 142px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
</style>