#element2 {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  right : 0 px;
  top : 0 px;
}

.shiphover{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    position:relative;
}

????????

// These can be modified by the user...
var startingContraband = 10;
var startingShips = 10;
var shipCapacity = 5;
var startingInspectionPoints = 10;

var basicCost = 1;
var betterCost = 3;
var totalCost = 5;
// ######################################

// ########Database Purposes#############
var uniqueID = null;
var gameID = null;

var badShips = 0;
var basicSearches = 0;
var betterSearches = 0;
var totalSearches = 0;
var accuracy = 0;

var j = startingShips;

var redTurnCounterNumber = 1;
var blueTurnCounterNumber = 1;

var allocatedContraband = 0;
var activeContraband = allocatedContraband;
var successfulContraband = 0;

var drugsFound = 0;
var interceptedContraband = 0;

var contrabandCounter = document.getElementById("counterNumberContraband");
var inspectionPointsCounter = document.getElementById("inspectionPointsCounter");

var successfulContrabandCounter = document.getElementById("counterNumberSuccessfulContraband");
var interceptContrabandCounter = document.getElementById("interceptedContrabandCounter");

var successfulContrabandCounterNumber = 0;
var interceptContrabandCounterNumber = 0;

var shipCargos = [
    [],
    [false, false, false, false, false],
    [false, false, false, false, false],
    [false, false, false, false, false],
    [false, false, false, false, false],
    [false, false, false, false, false],
    [false, false, false, false, false],
    [false, false, false, false, false],
    [false, false, false, false, false],
    [false, false, false, false, false],
    [false, false, false, false, false]
];

var shipCounters = [
    [],
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0
];


//  ########################Settings##################################
var settingsContrabandCounter = document.getElementById("contrabandDisplay");
settingsContrabandCounter.innerHTML = startingContraband;


// #########################Red Team's Turn#################################
function allocateContraband(determiner, shipNumber) {
    //Subtracts or adds contraband to the selected ship based on the determiner's value (0 for subtraction, 1 for addition).
    var shipID = String("ship counter " + shipNumber);
    var shipContrabandCounter = document.getElementById(shipID);

    //Subtraction
    if (determiner == 0) {
        if (shipCounters[shipNumber] <= 0) {
            alert("Error: ship can't hold negative contraband!");
            return;
        }
        shipCounters[shipNumber] -= 1;
        startingContraband += 1;

        shipContrabandCounter.innerHTML = shipCounters[shipNumber];
        contrabandCounter.innerHTML = startingContraband;

        for (var i = 0; i < shipCounters[shipNumber]; i++) {
            shipCargos[shipNumber][i] = false;
        }

        allocatedContraband -= 1;
    }
    //Addition
    else if (determiner == 1) {
        if (startingContraband <= 0) {
            alert("Error: you are out of contraband!");
            return;
        } else if (shipCounters[shipNumber] >= shipCapacity) {
            alert("Error: ship capacity reached!");
            return;
        }
        shipCounters[shipNumber] += 1;
        startingContraband -= 1;

        shipContrabandCounter.innerHTML = shipCounters[shipNumber];
        contrabandCounter.innerHTML = startingContraband;

        for (var i = 0; i < shipCounters[shipNumber]; i++) {
            shipCargos[shipNumber][i] = true;
        }
        allocatedContraband += 1;
    }
    var shipDiv = document.getElementById("div"+shipNumber);
    shipDiv.innerHTML += "<div id='element2'>" + shipCounters[shipNumber] + "</div>";
};

function redOn(clicked_id) {
    //Enables the red ship assignment overlay.
    document.getElementById("redOverlay").style.display = "block";
    j = clicked_id;

    var x = shipCounters[j];
    var overlaytext = "";

    overlaytext += "<div class=\"redshipCard\"><div class=\"allocate\"><div class=\"ship\" onclick=\"selectShip(" + j + ")\"><img id=\"ship " + j + "\" class=\"shipImg\" src=\"res\\ship_active.png\"><p class=\"shipLabel\">Ship " + j + "</p></div><div class=\"allocateCommands\"><img class=\"allocateImg\" src=\"res/contraband.png\"><button class=\"allocateMinus\" onclick=\"allocateContraband(0," + j + ")\">-</button><p class=\"allocateCounter\" id=\"ship counter " + j + "\">" + x + "</p><button class=\"allocateAdd\" onclick=\"allocateContraband(1," + j + ")\">+</button></div><button class=\" allocateRedConfirmBtn\" onclick=\"redOff()\">Confirm</button></div></div>"
    document.getElementById("redOverlay").innerHTML = overlaytext;
};

function redOff() {
    //Disables the red ship assignment overlay.
    document.getElementById("redOverlay").style.display = "none";
};

var text = "";
for (var i = 1; i < 11; i++) {
    text += "<div class = \"shiphover\" id = \"div" + i + "\" onclick=\"redOn(" + i + ");\"><img src = \"res/ship_active.png\" class=\"shiplist\" id=\"ship"+i+"\"></div>";
};

document.getElementById("redFlex").innerHTML = text;

// ##########################Blue Team's Turn################################
function blueOn(clicked_id) {
    //Enables the blue ship assignment overlay.
    document.getElementById("blueOverlay").style.display = "block";
    j = clicked_id;

    var x = shipCounters[j];
    var overlaytext = "";
    // for (j = 1; j < 11; j++) {
    overlaytext += "<div class=\"blueshipCard\"><div class=\"ship\" onclick=\"selectShip(" + j + ")\"><img id=\"ship " + j + " class=\"shipImg\" src=\"res/ship_active.png\"><p class=\"shipLabel\">Ship " + j + "</p></div><div class=\"inspection\"><div><span><img src=\"res/basic_search.png\" alt=\"\"><button class=\"searchButton\" onclick=\"inspection(0, " + j + ")\">Basic Search</button></span></div><div><span><img src=\"res/better_search.png\" alt=\"\"><button class=\"searchButton\" onclick=\"inspection(1, " + j + ")\">Better Search</button></span></div><span><img src=\"res/total_search.png\" alt=\"\"><button class=\"searchButton\" onclick=\"inspection(2, " + j + ")\">Total Search</button></span><button class=\" searchBlueConfirmBtn\" onclick=\"blueOff()\">Confirm</button></div></div>"

    document.getElementById("blueOverlay").innerHTML = overlaytext;
};

function blueOff() {
    //Disables the blue ship assignment overlay.
    document.getElementById("blueOverlay").style.display = "none";
};

var text = "";
for (var i = 1; i < 11; i++) {
    text += "<div class = \"shiphover\" id = \"div" + i + "\" onclick=\"blueOn(" + i + ");\"><img src = \"res/ship_active.png\" class=\"shiplist\" id=\"ship"+i+"\"></div>";
};

document.getElementById("blueFlex").innerHTML = text;

function randomInteger(min, max) {
    //Generates a random integer between the minimum and maximum values for use in the inspection function.
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

function inspection(determiner, shipNumber) {
    //Performs inspection on the ship to see if it contains contraband.
    var arr = shipCargos[shipNumber];

    //Basic Search
    if (determiner == 0) {
        if (startingInspectionPoints >= basicCost) {
            var index = randomInteger(0, shipCapacity - 1);
            if (arr[index] === true) {
                // ####DRUGS FOUND#####
                alert("Contraband Located! 1 unit seized!")
                drugsFound += 1;
            } else {
                // ####NO DRUGS FOUND####
                alert("No contraband was located.")
            }
            startingInspectionPoints -= basicCost;
            inspectionPointsCounter.innerHTML = startingInspectionPoints;

            basicSearches += 1;
        } else {
            alert("Error: insufficient inspection points!")
            return;
        }
        activeContraband -= drugsFound;
        interceptedContraband += drugsFound;
        drugsFound = 0;
    }

    //Better Search
    else if (determiner == 1) {
        if (startingInspectionPoints >= betterCost) {
            var indexList = [randomInteger(0, shipCapacity - 1), randomInteger(0, shipCapacity - 1), randomInteger(0, shipCapacity - 1)];
            for (var i = 0; i <= indexList.length; i++) {
                var checker = indexList[i];
                if (arr[checker] === true) {
                    // ####DRUGS FOUND#####
                    alert("Contraband Located! 1 unit seized!")
                    drugsFound += 1;
                } else if (arr[checker] == false) {
                    // ####NO DRUGS FOUND####
                    alert("No contraband was located.")
                } else {
                    alert("End of inspection.")
                }
            }
            startingInspectionPoints -= betterCost;
            inspectionPointsCounter.innerHTML = startingInspectionPoints;

            betterSearches += 1;
        } else {
            alert("Error: insufficient inspection points!")
            return;
        }
        activeContraband -= drugsFound;
        interceptedContraband += drugsFound;
        drugsFound = 0;
    }

    //Total Search
    else if (determiner == 2) {
        if (startingInspectionPoints >= totalCost) {
            var contains = arr.includes(true);
            if (contains === true) {
                drugsFound += 1;
                for (x = 1; arr.length >= x; x++) {
                    if (arr[x] === true) {
                        drugsFound += 1;
                    }
                }
                alert("Contraband Located! " + drugsFound + " units seized!")
            } else {
                // ####NO DRUGS FOUND####
                alert("No contraband was located.");
            }
            startingInspectionPoints -= totalCost;
            inspectionPointsCounter.innerHTML = startingInspectionPoints;

            totalSearches += 1;
        } else {
            alert("Error: insufficient inspection points!")
            return;
        }
        activeContraband -= drugsFound;
        interceptedContraband += drugsFound;
        drugsFound = 0;
    }
};

// #########################Navigation######################################
function gameStart(){
    //Changes the view from the home to red turn screens.
    document.getElementById("homeScreen").style.display = "none";
    document.getElementById("redTurn").style.display = "block";
};

function homeToSettings(){
    //Changes the view from the home to settings screens.
    document.getElementById("homeScreen").style.display = "none";
    document.getElementById("settingsScreen").style.display = "block";
};

function settingsToHome(){
    //Changes the view from the settings to home screens.
    document.getElementById("settingsScreen").style.display = "none";
    document.getElementById("homeScreen").style.display = "block";
};

function redToBlue() {
    //Switches from red to blue turns.
    if (blueTurnCounterNumber <= 10) {

        activeContraband = allocatedContraband;

        //Switch Turns
        redTurnCounterNumber += 1;
        document.getElementById("redTurnCounter").innerHTML = redTurnCounterNumber;

        document.getElementById("redTurn").style.display = "none";
        document.getElementById("blueTurn").style.display = "block";
    }

};

function blueToRed() {
    if (redTurnCounterNumber == 11) {
        //Game Ends
        gameEnd();
        return;
    } else {
        //Database Purposes
        shipCounter();
        // Call # of searches here................

        //Accuracy Calculation
        determineAccuracy();

        //Updating Score
        successfulContraband += activeContraband;
        interceptedContraband += drugsFound;

        successfulContrabandCounterNumber += successfulContraband;
        interceptContrabandCounterNumber += interceptedContraband;

        successfulContrabandCounter.innerHTML = successfulContrabandCounterNumber;
        interceptContrabandCounter.innerHTML = interceptContrabandCounterNumber;

        //Reset Board
        blueReset();

        //Switch Turns
        blueTurnCounterNumber += 1;
        document.getElementById("blueTurnCounter").innerHTML = blueTurnCounterNumber;

        document.getElementById("redTurn").style.display = "block";
        document.getElementById("blueTurn").style.display = "none";
    }
};

function blueReset() {
    //Resets the board after blue finishes their turn (thereby ending the round).
    shipCargos = [
        [],
        [false, false, false, false, false],
        [false, false, false, false, false],
        [false, false, false, false, false],
        [false, false, false, false, false],
        [false, false, false, false, false],
        [false, false, false, false, false],
        [false, false, false, false, false],
        [false, false, false, false, false],
        [false, false, false, false, false],
        [false, false, false, false, false]
    ];

    shipCounters = [
        [],
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ];

    uniqueID = null;
    gameID = null;

    startingContraband = 10;
    allocatedContraband = 0;

    drugsFound = 0;
    startingInspectionPoints = 10;

    badShips = 0;
    basicSearches = 0;
    betterSearches = 0;
    totalSearches = 0;
    accuracy = 0;

    successfulContrabandCounterNumber = 0;
    interceptContrabandCounterNumber = 0;

    contrabandCounter.innerHTML = startingContraband;
    inspectionPointsCounter.innerHTML = startingInspectionPoints;

};

// ##########################Database Purposes##############################
function createUniqueID() {
    //Generates a unique ID using date and time information for data storage.
    //Format is the following: YEAR-MONTH-DAY-HOUR-MINUTE-SECOND

    var d = new Date();

    var y = d.getFullYear();
    var mo = d.getMonth();
    var da = d.getDate();
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();

    uniqueID = String(y + "-" + mo + "-" + da + "-" + h + "-" + m + "-" + s);
    alert("The unique ID for this game is: " + uniqueID);
};

function shipCounter() {
    //Determines the number of ships containing contraband for every round.
    for (i = 0; i < shipCounters.length + 1; i++) {
        if (shipCounters[i] > 0) {
            badShips += 1;
        }
    }
    return badShips;
};

function determineAccuracy() {
    //Determines the accuracy in terms of amount of contraband discovered per search.
    var searchCount = basicSearches + betterSearches + totalSearches;
    accuracy = activeContraband / drugsFound;
};



// ##########################End of Game####################################
function gameEnd() {
    //Ends the game.
    document.getElementById("blueTurn").style.display = "none";
    document.getElementById("endTurn").style.display = "block";


    var overlaytext = "";
    overlaytext += "<div class=\"endTurnDiv\"><h1 class=\"endTitle\">Results</h1><div class=\"itemsListEnd\"><div class =\"setTableEnd\"><div class=\"setRowsEnd\" id = \"redPoints\"><img class=\"settingsCounterEnd\" id=\"endSmuggled\" src=\"res/found contraband.png\"><div id=\"successCounter\"></div></div><div class=\"setRowsEnd\" id = \"bluePoints\"><img class=\"settingsCounterEnd\" id=\"endIntercepted\" src=\"res/contraband_not_found.png\"><div id=\"interceptCounter\">0</th></div></div></div><h1 id=\"redTeamEnd\"></h1><h1 id=\"blueTeamEnd\"></h1><h1 id=\"tieEnd\"></h1><button class=\"rePlay\" id=\"end\" onclick=\"restart()\">Play Again</button></div>"

    document.getElementById("endTurn").innerHTML = overlaytext;

    document.getElementById("successCounter").innerHTML = successfulContraband;
    document.getElementById("interceptCounter").innerHTML = interceptedContraband;

    if (successfulContraband > interceptedContraband) {
        document.getElementById("redTeamEnd").innerHTML = "Red Wins!";
    } else if (successfulContraband < interceptedContraband) {
        document.getElementById("blueTeamEnd").innerHTML = "Blue Wins!";
    } else {
        document.getElementById("tieEnd").innerHTML = "Tie Game!";
    }
};

function restart(){
    //Restarts the game.
    location.reload(true);
}