var canvas = document.createElement("canvas"),
    c = canvas.getContext("2d");
var w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight;
c.zIndex = 9999;
c.fillStyle = "rgb(0,0,0)";
c.fillRect(0, 0, w, h);
particles = {},
    particleIndex = 0,
    particleNum = 1;
function particle() {
    this.x = Math.random()*w;
    this.y = Math.random()*h;
    this.vx = 0;
    this.vy = 0;
    this.gravity = 1;
    particleIndex++;
    particles[particleIndex] = this;
    this.id = particleIndex;
    this.life = 0;
    this.maxLife = Math.random() * 100;
    this.shadeR = Math.floor(this.x/(w/180));
    this.shadeG = Math.floor(Math.random() * 255);
    this.shadeB = Math.floor(Math.random() * 90);
    this.color = 'hsla(' + this.shadeR + ',100%,' + this.shadeB + '%,' + Math.random() * 0.7 + ')';
    this.size = 0.1;
    this.a1 = 100;
    this.a2 = Math.random()*4+1;
    this.a3 = 0;
    this.a4 = 1;
}
particle.prototype.draw = function() {
    this.y += 0;
    c.beginPath();
    c.lineWidth = this.size;
    c.lineTo(this.x,this.y);
    for(k=0;k<10;k++){
        this.x += this.a1*Math.sin(this.a2*this.vx)+this.a3*this.vx*Math.sin(this.a4*this.vx);
        this.y += this.a1*Math.cos(this.a2*this.vx)+this.a3*this.vx*Math.cos(this.a4*this.vx);
        this.vy += this.gravity/1;
        this.vx += this.gravity/1;
        c.lineTo(this.x,this.y);
    }
    c.lineTo(this.x,this.y);
    c.strokeStyle = this.color;
    c.stroke();
    this.life++;
    if (this.life >= this.maxLife) {
        delete particles[this.id];
    }
};
var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};
canvas.addEventListener('mousemove', function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
}, false);
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();
const imageLoader = {
	imageElement: null,
	
	getImageForLoader: function() {
		var imageUrl = null;
		if(window.location.href.indexOf("metpsy") !== -1){
			imageUrl = "https://static.quantimo.do/app_uploads/metpsy/app_images_splashScreen.png";
		}
		return imageUrl;
	},

	start: function(url) {
		// Create an image element
		this.imageElement = document.createElement('img');
		this.imageElement.src = url;

		// Style the image to be centered on a white background
		this.imageElement.style.position = 'absolute';
		this.imageElement.style.top = '50%';
		this.imageElement.style.left = '50%';
		this.imageElement.style.transform = 'translate(-50%, -50%)';
		this.imageElement.style.zIndex = '1000';
        this.imageElement.style.maxHeight = '100%';

		// Create a white background div
		this.backgroundDiv = document.createElement('div');
		this.backgroundDiv.style.position = 'fixed';
		this.backgroundDiv.style.top = '0';
		this.backgroundDiv.style.left = '0';
		this.backgroundDiv.style.width = '100%';
		this.backgroundDiv.style.height = '100%';
		this.backgroundDiv.style.backgroundColor = 'white';
		this.backgroundDiv.style.zIndex = '999';

		// Append the background and image to the body
		document.body.appendChild(this.backgroundDiv);
		document.body.appendChild(this.imageElement);
	},

	stop: function() {
		// Remove the image element if it exists
		if (this.imageElement) {
			this.imageElement.remove();
			this.imageElement = null;
		}

		// Remove the white background div if it exists
		if (this.backgroundDiv) {
			this.backgroundDiv.remove();
			this.backgroundDiv = null;
		}
	}
};

var psychedelicLoader = {
    canvasAppended: false,
    showing: false,
    drawParticle: function() {
        c.fillStyle = "rgba(0,0,0,0)";
        c.fillRect(0, 0, w, h);
        for (var i = 0; i < particleNum; i++) {
            new particle();
        }
        for (var i in particles) {
            particles[i].draw();
        }
    },
    showLoader: function() {
	    if(psychedelicLoader.showing){return;}
	    psychedelicLoader.showing = true;
	    var imageUrl = imageLoader.getImageForLoader();
	    if(imageUrl){
		    imageLoader.start(imageUrl);
		    return;
	    }
        if(!psychedelicLoader.canvasAppended){
            document.body.appendChild(canvas);
	        psychedelicLoader.canvasAppended = true;
        }
        window.requestAnimFrame(psychedelicLoader.showLoader);
        psychedelicLoader.drawParticle();
    },
    start: function () {
		
        psychedelicLoader.showLoader();
    },
    stop: function () {
        
	    imageLoader.stop();
        if(!psychedelicLoader.showing){return;} // Avoid removeChild already removed errors
        psychedelicLoader.showing = false;
		if(psychedelicLoader.canvasAppended){
			psychedelicLoader.canvasAppended = false;
			document.body.removeChild(canvas);
		}
    }
};
//(function() {
    // your page initialization code here the DOM will be available here
    // Do this in the HTML if you need it psychedelicLoader.start();
//})();

var triangleLoader = function(loaderDivId){
    var container;
    var camera, scene, renderer;
    var uniforms;

    init();
    animate();

    function init() {
        container = document.getElementById(loaderDivId);
        camera = new THREE.Camera();
        camera.position.z = 1;

        scene = new THREE.Scene();

        var geometry = new THREE.PlaneBufferGeometry(2, 2);

        uniforms = {
            time: { type: "f", value: 1.0 },
            resolution: { type: "v2", value: new THREE.Vector2() } };


        var material = new THREE.ShaderMaterial({
            uniforms: uniforms,
            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent });


        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);

        container.appendChild(renderer.domElement);

        onWindowResize();
        window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize(event) {
        renderer.setSize(window.innerWidth, window.innerHeight);
        uniforms.resolution.value.x = renderer.domElement.width;
        uniforms.resolution.value.y = renderer.domElement.height;
    }

    function animate() {
        requestAnimationFrame(animate);
        render();
    }

    function render() {
        uniforms.time.value += 0.05;
        renderer.render(scene, camera);
    }
}