function Player(){
    var walkspeed 	= 1;
    var playerId	= '#player';
    var animLayer	= '#animationLayer';
    //var xml			= 'data/waypoints.xml'


    this.createPlayer = function(){
        $(animLayer).append('<div id="' + playerId.substr(1) + '"></div>');
    };

    this.getpos = function(){
        return this.offset;

        this.x = function(){
            return this.offset.left;
        }
        this.y = function(){
            return this.offset.top;
        }
    };

    this.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);
        }
    };

    this.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));
    };

    this.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;
    };

    this.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>');
    };

};

function Utils(){

    this.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);
        }
    });
});