<html>
    <head>
        <title>Travel</title>

        <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>

        <style>

            .current-crystal .crystal-name {
                position: relative;
                top: 8px;
            }
            .current-crystal .crystal-icon {
                margin-bottom: 5px;
            }
            .available-shards {
                float: right;
                margin-left: 20px;
                padding-right: 7px;
            }
            .available-shards .attune { position: relative; bottom: 0px; margin-right: 8px; }
            .available-shards .icon { position: relative; bottom: -4px; margin-right: -3px; }
            .available-shards .cost-amount { letter-spacing: -2px }
            .available-shards .serif { position: relative; bottom: 0px; }

            .crystals { }
            .crystal { padding: 3px; border-radius: 5px; position: relative; }
            .crystal:last-child { padding-bottom: 0px; }

                .crystal.selected { background-color: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5); }

                .crystal-icon {
                    vertical-align: text-top;
                    margin-right: 5px;
                }
                .crystal-name { color: #fff; font-size: 16px; position: relative; top: 3px; }
                .crystal-distance {
                    color: #fff;
                    font-size: 11px;
                    position: relative;
                    left: 42px;
                    top: -10px;
                }
                .crystal-level { color: #fff; font-size: 12px; }
                .unavailable .crystal-name { color: #bbb; }

            .cost-icon { }
            .cost-amount {
                font-size: 13px;
            }

            .crystals-area { padding: 0; min-width: 280px; max-width: 350px; margin: 10px 0 0; max-height: 260px; overflow: auto; }

        </style>
    </head>
    <body>

        <div id="travel" class="window with-header" data-handle="Travel">

            <script data-template-name="header-template" type="text/x-handlebars">
                <div class="current-crystal" style="float: left">
                    <img class="crystal-icon" width="32" height="32" {{bindAttr src="App.info.current.icon"}}></img>
                    <span class="crystal-name">{{App.info.current.name}}</span>
                </div>
                <div class="available-shards">
                    {{#if App.info.current.isNotAttuned}}
                        <button class="attune" {{action "attune" target="App.info.current"}}>Attune</button>
                    {{/if}}
                    <img class="icon" width="24" height="24" {{bindAttr src="App.info.shardIcon"}}></img>
                    <span class="serif cost-amount">x</span>
                    <span class="serif">{{App.info.availableShards}}</span>
                </div>
            </script>

            <script data-template-name="crystals-template" type="text/x-handlebars">
                <div class="crystals group">
                    {{#each crystal in App.info.crystals}}
                        <div {{bindAttr class="crystal.isUnavailable:unavailable :crystal"}}>
                            <div class="serif" style="float: left">
                                <img class="crystal-icon" width="32" height="32" {{bindAttr src="crystal.icon"}}></img>
                                <span class="crystal-name serif"}}>{{crystal.name}}</span>
                                <div>
                                    <span class="crystal-distance serif"}}>Distance: {{crystal.distance}}</span>
                                </div>
                            </div>
                            <div style="float: right; margin-left: 20px;">

                                <button {{action "travel" target="crystal"}} {{bindAttr disabled="crystal.isUnavailable"}}>
                                    <span class="serif cost-amount">Quick Travel</span>
                                    <div>
                                        <img class="cost-icon" width="11" height="13" {{bindAttr src="App.info.shardMiniIcon"}}></img>
                                        <span class="serif cost-amount">x{{crystal.cost}}</span>
                                    </div>
                                </button>
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                    {{/each}}
                </div>
            </script>

            <div id="header-area" class="header talent-area serif group"></div>
            <div id="crystals-area" class="crystals-area"></div>
        </div>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).bind('creaWindowLoaded', function() {
                App.Crystal = Ember.Object.extend({
                    name: "Test Crystal",
                    id: 0,
                    icon: "",
                    distance: 0,
                    cost: 0,
                    isAttuned: function() {
                        return this.id == App.info.attuned;
                    }.property('id', 'App.info.attuned'),
                    isNotAttuned: Ember.computed.not('isAttuned'),
                    isAvailable: function() {
                        return App.info.availableShards >= this.cost;
                    }.property('cost', 'App.info.availableShards'),
                    isUnavailable: Ember.computed.not('isAvailable'),
                    travel: function() {
                        Crea.invoke('travel', this.id);
                    },
                    attune: function() {
                        App.info.set('attuned', this.id);
                        Crea.invoke('attune', this.id);
                    }
                });

                App.Info = Ember.Object.extend({
                    current: null,
                    crystals: null,
                    attuned: 0,
                    availableShards: 10,
                    shardIcon: "asset://crea/mods/core/item/material/way_shard.png",
                    shardMiniIcon: "asset://crea/mods/core/item/material/way_shard_wicon.png",
                    init: function() {
                        this._super();
                        this.current = App.Crystal.create();
                        this.crystals = Ember.ArrayController.create({content: []});
                    },
                });

                App.info = App.Info.create();

                App.HeaderView = Ember.View.extend({
                    templateName: "header-template"
                });
                App.CrystalsView = Ember.View.extend({
                    templateName: "crystals-template"
                });

                var headerView = App.HeaderView.create();
                headerView.appendTo("#header-area");
                var crystalView = App.CrystalsView.create();
                crystalView.appendTo("#crystals-area");
                populate();
            });

        </script>

    </body>
</html>

