var contianer, renderer, camera, scene;
var geometry,material;
var sprite,particles;
var customUniforms,customAttributes;
var positions;
var size;
var BILLBOARD_COUNT = 16384;

loader = new THREE.TextureLoader();
loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/dots.png', function ( texture ) {
    sprite = texture;
    init();
    animate();
})

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth/window.innerHeight, .1, 10000 );
    camera.position.set(0.0,  0.0, 1);
    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setClearColor(0x85b6b6);

container.appendChild(renderer.domElement);

    var phi0AddDiv = 340.0;
    var theta0AddDiv = 368.0;
    var phi1AddDiv = 1707.0;
    var theta1AddDiv = 1986.0;

    var phi0 = 0.0;
    var theta0 = 0.0;
    var phi1 = 0.0;
    var theta1 = 0.0;

    var twoPi = Math.PI * 2.0;
    var phi0Add = twoPi / phi0AddDiv;
    var theta0Add = twoPi / theta0AddDiv;
    var phi1Add = twoPi / phi1AddDiv;
    var theta1Add = twoPi / theta1AddDiv;

    var r = 50.0;

    geometry = new THREE.BufferGeometry();
    size = new Float32Array( BILLBOARD_COUNT );
    positions = new Float32Array( BILLBOARD_COUNT * 3 );

    for ( var i = 0, i3 = 0; i < BILLBOARD_COUNT; i ++, i3 += 3 )
    {
		r = 60 + 10 * Math.sin( phi0 + Math.cos( phi1 ) );
        var v0 = new THREE.Vector3( r * Math.sin(phi0) * Math.cos(theta0),
                                    r * Math.sin(phi0) * Math.sin(theta0),
                                    r * Math.cos(phi0) );

        var v1 = new THREE.Vector3( r * Math.sin(phi1) * Math.cos(theta1),
                                    r * Math.sin(phi1) * Math.sin(theta1),
                                    r * Math.cos(phi1) );

        v0.addScaledVector( v1, 3.0 );

        positions[ i3 + 0 ] = v0.x;
        positions[ i3 + 1 ] = v0.y;
        positions[ i3 + 2 ] = v0.z;

        size[ i ] = 20;

        phi0 += phi0Add;
        theta0 += theta0Add;
        phi1 += phi1Add;
        theta1 += theta1Add;
    }

    geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
    geometry.addAttribute( 'size', new THREE.BufferAttribute( size, 1 ) );

    uniforms = { texture:   { value: sprite  } };

    var shaderMaterial = new THREE.ShaderMaterial( {

        uniforms:       uniforms,
        vertexShader:   document.getElementById( 'vertexshader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

        depthTest:      false,
        transparent:    true
    });

    particles = new THREE.Points( geometry, shaderMaterial );
    scene.add( particles );

	particles.dynamic = true;

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.maxDistance = 1;
    controls.minDistance = 1
    window.addEventListener('resize', onWindowResize, false);
}

function animate() {
    var time = performance.now() * 0.003;

    particles.rotation.z = 0.01 * time;

    var scaleAng = time;
    var scaleAngAdd = 1040 * Math.PI / BILLBOARD_COUNT;
    var cameraPosition = camera.position
    for ( var i = 0; i < BILLBOARD_COUNT; i++ ) {
        size[ i ] = 50.0 + 30.0 * Math.sin( scaleAng );
        scaleAng += scaleAngAdd;
    }
    geometry.attributes['size'].array = size;
    geometry.attributes['position'].array = positions;

    BufferGeometrySorter.prototype.sort(geometry.attributes, cameraPosition );

    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}


function onWindowResize() {
    camera.left = window.innerWidth / - 2;
    camera.right = window.innerWidth / 2;
    camera.top = window.innerHeight / 2;
    camera.bottom = window.innerHeight / - 2;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}


// THREE.js BufferGeometry sort by Corey Farwell
// https://github.com/frewsxcv/three-buffergeometry-sort
var BufferGeometrySorter = function () {};

BufferGeometrySorter.prototype.sort = (function () {
    var distances = [],
        tmpPos = new THREE.Vector3(0, 0, 0),
        currFrame = 0;  // This will result in the first frame getting sorted

    return function (bufferGeomAttributes, cameraPosition) {

        currFrame += 1;

        var attributes = bufferGeomAttributes,
            numPoints = attributes.position.count;

        for (var i = 0; i < numPoints; ++i) {
            tmpPos.set(
                attributes.position.array[i * 3],
                attributes.position.array[i * 3 + 1],
                attributes.position.array[i * 3 + 2]
            );
            distances[i] = [
                cameraPosition.distanceTo(tmpPos), i];
        }
        distances.sort(function(a, b) {
            return b[0] - a[0];
        });
        for (var val in attributes) {
            if (!attributes.hasOwnProperty(val)) { continue; }

            var itemSize = attributes[val].itemSize;
            var newArray = new Float32Array(itemSize * numPoints);

            for (i = 0; i < numPoints; ++i){
                var index = distances[i][1];
                for (var j = 0; j < itemSize; ++j) {
                    var srcIndex = index * itemSize + j;
                    var dstIndex = i * itemSize + j;
                    newArray[dstIndex] = attributes[val].array[srcIndex];
                }
            }

            attributes[val].array = newArray;
            attributes[val].needsUpdate = true;
        }
    };
}());