<!-- CSS3 Animation by Zoran Milic, Created 30.06.2019 -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<p id="header">Photo Carousel Animation by <span id="name">Zoran M.</span></p>

<div id="theBox">

<div id="canvasBox">
  
<!-- <canvas id="canvas"></canvas> -->
  
<div id="theLineWrap">
<div id="theLine">
  <div id="leftBox1"><img src="https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" /></div>
  <div id="rightBox1"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" /></div>
</div>
  </div>
<div id="theLine2">
  <div id="leftBox2"><img src="https://images.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" /></div>
  <div id="rightBox2"><img src="https://images.pexels.com/photos/349758/hummingbird-bird-birds-349758.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" /></div>  
</div>
<div id="theLine3">
  <div id="leftBox3"><img src="https://images.pexels.com/photos/67872/fishing-boat-fisherman-tam-giang-lagoon-67872.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" /></div>
  <div id="rightBox3"><img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" /></div>  
</div>
  
</div>

<!-- <div id="theLine"></div> -->
  
</div>

<div id="imageView"><img id="thePhoto" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" /></div>

<button id="hoverBox">Show Photos</button>

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #ff00cc;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #333399, #ff00cc); 
  background: linear-gradient(to bottom, #333399, #ff00cc);
}

#header {
  position: absolute;
  top: -4%;
  left: 50%;
  width: 24%;
  color: white;
  background-color: black;
  border-top-left-radius: 16%;
  border-bottom-right-radius: 24%;
  font-size: 1.5em;
  text-align: center;
  margin-left: -12%;
  padding: 0.3em;
  padding: 0.3em;
  transition: all 0.6s linear;
  cursor: pointer;
}

#header:hover {
  transform: scale(1.2);
}

#name {
  color: blue;
  font-weight: bold;
}

#theBox {
  position: absolute;
  top: 6.3em;
  margin-left: -240px;
  left: 50%;
  width: 360px;
  height: 420px;
  width: 480px;
  height: 480px;
  background-color: rgba(0, 180, 240, 1.0);
  border: 12px double darkblue;
  border-top-left-radius: 36%;
  border-top-right-radius: 36%;
  transform: rotateX(20deg) rotateY(20deg);
  perspective: 600px;
  perspective: 300px;
  /* -webkit-animation: rotation 15s infinite linear; 
  animation: rotation 15s infinite linear; */
}

#theBox:hover > #canvasBox {
  animation-play-state: paused;
}

#canvasBox {
  width: 360px;
  height: 360px;
  background-color: rgba(255, 120, 0, 0.0);
  border: 0px solid magenta;
  /* transform: rotateX(30deg) rotateY(80deg); */
  transform-style: preserve-3d;
  -webkit-animation: rotation 15s infinite linear; 
  animation: rotation 15s infinite linear;
}

#theLine {
  position: absolute;
  top: 180px;
  left: 60px;
  left: 90px;
  width: 240px;
  height: 6px;
  background-color: blue;
  border-top: 0px solid blue;
  border-bottom: 6px solid blue;
  transform: rotateY(90deg);
  transform-style: preserve-3d;
  z-index: 10;
  animation: moveAlong 6s infinite linear;
}

#theLineWrap {
  width: 360px;
  height: 360px;
  border: 0px solid black;
  margin-left: 5.4em;
  -webkit-animation: rotation 6s infinite linear; 
  animation: rotation 6s infinite linear;
}

#theLineWrap:hover {
  animation-play-state: paused;
}

#theLine2 {
  position: absolute;
  top: 90px;
  left: 60px;
  width: 240px;
  height: 6px;
  background-color: yellow;
  border-top: 0px solid yellow;
  border-bottom: 6px solid yellow;
  transform: rotateY(60deg);
  transform-style: preserve-3d;
  z-index: 10;
}

#theLine3 {
  position: absolute;
  top: 270px;
  left: 60px;
  width: 240px;
  height: 6px;
  background-color: magenta;
  border-top: 0px solid magenta;
  border-bottom: 6px solid magenta;
  transform: rotateY(90deg);
  transform-style: preserve-3d;
  z-index: 10;
}

img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#leftBox1 {
  width: 90px;
  height: 90px;
  background-color: black;
  /* background-image: url('https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260'); */
}

#rightBox1 {
  position: absolute;
  width: 90px;
  height: 90px;
  background-color: silver;
  top: 0px;
  right: 0px;
}

#leftBox2 {
  width: 90px;
  height: 90px;
  background-color: lime;
}

#rightBox2 {
  position: absolute;
  width: 90px;
  height: 90px;
  background-color: magenta;
  top: 0px;
  right: 0px;
}

#leftBox3 {
  width: 90px;
  height: 90px;
  background-color: gold;
}

#rightBox3 {
  position: absolute;
  width: 90px;
  height: 90px;
  background-color: purple;
  top: 0px;
  right: 0px;
}

#canvas {
  width: 360px;
  height: 360px;
  background-color: yellow;
  transform: rotateX(60deg) rotateY(60deg);
}

#imageView {
  position: absolute;
  left: 60px;
  left: 120px;
  top: 60px;
  width: 240px;
  height: 240px;
  background-color: rgba(240, 120, 0, 0.6);
  cursor: pointer;
}

#thePhoto {
  display: none;
  width: 240px;
  height: 240px;
}

#hoverBox {
  position: absolute;
  top: 60px;
  left: 420px;
  width: 180px;
  height: 40px;
  color: magenta;
  background-color: silver;
  font-size: 1.2em;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  padding: 0.6em;
  cursor: pointer;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotateY(0deg);
		}
		to {
				-webkit-transform: rotateY(359deg);
		}
}

@-webkit-keyframes moveAlong {
    0% {
				-webkit-transform: translate3d(0px, 0px, 0px);
    }
		25% {
				-webkit-transform: translate3d(0px, 0px, 90px);
    }
    75% {
				-webkit-transform: translate3d(0px, 0px, -90px);
    }
    100% {
				-webkit-transform: translate3d(0px, 0px, 0px);
    }
}

let source;

let source1 = "https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260";
    
  let source2 = "https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260";
  
  let source3 = "https://images.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260";
    
  let source4 = "https://images.pexels.com/photos/349758/hummingbird-bird-birds-349758.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260";
    
  let source5 = "https://images.pexels.com/photos/67872/fishing-boat-fisherman-tam-giang-lagoon-67872.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260";
    
  let source6 = "https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260";
    
  source = [source1, source2, source3, source4, source5, source6] ;

var sourceClone = source.map((x) => x);

var sourceSafe = [...source];

function showPhoto() {
  
  // let source;
  let theBox = document.getElementById('theBox');
  let imageView = document.getElementById('imageView');
  let hoverBox = document.getElementById('hoverBox');
  
  let photo = document.getElementsByName('img');
  
  let showPhoto = document.getElementById('thePhoto');
  
  hoverBox.onmouseover = function() {
  
  let index = Math.floor(Math.random() * sourceClone.length);
    
  showPhoto.src = sourceClone[index];
    
  // sourceClone.pop();
    
  sourceClone.splice(index, 1);
    
  if (sourceClone.length == 0) {
  
  sourceClone = sourceSafe.map((x) => x);
  
  // alert("Array Leer !");
  
  }
    
    /* showPhoto.src = 'https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'; */
    
    showPhoto.style.display = 'block';
    
  };
  
  hoverBox.onmouseout = function() {
  
    showPhoto.style.display = 'none';
    
  };
  
};

showPhoto();

function changeName() {
  
  let name = document.getElementById('name');
  name.innerHTML = "Vince M.";
  name.style.color = "lime";
  
  setTimeout(changeNameBack, 9000);
  
}

setTimeout(changeName, 9000);

function changeNameBack() {
  
  let name = document.getElementById('name');
  name.innerHTML = "Zoran M.";
  name.style.color = "yellow";
  
  setTimeout(changeName, 9000);
  
}

function changeBackground() {
  
  let bg1 = 'linear-gradient(to left, #f7797d, #FBD786, #C6FFDD)';
  
  let bg2 = 'linear-gradient(to top, #4A00E0, #8E2DE2)';

  let bg3 = 'linear-gradient(to top, #b91d73, #f953c6)';
  
  let bg4 = 'linear-gradient(to right, #f5af19, #f12711)';
  
  let bg5 = 'linear-gradient(to bottom, #FF4B2B, #FF416C)';
  
  let bg6 = 'linear-gradient(to bottom, #F27121, #E94057, #8A2387)';
  
  let bg7 = 'linear-gradient(to right, #DECBA4, #3E5151)';
  
  let bg8 = 'linear-gradient(to bottom, #0575E6, #00F260)';
  
  let bg9 = 'linear-gradient(to right, #F3F9A7, #CAC531)';
  
  let backgrounds = [bg1, bg2, bg3, bg4, bg5, bg6, bg7, bg8, bg9];
  
  let index = Math.floor(Math.random() * 9);
  
  theBox.style.background = backgrounds[index];
  
  setTimeout(changeBackground, 9000);
  
}

setTimeout(changeBackground, 9000);