$(document).ready(function(){
    $('#name').click(function(){$(this).select()});
    
    $('#spiller').submit(function(){
        $('#name').select();
        
        // Require a name
        if ($('#name').val() == '')
            return false;
        
        // Limit to 11 players
        if ($('#field').children('.dropped').length >= 11)
            return false;
            
        var player = $('#template').clone();
        
        player.appendTo($('#field'));
        player.children('.playername').text($('#name').val());
        player.removeClass('drop')
              .addClass('dropped')
              .css('position', 'absolute')
              // .css('top', Math.floor(Math.random() * ($('#field').height()-player.height())))
              // .css('left', Math.floor(Math.random() * ($('#field').width()-player.width())))
              .css('top', Math.floor(Math.random() * 100) + 200-(player.height()/2))
              .css('left', Math.floor(Math.random() * 100) + 170-(player.width()/2))
              .css('display', 'block');

        player.draggable({
            opacity:0.4//,
            // drag: function(ev, ui) {
            //     $('#teamdescription').text(ui.position.left+','+ui.position.top);
            // }
        });

        return false;
    });
    
    // $('.edit').editable(function(value, settings){
    //     return(value);
    // });
    // 
    $('.drop').draggable({helper:'clone', revert:'invalid'});

    $('#remover').droppable({
        accept: '.dropped',
        drop: function(ev, ui) {
            // console.log('ui left '+ui.position.left);
            // console.log('ui top '+ui.position.top);
            // console.log('ui width '+ui.draggable.width());
            // console.log('ui height '+ui.draggable.height());
            if (ui.position.left+(ui.draggable.width()/2) > $('#field').width() || 
                ui.position.top+(ui.draggable.height()/2) > $('#field').height() || 
                ui.position.left+(ui.draggable.width()/2) < 0 || 
                ui.position.top+(ui.draggable.height()/2) < 0) 
            {
                ui.draggable.remove();    
            }
        }
    });

    $('#info').submit(function(){
        var playerJson = '';
        var players = $('#field').children('.dropped');
        for (var i = players.length - 1; i >= 0; i--){
            playerJson = playerJson + '{"width":'+ $(players[i]).width()+','+
                               '"left":'+ $(players[i]).position().left+','+
                               '"top":'+ $(players[i]).position().top+','+
                               '"name":"'+ $(players[i]).children('.playername').text()+'"}';
            
            if (i > 0)
                playerJson = playerJson + ',';
        };
        // console.log(playerJson);
        // $.post('render.php', {'players': playerJson}, function(data, status){alert(data.result)}, 'json');
        $('#players').empty().text(playerJson);

		var params = {};
		$(this).find("input[@checked], input[@type='text'], input[@type='hidden'], input[@type='password'], input[@type='submit'], option[@selected], textarea")
			   .filter(":enabled")
			   .each(function() {
					params[ this.name || this.id || this.parentNode.name || this.parentNode.id ] = this.value;
				});
		console.log(params);
		$.post(this.getAttribute('action'), 
			   params, 
			   function(data){
					if (data.redirect)
						document.location = data.redirect;
					else
						alert(data.error);
			   }, 
			   'json');
        return false;
    });
    
    $('#updater').click(function(){
        $('#info').submit();
    });

	$('#add').click(function(){
		$('#spiller').submit();
	});
});