var Utils = $.xjs.utils;

var _templateName = 'panel';
var _TITLE = 'title';
var _BODY = 'body';
var _TABLE = 'table';
var _FOOTER = 'footer';

$.widget('xjs.panel', $.xjs.baseControl, {
  options: {
    _template: _templateName,
    _actionBtnSelector: '> .panel-heading > .btn-toolbar > .btn-group > .btn',

    head: '',
    body: '',
    table: '',
    footer: ''
  },

  _create: function () {
    var _that = this;
    var _option = _that.options;

    _option.titleContainerClass = _option._containerClass + '-title';
    _option.bodyContainerClass = _option._containerClass + '-body';
    _option.tableContainerClass = _option._containerClass + '-table';
    _option.footerContainerClass = _option._containerClass + '-footer';

    _that._super();

    _that.$btnCollapse = _that.element.find('.btn-collapse');
    _that.$btnFullscreen = _that.element.find('.btn-fullscreen');

    if (_option.head.actions) _that._initActionEvents(_option.head.actions.itemsSource, _option._actionBtnSelector, _option.head.actions.btnClickField);
    if (_option.collapsion && _option.collapsion.collapsable) _that.$btnCollapse.on('click' + _that.eventNamespace, _that, _that._collapseClicked);
    if (_option.fullscreen) _that.$btnFullscreen.on('click' + _that.eventNamespace, _that, _that._fullscreenClicked);
  },
  _destroy: function () {
    var _that = this;

    _that._super();
    _that.element.off(_that.eventNamespace).html('');
  },

  /*
   * Overwrite super function
   */
  _renderContent: function (elements) {
    var _that = this;
    var _$el = _that.element;
    var _$titleContainer = _that._getContainer(_that.options.titleContainerClass, _$el, true);
    var _$bodyContainer = _that._getContainer(_that.options.bodyContainerClass, _$el, true);
    var _$tableContainer = _that._getContainer(_that.options.tableContainerClass, _$el, true);
    var _$footerContainer = _that._getContainer(_that.options.footerContainerClass, _$el, true);

    _$titleContainer.after(elements[_TITLE]);
    _$bodyContainer.after(elements[_BODY]);
    _$tableContainer.after(elements[_TABLE]);
    _$footerContainer.after(elements[_FOOTER]);
  },
  _compileContent: function () {
    var _that = this;
    var _option = _that.options;
    var _$elements = {};

    _$elements[_TITLE] = _option.head ? Utils.instanceWidget(_option.head.title) : '';
    _$elements[_BODY] = Utils.instanceWidget(_option.body);
    _$elements[_TABLE] = Utils.instanceWidget(_option.table);
    _$elements[_FOOTER] = Utils.instanceWidget(_option.footer);

    _that._$contentElements = _$elements;
  },
  getContentElements: function () {
    return this._$contentElements;
  },

  _collapseClicked: function (e) {
    var _that = e.data;

    _that.element.toggleClass('collapsed');
  },
  _fullscreenClicked: function (e) {
    var _that = e.data;

    if (_that.element.data('xjsSail')) {
      _that.element.sail('toggle');
    }
    else {
      _that.element.sail(e.data.options.fullscreen);
    }
    _that.$btnFullscreen.children('span.glyphicon').toggleClass('glyphicon-resize-small');
    _that.$btnCollapse.toggle();
    _that.element.removeClass('collapsed');
  }
});
