var cellSize = 40;
var nx = #{toJSON $ fst boardSize};
var ny = #{toJSON $ snd boardSize};
var map;
var safetyMargin = 1;
var shipDef = ShipDef.fromList(#{toJSON fleetShips});
var shipLenTD = {};

$(window).load(function() {
	// setup canvas
	var mapElem = document.getElementById("map");

	map = new Map(mapElem, nx, ny, cellSize, shipDef);
	map.safetyMargin = 1;
	map.shipDef.onChanged.add(shipDefChanged);

	// setup buttons
	$("#btnReset").click(function() {
		map.reset();
	});
	$("#btnRandom").click(function() {
		placeRandom();
	});
	// setup table
	for (var i = 0; i < shipDef.shipTypes.length; i++) {
		var len = shipDef.shipTypes[i];
		var td1 = $(document.createElement('td'));
		var td2 = $(document.createElement('td'));
		var tr = $(document.createElement('tr'));
		td1.text(len);
		td2.text(shipDef.shipCount(len));
		shipLenTD[len] = td2;
		tr.append(td1);
		tr.append(td2);
		$('#status tbody').append(tr);
	};
	shipDefChanged();
});

function placeRandom() {
	$.ajax({
		url: "@{PlaceShipsRndR}",
		type: "POST",
		dataType: "json",
		data: { fleetData: JSON.stringify(map.ships) }
	}).done(function(shipData) {
		if (0 == shipData.length) {
			alert(#{toJSON $ messageRender MsgNoPossiblePlacement});
			return;
		}

		map.reset();
		// Extract relevant data (x,y,size, orientation) from the fleet
		for(var i = 0; i < shipData.length; i++) {
			var ship = new Ship (
				shipData[i].X,
				shipData[i].Y,
				shipData[i].Size,
				shipData[i].Orientation);
			map.ships.push(ship);
			map.shipDef.takeShip(ship.Size);
		}
		// Fill in the form so we can use the fleet in the game, then update screen:
		$("#fleetData").val(JSON.stringify(map.ships));
		shipDefChanged();
		map.redraw();
	});
}

function shipDefChanged() {
	for(var i = 0; i < shipDef.shipTypes.length; i++) {
		var len = shipDef.shipTypes[i];
		shipLenTD[len].text(shipDef.shipCount(len));
	}
	var total = shipDef.total();
	$("#tdTotalShips").text(total);
	if(total == 0) {
		var jsonShips = JSON.stringify(map.ships);
		$("#fleetData").val(jsonShips);
		$("#btnSubmit").attr('disabled' , false);
	} else {
		$("#btnSubmit").attr('disabled' , true);
	}
}