let dots = $("span");
let nMax = dots.length;
let n;
let nDotCount = 0;
let nILoveToCount = 0;
let nLaughCount = 0;
let dotInfoLst = [];
let w,h;
let dotColor = ['#ff0000',
                '#0066ff',
                '#66ff66',
                '#ffcc00',
                '#ff99ff',
                '#ff33ff',
                '#ffff99',
                '#ffff1a',
                '#ffff00',
                '#cce6ff',
                '#00e600',
                '#33cccc',
                '#d6f5f5'];

const dwNd = $("#dw")[0];
const dNd = $("#d")[0];
const startBtnNd = $("#startBtn")[0];
const startBtnLblNd = $("#startBtnLbl")[0];
const PEN_MODE_ATTRACT = 0;
const PEN_MODE_ACTIVE = 1;
const audio = $("#littleDotDialog")[0];

let penMode = PEN_MODE_ATTRACT;
let dotTimerId = 0;
let laughTimerId = 0;
let iLoveToCountId = 0;
let nCurrentEndTime = 0;

function addDot() {
  dotTimerId = 0;
  nDotCount = nDotCount + 1
  
  if (nDotCount > 100) {
    doneCounting();
    return;
  } // end if
  
  if (penMode === PEN_MODE_ACTIVE) {
    console.log("pen mode is active");
    
    dNd.style.lineHeight = "50px";
    
    let s ="<span class='numb'>";

    s = s +(nDotCount)+"</span> little dot";

    if (nDotCount > 1) {
      s = s + "s ";
    } // end if

    s = s +"... &nbsp;&nbsp;&nbsp;&nbsp;"
    d.innerHTML = s;
  } else {
    console.log("pen mode is Attract");
  } // end if
  
  let dot = dots[nDotCount-1];
  const dotInfo = {};
  let nSize = Math.floor(Math.random() * 260) + 34;
  dot.style.fontSize = (nSize)+"px";
  dot.style.lineHeight =  (nSize)+"px";
  dot.style.width =  (nSize)+"px";
  dot.style.height =  (nSize)+"px";
  let nLeft = Math.floor(Math.random() * w) + 1 - nSize;
  let nTop = Math.floor(Math.random() * h) + 1 - nSize;
  dot.style.left = (nLeft)+"px";
  dot.style.top = (nTop)+"px";
  let nColorIndex = Math.floor(Math.random() * dotColor.length) + 1;
  dot.style.color = dotColor[nColorIndex];
  dot.style.opacity = ".9";
  dot.style.display = "block";
  
  let sAnimationClassName = "dontAni1Cls";
  dot.classList.add(sAnimationClassName);
  
  dotInfo.idx = dotInfoLst.length;
  dotInfo.left = nLeft;
  dotInfo.top = nTop;
  dotInfo.startLeft = nLeft;
  dotInfo.startTop = nTop;
  dotInfo.offsetX = w - nLeft;
  dotInfo.offsetY = h - nTop;
  dotInfo.size = nSize;
  dotInfo.node = dot;
  dotInfo.dotNumber = nDotCount;
  dotInfo.animationClassName = sAnimationClassName;
  dotInfoLst.push(dotInfo);
  nLaughCount = 0;
  if (penMode === PEN_MODE_ACTIVE) {
    console.log("about to call 'laugh()' function via setTimeout-(1)");
    laughTimerId = setTimeout(laugh,1000);
    return;
  } // end if
  
  console.log("about to call 'addDot()' function via setTimeout-(2)");
  dotTimerId = setTimeout(addDot, 1200);  // attract mode only!
} // end of function addDot()

function laugh() {
  laughTimerId = 0;
  nLaughCount = nLaughCount + 1;
  dNd.innerHTML = dNd.innerHTML + " ah";
  if (nLaughCount < 3) {
    console.log("about to call 'laugh()' function via setTimeout-(3)");
    laughTimerId = setTimeout(laugh,350);
    return; 
  } // end if
  
  nLaughCount = 0;
  
 
    dNd.innerHTML = dNd.innerHTML + "!";
    nILoveToCount = nILoveToCount + 1;

  
  if (nILoveToCount > 4) {
    console.log("about to call 'iLoveToCount()' function via setTimeout-(4)");
    iLoveToCountId = setTimeout(iLoveToCount,1000);
    return;
  } // end if
  
  console.log("about to call 'addDot()' function via setTimeout-(5)");
  dotTimerId = setTimeout(addDot,1500);
} // end of function laugh()

function iLoveToCount() {
  iLoveToCountId = 0;
  playTheCount(0,2);
  let s = "<br>I Love to Count!!!"
  dNd.style.lineHeight = "25px";
  dNd.innerHTML = dNd.innerHTML + s;
  nILoveToCount = 0;
  console.log("about to call 'addDot()' function via setTimeout-(6)");
  dotTimerId = setTimeout(addDot,2500);
} // end of function iLoveToCount()


function pageSetup() {  
  d.innerHTML = "&nbsp;&nbsp;I love to Count!!";
  dwNd.style.lineHeight = "50px";
  penMode = PEN_MODE_ATTRACT;
  pageResize();
  resetDots();
  flashStartButton();
  dotTimerId = setTimeout(addDot, 800);
} // end of function pageSetup()


function flashStartButton() {
  if (startBtnNd.style.display === "none") {
    return;
  } // end if
  
  if (startBtnLblNd.style.display === "block") {
    startBtnLblNd.style.display = "none";
  } else {
    startBtnLblNd.style.display = "block";
  } // end if/else
  
  setTimeout(flashStartButton, 380);
} // end of function flashStartButton()



function beginCounting() {
  startBtnNd.style.display = "none";
  penMode = PEN_MODE_ACTIVE;
  clearTimers();
  resetDots();
  dotTimerId = setTimeout(addDot, 800);
} // end of function beginCounting()


function clearTimers() {
  if (dotTimerId !==0) {
    clearTimeout(dotTimerId);
    dotTimerId = 0;
  }  // end if
  
  if (laughTimerId !==0) {
    clearTimeout(laughTimerId);
    laughTimerId = 0;
  }  // end if
  
  if (iLoveToCountId !==0) {
    clearTimeout(iLoveToCountId);
    iLoveToCountId = 0;
  }  // end if
} // end of function clearTimers()


function doneCounting() {
  clearTimers();
} // end of function doneCounting()


function resetDots() {
  for (n=0;n<nMax;n++) {
    let dot = dots[n];
    
    if (dot.innerHTML === "•") {
      dot.style.display = "none"; 
      dot.style.position = "absolute";
    } // end if
  } // next n
  
  dotInfoLst = [];
  nDotCount = 0;
  nLaughCount = 0;
  nILoveToCount = 0;
} // end of function resetDots()


function pageResize() {
  w = window.innerWidth;
	h = window.innerHeight;
  const nMax = dotInfoLst.length;
  for (let n=0;n<nMax;n++) {
    dotInfo = dotInfoLst[n];
    let dot = dotInfo.node;
    
    if (dotInfo.startLeft + dotInfo.size > w) {      
      dot.style.left = (w - dotInfo.offsetX )+"px";
    } else {
      dot.style.left = (dotInfo.startLeft )+"px";
    } // end if
    
    if (dotInfo.startTop + dotInfo.size > h) {      
      dot.style.top = (h - dotInfo.offsetY )+"px";
    } else {
      dot.style.left = (dotInfo.startTop )+"px";
    } // end if
  } // next n
} // end of function pageResize()



function playTheCount(nStartTime, nEndTime) {
  nCurrentEndTime = nEndTime;
  audio.currentTime = nStartTime; // in seconds 
  audio.play();
} // end of function playTheCount()

function checkIfTimeToPauseAudio() {
  if (audio.currentTime >= nCurrentEndTime) {
    audio.pause();
  }
} // end of function checkIfTimeToPauseAudio()


window.addEventListener('load', pageSetup);
window.addEventListener('resize', pageResize);