/*PROGRAMMING LANGUAGE*/

var flag = false;

var app = new Vue({
  el: "#app",
  data: {
    spins: ["reset", "spinOne", "spinTwo", "spinThree", "spinFour", "spinFive"],
    value: 5,
    speed: 2000
  },
  methods: {
    hideShow() {
      var selector = $("#controlPanel");
      if (flag) {
        selector.hide();
        flag = !flag;
      } else {
        selector.show();
        flag = !flag;
      }
    },

    updateCircles: function(event) {
      //clear dom
      // console.log(event)
      $("#shapes").empty();
      let numberOfCircles = this.value;
      for (var i = 0; i < numberOfCircles; i++) {
        var newCircle = $("<div></div>").appendTo("#shapes");
        newCircle.addClass("shape");
        // theElements.push(newCircle)
      }
      var theElements = $(".shape").toArray();

      var $elements = $(".shape");

      var colors = chroma
        .scale(["#D60D20", '#D62AB5'])
        // .scale(["#F60000", "#F68600"])
        .mode("lch")
        .colors(theElements.length);

      theElements.forEach(function(element, index) {
        $(element).css({
          "background-color": colors[index],
          "box-shadow": "0em 0em" + colors[index],
          "border": ".1em inset" + colors[index]
        });
      });
    },
    animationOne: function() {
      // reset all elements
      let theShapes = $(".shape").toArray()
        theShapes.forEach(function(element, index) {
//           $(element).velocity("stop");
//           $(element).velocity("reset");
          
          let item = app.spins[0];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
      // set new animation to all elements
        theShapes.forEach(function(element, index) {
          let item = app.spins[1];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
    },
    animationTwo: function() {
      let animationSpeed = app.speed;
      console.log(animationSpeed);
      $.Velocity.RegisterUI("spinTwo", {
        defaultDuration: function() {
          return animationSpeed;
          console.log(animationSpeed);
        },
        calls: [
          [
            {
              scaleX: 1.98,
              scaleY: 1.85,
              translateZ: "+=60%",
              transformOriginX: "-=40%",
              transformOriginY: "+=60%",
              rotateZ: [0, 180],
              margin: "-=2em",
              opacity: 0.6,
              borderTopWidth: "+=1em",
              borderRightWidth: "+=1em",
              borderBottomWidth: "+=1em",
              borderLeftWidth: "+=1em",
              boxShadowY: "+=3.5em"

              // backgroundColor: "#fcfcfc"
            },
            1,
            {
              loop: true,
              // delay: 1500,
              easing: easings[2]
            }
          ]
        ]
      });
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          $(element).velocity("stop");

          let item = app.spins[0];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          let item = app.spins[2];
          $(element).velocity({
            p: item,
            o: { duration: app.speed }
          });
        });
    },

    updateSpeed: function(event) {
      let animationSpeed = app.speed;
      console.log(animationSpeed);

      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          $(element).velocity("stop");

          let item = app.spins[0];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          let item = app.spins[2];
          $(element).velocity({
            p: item,
            o: { duration: app.speed }
          });
        });
    },
    animationThree: function() {
      console.log(this);
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          $(element).velocity("stop");
          let item = app.spins[0];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
      // set new animation to all elements
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          let item = app.spins[3];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
    },
    animationFour: function() {
      // console.log(this)
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          $(element).velocity("stop");
          let item = app.spins[0];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
      // set new animation to all elements
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          let item = app.spins[4];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
    },
    animationFive: function() {
      console.log(this);
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          $(element).velocity("stop");
          let item = app.spins[0];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
      // set new animation to all elements
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          let item = app.spins[5];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
    },
    animationRandom: function() {
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          $(element).velocity("stop");
          let item = app.spins[0];
          $(element).velocity({
            p: item,
            o: {}
          });
        });
      // set new animation to all elements
      $(".shape")
        .toArray()
        .forEach(function(element, index) {
          // let item = app.spins[4]
          let item = app.spins[Math.floor(Math.random() * app.spins.length)];

          $(element).velocity({
            p: item,
            o: {}
          });
        });
    },

    makeVertical: function() {
      $(".shape").css("float", "none");
      $("#shapes").css("left", "33%");
    },

    makeHorizontal: function() {
      $(".shape").css("float", "left");
      $("#shapes").css("left", "0");
    }
  },

  created: function() {
    let self = this;
    self.updateCircles();
    var selector = $("#controlPanel");
    // selector.hide()
  }
});

/* animations */
/*Language Animation to Register!*/
var easings = [
  "easeInSine",
  "easeInElastic",
  "easeInOutQuad",
  "easeInCirc",
  "easeOutCirc",
  "easeInBack",
  "easeInQuad",
  "easeOutQuead",
  "easeOutSine",
  "easeInOutSine",
  "easeInOutQuad",
  
];
$.Velocity.RegisterUI("reset", {
  defaultDuration: 10,
  calls: [
    [
      {
        translateX: 0,
        translateY: 0,
        scale: 1,
        transformOriginX: 0,
        transformOriginY: 0,
        rotateZ: 0,
        // margin: 0,
        opacity: 1,
        borderWidth: 0,
        boxShadowX: 0,
        boxShadowY: 0,
        backgroundColor: 0,
        padding: 0,
        borderRadius: "50%",
        scaleY: 1,
        scaleX: 1,
        translateZ: 0,
        rotateY: 0,
        rotateZ:0
      },
      1,
      {
        loop: false,
        delay: 0
        // sequenceQueue: false,
        // easing: easings[1]
      }
    ]
  ]
});
$.Velocity.RegisterUI("spinOne", {
  defaultDuration: 5000,
  calls: [
    [
      {
    
        scale: 3.68,
        // transformOriginX: "+=190%",
        transformOriginY: "+=130%",
        rotateZ:  -180,
        rotateY: -180,
        margin: "-=4.5em",
        // paddingBottom: "-=50%",
        opacity: 0.3,
        borderLeftWidth: "+=.4em",
        borderTopWidth: "+=.4em",
        boxShadowX: "+=3.5em",
        boxShadowY: "+=1.5em",
        borderRadius: "/=1.5"
      },
      1,
      {
        loop: true,
        sequenceQueue: false,
        easing: easings[5]
      }
    ]
  ]
});

$.Velocity.RegisterUI("spinThree", {
  defaultDuration: 7000,
  calls: [
    [
      {
        translateX: "+=20%",
        translateY: "+=20%",
        // width: '-=5%',
        scale: 0.18,
        transformOriginX: "40%",
        transformOriginY: "80%",
        rotateZ: [0, 360],
        margin: "-=2em",
        opacity: 0.9,
        borderWidth: "+=.2em",
        boxShadowX: "+=8.5em",
        boxShadowY: "+=1.5em"
      },
      1,
      {
        loop: true,
        sequenceQueue: false,
        easing: easings[2]
      }
    ]
  ]
});

$.Velocity.RegisterUI("spinFour", {
  defaultDuration: 8000,
  calls: [
    [
      {
        translateX: "+=40%",
        translateY: "+=50%",
        scale: 1.48,
        skewY: "-45deg",
        transformOriginX: "30%",
        transformOriginY: "10%",
        // rotateZ: [0,360],
        margin: "-=3em",
        opacity: 0.3,
        // borderWidth: '+=.1em',
        boxShadowY: "+=.5em",
        boxShadowBlur: "+=.5em"
      },
      1,
      {
        loop: true,
        sequenceQueue: false,
        easing: easings[1]
      }
    ]
  ]
});

$.Velocity.RegisterUI("spinFive", {
  defaultDuration: 8000,
  calls: [
    [
      {
        translateX: "-=5%",
        translateY: "+=60%",
        scale: 0.78,
        // width: '-=1%',

        transformOriginX: "160%",
        transformOriginY: "-40%",
        rotateZ: [0, 360],
        margin: "-=3em",
        opacity: 0.9,
        borderWidth: "+=.1em",
        boxShadowX: "+=8.5em"
        // boxShadowY: "+=1.5em"
      },
      1,
      {
        loop: true,
        sequenceQueue: false,
        easing: easings[3]
      }
    ]
  ]
});