$(document).ready(function(){
	var x = document.getElementById("myAudio"); 
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.canvas.width = window.innerWidth / 100 * 20;
    ctx.canvas.height = window.innerHeight / 100 * 30;
    ctx.beginPath();
    ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
    /* ctx.fillStyle = "red";
    ctx.fill(); */
    function drawStar(cx,cy,spikes,outerRadius,innerRadius){
        var rot=Math.PI/2*3;
        var x=cx;
        var y=cy;
        var step=Math.PI/spikes;
  
        ctx.beginPath();
        ctx.moveTo(cx,cy-outerRadius)
        for(i=0;i<spikes;i++){
			x=cx+Math.cos(rot)*outerRadius;
			y=cy+Math.sin(rot)*outerRadius;
			ctx.lineTo(x,y)
			rot+=step
	
			x=cx+Math.cos(rot)*innerRadius;
			y=cy+Math.sin(rot)*innerRadius;
			ctx.lineTo(x,y)
			rot+=step
        }
        ctx.lineTo(cx,cy-outerRadius);
        ctx.closePath();
        ctx.lineWidth=5;
        ctx.strokeStyle='#39a9cb';
        ctx.stroke();
        ctx.fillStyle='skyblue';
        ctx.fill();
    }
  
    drawStar(ctx.canvas.width/2,ctx.canvas.height/2,5,ctx.canvas.width/3.8,0);

	function SetColor(element, className){
		element.removeClass("success");
		element.removeClass("warning");
		element.removeClass("error");
		element.addClass(className)
	}

	window.addEventListener("message", function(e){
		let event = e.data.event;
		let data = e.data.data;
		switch(event){
			case "data-panel2":
				/* if (data.canCapture == true){
					$("#panel-2 h1").text("Khu vực chiếm đóng");
					$("#panel-2 #name").text(`Tên: ${data.name}`);
					$("#panel-2 #point").text(`Điểm: ${data.point}`);
					$("#panel-2 #time").text(`Thời gian chiếm: ${data.time} giây`);
					if (data.capture != undefined){
						$("#panel-2 #capture").text(`Đang chiếm bởi: ${data.capture}`);
					}else{
						$("#panel-2 #capture").text("Chưa có ai chiếm")
					}
				}else{
					$("#panel-2 h1").text("Khu vực chiếm đóng");
					$("#panel-2 #name").text(`cần ${data.lastCapture} giây nữa để có thể chiếm`);
					$("#panel-2 #point").text(``);
					$("#panel-2 #time").text(``);
					$("#panel-2 #capture").text(``);
				} */
				let type = data.type;
				let info = data.data;
				$("#panel-2").empty();
				switch(type){
					case "blocked":
						SetColor($("#panel-2"), "error");
						$("#panel-2").append(`
							<h1>Khu vực chiếm đóng</h1>
							<h4 class="info">${info.name}</h4>
							<h4 class="info">Điểm: ${info.point}</h4>
							<h3 class="info">${info.time}</h3>
						`)
						if (info.owner){
							$("#panel-2").append(`
							<h4 class="info">Khu vực của: ${info.owner}</h4>
						`)
						}
						break;
					case "capturing":
						SetColor($("#panel-2"), "warning");
						$("#panel-2").append(`
							<h1>Khu vực chiếm đóng</h1>
							<h1 class="info">${info.time}</h1>
							<h4 class="info">${info.name}</h4>
							<h4 class="info">Điểm: ${info.point}</h4>
							<h4 class="info">Đang Chiếm Bởi: ${info.player}</h4>
						`)
						break;
					case "allow":
						SetColor($("#panel-2"), "success");
						$("#panel-2").append(`
							<h1>Khu vực chiếm đóng</h1>
							<h4 class="info">${info.name}</h4>
							<h4 class="info">Điểm: ${info.point}</h4>
							<h4 class="info">Thời gian chiếm: ${info.time} giây</h4>
							<h4 class="info">Có thể chiếm</h4>
						`)
						break;
					case "owned":
						SetColor($("#panel-2"), "warning");
						$("#panel-2").append(`
							<h1>Khu vực chiếm đóng</h1>
							<h4 class="info">${info.name}</h4>
							<h4 class="info">Điểm: ${info.point}</h4>
							<h4 class="info">Khu vực của: ${info.owner}</h4>
						`)
						break;
					case "closed":
						SetColor($("#panel-2"), "error");
						$("#panel-2").append(`
							<h1>Khu vực chiếm đóng</h1>
							<h1 class="info">Chưa mở</h1>
							<h4 class="info">${info.name}</h4>
						`)
						break;
					default:
				}
				
				
				break;
			case "toggle-panel2":
				if (data == true){
					$("#panel-2").fadeIn();
				}else{
					$("#panel-2").fadeOut();
				}
				break;
			case "data-panel3":
				$("#panel-3 h3").text(data)
				break;
			case "notification":
				SetColor($("#panel-3"), data.type);
				$("#panel-3 h3").text(data.msg);
				$("#panel-3").fadeIn();
				if(data.playSound){
					x.play();
                	x.volume = 0.1;
				}
				setTimeout(function(){
					$("#panel-3").fadeOut();
				}, 10000)
				break;
			default:
		}
	})
})