jQuery('.btn-scroll-down').on('click', function () {
  jQuery('html, body').animate({
    scrollTop: jQuery(window).height()
  }, 600);
  return false;
});
var bgColor = jQuery('.decori-banner').data('bg-color');
var animColor = jQuery('.decori-banner').data('animation-color');
var animColor2 = jQuery('.decori-banner').data('animation-color-2');
var canvas = document.querySelector('canvas');
var width = canvas.offsetWidth,
  height = canvas.offsetHeight;

var colors = [
  new THREE.Color(animColor2),
  new THREE.Color(animColor),
  new THREE.Color(0x535353)];

var renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true
});

renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(width, height);
renderer.setClearColor(bgColor);

var scene = new THREE.Scene();

var raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 6;


var camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 2000);
camera.position.set(0, 0, 350);

var galaxy = new THREE.Group();
scene.add(galaxy);

// Create dots
var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
var dotTexture = loader.load("../wp-content/plugins/pixxy-plugins/shortcodes/assets/images/dotTexture.png");
var dotsAmount = 3000;
var dotsGeometry = new THREE.Geometry();
var positions = new Float32Array(dotsAmount * 3);
var sizes = new Float32Array(dotsAmount);
var colorsAttribute = new Float32Array(dotsAmount * 3);
for (var i = 0; i < dotsAmount; i++) {
  var vector = new THREE.Vector3();

  vector.color = Math.floor(Math.random() * colors.length);
  vector.theta = Math.random() * Math.PI * 2;
  vector.phi =
    (1 - Math.sqrt(Math.random())) *
    Math.PI /
    2 *
    (Math.random() > 0.5 ? 1 : -1);

  vector.x = Math.cos(vector.theta) * Math.cos(vector.phi);
  vector.y = Math.sin(vector.phi);
  vector.z = Math.sin(vector.theta) * Math.cos(vector.phi);
  vector.multiplyScalar(120 + (Math.random() - 0.5) * 5);
  vector.scaleX = 5;

  if (Math.random() > 0.5) {
    moveDot(vector, i);
  }
  dotsGeometry.vertices.push(vector);
  vector.toArray(positions, i * 3);
  colors[vector.color].toArray(colorsAttribute, i*3);
  sizes[i] = 5;
}

function moveDot(vector, index) {
  var tempVector = vector.clone();
  tempVector.multiplyScalar((Math.random() - 0.5) * 0.2 + 1);
  TweenMax.to(vector, Math.random() * 3 + 3, {
    x: tempVector.x,
    y: tempVector.y,
    z: tempVector.z,
    yoyo: true,
    repeat: -1,
    delay: -Math.random() * 3,
    ease: Power0.easeNone,
    onUpdate: function () {
      attributePositions.array[index*3] = vector.x;
      attributePositions.array[index*3+1] = vector.y;
      attributePositions.array[index*3+2] = vector.z;
    }
  });
}

var bufferWrapGeom = new THREE.BufferGeometry();
var attributePositions = new THREE.BufferAttribute(positions, 3);
bufferWrapGeom.addAttribute('position', attributePositions);
var attributeSizes = new THREE.BufferAttribute(sizes, 1);
bufferWrapGeom.addAttribute('size', attributeSizes);
var attributeColors = new THREE.BufferAttribute(colorsAttribute, 3);
bufferWrapGeom.addAttribute('color', attributeColors);
var shaderMaterial = new THREE.ShaderMaterial({
  uniforms: {
    texture: {
      value: dotTexture
    }
  },
  vertexShader: document.getElementById("wrapVertexShader").textContent,
  fragmentShader: document.getElementById("wrapFragmentShader").textContent,
  transparent:true
});
var wrap = new THREE.Points(bufferWrapGeom, shaderMaterial);
scene.add(wrap);

// Create white segments
var segmentsGeom = new THREE.Geometry();
var segmentsMat = new THREE.LineBasicMaterial({
  color: 0xffffff,
  transparent: true,
  opacity: 0.3,
  vertexColors: THREE.VertexColors
});
for (i = dotsGeometry.vertices.length - 1; i >= 0; i--) {
  vector = dotsGeometry.vertices[i];
  for (var j = dotsGeometry.vertices.length - 1; j >= 0; j--) {
    if (i !== j && vector.distanceTo(dotsGeometry.vertices[j]) < 12) {
      segmentsGeom.vertices.push(vector);
      segmentsGeom.vertices.push(dotsGeometry.vertices[j]);
      segmentsGeom.colors.push(colors[vector.color]);
      segmentsGeom.colors.push(colors[vector.color]);
    }
  }
}
var segments = new THREE.LineSegments(segmentsGeom, segmentsMat);
galaxy.add(segments);

var hovered = [];
var prevHovered = [];
function render(a) {
  var i;
  dotsGeometry.verticesNeedUpdate = true;
  segmentsGeom.verticesNeedUpdate = true;

  raycaster.setFromCamera( mouse, camera );
  var intersections = raycaster.intersectObjects([wrap]);
  hovered = [];
  if (intersections.length) {
    for(i = 0; i < intersections.length; i++) {
      var index = intersections[i].index;
      hovered.push(index);
      if (prevHovered.indexOf(index) === -1) {
        onDotHover(index);
      }
    }
  }
  for(i = 0; i < prevHovered.length; i++){
    if(hovered.indexOf(prevHovered[i]) === -1){
      mouseOut(prevHovered[i]);
    }
  }
  prevHovered = hovered.slice(0);
  attributeSizes.needsUpdate = true;
  attributePositions.needsUpdate = true;
  renderer.render(scene, camera);
}

function onDotHover(index) {
  dotsGeometry.vertices[index].tl = new TimelineMax();
  dotsGeometry.vertices[index].tl.to(dotsGeometry.vertices[index], 1, {
    scaleX: 10,
    ease: Elastic.easeOut.config(2, 0.2),
    onUpdate: function() {
      attributeSizes.array[index] = dotsGeometry.vertices[index].scaleX;
    }
  });
}

function mouseOut(index) {
  dotsGeometry.vertices[index].tl.to(dotsGeometry.vertices[index], 0.4, {
    scaleX: 5,
    ease: Power2.easeOut,
    onUpdate: function() {
      attributeSizes.array[index] = dotsGeometry.vertices[index].scaleX;
    }
  });
}

function onResize() {
  canvas.style.width = '';
  canvas.style.height = '';
  width = canvas.offsetWidth;
  height = canvas.offsetHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
}

var mouse = new THREE.Vector2(-100,-100);
function onMouseMove(e) {
  var canvasBounding = canvas.getBoundingClientRect();
  mouse.x = ((e.clientX - canvasBounding.left) / width) * 2 - 1;
  mouse.y = -((e.clientY - canvasBounding.top) / height) * 2 + 1;
}

TweenMax.ticker.addEventListener("tick", render);
window.addEventListener("mousemove", onMouseMove);
var resizeTm;
window.addEventListener("resize", function(){
  resizeTm = clearTimeout(resizeTm);
  resizeTm = setTimeout(onResize, 200);
});