<html>
    <head>

        <link rel="stylesheet" href="../css/style.css" type="text/css" />
        <link rel="stylesheet" href="../css/chat.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>
        <script type="text/javascript" src="../js/jquery.keystroke.js"></script>

        <title>Chat</title>

        <style>
            body { margin: 0; overflow: hidden; }


            #chat { width: 355px; opacity: 0.9; }
            .trans-window { background-color: rgba(0,0,0,0.5);
                border-radius: 4px; -webkit-user-select: none; padding-bottom: 6px; }

                #tab_area { border-top-left-radius: 4px; border-top-right-radius: 4px;
                    background-image: -webkit-gradient(
                        linear,
                        left bottom,
                        left top,
                        color-stop(1, rgba(0,0,0,0)),
                        color-stop(0.5, rgba(0,0,0,0)),
                        color-stop(0.0, rgba(255,255,255,0.2))
                    );
                    color: #fff; text-transform: uppercase; font-family: sans-serif;
                    margin-bottom: 6px;
                }
                    .tab_text { font-size: 11px; font-weight: bold; float: left; padding: 5px 10px;
                        border-right: 1px solid rgba(255,255,255,0.2); }
                    .tab_text.selected { background-image: -webkit-gradient(
                            linear,
                            left bottom,
                            left top,
                            color-stop(1, rgba(0,0,0,0)),
                            color-stop(0.6, rgba(0,0,0,0)),
                            color-stop(0.0, rgba(255,255,255,0.2))
                        ); }
                    .tab_text:hover { background-color: rgba(255,255,255, 0.2); }

            #chat_area { overflow: auto; height: 180px;
                color: #fff; font-family: sans-serif; font-size: 12px; line-height: 16px;
                padding: 0 6px; }

                #chat .message { padding-left: 6px; text-indent: -6px; }
                #chat .battle.message { color: #C73C3E; }
                #chat .system.message { color: #E6DB74; }

            #entry_area { padding: 6px 6px 0; display: none; }

                #entry_area input { border: 0; border-radius: 2px; line-height: 16px; background-color: transparent; padding: 3px; color: #fff; width: 100%;
                    box-shadow: 0 0 2px 1px rgba(255,255,255,0.2); }
                #entry_area input:focus { border: 0; box-shadow: 0 0 4px 1px rgba(255,255,255,0.5); outline: none;
                    background-color: rgba(0,0,0,0.2); }
                #entry_area button { display: none; }

            #chat_area img { margin: 5px; }
            .clear { clear: both; }

            /*.general { color: blue; }
            .battle { color: red; }*/
        </style>

    </head>
    <body>

        <div id="chat" class="trans-window" data-handle="Chat">

            <script data-template-name="tab_template" type="text/x-handlebars">
                {{#each tab in App.tabs}}
                    {{#view App.TabView contentBinding="tab"}}
                        <span {{bindAttr class="tab.isSelected:selected :tab_text"}} {{action "select" target="view"}}>{{tab.name}}</span>
                    {{/view}}
                {{/each}}
            </script>

            <script data-template-name="chat_template" type="text/x-handlebars">
                {{#each message in App.tabsView.selectedTab.messages}}
                    {{#view App.MessageView messageBinding=message}}
                        <div {{bindAttr class="message.category :message" style="message.colorStyle"}}>
                            {{#if message.hasSender}}
                                <span>[{{message.sender}}]:  </span>
                            {{/if}}
                            <span>{{{message.content}}}</span>
                        </div>
                    {{/view}}
                {{/each}}
            </script>

            <script data-template-name="entry_template" type="text/x-handlebars">
                {{view App.TextField class="chat_input" valueBinding="App.entered.message"}}
                <button {{action "send" target="App.entered"}} {{bindAttr disabled="App.entered.isEmpty"}}>Send</button>
            </script>

            <div id="tab_area" class="tab_area group" onmousedown="Crea.startDrag();"></div>
            <div id="chat_area" class="chat_area"></div>
            <div id="entry_area" class="entry_area"></div>

        </div>

        <script type="text/javascript">

            App = Ember.Application.create();

            function defineChatView() {
                App.TextField = Ember.TextField.extend({
                    attributeBindings: ['style'],
                });

                App.Message = Ember.Object.extend({
                    category: "",
                    sender: "",
                    content: "",
                    color: "",
                    hasSender: function() {
                        return this.sender.length > 0;
                    }.property("sender"),
                    colorStyle: function() {
                        if (this.color) {
                            return "color: #" + this.color;
                        } else {
                            return "";
                        }
                    }.property('color')
                });

                App.TabOption = Ember.Object.extend({
                    category: "",
                    isChecked: false,
                });

                App.Tab = Ember.Object.extend({
                    name: "",
                    isSelected: false,
                    options: null,
                    init: function() {
                        this.options = Ember.ArrayController.create({content: []});
                    },
                    messages: function() {
                        //Filter the messages. Include a message if any of the options turned on match the message's category
                        return App.messages.filter(function(item, index, enumerable) {
                            for (var i = 0; i < this.options.content.length; ++i) {
                                var option = this.options.content[i];
                                if (option.isChecked && option.category == item.category) {
                                    return true;
                                }
                            }
                            return false;
                        }, this);
                    }.property("options.@each.isChecked", "App.messages.content.@each")
                });

                App.MessageView = Ember.View.extend({
                    didInsertElement: function() {
                        var el = $("#chat_area");
                        var fullyScrolledDown = el[0].scrollHeight - el.height();
                        el.scrollTop(fullyScrolledDown);
                    },
                });

                App.TabsView = Ember.View.extend({
                    templateName: 'tab_template',
                    selectedTab: null,
                });

                App.TabView = Ember.View.extend({
                    content: null,
                    select: function() {
                        if (this.content != null) {
                            if (App.tabsView.get("selectedTab") != null) {
                                App.tabsView.get("selectedTab").set("isSelected", false);
                            }
                            App.tabsView.set("selectedTab", this.content);
                            this.content.set("isSelected", true);
                        }
                    }
                });

                App.ChatView = Ember.View.extend({
                    templateName: 'chat_template',
                });

                App.EntryView = Ember.View.extend({
                    templateName: 'entry_template',
                });

                App.Entered = Ember.Object.extend({
                    message: '',
                    hasEntered: function() {
                        return this.message.length > 0;
                    }.property("message"),
                    isEmpty: Ember.computed.not('hasEntered'),
                    send: function() {
                        Crea.invoke("send", this.message);
                        this.set("message", "");
                    }
                });

                App.entered = App.Entered.create();

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

                App.tabsView = App.TabsView.create();
                App.chatView = App.ChatView.create();
                var entryView = App.EntryView.create();

                App.tabs.pushObject(App.Tab.create({name: "General", isSelected: true}));
                App.tabs.content[0].options.pushObject(App.TabOption.create({category: "general", isChecked: true}));
                App.tabs.pushObject(App.Tab.create({name: "Battle"}));
                App.tabs.content[1].options.pushObject(App.TabOption.create({category: "battle", isChecked: true}));

                App.tabsView.set("selectedTab", App.tabs.content[0]);

                App.tabsView.appendTo("#tab_area");
                App.chatView.appendTo("#chat_area");
                entryView.appendTo("#entry_area");
                populate();
            };

            defineChatView();

            var isInputOpen = false;

            function handleEnterInput() {
                var entryArea = $('#entry_area');
                var chatInput = $('.chat_input');
                var chatInputHasFocus = $(document.activeElement).hasClass("chat_input");
                if (!isInputOpen) {
                    entryArea.show();
                    chatInput.focus();
                    Crea.invoke('focus');
                    isInputOpen = true;
                } else if (isInputOpen && !chatInputHasFocus) {
                    chatInput.focus();
                    Crea.invoke('focus');
                } else if (chatInputHasFocus) {
                    if (App.entered.get("hasEntered")) {
                        App.entered.send();
                    }
                    chatInput.blur();
                }
            };

            function handleEscapeInput() {
                var chatInput = $('.chat_input');
                chatInput.blur();
                App.entered.set("message", '');
            };

            $(document).on('blur', '.chat_input', function(){
                hideEntryArea();
            });

            function hideEntryArea() {
                App.entered.set("message", '');
                $('#entry_area').hide();
                isInputOpen = false;
                Crea.invoke('unfocus');
            };

            populate();
        </script>
    </body>
</html>
