var game = new Phaser.Game(800, 600, Phaser.AUTO, 'Cliffual', {preload: preload, create: create, update: update});

var cliffs = [];
var players = [];
var users = {};
var wind, music;

function preload(){
	game.stage.disableVisibilityChange = true;
	game.stage.backgroundColor = 0x001122;
	game.load.spritesheet('player', 'assets/img/player.png', 16, 32, 12);
	game.load.image('cliff', 'assets/img/cliff.png');
	game.load.image('bg', 'assets/img/storm.png');
	game.load.audio('wind', 'assets/audio/wind.mp3');
	game.load.audio('music', 'assets/audio/music.mp3');
}
function create(){
	game.physics.startSystem(Phaser.Physics.ARCADE);
	game.physics.arcade.checkCollision.right = false;
	game.physics.arcade.checkCollision.left = false;
	game.physics.arcade.gravity.y = 400;

	game.add.image(0, 0, 'bg');
	wind = game.add.audio('wind');
	wind.play();
	wind.loopFull(1);
	music = game.add.audio('music');
	music.loopFull(1);
	music.play();

	players = game.add.group();
    players.enableBody = true;
    players.physicsBodyType = Phaser.Physics.ARCADE;

	addCliff(0);
	addCliff(800);
	var counter = 1;
	/*setInterval(function(){
		addPlayer({username: "dummy " + counter, id:-counter++});
	}, 10000);*/
}
function addCliff(offX){
	var cliff = game.add.sprite(offX, game.height, 'cliff');
	cliff.anchor.setTo(0, 1);
	game.physics.enable(cliff);
	cliff.body.collideWorldBounds = true;
    cliff.body.immovable = true;
	cliff.body.velocity.x = -100;
	cliff.body.friction.x = 0.25;
	cliffs.push(cliff);
}
function addPlayer(user){
	if(users.hasOwnProperty(user.id))return;
	var player = players.create(100, 100, 'player');
	player.body.velocity.x = 50;
	player.canJump = false;
	users[user.id] = player;
	player.scale.setTo(2);
	player.animations.add('run');
	player.animations.play('run', 20, true);
	player.text = game.add.text(0, 0, user.username, {font: "24px Arial", fill: "#44ff99"});
	player.text.anchor.setTo(0.5);
	if($("#"+user.id).length)return;	
	console.log(user);
	var player = $(['<div class="player col-12">',
		'<span class="username" id="'+user.id+'">'+user.username+': </span>',
		'<span class="score">0</span>'
	].join(""));
	$("#players").append(player);
}
function update(){
	for(var i = 0; i < cliffs.length; i++){
		var cliff = cliffs[i];
		if(cliff.x < -cliff.width)cliff.x = game.width + 200;
		if(cliff.body.velocity.x > -600)cliff.body.velocity.x -= 0.1;
	}
	game.physics.arcade.collide(cliffs, players, handleCollision, null, this);
	players.forEach(function(player){
		if(player.y > game.height){
			player.position.setTo(100, 100);	
			player.body.velocity.x = 50;
			player.canJump = false;
		}
		player.text.position.setTo(player.position.x+player.width/2, player.position.y);
	});

	$(".player").each(function(i, user){
		var userID = parseInt($(user).find(".username").attr("id"));
		var score = Math.round(users[userID].position.x);
		$(user).find(".score").text(score);
		$(user).find(".score").attr('val', score);
	});
	$('.player').sort(function(a,b){
		return parseInt($(a).find(".score").attr('val')) < parseInt($(b).find(".score").attr('val'));
	}).appendTo("#players");
	
}
function handleCollision(cliff, player){
	if(player.body.touching.down)player.canJump = true;
}

var server = new Server();
server.on('gameID', function(ID){
	$("#gameID").text(ID);
	console.log("This games ID is '%s'", ID);
});

server.on('addPlayer', function(user){
	addPlayer(user);
});

server.on('jump', function(user){
	if(!users.hasOwnProperty(user.id))return;
	var player = users[user.id];
	if(!player.canJump)return;
	player.body.velocity.y = -200;
	player.canJump = false;
});



