var loaderSVG = document.querySelector('.loader-svg');
var container = document.querySelector('.container');
var arrowMiddleNull = document.querySelector('.arrow-middle-null');
var arrowRightNull = document.querySelector('.arrow-right-null');
var arrowLeftNull = document.querySelector('.arrow-left-null');
var arrowHead = document.querySelector('.arrow-head');
var arrowLine = document.querySelector('.arrow-line');
var outline = document.querySelector('.outline');
var outlineBg = document.querySelector('.outline-bg');
var allLines = document.querySelector('.all-lines');
var isDevice = (/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()));

TweenMax.set([container,'svg'], {
  position:'absolute',
  top:'50%',
  left:'50%',
  xPercent:-50,
  yPercent:-50
});
if(!isDevice){
  
  TweenMax.set(allLines, {
    filter:'url(#glow)'
  })
}
TweenMax.set(arrowLeftNull, {
  x:57.5,
  y:103
})

TweenMax.set(arrowMiddleNull, {
  x:90,
  y:135.5
})
TweenMax.set(arrowRightNull, {
  x:122.5,
  y:103
})

var tl = new TimelineMax({paused:true, onUpdate:updateSVG});

tl.set(outline, {
  alpha:0
})
.set(outline, {
  drawSVG:'49.8% 49.9%'
})
.to(arrowLine, 0.6,{
  drawSVG:'59% 60%',
  ease:Power3.easeInOut
})
  
.to(arrowMiddleNull, 0.6, {  
  y:103,
  ease:Elastic.easeOut
})

.to(arrowLine, 0.5, {
    y:'-=95',
  ease:Power1.easeOut
}, '-=0.55')

.to(arrowLine, 0.2, {
    y:'+=17',
  ease:Power1.easeIn
})
.set(arrowLine, {
  alpha:0
})
.set(outline, {
  alpha:1
})

.to(outline, 3, {
  drawSVG:'0% 100%',
  ease:Linear.easeNone
})
//shrinks the line
.to(arrowLeftNull, 3, {
  x:'+=32.5',
  ease:Linear.easeNone
}, '-=3')
.to(arrowRightNull, 3, {
  x:'-=32.5',
  ease:Linear.easeNone
}, '-=3')

.to(arrowLeftNull, 0.6, {
  x:'-=30',
  y:'-=5',
  delay:0.4,
  ease:Back.easeOut
})
.to(arrowMiddleNull, 0.6, {
  y:'+=15',
  ease:Back.easeOut
}, '-=0.6')
.to(arrowRightNull, 0.6, {
  x:'+=32.5',
  y:'-=35',
  ease:Back.easeOut
}, '-=0.6')

.to(arrowHead, 0.6, {
  stroke:'#2EC26A'
}, '-=0.6')
.to(outline, 0.5,{
  drawSVG:'49.8% 49.9%',
  delay:1
})


.set(outline, {
  alpha:0
})
.set(arrowLine, {
  alpha:1
})

.to(arrowLine, 0.3,{
  y:'+=95',
  //drawSVG:'0% 100%',
  ease:Power1.easeIn
})
.to(arrowLine, 0.6,{
  y:'-=18',
  drawSVG:'0% 100%',
 
  ease:Power2.easeInOut
})
.to(arrowHead, 0.6, {
  stroke:'#ededed'
}, '-=0.6')
.to(arrowLeftNull, 0.6, {
  x:57.5,
  y:103,
  //delay:1,
  ease:Power3.easeOut
}, '-=0.6')
.to(arrowMiddleNull, 0.6, {
  x:90,
  y:135.5,
  ease:Power3.easeOut
}, '-=0.6')
.to(arrowRightNull, 0.6, {
  x:122.5,
  y:103,
  ease:Power3.easeOut
}, '-=0.6')




function updateSVG(){
  //console.log(arrowMiddleNull._gsTransform.y)
  var leftX = arrowLeftNull._gsTransform.x;
  var leftY = arrowLeftNull._gsTransform.y;
  var middleX = arrowMiddleNull._gsTransform.x;
  var middleY = arrowMiddleNull._gsTransform.y;
  var rightX = arrowRightNull._gsTransform.x;
  var rightY = arrowRightNull._gsTransform.y;
  
  var pointStr = leftX + ',' + leftY + ' ' + middleX +','+ middleY +' ' + rightX + ', ' + rightY;
  
  //console.log(pointStr)
  TweenMax.set(arrowHead, {
    attr:{
      points:pointStr
    }
  })
}

loaderSVG.onclick = function(){
  
  tl.restart();
}