<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>Option</title>

        <style>
            body { margin: 0; }
            #option.window { width: 164px; }
            #option_area { overflow: hidden; padding: 0 2px 2px; }
            #option_area img { margin: 5px; }
            .option-container {
                margin: 0 auto;
                width: 100px;
            }
            .option { float: none; width: 100px; margin: 4px 0px; }
        </style>
    </head>
    <body>

        <div id="option" class="window" data-handle="option">

            <script data-template-name="option" type="text/x-handlebars">
                <div class="option-container">
                    <button class="option" {{action "settings" target="view"}}>Settings</button>
                    <div class="clear"></div>
                    <button class="option" {{action "tutorial" target="view"}}>Tutorial</button>
                    <div class="clear"></div>
                    <button class="option" {{action "saveAndExit" target="view"}}>Save and Exit</button>
                </div>
            </script>

            <div id="option_area"></div>
        </div>

        <script type="text/javascript">

            App = Ember.Application.create();

            $(document).bind('creaWindowLoaded', function() {
                App.option = Ember.Object.create();

                App.OptionView = Ember.View.extend({
                    templateName: 'option',
                    settings: function() {
                        Crea.invoke("settingsClick");
                    },
                    tutorial: function() {
                        Crea.invoke("tutorialClick");
                    },
                    saveAndExit: function() {
                        Crea.invoke("saveAndExitClick");
                    }
                });

                var view = App.OptionView.create();

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

    </body>
</html>