var points = 0;
var totalRenders = 0;
function updateDimensions( dimension ){
	less.modifyVars({"@sizeWidth":dimension+"px"});
}
function prePopulate(honeyCells){
    var honeyCells = JSON.parse(honeyCells);

    if( honeyCells.constructor === Array){
        for (var i = 0; i < honeyCells.length; i++) {
            populateHoneycomb( honeyCells[i], i );

        };
    }else{        
        populateHoneycomb( honeyCells , 0);
    }
}

function populateHoneycomb( honeyCells , index){


	// honeyCells = jsonExample;
	var height = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight;
    var width = "innerWidth" in window 
               ? window.innerWidth
               : document.documentElement.offsetWidth;

    // var cellWidth = ( height/honeyCells.height )*Math.sqrt(3);
    // if( width/honeyCells.width < height/honeyCells.height ){
    	
   	var cellWidth = (width - honeyCells.width)/(honeyCells.width+1);
    // }


    updateDimensions( cellWidth );

    var horizontal = false;
    if(width/height > 1){
    	horizontal = true;
    }

    var honeyCombHorizontal = false;

    if( honeyCells.width/honeyCells.height > 1){
    	honeyCombHorizontal = true;
    }

    var honeyComb = document.getElementById("honeyComb");
    var renderedHoneyComb = document.getElementById("renderedHoneyComb");
    renderedHoneyComb.innerHTML="";
    if( typeof honeyCells.score == "undefined"){
    	honeyCells.score = 0;
    }
    honeyComb.innerHTML = "<div class='honeycombIndex'>Index: "+index+"</div>";
    honeyComb.innerHTML += "<div class='honeycombScore'>Score:"+honeyCells.score+"</div>";


    for (var i = honeyCells.height - 1; i >= 0; i--) {
    	var even = (i%2 == 0) ? "even" : "";

    	var container = document.createElement('div');
    	container.className = "hex-row " + even;
    	honeyComb.appendChild(container);

    	for (var j = honeyCells.width - 1; j >= 0; j--) {
    		
    		var hexCell = document.createElement("div");
    		hexCell.className = "hex";

    		container.appendChild(hexCell);

    		var topPart = document.createElement('div');
    		topPart.className = "top";
    		var middlePart = document.createElement('div');
    		middlePart.className = "middle";
    		var bottomPart = document.createElement('div');
    		bottomPart.className = "bottom";

    		hexCell.appendChild(topPart);
    		hexCell.appendChild(middlePart);
    		hexCell.appendChild(bottomPart);
    		
    	};


    };

    addHexDetails( honeyCells );
    
    renderImage( index );
    totalRenders++;
   	removeHexs();


}
function addHexDetails( honeyCells ){
	setFilled( honeyCells, honeyCells.filled, "active" );

    if(honeyCells.touched){
    	setFilled( honeyCells, honeyCells.touched, "touched" );
    }
    if(honeyCells.unit){
    	setFilled( honeyCells, honeyCells.unit, "unitMember" );
    	
    }
}
function removeHexs(){
	var honeyComb = document.getElementById("honeyComb");
	honeyComb.innerHTML = "";
}
function setFilled( honeyCells, cellsToCheck, className ){
		// honeyCells = jsonExample;

	var hexCells = document.getElementsByClassName("hex");

	for (var i =  0; i < cellsToCheck.length; i++) {
			var x = cellsToCheck[i].x;
			var y = cellsToCheck[i].y;
			var filledCell = ( y * honeyCells.width ) + x;
			var honeyCell = hexCells[ filledCell ];
			honeyCell.className += " "+className;
		};	
}
function renderImage(index){
	html2canvas(document.getElementById("honeyComb")).then(function(canvas) {
		canvas.id = "rendered_"+index;
		canvas.className = "renderedCanvas";
		if(index == 0){
			canvas.className += " visible";
		}
	    document.getElementById("renderedHoneyComb").appendChild(canvas);
	    totalRenders--;
	    if( totalRenders == 0){
	    	document.getElementById("controlBar").className += " visible";
	    }

	});
}
function orderRenderedCanvas(){
	renders =  [].slice.call(renders);
	renders.sort(function(a,b){

		if(a.id.split("_")[1] == 0){
			a.className += " visible";
		}		

		if(a.id.split("_")[1] < b.id.split("_")[1] ){
			return -1;
		}
	});
	var container = document.getElementById("renderedHoneyComb");
	container.innerHTML = "";
	for (var i = 0; i < renders.length; i++) {
		container.appendChild(renders[i]);
	};
	// 17:43
}
function slideBack(){
	var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0];
	var actualId = actual.id.split("_")[1];
	if(actualId > 0){
		actualId--;
		actual.className = "renderedCanvas";
		document.getElementById("rendered_"+actualId).className += " visible";
	}
	
}

function slideForward(){
	var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0];
	var actualId = actual.id.split("_")[1];
	if(actualId < document.getElementsByClassName("renderedCanvas").length - 1){
		actualId++;
		actual.className = "renderedCanvas";
		document.getElementById("rendered_"+actualId).className += " visible";
	}
}

function hasClass(el, cls) {
  return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
}
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}
function removeId(id) {
    return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}

function toggleLeaderBoard(){
	var leaderBoard = document.getElementById("leaderBoard");
	if( hasClass(leaderBoard, "open")){
		removeClass(leaderBoard, "open");
	}else{
		leaderBoard.className += " open";
	}
	updateLeaderBoard()
}
function populateBoard(){
			var listBoard = document.getElementById("listBoard");
			var results = "";
			var rankings = data.data.rankings;
			var date = new Date();
			var seconds = date.getSeconds();
			var minutes = date.getMinutes();
			var hour = date.getHours(); 

			for (var i = rankings.length - 1; i >= 0; i--) {
				if( rankings[i].teamId == 235 ){
					results += "<p>Updated "+hour+"h "+minutes+"m "+seconds+"s</p>";
					results += "<h1>Cazziammolla Placement: "+rankings[i].rank+"</h1>";
					results += "<h2>with a score of: "+rankings[i].score+"</h2>";
					if (rankings[i].rank != points && points != 0){
						ringTheBell();
					}
					points = rankings[i].rank;

				}
			};

			var settings = data.data.settings;
			for (var i = 0; i < settings.length; i++) {
				for (var j = settings[i].rankings.length - 1; j >= 0; j--) {
					if(settings[i].rankings[j].teamId == 235){
						results += "<tr><td>"+i+"</td><td>"+j+"</td></tr>"
					}
				};
			};
			var results = "<table><thead><th>Setting</th><th>Placement</th></thead>"+results+"</table>";
			listBoard.innerHTML = results;


}
function updateLeaderBoard(){
	loadRankingJs('https://davar.icfpcontest.org/rankings.js?cachebuster='+ new Date().getTime());

	var intervalID = setInterval( function(){
		loadRankingJs('https://davar.icfpcontest.org/rankings.js?cachebuster='+ new Date().getTime());
	}, 30000);

}
function loadRankingJs(scriptName) {
	var rankingScript = document.getElementById("rankingScript");
	if ( rankingScript ){
		removeId("rankingScript");
	}
	var docHeadObj = document.getElementsByTagName("head")[0];
	var dynamicScript = document.createElement("script");
	dynamicScript.type = "text/javascript";
	dynamicScript.id = "rankingScript";
	dynamicScript.src = scriptName;
	dynamicScript.onload = function(){ populateBoard();};
	docHeadObj.appendChild(dynamicScript);

	return dynamicScript;
}

function ringTheBell(){
	document.getElementById("bell").play();
}

document.onkeydown = checkKey;

function sendJson(){
	// console.log("sending mama some json.")
	// socket.emit("jsonToParse", document.getElementById("sendHCJson").value);
	prePopulate( document.getElementById("sendHCJson").value);
}

function checkKey(e) {

    e = e || window.event;

    if ( document.getElementById("controlBar").className.indexOf("visible") != -1 ) {
	    if (e.keyCode == '37') {
	       slideBack();
	    }else if(e.keyCode == '39') {
	       slideForward();
	    }
	}
}
// jsonExample = {"height":15,"width":15,"sourceSeeds":[0],"units":[{"members":[{"x":0,"y":0}],"pivot":{"x":0,"y":0}}],"id":1,"filled":[{"x":2,"y":4},{"x":3,"y":4},{"x":4,"y":4},{"x":5,"y":4},{"x":6,"y":4},{"x":11,"y":4},{"x":2,"y":5},{"x":8,"y":5},{"x":11,"y":5},{"x":2,"y":6},{"x":11,"y":6},{"x":2,"y":7},{"x":3,"y":7},{"x":4,"y":7},{"x":8,"y":7},{"x":11,"y":7},{"x":2,"y":8},{"x":9,"y":8},{"x":11,"y":8},{"x":2,"y":9},{"x":8,"y":9},{"x":2,"y":10},{"x":3,"y":10},{"x":4,"y":10},{"x":5,"y":10},{"x":6,"y":10},{"x":9,"y":10},{"x":11,"y":10}],"sourceLength":100};