var hub = $.connection.drawingHub;
hub.connection.url = "https://topsterpush.azurewebsites.net/signalr";
hub.state.id = "40240";
hub.state.name = "1";
$.connection.hub.logging = true;
hub.logging = true;

var data = [];
var buffer = [];
var paint = false;
var order = 0;
var stop = false;
var secret = null;
var timer = -1;

var canvas = document.getElementById("canvas");
canvas.width  = 500;
canvas.height = 300; 

var context = canvas.getContext("2d");

function addClick (x, y, dragging) {
	if(stop){
		return;
	}
	order++;
	var item = {x: Math.round(x), y: Math.round(y), d:dragging, o: order};
	buffer.push(item);
	data.push(item);
	
	if(buffer.length == 1){
		setTimeout(function(){ 
		    //alert(JSON.stringify(buffer));
			hub.server.add(buffer);
			buffer.splice(0,buffer.length);
		}, 100);
	}
}
function redraw () {
	clearCanvas();

	for (var i = 0; i < data.length; i++) {
		context.beginPath();
		if (data[i].d && i) {
			context.moveTo(data[i - 1].x, data[i - 1].y);
		} else {
			context.moveTo(data[i].x - 1, data[i].y);
		}
		context.lineTo(data[i].x, data[i].y);
		context.strokeStyle = "#FF0000";
		context.lineCap = "round";
		context.lineJoin = "round";
		context.lineWidth = 3;
		context.stroke();
	}
	context.closePath();
}

function press (e) {
	var mouseX = (e.changedTouches ? e.changedTouches[0].pageX : e.pageX)- this.offsetLeft,
mouseY = (e.changedTouches ? e.changedTouches[0].pageY : e.pageY)- this.offsetTop;
	paint = true;
	addClick(mouseX, mouseY, false);
	redraw();
}

function drag (e) {
	var mouseX = (e.changedTouches ? e.changedTouches[0].pageX : e.pageX)- this.offsetLeft,
		mouseY = (e.changedTouches ? e.changedTouches[0].pageY : e.pageY)- this.offsetTop;
	
	if (paint) {
		addClick(mouseX, mouseY, true);
		redraw();
	}
	e.preventDefault();
}

function release () {
	paint = false;
	redraw();
}

function cancel() {
	paint = false;
}

canvas.addEventListener("mousedown", press, false);
canvas.addEventListener("mousemove", drag, false);
canvas.addEventListener("mouseup", release);
canvas.addEventListener("mouseout", cancel, false);

canvas.addEventListener("touchstart", press, false);
canvas.addEventListener("touchmove", drag, false);
canvas.addEventListener("touchend", release, false);
canvas.addEventListener("touchcancel", cancel, false);

function clearCanvas() {
	context.clearRect(0, 0, canvas.width, canvas.height);
}

function sortData(a,b){
	return a.o-b.o;
}

hub.client.delta = function(items){
	for(var i=0;i<items.length;i++){
		data.push(items[i]);
	}
	data.sort(sortData);
	order = data[data.length-1].o;
	redraw();
};
hub.client.repaint = function(items){
	data = items;
	data.sort(sortData);
	if(data.length){
		order = data[data.length-1].o;
	}
	redraw();
};
hub.client.chat = function(name, text){
	document.getElementById("chat").innerHTML += escapeHTML(displayName(name))+": "+escapeHTML(text)+"<br/>";
	if(!stop && secret && text.trim().toUpperCase() == secret.trim().toUpperCase()){
		stop = true;
		hub.server.winner(name);
	}
};
hub.client.cleanchat = function(){
	document.getElementById("chat").innerHTML = "";
	document.getElementById("chatinput").style.visibility = "hidden";
	setTimeout(function(){
		document.getElementById("chatinput").style.visibility = "visible";
	}, 20);
	
	
};
function enterText(event){
	if (event.keyCode == 13){
		document.getElementById("submit").click();
	}
}
function escapeHTML (unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case "&":
        return "&amp;";
      case "<":
        return "&lt;";
      case "\"":
        return "&quot;";
      default:
        return "&#039;";
    }
  });
}
function sendchat(){
	var chatinput = document.getElementById("chatinput");
	if(chatinput.value){
		hub.server.chatText(chatinput.value);
		chatinput.value = "";
	}
}
function clearDraw(){
	if(!stop){
		buffer.splice(0,buffer.length);
		hub.server.clear();
	}
}
hub.client.tryStart = function(winnerName){
	if(!winnerName || winnerName && winnerName == hub.state.name){
		stop = false;
		var options = document.getElementById("possible").options;
		var length = options.length;
		var random = getRandomInt(0, length-1);
		secret = options[random].value;
		document.getElementById("status").innerHTML = 
			"Zeichne folgendes Objekt: " +//TL//
			"<strong>"+secret+"</strong>";
		document.getElementById("deleteButton").style.visibility = "visible";
		if(timer == -1){
			timer = 60;
			timerrun();
		}
	}
	else{
		stopGame();
	}
};
function timerrun(){
	if(!stop){
		if(timer>0){
			timer--;
			document.getElementById("timerdisp").innerHTML = timer + "s";
			setTimeout(timerrun, 1000);
		}
		else if(!timer){
			hub.server.noWinner();
			timer = -1;
		}
	}
}
hub.client.tryStop = function(name){
	document.getElementById("status").innerHTML = 
		displayName(name) +" malt. "+//TL//
		"Was könnte das sein?";//TL//
	stopGame();
};
hub.client.tryEnd = function(name){
	document.getElementById("status").innerHTML = 
		"Gewinner: "+displayName(name);//TL//
	var oldBg = document.getElementById("borderarea").style.background;
	document.getElementById("borderarea").style.background = "#80FF80";
	setTimeout(function(){
		document.getElementById("borderarea").style.background = oldBg;
	}, 1000);
	
	var options = document.getElementById("possible").options;
	var i;
	for (i = 0; i < options.length; i++) {
		if(options[i].value == secret){
			document.getElementById("possible").removeChild(document.getElementById("possible").children[i]);
			break;
		}
	}
	
	stopGame();
};
function displayName(name){
	if(name == hub.state.name){
		return "Du";//TL//	
	}
	return "Spieler "+name;//TL//
}
function stopGame(){
	stop = true;
	document.getElementById("deleteButton").style.visibility = "hidden";
	secret = null;
	timer = -1;
	document.getElementById("timerdisp").innerHTML = "";
}
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

$.connection.hub.start({jsonp:true, transport: "webSockets"}).done(function () {
	hub.server.register();
});
$.connection.hub.disconnected(function () {
	location.reload();
});