define([
  "dojo/_base/declare",
  "dojo/on",
  "dojo/topic",
  "dojo/query",
  "dojo/dom-class",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/text!./templates/Sidebar.html",
  "app/layout/Footer"
  ], function (declare, on, topic, query, domClass,
    _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template,
    Footer) {

    return declare("app.layout.Sidebar", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

      templateString: template,

      postCreate: function () {
        this.inherited(arguments);
        this.initUI();
        this._attachEventHandlers();
      },

      initUI: function(config) {
        //var footerLinks = new Footer({config: this.config});
        //this.footerLinks.appendChild(footerLinks.domNode);
      },

      _attachEventHandlers: function () {
        var self = this;
        var bodyTag = document.getElementsByTagName("BODY")[0];
        this.own(
          // On menu item (tab) click
          query(".tabs li").on("click", function (e) {
            var panelId = this.getAttribute("data-target-id"),
            paneTitle =this.getAttribute("data-title");

            if(!panelId) return;

            query("#Sidebar .selected").removeClass("selected");
            domClass.add(this, "selected");
            domClass.add(bodyTag, "has-tab-open");

            topic.publish("Sidebar/Selected", {id: panelId, title: paneTitle});
          }),

          on(this.TabExpando, "click", function (e) {
            var targetNode = query(".tabs")[0];
            if (this._isopen) {
              targetNode.className = "tabs";
              domClass.remove(bodyTag, "has-tabs-open");
            } else {
              targetNode.className += " open";
              domClass.add(bodyTag, "has-tabs-open");
            }
            this._isopen = !this._isopen;
          })
        );
      },

      updateSelectedTab: function(selectedPanelId) {
        if(selectedPanelId) { // Select one tab
          var selectedTab = query("[data-target-id='"+ selectedPanelId + "']", this.domNode);
          if(selectedTab.length)
            domClass.add(selectedTab[0], "selected");
        } else { // Unselect all
          var allTabs = query("[data-target-id]", this.domNode);
          allTabs.forEach(function(tab) {
            domClass.remove(tab, "selected");
          });
        }
      }
  });
});