var actPrio = 0;
var numBallsPlaced = new Array();
for (var i = 0; i < 55; i++) {numBallsPlaced[i] = 0;}

$( function() {
    // Let the plate items be draggable
    $( "li", "#ballBox" ).draggable({
      revert: "invalid",
      containment: "document",
      helper: "clone",
      cursor: "move"
    });
  
	refreshPlate();
	refreshShelf();
});

// Send request for scanning of new balls and writing the data to the database
function updateBallPos() {
	if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
	} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
	xmlhttp.open("GET","updateBallDatabase.php?q=5",true);
	xmlhttp.send();
		
	document.getElementById('unclickableCircle').style.visibility = "visible"; 
	document.getElementById('stareBalls').style.visibility = "visible";  
	
	setTimeout(function(){
		document.getElementById('stareBalls').style.visibility = "hidden"; 
		document.getElementById('unclickableCircle').style.visibility = "hidden";
		refreshPlate();
	}, 60000);
}

// Loads all balls from the database and displays them on the plate
function refreshPlate() {
	var myObj, x, txt = "", offsetX, offsetY, scale;	

	document.getElementById("ballBox").innerHTML = "";	// Clear plate first
	
	if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
	} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
	xmlhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			myObj = JSON.parse(this.responseText);
			offsetX = 300+51;
			offsetY = 300+51;
			scale = 2.62;
			for (x in myObj) {
				// Calculate ball-position on plate in website
				myObj[x].pos_x = offsetX + myObj[x].pos_x * scale;
				myObj[x].pos_y = offsetY + myObj[x].pos_y * scale;
				$("<div id='" + myObj[x].pos_id + "' class='ball' style='top: " + myObj[x].pos_y + "px; left: " + myObj[x].pos_x +"px; background-color: " + myObj[x].ball_color + ";'></div>")
				.appendTo('#ballBox').attr('ballID', myObj[x].pos_id).draggable({
					  revert: "invalid",
					  containment: "document",
					});
				document.getElementById(myObj[x].pos_id).style.cursor = "grab";
			}
		}
	};
	xmlhttp.open("GET","updateBallDatabase.php?q=0",true);
	xmlhttp.send();
}

// Loads all balls from the database and displays them in the shelf
function refreshShelf() {
	var myObj, x;
	var id = 0;

  	document.getElementById("shelfBox").innerHTML = "";		// Clear shelf first
	for (var i = 0; i < 35; i++) {numBallsPlaced[i] = 0;}	// Init array on refresh
	for (var i = 10; i < 35; i++) {
		if(i%5 == 0 && i%10 != 0) {							// Display 5 traces per shelf
			i = i + 5;
			$('<br>').appendTo('#shelfBox');
		}
		id = i + 1;
		$('<div class="shelf" id="shelf' + id + '" ></div>').data('number', i).attr('section', id).appendTo('#shelfBox').droppable({
			  accept: "#ballBox > div",
			  classes: { "ui-droppable-active": "ui-state-highlight" },
			  drop: handleBallDrop
		});
	}

	if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
	} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
	xmlhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
		        myObj = JSON.parse(this.responseText);
				for (x in myObj) {
					$("<div id='" + myObj[x].pos_id + "' class='ball' style='position: relative; left: 13px; background-color: " + myObj[x].ball_color + ";'></div>")
					.appendTo('#shelf'+ myObj[x].ball_targetPos + '').attr('ballID', myObj[x].pos_id);
					numBallsPlaced[myObj[x].ball_targetPos]++;
					if(numBallsPlaced[myObj[x].ball_targetPos] >= 5) {
						$("#shelf" + myObj[x].ball_targetPos).droppable({accept: "",}); 		//Prevent balls from being dropped if shelf is already full
					}
				}
		}
	};
	xmlhttp.open("GET","updateBallDatabase.php?q=3",true);
	xmlhttp.send();
}

// Puts all balls from the shelf back on the plate (in the database)
function emptyShelf(str) {
	if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
	} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
	xmlhttp.open("GET","updateBallDatabase.php?q=2",true);
	xmlhttp.send();
	
	var i = 0;
	xmlhttp.onreadystatechange = function() {
			i++;
			if (i == 3) {
				refreshShelf();
				refreshPlate();
			}
	};
}

// If a ball is dropped, it is replaced and that is wirtten to the database
function handleBallDrop(event, ui) {
	$item = ui.draggable;
	var ballID = $item.attr('ballID');
	var dropID = $(this).attr('section');
	var live = 0;

	//if (dropID > 10 && dropID < 20) dropID + 20;
	//if (dropID > 30 && dropID < 40) dropID - 20;
	
	// Drop ball and change behaviour and style
	$item.appendTo(this).fadeIn();
	ui.draggable.draggable('disable');
	document.getElementById(ballID).style.cursor = "context-menu";
	document.getElementById(ballID).style.position = "relative";
	document.getElementById(ballID).style.top = "0px"; 
	document.getElementById(ballID).style.left = "13px"; 
	
	numBallsPlaced[dropID] = numBallsPlaced[dropID] + 1;
	
	if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
	} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

	if (document.getElementById("myonoffswitch").checked == true) live = 1;
	
	xmlhttp.open("GET","updateBallDatabase.php?q=1&ballID=" + ballID + "&shelfID=" + dropID + "&prio=" + actPrio + "&live=" + live,true);
	actPrio++;
	if(numBallsPlaced[dropID] >= 5) {
		$("#shelf" + dropID).droppable({accept: "",}); 		//Prevent balls from being dropped if shelf is already full
	}
	xmlhttp.send();
	document.getElementById('unclickableCircle').style.visibility = "visible"; 
	document.getElementById('playBalls').style.visibility = "visible"; 
	setTimeout(function(){
		document.getElementById('unclickableCircle').style.visibility = "hidden"; 
		document.getElementById('playBalls').style.visibility = "hidden"; 
	}, 15000);
}

function autoSort(){
	emptyShelf();
	
	setTimeout(function(){
		if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
		} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
		xmlhttp.open("GET","updateBallDatabase.php?q=4",true);
		xmlhttp.send();
		
		document.getElementById('unclickableCircle').style.visibility = "visible"; 
		document.getElementById('playBalls').style.visibility = "visible"; 
		
		var i = 0;
		xmlhttp.onreadystatechange = function() {
			i++;
			if (i == 3){
				refreshPlate();
				refreshShelf();
				document.getElementById('unclickableCircle').style.visibility = "hidden"; 
				document.getElementById('playBalls').style.visibility = "hidden"; 
				//location.reload(); 
				//console.log("A");
			}
		};
	}, 1000);
}

function startSorting(){
	if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
	} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
	xmlhttp.open("GET","updateBallDatabase.php?q=6",true);
	xmlhttp.send();
	alert("Your data has been sent successfully. The robot will start sorting soon.");
}