var colorNodes = [],
    maxW = window.innerWidth, 
    maxH = window.innerHeight;
const green_grad = 'radial-gradient(50% 50% at 50% 50%, #1CB261 0%, rgba(28, 178, 97, 0) 100%)',
    blue_grad = "radial-gradient(50% 50% at 50% 50%, #00C7FF 0%, rgba(0, 199, 255, 0) 100%)",
    purple_grad = "radial-gradient(50% 50% at 50% 50%, #6466E9 0%, rgba(109, 85, 209, 0) 100%)",
    pink_grad = "radial-gradient(50% 50% at 50% 50%, #FA6199 0%, rgba(250, 97, 153, 0) 100%)",
    yellow_grad = "radial-gradient(50% 50% at 50% 50%, #FFB500 0%, rgba(255, 181, 0, 0) 100%)",
    orange_grad = "radial-gradient(50% 50% at 50% 50%, #FC7A00 0%, rgba(252, 122, 0, 0) 100%)",
    colors_array = [green_grad, blue_grad, purple_grad, pink_grad, yellow_grad],
      container = document.querySelector('.container');

// ColorNode Object

function ColorNode(){
  let size_ratio = randomNumber(0.8,1.3,false);
   this.color_index = randomNumber(1, colors_array.length,true);
  
  this.color  = colors_array[this.color_index];
  colors_array.splice(this.color_index,1);
  this.width = maxW * size_ratio;
  this.height= this.width;
  this.select = undefined ; //Select this nodes HTML element
  
  this.generateElement = function(){
    // Generate the HTML Element inside the container
    let position = randomPos();
    let html_element = document.createElement("div");    
    
    html_element.classList.add('gradient');
    html_element.style.background = this.color;
    html_element.style.width = this.width + "px";
    html_element.style.height = this.height + "px";
    html_element.style.top = position.y + "%";
    html_element.style.left = position.x + "%";
    
    this.select = html_element;
    container.appendChild(html_element);
    return html_element;
  };
  
  randomPos = function(){
    //Return a random position object with X & Y
    let landscape;
    if (maxW > maxH){
      landscape = true;
    } 
    
    let position={},left,right, lrarr;
   left = randomNumber(-20,0,false);
   right = randomNumber(100,120,false);
    lrarr = [left,right];
    
    if(!landscape){
     position.x = lrarr[randomNumber(0,1,true)];
      position.y = randomNumber(0,100,true);
    }else{
      position.y = lrarr[randomNumber(0,1,true)];
    position.x = randomNumber(0,100,true);
    }
    
    
    
    
    return position;
  };
  
}


// Utility Functions get a random integer
function randomNumber(min, max, round) {
  //final parameter is if it should round it or not
  if(round){
    return Math.round(Math.random() * (max - min) + min); }else{
      return Math.random() * (max - min) + min;
    }
}

function initNodes(){
  // returns an array of the ColorNode objects created.
  const nodes = 3;
  colorNodes = [];
  for (let i=0; i < 3; i++){
        let newNode = new ColorNode();
        newNode.generateElement();
        colorNodes[i]=newNode;
  }
  return colorNodes;
}

initNodes();