$(document).ready(function() {
  var json = {
    "images":[
      {"points":[{"x":0,"y":573},{"x":0,"y":0},{"x":807,"y":573},{"x":807,"y":0}],"src":"images/custom_tech_shape.png","x":0,"y":0},
      {"points":[{"x":0,"y":573},{"x":0,"y":0},{"x":807,"y":573},{"x":807,"y":0}],"src":"images/mobile_apps_shape.png","x":0,"y":0},
      {"points":[{"x":0,"y":573},{"x":0,"y":0},{"x":807,"y":573},{"x":807,"y":0}],"src":"images/websites_shape.png","x":0,"y":0},
      {"points":[{"x":0,"y":573},{"x":0,"y":0},{"x":807,"y":573},{"x":807,"y":0}],"src":"images/digital_marketing_shape.png","x":0,"y":0},
    ],
    "triangles":[[2,0,3],[1,0,3]]
  }

  var morpher = new Morpher(json)
  $('.home-top-video .shape').append(morpher.canvas)
  morpher.set([1, 0, 0, 0])

  var index = 0
  setTimeout(function() { $('.home-top-video .custom-tech-button').fadeIn(1000) }, 3000)
  index += 1

  var slider = setInterval(function() {
    $('.home-top-video .button').fadeOut(1000)
    if(index == 0) {  // custom tech
      morpher.animate([1, 0, 0, 0], 2000)
      setTimeout(function() { $('.home-top-video .custom-tech-button').fadeIn(1000) }, 3000)
    } else if (index == 1) {  // mobile apps
      morpher.animate([0, 1, 0, 0], 2000)
      setTimeout(function() { $('.home-top-video .mobile-apps-button').fadeIn(1000) }, 3000)
    } else if (index == 2) {  // websites
      morpher.animate([0, 0, 1, 0], 2000)
      setTimeout(function() { $('.home-top-video .websites-button').fadeIn(1000) }, 3000)
    } else if (index == 3) {  // digital marketing
      morpher.animate([0, 0, 0, 1], 2000)
      setTimeout(function() { $('.home-top-video .digital-marketing-button').fadeIn(1000) }, 3000)
    }
    index += 1
    if(index > 3) index = 0
  }, 7000)

})