define(function() {
    var _ = codebox.require("hr/utils");
    var $ = codebox.require("hr/dom");
    var hr = codebox.require("hr/hr");

    var dnd = codebox.require("utils/dragdrop");
    var keyboard = codebox.require("utils/keyboard");

    var GridView = codebox.require("views/grid");

    // Tab header
    var TabView = hr.List.Item.extend({
        className: "component-tab",
        defaults: {
            title: "",
            tabid: "",
            close: true
        },
        events: {
            "mousedown .close": "close",
            "dblclick": "open",
            "click .close": "close",
            "click": "open",
        },
        states: {
            'modified': "fa-asterisk",
            'warning': "fa-exclamation",
            'offline': "fa-flash",
            'sync': "fa-exchange",
            'loading': "fa fa-refresh fa-spin"
        },

        // Constructor
        initialize: function() {
            TabView.__super__.initialize.apply(this, arguments);

            var that = this;
            var $document = $(document);

            // Drop tabs to order
            this.dropArea = new dnd.DropArea({
                view: this,
                dragType: this.model.manager.drag,
                handler: function(tab) {
                    var i = that.list.collection.indexOf(that.model);
                    var ib = that.list.collection.indexOf(tab);

                    if (ib >= 0 && ib < i) {
                        i = i - 1;
                    }
                    console.log("drop tab at position", i);
                    that.model.manager.changeTabSection(tab, that.list.collection.sectionId, {
                        at: i
                    });
                }
            });

            this.model.manager.drag.enableDrag({
                view: this,
                data: this.model,
                baseDropArea: this.list.dropArea,
                start: function() {
                    that.open();
                }
            });

            return this;
        },

        // Render the tab
        render: function() {
            this.$el.empty();

            var inner = $("<div>", {
                "class": "inner",
                "html": this.model.get("title")
            }).appendTo(this.$el);

            var states = this.model.get("state", "").split(" ");
            _.each(states, function(state) {
                if (state && this.states[state]) {
                    $("<i>", {
                        "class": "state fa "+this.states[state]+" state-"+state
                    }).prependTo(inner);
                }
            }, this);

            $("<a>", {
                "class": "close",
                "href": "#",
                "html": "&times;"
            }).prependTo(inner);

            this.$el.toggleClass("active", this.model.isActive());

            return this.ready();
        },

        // Return true if is active
        isActive: function() {
            return this.$el.hasClass("active");
        },

        // (event) open
        open: function(e) {
            if (e != null) {
                e.preventDefault();
                e.stopPropagation();
            }
            this.model.active();
        },

        // (event) close
        close: function(e) {
            if (e != null) {
                e.preventDefault();
                e.stopPropagation();
            }
            this.model.close();
        },

        // (event) close others tabs
        closeOthers: function(e) {
            this.model.closeOthers();
        }
    });

    return TabView;
});
@@ -697,20 +697,14 @@
 d': 
-%22fa-asterisk
+    %22*
 %22,%0A 
@@ -729,23 +729,15 @@
 g': 
-%22fa-exclamation
+     %22!
 %22,%0A 
@@ -762,17 +762,15 @@
 e': 
-%22fa-flash
+     %22*
 %22,%0A 
@@ -792,20 +792,20 @@
 c': 
-%22fa-exchange
+        %22%5B-%5D
 %22,%0A 
@@ -830,30 +830,15 @@
 g': 
-%22fa fa-refresh fa-spin
+     %22*
 %22%0A  
@@ -2450,17 +2450,20 @@
     $(%22%3C
-i
+span
 %3E%22, %7B%0A  
@@ -2504,47 +2504,74 @@
 ate 
-fa %22+this.
+ 
 state
-s%5B
+-%22+
 state
-%5D+%22 
+,%0A                        %22text%22: this.
 state
--%22+
+s%5B
 state
+%5D
 %0A   

Make tab states visible