function newUnitDiv(unit) {
	commonBefore = "<div id='unit"+unit.id+"' class='unitContainer unitLine"+unit.line+"' style='z-index:"+(zIndex--)+"' onmouseover='hoverAUnit("+unit.id+")' onclick='clickAUnit("+unit.id+")'>" +
		"<div class='healthBarOuter'><div class='healthBarInner' id='healthBar"+unit.id+"' style='z-index:"+(zIndex--)+"'></div></div>";
	src = "pics/"+(unit.direction!="right"?"enemy":"")+unit.type+".png"
	different = "<img height='30' width='50' src='"+src+"'>"
	/*if(unit.direction === "right") {
		different = "<div id='body' class='"+unit.type+" unit' style=''> </div>" +
			"<div id='unitWeapon' class='weapon'><div class='weapon"+unit.type+"'></div> </div>";
	}
	else {
		different = "<div id='unitWeapon' class='weapon'><div class='weapon"+unit.type+"'></div> </div>" +
			"<div id='body' class='"+unit.type+" unitLeft' style=''> </div>";
	}*/
	commonAfter = "<div id='count"+unit.id+"' class='count hyperVisible count"+unit.type+"'>"+unit.unitCount+"</div></div>";
	elem = document.createElement("div");
	elem.innerHTML = commonBefore + different + commonAfter;
	document.getElementById('fightTime').appendChild(elem)
}

function updateUnitPos(y, x) {
	if(units[y][x] == null)
	console.log("updating null unit "+y+", "+x);
	if(document.getElementById("unit"+units[y][x].id) == null)
	console.log("sadf" +units[y][x].id);
	document.getElementById("unit"+units[y][x].id).style.left = (units[y][x].pos +7)*11.9 + "px";
}

function updateManaVisual() {
	document.getElementById("mana").innerHTML = intToString(curMana);
}


function updateSpawnTimers() {
	document.getElementById("enemySpawnTimer").innerHTML = roundtoFormat1(enemySpawnRate);
	document.getElementById("enemySoldierSpawnAmount").innerHTML = roundtoFormat1(enemySpawnAmounts[1])
	document.getElementById("enemySpearSpawnAmount").innerHTML = roundtoFormat1(enemySpawnAmounts[2])
	if(spawnAmounts[0] == 0) {
		document.getElementById("soldierContainer").style.display="none"
	} else {
		document.getElementById("soldierContainer").style.display="inline-block"
		document.getElementById("soldierSpawnTimer").innerHTML = roundtoFormat1(soldierSpawnRate);
		document.getElementById("soldierAutoSpawnAmount").innerHTML = roundtoFormat1(spawnAmounts[0])
	}
	if(spawnAmounts[1] == 0) {
		document.getElementById("spearContainer").style.display="none"
	}
	else {
		document.getElementById("spearContainer").style.display="inline-block"
		document.getElementById("spearSpawnTimer").innerHTML = roundtoFormat1(spearSpawnRate);
		document.getElementById("spearAutoSpawnAmount").innerHTML = roundtoFormat1(spawnAmounts[1])
	}
}

function updateGoldVisual() {
	document.getElementById("gold").innerHTML = intToStringRound(gold);
}

function updateTerritoryVisual() {
	document.getElementById("territory").innerHTML = intToStringRound(territory)
	document.getElementById("totalTerritoryPlaces").innerHTML = intToStringRound(territory)
}

function updateConstructionVisual() {
	totalSoldierFound = 0
	totalSpearFound = 0
	tempTotal = constructionTotal
	for(j = 0; j < initialSpawnAmounts.length; j++) {
		spawnAmounts[j]=initialSpawnAmounts[j]
	}
	for(q = 0; q < spawnList.length; q++) {
		if(spawnList[q] == "soldier") constructionCost = round2(placeUnitTerritoryCost[0] + placeUnitIncreaseRatio[0]* totalSoldierFound++)
		if(spawnList[q] == "spear") constructionCost = round2(placeUnitTerritoryCost[1] + placeUnitIncreaseRatio[1] * totalSpearFound++)
		if(tempTotal >= constructionCost) {
			if(spawnList[q] == "soldier") spawnAmounts[0]++
			if(spawnList[q] == "spear") spawnAmounts[1]++
			tempTotal -= constructionCost
			document.getElementById("constructionGrey"+q).style.display="inline-block";
			document.getElementById("constructionRed"+q).style.display="none";
		} else if(tempTotal > 0){
			document.getElementById("constructionGrey"+q).style.display="none";
			document.getElementById("constructionRed"+q).style.display="inline-block";
			document.getElementById("constructionRed"+q).style.width = (tempTotal/constructionCost)*100+"%"
			tempTotal -= constructionCost
		} else {
			document.getElementById("constructionGrey"+q).style.display="none";
			document.getElementById("constructionRed"+q).style.display="none";
		}
	}
}

function showSpawnList() {
	spawnListBox = document.getElementById("spawnListBox")
	spawnListBox.innerHTML = ""
	spawnDiv=""
	totalSoldierFound = 0
	totalSpearFound = 0
	for(q = 0; q < spawnList.length; q++) {
		if(spawnList[q] == "soldier") spawnDivCost = round2(placeUnitTerritoryCost[0] + placeUnitIncreaseRatio[0]* totalSoldierFound++)
		if(spawnList[q] == "spear") spawnDivCost = round2(placeUnitTerritoryCost[1] + placeUnitIncreaseRatio[1] * totalSpearFound++)
		spawnDiv+=  "<div class='spawnDiv'>"+
			"<div class='constructionBar' id='constructionRed"+q+"' style='background-color:rgba(230, 69, 69, 0.82);'></div>"+
			"<div class='constructionBar' id='constructionGrey"+q+"'></div>"+
			"<img height='23' width='29' src='pics/"+spawnList[q]+".png' class='spawnListPic'>"+
			"<div style='position:absolute;left:70px;color:black;font-size:20px;'>"+spawnDivCost+"</div>"+
			((q>0&&spawnList[q-1]!=spawnList[q])?"<img height='21' width='21' onclick='shiftPlaceListUp(this)' src='pics/arrow.png' class='listPic'>":"")+
			((q<spawnList.length-1&&spawnList[q+1]!=spawnList[q])?"<img height='21' width='21' onclick='shiftPlaceListDown(this)' src='pics/Darrow.png' class='listPic' style='left:186px'>":"")+
			"<img height='21' width='21' onclick='removeFromPlaceList(this)' src='pics/x.png' class='listPic' style='left:230px'>"+
		"</div>"
	}
	spawnListBox.innerHTML=spawnDiv
	updateConstructionVisual()
}

function updatePlaceVisuals() {
	document.getElementById("soldierPlaceCost").innerHTML=round2(placeUnitTerritoryCost[0] + placeUnitIncreaseRatio[0] * findNumTypeInList("soldier"));
	document.getElementById("spearPlaceCost").innerHTML=round2(placeUnitTerritoryCost[1] + placeUnitIncreaseRatio[1] * findNumTypeInList("spear"));
}

function updateWallHealthVisuals() {
	document.getElementById("wallHealth").innerHTML = intToString(wallHealth)
	document.getElementById("enemyWallHealth").innerHTML = intToString(enemyWallHealth)
	document.getElementById("compete3").style.width = wallHealth / wallHealthInitial * 100 + "%";
	document.getElementById("compete4").style.width = (1-wallHealth / wallHealthInitial) * 100 + "%";
	document.getElementById("compete5").style.width = enemyWallHealth / enemyWallHealthInitial * 100 + "%";
	document.getElementById("compete6").style.width = (1-enemyWallHealth / enemyWallHealthInitial) * 100 + "%";
	document.getElementById("fenceHealth").innerHTML = intToString(fenceHealth);
	document.getElementById("enemyFenceHealth").innerHTML = intToString(enemyFenceHealth);
}

function changeBuildingScreen(buildingType) {
	start = ""
	if(buildingType == "wall") {
		start = "<img src ='pics/smallwall.png' height='50' width='50' /><br>"
		start += addBuildingButton("wall", "Wall Health", 0)
	}
	if(buildingType == "fence") {
		start = "<img src ='pics/smallfence.png' height='50' width='25' /><br>"
		start += addBuildingButton("fence", "Fence Stacks", 0)
	}
	start += ""
	document.getElementById("buildingUpgradesBox").innerHTML = start
	clickBuildingBuyButton(-1, buildingType)
}
function addBuildingButton(type, name, num) {
	return "<div class='buyButton' onclick='clickBuildingBuyButton("+num+" , \""+type+"\")'"+"  id='buyBuildingButton"+num+"' style='width:80%;border:2px solid;' >"+
		"<div class='buyName'>"+name+"</div>"+
		"<div class='buyVal' id='buyBuilding"+num+"'>3</div>"+
		"<div class='costBox'><div class='goldIcon'></div><div id='costBuilding"+num+"' class='number'>400</div></div>"+
	"</div>"
}

function changeUnitScreen(unit) {
	type = "error"
	if(typeof unit.id == 'undefined') {
		if(unit == "soldier") {
			type = "soldier"
		}
		if(unit == "spear") {
			type = "spear"
		}
	} else {
		type = unit.type
	}
	if(type==="error") {
		document.getElementById("unitUpgradesBox").innerHTML="";
		return
	}
	typeNum = convertTypeToNum(type, "right");
	commonStart = "<div class='unitContainer nohover' style='cursor:auto;display:block;position:initial;margin-left:auto;margin-right:auto;margin-top:5px;height:30px;'>";
	next = "<img src='pics/"+type+".png' img height='30' width='50'></div></div>";
	next2 =  "<div class='buySpawnRate' style='margin-bottom:8px;' onclick='buyUpgradePoint(\""+type+"\")'>"+
			"<div class='icon'>"+addIcon(7)+"</div>"+
			"<div class='costBox'><div class='goldIcon'></div><div id='cost' class='number'>400</div></div>"+
			"<div class='buyName' >Buy an <div style='color:teal;'>Upgrade Point</div></div>"+
			"<div class='buyVal' id='buy'>3</div>"+
		"</div>"
	next25 = "<div id='slider'></div>";
	next3 = "<div style='width:40%;height:40px;vertical-align:top;'>"
	button1 = addButton(type, "Damage", 1)
	next4 = "</div><div style='width:40%;height:40px;vertical-align:top;'>"
	button4 = addButton(type, "Max Health", 4)
	next5= "</div><div style='font-size:14px;margin-bottom:14px;margin-right:60px;'>Total dead: <div id='totalDead"+typeNum+"' style='color:black'>5f</div></div>"+
		"<div style='font-size:14px;margin-bottom:14px;'>Bonus from dead units: x<div id='deadUnitBonus"+typeNum+"' style='color:black'>5f</div></div>"+
		"<div id='spawnRateContainer' class='buySpawnRate' onclick='clickBuySpawnRate(\""+type+"\")'>"+
		"<div class='icon'>"+addIcon(0)+"</div>"+
		"<div class='costBox'><div class='goldIcon'></div><div id='costSpawn' class='number'>400</div></div>"+
		"<div class='buyName'>Spawn Rate</div>"+
		"<div class='buyIncreaseAmount' id='"+type+"Increase0'>5% faster</div>"+
		"<div class='buyVal' style='color:rgb(102, 102, 102);'>Spawn units of this type every <div id='buy02' style='color:black;'></div> seconds.</div>"+
	"</div>"

	next6="<div style='width:40%;height:110px;vertical-align:top;'>"
	button2 = addButton(type, "Attack Speed", 2)
	button3 = addButton(type, "Move Speed", 3)
	next7="</div><div style='width:40%;height:110px;vertical-align:top;'>"
	button5 = addButton(type, "Armor", 5)
	button6 = addButton(type, "Range", 6)
	finish ="</div>"

	curUnitScreen = typeNum
	document.getElementById("unitUpgradesBox").innerHTML = commonStart+next+next2+next25+next3+button1+next4+button4+next5+next6+button2+button3+next7+button5+button6+finish;
	if(upgradePointsInitial[typeNum] > 0)
		slider('slider');
	//document.getElementById("unitUpgradesBox").style.display="block"
	//document.getElementById("defaultScreen").style.display="none"
	updateSpawnRate2(type)
	updateStatusUpgrades(unit, type)
	updateDeadUnitBonus()
	if(buttonsToClick) {
		clickedOKButton()
	}
}

function slider(id) {
    $("#" + id).slider({
        value: 1,
        min: 0,
        max: upgradePointsInitial[typeNum],
        step: 1,
        slide: function(event, ui) {
			unitPointValues[typeNum][0] = upgradePointsInitial[typeNum] - ui.value;
			unitPointValues[typeNum][3] = ui.value;
			handleBuyAmounts(typeNum, 0)
			handleBuyAmounts(typeNum, 3)
			updateStatusUpgrades("", type)
        }
    });
}

function updateSpawnRate2(type) {
	if(type == "soldier") numToUpdate = 0
	if(type == "spear") numToUpdate = 1
	document.getElementById("buy02").innerHTML = round2(spawnRate[numToUpdate])
}

function updateSpawnRate() {
	unit = getUnitById(curClickedUnit)
	if(document.getElementById("buy0")) {
		document.getElementById("buy02").innerHTML = round2(spawnRate[unit.typeNum/2])
	}
}

function updateConstructionWorkers() {
	document.getElementById("costructionRateCost").innerHTML = upgradeConstructionRateCost
}

function updateStatusUpgrades(unit, type) {
	typeNum = convertTypeToNum(type, "right")
	document.getElementById("buy").innerHTML=upgradePointsInitial[typeNum];
	document.getElementById("cost").innerHTML=ceil(unitCosts[typeNum]);
	document.getElementById("costSpawn").innerHTML=ceil(costSpawnRate[typeNum]);
	if(upgradePointsInitial[typeNum] && document.getElementById("slider").children.length == 0)
		slider('slider');
	if(upgradePointsInitial[typeNum])
		$("#slider").slider('value', unitPointValues[typeNum][3]);
	for(e = 1; e < unitValues[typeNum].length+1; e++) {
		if(document.getElementById("points"+e)) document.getElementById("points"+e).innerHTML=unitPointValues[typeNum][e-1]
		document.getElementById("buy"+e).innerHTML=(e==1||e==4)?round2(unitValues[typeNum][e-1]*deadUnitBonus[typeNum]):unitValues[typeNum][e-1]
	}
	updateSpawnRate2(type)
}

function convertTypeToNum(type, direction) {
	if(type == "soldier" && direction == "right") return 0;
	if(type == "soldier" && direction != "right") return 1;
	if(type == "spear" && direction == "right") return 2;
	if(type == "spear" && direction != "right") return 3;
	return -1;
}

function addButton(type, name, num) {
	return "<div class='buyButton "+(num == 1 || num == 4 ? "' onclick='clickBuyButton("+num+" , \""+type+"\")'" : "nohover'")+"  id='buyButton"+num+"'>"+
		"<div class='icon'>"+addIcon(num)+"</div>"+
		"<div class='buyName'>"+name+"</div>"+
		"<div class='buyVal' id='buy"+num+"'>3</div>"+
		(num == 1 || num == 4 ? "<div class='upgradePoints' id='points"+num+"'>3</div>" : "") +
	"</div>"
}

function updateHover(id) {
	unitToDisplay = getUnitById(id)
	if(!unitToDisplay) return

	document.getElementById("curDamageDone").innerHTML = round2(unitToDisplay.totalDamageDone);
	document.getElementById("curKills").innerHTML = unitToDisplay.kills;
	document.getElementById("curHealth").innerHTML = round1(unitToDisplay.curHealth);
	document.getElementById("curUnitCount").innerHTML = unitToDisplay.unitCount;
	document.getElementById("curTimeAlive").innerHTML = round((totalTicks - unitToDisplay.timeAlive)/20)+"s";
	document.getElementById("curActualHealth").innerHTML = round1(unitToDisplay.actualMaxHealth);
	document.getElementById("totalHealth").innerHTML = round1((unitToDisplay.unitCount-1)*unitToDisplay.actualMaxHealth+unitToDisplay.curHealth);
	document.getElementById("curDamage").innerHTML = round2(unitToDisplay.damage);
	document.getElementById("totalDamage").innerHTML = round2(unitToDisplay.damage*unitToDisplay.unitCount);
}

function addIcon(num) {
	if(num == 0) {
		return "<img src='pics/camp.png' height='100%' width='100%'>"
	}
	if(num == 1) {
		return "<img src='pics/sword.png' height='100%' width='100%'>"
	}
	if(num == 2) {
		return "<img src='pics/fast.png' height='100%' width='100%'>"
	}
	if(num == 3) {
		return "<img src='pics/foot.png' height='100%' width='100%'>"
	}
	if(num == 4) {
		return "<img src='pics/heart.png' height='100%' width='100%'>"
	}
	if(num == 5) {
		return "<img src='pics/shield.png' height='100%' width='100%'>"
	}
	if(num == 6) {
		return "<img src='pics/range.png' height='100%' width='100%'>"
	}
	if(num == 7) {
		return "<img src='pics/arrow.png' height='100%' width='100%'>"
	}
	return "";
}

function handleLineAmounts(lineCount) {
	if(lineCount == 1) offset = 120;
	if(lineCount == 2) offset = 105;
	if(lineCount == 3) offset = 70;
	if(lineCount == 4) offset = 55;
	if(lineCount == 5) offset = 30;
	if(lineCount == 6) offset = 0;
	offset+=37;
	document.getElementById("fightTime").style.marginTop = offset+"px";
	for(m = 1; m < 7; m++)
		document.getElementById("line"+m).style.display="none";
	document.getElementById("line"+lineCount).style.display="inline-block";
	if(lineCount == 1) {
	}
	if(lineCount == 2) {
	}
	if(lineCount == 3) {
	}
	if(lineCount == 4) {
	}
	if(lineCount == 5) {
	}
	if(lineCount == 6) {
	}
}


//TODO: change the hardcoded values to relative based on canvas width

//Methods to set up the data for canvas drawing
function drawSpearLineToWall(unit1) {
	storedArrowVisuals.push({x1:(unit1.pos+7)*11.9+22, y1:(unit1.line)*54+60+offset, x2:(unit1.pos+7)*11.9+151, y2:(unit1.line)*54+60+offset, curCount:4, count:4});
}

function drawLightning(unit1, unit2) {
	storedLightningVisuals.push({x1:(unit1.pos+7)*11.9+15, y1:(unit1.line)*54+60+offset, x2:(unit2.pos+7)*11.9+15, y2:(unit2.line)*54+60+offset, curCount:16});
}

//TODO: change map values to use this type of arrays
function drawSpearLine(unit1, unit2) {
	storedArrowVisuals.push({x1:(unit1.pos+7)*11.9+22, y1:(unit1.line)*54+60+offset, x2:(unit2.pos+7)*11.9+11, y2:(unit2.line)*54+60+offset, curCount:4, count:4});
}

//Draws the lines that move around a lot
function redrawStoredLines(onTick){
	ctx.clearRect(0,0,c.width,c.height);
	// redraw each stored line
	for(i=storedArrowVisuals.length - 1; i>=0; i--){
		if(onTick) {
			if(storedArrowVisuals[i].curCount <= 0) {
				storedArrowVisuals.splice(i, 1);
				continue;
			}
			storedArrowVisuals[i].curCount--;
		}
		ctx.strokeStyle="#000000"
		ctx.beginPath();
		x3 = storedArrowVisuals[i].x1+((storedArrowVisuals[i].x2-storedArrowVisuals[i].x1)/storedArrowVisuals[i].count*(storedArrowVisuals[i].count - storedArrowVisuals[i].curCount)) - 4
		y3 = storedArrowVisuals[i].y1+((storedArrowVisuals[i].y2-storedArrowVisuals[i].y1)/storedArrowVisuals[i].count*(storedArrowVisuals[i].count - storedArrowVisuals[i].curCount))
		//console.log(storedArrowVisuals[i].x1+", "+storedArrowVisuals[i].y1+", "+storedArrowVisuals[i].x2+", "+storedArrowVisuals[i].y2+", " + storedArrowVisuals[i].curCount+", "+x3+", "+y3)
		ctx.moveTo(x3,y3);
		ctx.lineTo(x3+8,y3);
		ctx.lineWidth = 3;
		ctx.stroke();
	}
	for(i=storedLightningVisuals.length-1; i>=0; i--) {
		if(onTick) {
			if(storedLightningVisuals[i].curCount <= 0) {
				storedLightningVisuals.splice(i, 1);
				continue;
			}
			storedLightningVisuals[i].curCount--;
		}
		ctx.strokeStyle="rgba(161, 255, 251, "+storedLightningVisuals[i].curCount/16+")"
		ctx.lineWidth=8
		ctx.beginPath();
		ctx.moveTo(storedLightningVisuals[i].x1, storedLightningVisuals[i].y1)
		ctx.lineTo(storedLightningVisuals[i].x2, storedLightningVisuals[i].y2)
		ctx.stroke();
	}
}


function switchMainTab(switchTo) {
	currentTab = switchTo
	hideAllInfo()
	switch(switchTo) {
		case 0: //war
			document.getElementById("warSpace").style.display = "inline-block";
			document.getElementById("manaSpace").style.display = "inline-block";
			document.getElementById("warTab").style.backgroundColor="rgb(142, 212, 142)";
		break;
		case 1: //map
			document.getElementById("mapSpace").style.display = "inline-block";
			document.getElementById("mapTab").style.backgroundColor="rgb(142, 212, 142)";
		break;
		case 2: //places
			document.getElementById("placesSpace").style.display = "inline-block";
			document.getElementById("territoryTab").style.backgroundColor="rgb(142, 212, 142)";
		break;
		case 3: //units
			document.getElementById("unitsSpace").style.display = "inline-block";
			document.getElementById("unitTab").style.backgroundColor="rgb(142, 212, 142)";
		break;
		case 4: //buildings
			document.getElementById("buildingsSpace").style.display = "inline-block";
			document.getElementById("buildingsTab").style.backgroundColor="rgb(142, 212, 142)";
		break;
		case 5: //spells
			document.getElementById("manaTab").style.backgroundColor="rgb(142, 212, 142)";
			document.getElementById("manaSpace").style.display = "inline-block";
			document.getElementById("spellUpgradeSpace").style.display = "inline-block";
		break;
		case 6: //mana
			document.getElementById("optionsTab").style.backgroundColor="rgb(142, 212, 142)";
			document.getElementById("optionsPage").style.display = "inline-block";
		break;
	}
}

function hideAllInfo() {
	document.getElementById("warSpace").style.display = "none";
	document.getElementById("mapSpace").style.display = "none";
	document.getElementById("manaSpace").style.display = "none";
	document.getElementById("spellUpgradeSpace").style.display = "none";
	document.getElementById("unitsSpace").style.display = "none";
	document.getElementById("buildingsSpace").style.display = "none";
	document.getElementById("placesSpace").style.display = "none";
	document.getElementById("optionsPage").style.display = "none";

	document.getElementById("warTab").style.backgroundColor="white";
	document.getElementById("mapTab").style.backgroundColor="white";
	document.getElementById("territoryTab").style.backgroundColor="white";
	document.getElementById("unitTab").style.backgroundColor="white";
	document.getElementById("buildingsTab").style.backgroundColor="white";
	document.getElementById("manaTab").style.backgroundColor="white";
	document.getElementById("optionsTab").style.backgroundColor="white";
}


var c = document.getElementById("damageLines");
var ctx = c.getContext("2d");