<!DOCTYPE html>
<html>

<head>
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-5Q3G6VV');</script>
  <!-- End Google Tag Manager -->

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>visual pause | your eyes will thank you.</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
  <script>
    $(function() {
        var path;

        function getNewImage() {
          $.ajax({
              url: "http://visualpause.com/images",
              success: function(data) {
                  var images = new Array();
                  var imagesAll = new Array();
                  $(data).find("td > a").each(function() {
                    if ($(this).attr("href") != '/') {
                      path = 'images/' + $(this).attr("href");
                      images.push(path);
                      imagesAll.push(path);
                    }
                  });
                  // Get viewed images cookie.
                  var viewedImages = Cookies.get('visualpause-images');
                  if (viewedImages != null) {
                    var viewedImagesArray = JSON.parse(viewedImages);
                  } else {
                    var viewedImagesArray = [];
                  }

                  if (viewedImagesArray.length <= imagesAll.length-1) {
                    viewedImagesArray.forEach(function(item){
                      var index = images.indexOf(item);
                      if (index > -1) {
                          images.splice(index, 1);
                      }
                    });

                  } else {
                    Cookies.remove('visualpause-images');
                    images = imagesAll;
                    viewedImagesArray = [];
                  }

                  // Set image path to random value from images array.
                  var imagePath = images[Math.floor(Math.random()*images.length)];

                  viewedImagesArray.push(imagePath);
                  console.log(viewedImagesArray);
                  console.log(imagesAll);
                  Cookies.remove('visualpause-images');
                  Cookies.set('visualpause-images', viewedImagesArray)

                  imagePathFormatted = 'url('+imagePath+')';
                  $('html').css('background-image', imagePathFormatted);
              }
          });
        };

        getNewImage();

        $('.site-title').on('click', function(){
          getNewImage();
        });
    });
  </script>
  <style>
      body {
          font-family: sans-serif;
          margin: 0;
          padding: 0;
      }

      h1 {
          padding: 0;
          margin: 0;
      }

      .site-title {
          position: absolute;
          right: 5%;
          bottom: 5%;
          text-align: right;
          width: 100%;
          color: #fff;
          text-shadow: #999 0 0 3px;
          font-size: 36px;
          font-weight: 800;
          opacity: .9
      }

      .site-title:hover {
        cursor: pointer;
      }

      .site-title:before {
          content: '';
          background: #ccc;
          width: 300px;
          height: 100px;
          -webkit-filter: blur(100px);
                  filter: blur(100px);
          display: block;
          position: absolute;
          z-index: -1;
      }

      .site-title strong {
          font-weight: 300;
      }

      html {
          background: #efefef no-repeat center center fixed;
          min-height: 100%;
          background-size: cover;
          -webkit-background-size: cover;
          -webkit-transition: background 0.2s linear;
          transition: background 0.2s linear;
      }
  </style>
</head>

<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5Q3G6VV"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <div class="vp-wrapper">
      <h1 class="site-title">visual<strong>pause</strong></h1>
  </div>
</body>

</html>
