<h1>GranimJS Gradient Methods</h1>
<div class="wrapper">
  <canvas id="first"></canvas>
</div>

<button class="play">Play</button>
<button class="pause">Pause</button>
<button class="diagonal">Animate Diagonally</button>
<button class="radial">Animate Radially</button>
<button class="red-state">Red State</button>
<button class="green-state">Green State</button>
<br>
<button class="color-dodge">Color Dodge</button>
<button class="color-burn">Color Burn</button>
<button class="lighten">Lighten</button>
<button class="darken">Darken</button>

body {
  margin: 20px auto;
  font-family: "Lato";
  font-weight: 300;
  width: 80%;
  text-align: center;
}

canvas {
  display: block;
  width: 100%;
  height: 300px;
  border: 10px double black;
  margin: 50px 0;
}

button {
  border: 1px solid black;
  background: white;
  font-family: 'Lato';
  padding: 5px 10px;
  font-size: 1.25em;
  cursor: pointer;
  margin: 5px;
  outline: none;
}

button:hover {
  background: black;
  color: white;
}

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  isPausedWhenNotInView: true,
  image : {
        source: 'https://images3.imgbox.com/cc/5a/AAUndScI_o.jpg',
        stretchMode: ["stretch", "stretch"],
        blendingMode: 'overlay'
  },
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "green-state": {
      gradients: [["#4CAF50", "#CDDC39"], ["#FFEB3B", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "red-state": {
      gradients: [["#E91E63", "#FF5722"], ["#F44336", "#FF9800"]],
      transitionSpeed: 2000
    }
  }
});

$(".play").on("click", function(){
  firstGranim.play();
});

$(".pause").on("click", function(){
  firstGranim.pause();
});

$(".diagonal").on("click", function(){
  firstGranim.changeDirection('diagonal');
});

$(".radial").on("click", function(){
  firstGranim.changeDirection('radial');
});

$(".red-state").on("click", function(){
  firstGranim.changeState('red-state');
});

$(".green-state").on("click", function(){
  firstGranim.changeState('green-state');
});

$(".color-dodge").on("click", function(){
  firstGranim.changeBlendingMode('color-dodge');
});

$(".color-burn").on("click", function(){
  firstGranim.changeBlendingMode('color-burn');
});

$(".lighten").on("click", function(){
  firstGranim.changeBlendingMode('lighten');
});

$(".darken").on("click", function(){
  firstGranim.changeBlendingMode('darken');
});