<html>
    <head>

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

        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/jquery-ui.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>Settings</title>

        <style>
            body { margin: 0; }
            #settings.window { width: 250px; }
            #settings_area { overflow: hidden; padding: 0 2px 2px; }

            .option-label {
                float: left;
            }

            .volume-slider {
                float: right;
                width: 118px;
                margin: 5 0px;
            }

            .option {
                padding: 8px 0px;
            }

            .ui-slider-horizontal { height: 5px; }
            .volume-slider .ui-slider-range { background: #FFF; border-color: #ADADAD; }
            .volume-slider .ui-slider-handle { border-color: #ADADAD; width: .6em; height: 0.8em; }

            .resolutions {
                float: right;
            }

            .arrow {
                text-align: none;
                position: relative;
                top: 2px;
            }

            .arrow.left {
                -webkit-transform: scaleX(-1);
                left: 0px;
            }

            .resolution-text {
                display: inline-block;
                text-align: center;
                width: 90px;
                font-size: 14px;
            }

        </style>
    </head>
    <body>

        <div id="settings" class="window with-header">

        <script data-template-name="settings" type="text/x-handlebars">
                <div class="option">
                    <span class="serif option-label">Resolution</span>
                    <div class="resolutions">
                        <img class="arrow left" {{action "previousResolution" target="App.settings"}} src="../images/arrow.png"></img>
                        <span class="resolution-text serif">{{App.settings.resolution}}</span>
                        <img class="arrow" {{action "nextResolution" target="App.settings"}} src="../images/arrow.png"></img>
                    </div>
                </div>
                <div style="clear: both;"></div>
                <div class="option">
                    <label class="serif">
                        Fullscreen
                        {{view App.ToggleButton id='fullscreen' checkedBinding="App.settings.fullscreen"}}
                    </label>
                </div>
                <div class="option">
                    <button {{action "ok" target="view"}}>OK</button>
                    <button {{action "apply" target="view"}}>Apply</button>
                    <button {{action "cancel" target="view"}}>Cancel</button>
                </div>
            </script>

            <div class="header serif">
                <div style="text-align: center;">Settings</div>
            </div>
                <div id="settings_area">
                    <div class="option">
                        <span class="serif option-label">Master Volume</span>
                        <div id="master" class="volume-slider"></div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="option">
                        <span class="serif option-label">Music Volume</span>
                        <div id="music" class="volume-slider"></div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="option">
                        <span class="serif option-label">SFX Volume</span>
                        <div id="sfx" class="volume-slider"></div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).bind('creaWindowLoaded', function() {
                App.Settings = Ember.Object.extend({
                    master: 0,
                    music: 0,
                    sfx: 0,
                    fullscreen: false,
                    resolution: "",
                    previousResolution: function() {
                        var index = App.resolutions.indexOf(this.resolution) - 1;
                        if (index == -1) {
                            index = App.resolutions.content.length - 1;
                        }
                        this.set('resolution', App.resolutions.content[index]);
                    },
                    nextResolution: function() {
                        var index = App.resolutions.indexOf(this.resolution) + 1;
                        if (index == App.resolutions.content.length) {
                            index = 0;
                        }
                        this.set('resolution', App.resolutions.content[index]);
                    },
                    updateVolumeControls: function() {
                        $('#master').slider('value', this.get('master'));
                        $('#music').slider('value', this.get('music'));
                        $('#sfx').slider('value', this.get('sfx'));
                    }
                });

                App.settings = App.Settings.create();

                App.SettingsView = Ember.View.extend({
                    templateName: 'settings',
                    ok: function() {
                        Crea.invoke("okClick", App.settings);
                    },
                    apply: function() {
                        App.settings.set('master', $("#master").slider("value"));
                        App.settings.set('music', $("#music").slider("value"));
                        App.settings.set('sfx', $("#sfx").slider("value"));
                        Crea.invoke("applyClick", App.settings);
                    },
                    cancel: function() {
                        Crea.invoke("cancelClick");
                    }
                });

                App.resolutions = Ember.ArrayController.create({content: []});

                var view = App.SettingsView.create();

                view.appendTo("#settings_area");
                populate();
            });

            function hideResolutionList() {
                if (jQuery("#resolution_nav").is(':visible')) {
                    jQuery("#resolution_nav").slideUp(200).show();
                }
            }

            function handleVolumeChange() {
            }

            $(function() {
                $(".volume-slider").slider({
                    orientation: "horizontal",
                    range: "min",
                    max: 100,
                    value: 100,
                });
            });
        </script>

    </body>
</html>