<html>
    <head>

        <link rel="stylesheet" href="../css/style.css" type="text/css" />

        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/handlebars.js"></script>
        <script type="text/javascript" src="../js/ember.js"></script>
        <script type="text/javascript" src="../js/common.js"></script>

        <title>Info</title>

        <style>
            body { margin: 0; }
            #info.window { width: 100%; }
            #info_area { overflow: hidden; padding: 0 2px 2px; }
            #info_area img { margin: 5px; }
        </style>
    </head>
    <body>

        <div id="info" class="window" data-handle="Info">

            <script data-template-name="info" type="text/x-handlebars">
                <div><span>FPS: {{App.info.fps}}</span></div>
                <div><span>Segment: {{App.info.segment}}</span></div>
                <div><span>Time: {{App.info.gametime}}</span></div>
                <div><span>Monsters: {{App.info.monsters}}</span></div>
                <div><span>Spawners: {{App.info.spawners}}</span></div>
                <div><span>Water: {{App.info.automata}}</span></div>
                <div><span>Cursor Pixel Position: {{App.info.cursor_pixel_position}}</span></div>
                <div><span>Cursor Tile Position: {{App.info.cursor_tile_position}}</span></div>
            </script>

            <div id="info_area"></div>

        </div>

        <script type="text/javascript">

            App = Ember.Application.create();

            $(document).bind('creaWindowLoaded', function() {
                App.info = Ember.Object.create({
                    fps: 0,
                    segment: 0,
                    gametime: 0,
                    monsters: 0,
                    spawners: 0,
                    cursor_position: 0,
                });

                App.InfoView = Ember.View.extend({
                    templateName: 'info'
                });

                var view = App.InfoView.create();

                view.appendTo("#info_area");
                populate();
            });
        </script>

    </body>
</html>
