;(function(){

const randomTime = random(1, 2);

    class DefineElement{
        constructor(x, y){
            this.x=x;
            this.y=y;
        }
    }

    class Floating{

        constructor(canvasElement){ // no loop
            this.canvasElement=canvasElement;
            this.bubbles=[];
            this.animate            =this.animate.bind(this);
            this.resizeCanvas   =this.resizeCanvas.bind(this);
            this.start              =this.start.bind(this);
            this.setCanvasDimensions();
            this.context=this.canvasElement.getContext('2d');
            this.start();
        }
        createData(){
            for(let i=0; i<length; i++){
                this.bubbles[i]=new DefineElement(
                    el[i].position.x,
                    el[i].position.y,
                );
            }
        }
        draw(){
            if(!(this.context instanceof CanvasRenderingContext2D))return;
            this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            for(let i=0; i<length; i++){
                this.context.drawImage(image[i], 0, 0, image[i].width, image[i].height, this.bubbles[i].x, this.bubbles[i].y, el[i].dimension, el[i].dimension);
            }
        }
        animate(){ // loop
            this.animationTimerId=requestAnimationFrame(this.animate);
            this.update();
            this.draw();
        }
        resizeCanvas(){
            window.cancelAnimationFrame(this.animationTimerId);
            this.setCanvasDimensions();
            this.restart();
        }
        restart(){
            if(this.waitTimerId)clearTimeout(this.waitTimerId);
            this.waitTimerId=setTimeout(this.start, 1000);
        }
        start(){ // no loop
            this.createData();
            //this.draw();
            this.animate();
        }
        setCanvasDimensions(){
            if(!this.canvasElement)return;
            this.canvasWidth=this.canvasElement.width=canvas.parentNode.offsetWidth;
            this.canvasHeight=this.canvasElement.height=canvas.parentNode.offsetHeight;
        }

        update(){

            for(let i=0; i<length; i++){

                if(this.bubbles[0].x<=el[i].available.x[0]||this.bubbles[0].x>=el[i].available.x[1])el[i].direction.x=0-el[i].direction.x;
                if(this.bubbles[0].y<=el[i].available.y[0]||this.bubbles[0].y>=el[i].available.y[1])el[i].direction.y=0-el[i].direction.y;

                this.bubbles[i].x+=randomTime(el[i].direction.x)/randomIntFromInterval(5, 10);
                this.bubbles[i].y+=randomTime(el[i].direction.y)/randomIntFromInterval(5, 10);

            }

            span.innerText='Dimension: '+~~el[0].dimension+'\r\nbubble.center.x: '+~~el[0].center.x+'\r\nbubble.x: '+~~this.bubbles[0].x+'\r\nAvailable.x[0]: '+~~el[0].available.x[0]+'\r\nAvailable.x[1]: '+~~el[0].available.x[1];

        }
    }

function randomIntFromInterval(min, max){ // min and max included
  return Math.floor(Math.random()*(max-min+1)+min);
}

function random(min, max) {
  const delta = max - min;
  return (direction = 1) => (min + delta * Math.random()) * direction;
}


    const span=document.getElementById('canvas-console');
    const canvas=document.getElementById('float-bubbles');
    const el=[];
    const image=[];
    let length=0;

    window.onload=function(){

        el[0]={
            src:'http://192.168.0.109:19990/_files/PhotoWall01.png',
        };
        /*
        el[1]={
            src:'http://192.168.0.109:19990/_files/PhotoWall02.png',
        };
        el[2]={
            src:'http://192.168.0.109:19990/_files/PhotoWall03.png',
        };
        el[3]={
            src:'http://192.168.0.109:19990/_files/PhotoWall04.png',
        };
        */

        length=el.length;
        let loaded=0;

        for(let i=0; i<length; i++){

            el[i].dimension=randomIntFromInterval(320, 360);
            el[i].direction={x:1, y:-1};

            el[i].position={
                x:randomIntFromInterval(0, canvas.offsetWidth-el[i].dimension),
                y:randomIntFromInterval(0, canvas.offsetHeight-el[i].dimension),
            };
            el[i].center={
                x:el[i].position.x+(el[i].dimension/2),
                y:el[i].position.y+(el[i].dimension/2),
            };
            el[i].available={
                x:[el[i].center.x-(el[i].dimension), el[i].center.x+(el[i].dimension/3)],
                y:[el[i].center.y-(el[i].dimension), el[i].center.y+(el[i].dimension/3)],
            };

            image[i]=document.createElement('img');
            image[i].src=el[i].src;

            console.log(image[i]);
            console.log(el[i]);

            image[i].onload=()=>{
                loaded++;
                if(loaded==length){
                    new Floating(canvas);
                }
            }
        }
    }


})();