var iframe;
var base;
var lifeBackplate;
var leftControlsPlate;
var fakeLoadBar;
var lifeContainer;
var lives = [];
var attemptCount=0;
var lastCorrect = true;

var animationControls = false;
var numLevels = 1;
var levelsPassed = 0;

var levelmap;

var setup = function(source){
    console.log("Setup: " + source);
    iframe = document.createElement('iframe');
    iframe.src = source
    iframe.width = window.innerWidth+10;
    iframe.height = window.innerHeight;

    base = document.createElement('div');
    base.setAttribute("class","mainContainer");

    leftControlsPlate = document.createElement('div');
    leftControlsPlate.setAttribute("class","leftControlsPlate");

    lifeBackplate = document.createElement('div');
    lifeBackplate.setAttribute("class","lifeBackplate");

    fakeLoadBar = document.createElement('div');
    fakeLoadBar.setAttribute("class","fakeLoadBar")

    lifeContainer = document.createElement('div');
    lifeContainer.setAttribute("class","lifeContainer")

    var image1 = document.createElement('img');
    image1.setAttribute("src", "https://info.mindresearch.org/hubfs/Operations/stmath-demo-games-updated/jiji.png");
    image1.setAttribute("class", "life");


    var image2 = document.createElement('img');
    image2.setAttribute("src", "https://info.mindresearch.org/hubfs/Operations/stmath-demo-games-updated/jiji.png");
    image2.setAttribute("class", "life");

    levelcount = document.createElement('div')
    levelcount.setAttribute("class",'levelcount');

    backboard = document.createElement('div')
    backboard.setAttribute("class",'backboard');

    progress = document.createElement('div')
    progress.setAttribute("class",'progress');

    lives = [image2, image1];

    lifeContainer.appendChild(image1);
    lifeContainer.appendChild(image2);


    levelcount.appendChild(backboard);
    levelcount.appendChild(progress);

    lifeBackplate.appendChild(levelcount);
    lifeBackplate.appendChild(lifeContainer);
    base.appendChild(leftControlsPlate);
    base.appendChild(lifeBackplate);

    
    
    document.body.appendChild(base);
    document.body.appendChild(fakeLoadBar);
    
    document.body.appendChild(iframe);
}


var getLevelURL = function() {
    return window.location.href.split("#")[1];
    
}

var fetchLevelMap = function() {
    request = new XMLHttpRequest();
    request.onreadystatechange = processLevelMap;
    request.open("GET", "https://info.mindresearch.org/hubfs/Operations/stmath-demo-games-updated/urlMap.json",true);
    request.send();
}

var loadGame = function(){
    levelCode = getLevelURL();
    if(!levelmap[levelCode]) {
        console.log("Level does not exist");
    } else {
        let entry = levelmap[levelCode];
        levelsrc = entry.urlBase + "_" + Math.floor(Math.random() * parseInt(entry.count));

        setup(levelsrc);
    }
}

var processLevelMap = function(m) {
    
    if(m.target.readyState == 4){
        levelmap = JSON.parse(m.target.response);
        console.log(levelmap);
        loadGame()
    }
}


var resizeHandle = function(){
    iframe.width = window.innerWidth+10;
    iframe.height = window.innerHeight;
    setleftPanel();
};
var onPuzzleAnswered = function(data){
    lastCorrect = data.correct;
}

var showBar = function() {
    base.setAttribute("class","bar")
    lifeBackplate.setAttribute("class","overlay")
    div.setAttribute("class","barcontent")
}

var setLives = function(count, array) {
    for(var i = 0; i < count && i < array.length; i++){
        array[i].setAttribute("class", "life lost")
    }

}

var setProgress = function(data) {
    let puzzles = data.context.puzzles.length;
    let current = data.context.currentPuzzleIndex;
    let size = 140;
    let unit = size/puzzles;
    let width = current*unit;
    progress.setAttribute("style", "width:" + width + "px");
}

var refreshUI = function(data){
    console.log("Started");
    animationControls = false;
    lifeBackplate.setAttribute("class","lifeBackplate");
    setleftPanel();
    setLives(attemptCount, lives)
    setProgress(data)
    fakeLoadBar.setAttribute("class","fakeLoadBarhide");
}

var checkForFailure = function(){
    if(attemptCount >= 2){
        if(history.length > 1) {
             history.back();
        } else {
            window.close();
        }
       
    }
}

var setleftPanel = function() {
    if(animationControls) {
        console.log(window.innerWidth)
        console.log(window.innerWidth < 640)
        if(window.innerWidth < 640) {
            leftControlsPlate.setAttribute("class","leftControlsPlateAnimationShort");
        } else {
            leftControlsPlate.setAttribute("class","leftControlsPlateAnimationLong");
        }
    } else {
        leftControlsPlate.setAttribute("class","leftControlsPlate")
    }
}

var controlToggle = function() {
    animationControls = true;
    lifeBackplate.setAttribute("class","hidden");
    setleftPanel();

}

var evaluateAttempts = function() {
    if(lastCorrect == false) {
        attemptCount++;
    }
}

var levelComplete = function() {
    base.remove();
}


var onMessage = function(m) {
    console.log(m);

    if(m.data.eventName)
    {
        if(m.data.eventName == "puzzle_answered") {
            onPuzzleAnswered(m.data.eventData);
        }

        if(m.data.eventName == "puzzle_completed" || m.data.eventName=="puzzle_started") {
            //puzzle_completed isnt called on incorrect answers, so we need to check for incorrect answers during puzzle started.
            //Puzzle_answered is always called, so we can still rely on it. If the last answer before the reset was correct
            //  then we can assume they got the answer right, and we can update the Attempt count one time.
            //Reset in game might complicate this, but that is disabled.
            if(m.data.eventName == "puzzle_started") {
                evaluateAttempts();
                checkForFailure();
                lastCorrect = true;
            }
            refreshUI(m.data.eventData);

        }

        if(m.data.eventName == "prompt") {
            refreshUI(m.data.eventData);
        }
        if(m.data.eventName == "toggle_controls") {
            controlToggle();
        }
        if(m.data.eventName == "level_completed") {
            levelComplete();
        }
    }
}

window.addEventListener("resize", resizeHandle)
window.addEventListener("DOMContentLoaded", fetchLevelMap)
window.addEventListener("message",onMessage);