class Vector2D {
  x;
  y;
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  add(x?,y?){
    this.x += x;
    this.y += y;
  }
}

class Ball {
  elem;
  index;
  r;
  position;
  timeline;
  constructor(elem,index,r,position){
    this.elem = elem;
    this.index = index;
    this.r = r;
    this.position = position;
    this.timeline = new TimelineMax();
  }
  
  // set tweens props
  // return Object
  setTweenProps( activeBtn, clickedBtn, direction, speed, h) {
    console.log("setTweenProps")
    console.log("this.position: " + JSON.stringify(this.position));
    
    let activeRect = activeBtn.getBoundingClientRect(),
        clickedRect = clickedBtn.getBoundingClientRect();
    
    let dist1 = direction === "right"
              ? ( activeRect.right - this.position.x - this.r ).toFixed(2)
              : ( this.position.x - activeRect.left ).toFixed(2), 
      dist2 = direction === "right"
              ? ( clickedRect.left - activeRect.right ).toFixed(2)
              : ( activeRect.left - clickedRect.right ).toFixed(2),
      dist3 = direction === "right"
        ? ( (this.index + 1) * 10  + 4 ).toFixed(2)
        : ( (clickedRect.width - (this.index + 1) * 10) + 4 ).toFixed(2),
      dur1 = ( dist1/speed ).toFixed(2),
      dur2 = ( dist2/speed ).toFixed(2),
      dur3 = ( dist3/speed ).toFixed(2);
    return {
      dist1, dist2, dist3, dur1, dur2, dur3, h
    };
  }
  
  setTween(direction, props) {
     console.log("setTween " + direction);
     console.log("ball.index:  " + this.index + " color: " + this.elem.innerHTML);
     this.timeline.clear();
    
     this.timeline.eventCallback("onComplete", function(tl, _this) {
      
       _this.position.x += tl._last.target._gsTransform.x;
       _this.position.y += tl._last.target._gsTransform.y - this.r;
       _this.elem.style.top = _this.position.y + "px";
       _this.elem.style.left = _this.position.x + "px";
       TweenMax.set(tl._last.target,{clearProps:"transform"});
       tl.clear();
       // console.table( Object.getOwnPropertyNames(_this._last) );
     },["{self}", this]);
    
     if( direction === "right") {
       this.timeline.to(this.elem, props.dur1, {
         x: props.dist1,
         ease:Linear.easeNone
       })
       .to(this.elem, props.dur2, {
         bezier:[
           {
             x: "+=0",
             y: "+=0"
           },
           {
             x: "+=" + props.dist2/2,
             y: "-=" + props.h
           },
           {
             x: "+=" + props.dist2,
             y: "+=0"
           }
         ],
         ease:Linear.easeNone
       })
       .to(this.elem, props.dur3, {
         x: "+=" + props.dist3,
         ease:Linear.easeNone
       })
     } else {
       this.timeline.to(this.elem, props.dur1, {
         x: -props.dist1,
         ease:Linear.easeNone
       })
       .to(this.elem, props.dur2, {
         bezier:[
           {
             x: "+=0",
             y: "+=0"
           },
           {
             x: "-=" + props.dist2/2,
             y: "-=" + props.h
           },
           {
             x: "-=" + props.dist2,
             y: "+=0"
           }
         ],
         ease:Linear.easeNone
       })
       .to(this.elem, props.dur3, {
         x: "-=" + props.dist3,
         ease:Linear.easeNone
       });   
     }
  }
}

class Animation {
  bar;
  markerClass;
  buttons;
  markerElemsArr;
  markersArr;
  masterTl;
  
  constructor(barID,markerClass){
    this.bar = document.querySelector("#"+barID);
    this.markerClass = markerClass;
    this.buttons = this.bar.querySelectorAll(".btn");
    this.markerElemsArr = this.bar.querySelectorAll("."+markerClass);
    this.markersArr = [];
  }
  btnEventsInit(){
    for(let i=0; i < this.buttons.length; i++) {
      let btn = this.buttons[i];  
      let _this = this;
      btn.addEventListener("click", function(event){
        _this.moveMarker( event.target );
      },[_this]);
    }
  }
  markerInit(){
    console.log("markerInit()");
    let ballR = (this.bar.querySelector(".ball").getBoundingClientRect().width).toFixed();
    
    let activeBtn = this.bar.querySelector(".btn.active");
    if(this.markerClass === "ball"){
      console.log("initBalls()");
      let activeRect = activeBtn.getBoundingClientRect();
      let barRect = this.bar.getBoundingClientRect();
      for(let i=0; i < this.markerElemsArr.length; i++) {
        let ballElem = this.markerElemsArr[i];
        let ball = new Ball(
          ballElem,i,
          ballR,
          new Vector2D(
            activeRect.left + (i)*10 + i/2,
            activeRect.top - ballR*2
          )
        );   
        this.markersArr.push(ball);
        ballElem.style.top = this.markersArr[i].position.y - ballR + "px"; 
        ballElem.style.left = this.markersArr[i].position.x + ballR/2  + "px";
      }
    }
  }
  
  moveMarker( clickedBtn ){
    
    let activeBtn = this.bar.querySelector(".btn.active");
    console.log("moveMarker: {active: " + activeBtn.innerHTML + " clicked: " + clickedBtn.innerHTML + "}");
    
    let _this = this;
    this.bar.querySelector(".btn.active").classList.toggle("active");
    this.masterTl = new TimelineMax({paused: true});
    
    if(this.markerClass === "ball"){
      let ballTlArr = [];
      let activeRect = activeBtn.getBoundingClientRect();
      
      let barRect = this.bar.getBoundingClientRect();
      
      this.markersArr.map((ball) => {
        let direction = activeBtn.offsetLeft < clickedBtn.offsetLeft
                    ? "right"
                    : "left";
        console.log("direction: " + direction);
        let props = ball.setTweenProps( activeBtn, clickedBtn, direction, 100, 10); 
        console.log("props: " + JSON.stringify(props));
        direction === "right" 
                  ? ball.setTween(direction, props)
                  : ball.setTween(direction, props);
        ballTlArr.push(ball.timeline);
      });  
      
      this.masterTl.add(ballTlArr);
      this.masterTl.play();
      this.masterTl.eventCallback("onComplete", function(timeline, _this, clickedBtn) {
        timeline.clear();
      }, ["{self}"], _this, clickedBtn);
      this.masterTl = null;
      clickedBtn.classList.toggle("active");
    }
  }
};

document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOMContentLoaded");
  let animation = new Animation("TOP_BAR1","ball");
  
  animation.btnEventsInit();
  animation.markerInit();
});
console.log("test");