var Player = {
    walkspeed: 1,
    playerId: '#player',
    animLayer: '#animationLayer',
    createPlayer: function() {
        $(animLayer).append('<div id="' + playerId.substr(1) + '"></div>');
    },
    getPos: function() {
        return this.offset;
    },
    getX: function() {
        return this.offset.left;
    },
    getY: function() {
        return this.offset.top;
    },
    path: function(id) {
        var waypoints = paths[id - 1];

        //console.log(waypoints);

        $(waypoints).find('point').each(function () {
            var x = $(this).find('x').text();
            var y = $(this).find('y').text();

            player.move(x, y);
        });


        var amount = paths.length - 1; // 0 correction
        for (i = 0; i <= amount; i++) {
            var value = waypoints[i]; // get coords
            //alert(value);
        }
    },
    move: function(x, y){
        console.log("moving");

        this.x = x;
        this.y = y;

        utils = new Utils();

        var h = utils.hyp(x, y);
        var dur = (h * 10) / walkspeed;

        $("#player").animate({
                left: x,
                top: y
            }, dur, 'linear',
            function() {
                $(playerId).html(player.direction(0, 0));
            });

        //$(playerId).html(player.direction(x, y));
    },
    direction: function(x, y){
        curPos = player.currentPos();

        var a = Math.atan2(-(curPos[1] - y), (curPos[0] - x));
        var angle = a * (180 / Math.PI);

        return angle;
    },
    debug: function() {
        console.log(player.getpos.x);

        $('body').append('<div id="debug">');
        $('#debug').append('<ul>');
        $('#debug ul').append('<li>playerID: ' + playerId + '</li>');
        $('#debug ul').append('<li>currentPos: ' + player.getpos.x + '</li>');
        $('#debug ul').append('<li>targetPos:</li>');
        $('#debug ul').append('<li>playerSpeed:</li>');
        $('#debug ul').append('<li>playerDirection:</li>');
        $('#debug ul').append('<li>movementDuration:</li>');
        $('#debug').append('<a href="#" id="create">Create</a>');
        $('#debug').append('<a href="#" id="execute">Execute animation</a>');
    }
}

var Utils = {
    hyp: function(x, y){
        // Bereken hypotenuse - breedte*breedte + hoogte*hoogte
        var hyp = Math.sqrt(x * x + y * y);
        // Rond af
        var r = Math.round(hyp);

        return r;
    }
}

//alert(waypoints);

$(document).ready(function() {
    $('#animationLayer').live('click', function() {

        player = new Player();
        player.debug();
        $('#animationLayer').die('click');
    });
    $('#create').live('click', function() {

        player.createPlayer();
        $('#debug a#create').die('click');
    });
    $('#execute').live('click', function() {

        console.log(player.currentPos());
        player.path(1);
    });

    $.ajax({
        type: 'GET',
        url: 'data/paths.xml',
        dataType: 'xml',
        error: (function() {
            alert("error loading paths");
        }),
        success: function(xml) {

            paths = $(xml).find('path').each(function () {

                i = $(this).find('id');

                w = $(this).find('waypoints').each(function () {
                    $(this).find('x');
                    $(this).find('y');
                });
            });
            //console.log(paths);
        }
    });
});