tmp

//function draw(){
//    var canvas = document.getElementById("canvas");
//    var context = canvas.getContext("2d");
//    context.fillRect(0, 500, 150, 100);
//
//    draw = function(){
//        context.fillRect(100, 500, 150, 100);
//    }
//}
(function(){
//    var canvas = document.getElementById("canvas"),
//        context = canvas.getContext("2d"),
//        requestAnimationFrame=(function(){
//            return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
//                window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
//                window.msRequestAnimationFrame ||
//                function(callback){
//                window.setTimeout(callback, 1000 / 60);
//            };
//        }),
//        start = Date.now(),
//        gameTime = 0;
//
//    canvas.onclick = function(){
//      animate(function(timePassed){
//          context.fillRect(timePassed / 5, 500, 150, 100);
//      }, 2000);
//    };
//
//    function animate(draw, duration){
//        var start = performance.now();
//
//        requestAnimationFrame(function animate(time){
//            var timePassed = time - start;
//
//            console.log(time, start);
//
//            if(timePassed > duration) timePassed = duration;
//
//            draw(timePassed);
//
//            if(timePassed < duration){
//                requestAnimationFrame(animate);
//            }
//        });
//    };
//
//    function main(){
//        var now = Date.now(),
//            timePassed = (now - start) / 1000.0;
//
//        update(timePassed);
//        render();
//
//        start = now;
//
//        requestAnimationFrame(main);
//    };
//
//    finction update(timePassed){
//        gameTime += timePassed;
//
//
//    };


    var APP = APP || {};

    APP.namespace = function (string) {
        var parts = string.split('.'),
            parent = APP,
            i;

        if(parts[0] == "APP") {
            parts = parts.slice(1);
        }

        for(i = 0; i < parts.length; i += 1) {
            if(typeof parent[parts[i]] === "undefined") {
                parent[parts[i]] = {};
            }

            parent = parent[parts[i]];
        }

        return parent;
    };


    APP.namespace("APP.controller.keyHandler");

    APP.controller.keyHandler = (function () {
        var keys = [];

        document.body.addEventListener('keydown', function(e){
            switch(e.keyCode){
                case 37:
                    keys["left"] = true;
                    break;
                case 38:
                    keys["up"] = true;
                    break;
                case 39:
                    keys["right"] = true;
                    break;
                case 40:
                    keys["down"] = true;
                    break;
            }

            //keys[e.keyCode] = true;
        });

        document.body.addEventListener('keyup', function(e){
            //keys[e.keyCode] = false;
            switch(e.keyCode){
                case 37:
                    keys["left"] = false;
                    break;
                case 38:
                    keys["up"] = false;
                    break;
                case 39:
                    keys["right"] = false;
                    break;
                case 40:
                    keys["down"] = false;
                    break;
            }
        });

        return {
            getKeys : function () {
                return keys;
            }
        };

    }());


    APP.namespace("APP.model.player");

    APP.model.player = (function () {

        var keyHandler = APP.controller.keyHandler;
            Player;
            keys = keyHandler.getKeys();

        Player = function Player(wdth, hght, x, y){
            this.width = wdth;
            this.height = hght;
            this.x = x;
            this.y = y;
            this.speed = 2;
            this.friction = 0.7;
            this.vel_x = this.vel_y = 0;
        };

        Player.prototype = {
            getX: function () {
                return this.x;
            },

            getY: function () {
                return this.y;
            },

            getWidth: function () {
                return this.width;
            },

            getHeight: function () {
                return this.height;
            },

            run: function () {
                 switch(true){
                    case keys["left"]:
                        this.vel_x -= this.speed;
                        break;

                    case keys["right"]:
                        this.vel_x += this.speed;
                        break;

                    case keys["up"]:
                        this.vel_y -= this.speed;
                        break;

                    case keys["down"]:
                        this.vel_y += this.speed;
                        break;
                }

                this.vel_x *= this.friction;
                this.vel_y *= this.friction;

                this.x += this.vel_x;
                this.y += this.vel_y;

                this.x = this.x <= 0 ? 0 : this.x;
                this.y = this.y <= 0 ? 0 : this.y;

                this.x = this.x >= canvas.width - this.width ? canvas.width - this.width : this.x;
                this.y = this.y >= canvas.height - this.height ? canvas.height - this.height : this.y;
            }
        };

        return Player;

    }());

    APP.namespace("APP.view.canvasView");

    APP.view.canvasView = (function () {
        (function(){
            var requestAnimationFrame = window.requestAnimationFrame ||
                                        window.mozRequestAnimationFrame ||
                                        window.webkitRequestAnimationFrame ||
                                        window.msRequestAnimationFrame;
            window.requestAnimationFrame = requestAnimationFrame;
        })();

         var canvas = document.getElementById('canvas'),
             context = canvas.getContext('2d'),
             player = new APP.model.player(60, 50, 0, canvas.height - 50);

        function render() {
            context.clearRect(0,0, canvas.width, canvas.height);
            context.fillRect(player.getX(), player.getY(), player.getWidth(), player.getHeight())
            player.run();
        }

        (function gameLoop(){
            render();
            requestAnimationFrame(gameLoop);
        })();

    }());






//    var canvas = document.getElementById('canvas'),
//        ctx = canvas.getContext('2d'),
//        //keys = [];



//    function Player(wdth, hght){
//        this.width = wdth;
//        this.height = hght;
//        this.x = 0;
//        this.y = canvas.height - this.height;
//        this.speed = 2;
//        this.friction = 0.7;
//        this.vel_x = this.vel_y = 0;
//    }

//    Player.prototype.load = function() {
//        ctx.fillRect(this.x, this.y, this.width, this.height);
//    };

//    Player.prototype.run = function() {
//        switch(true){
//            case keys[37]:
//                this.vel_x -= this.speed;
//                break;
//
//            case keys[39]:
//                this.vel_x += this.speed;
//                break;
//
//            case keys[38]:
//                this.vel_y -= this.speed;
//                break;
//
//            case keys[40]:
//                this.vel_y += this.speed;
//                break;
//        }
//
//        this.vel_x *= this.friction;
//        this.vel_y *= this.friction;
//
//        this.x += this.vel_x;
//        this.y += this.vel_y;
//
//        this.x = this.x <= 0 ? 0 : this.x;
//        this.y = this.y <= 0 ? 0 : this.y;
//
//        this.x = this.x >= canvas.width - this.width ? canvas.width - this.width : this.x;
//        this.y = this.y >= canvas.height - this.height ? canvas.height - this.height : this.y;
//
//    };



//    var player1 = new Player(50, 80);



}());