; (function (exports, $, _h) {

    var itemTemplate = _h.compile('')
    var EventListWidget = {
        options: {
            dataUrl: '/modules/component_data_store/?do=get_event_list',
            eventItemTemplate: '',
            noItemsTemplate: '<div>No Events</div>',
            datePickerDateFormat:'MM dd, yy'
        },
        _create: function () {
            var that = this;
            that._state = {
                records: []
            };
            that.eventListTarget = that.element.find('.events-list');
            that._state.eventItemTemplate = _h.compile(that.options.eventItemTemplate);
            that.datePickerEl = that.element.find('input.cms-datepicker');

            that.btnListEl = that.element.find('.btn-list');
            that.btnGridEl = that.element.find('.btn-grid');

            that.btnListEl.bind('click', function (e) {
                e.preventDefault();
                that.btnGridEl.removeClass('active');
                that.btnListEl.addClass('active');
                that.element.addClass('list-view');
            });
            that.btnGridEl.bind('click', function (e) {
                e.preventDefault();
                that.btnListEl.removeClass('active');
                that.btnGridEl.addClass('active');
                that.element.removeClass('list-view');
            });
            that._render();
            that._refresh();

        },
        _dateChanged: function (e) {
            var that = this;
            var filter = that.options.filter || {};
            filter.startDate = e.target.value;
            filter.endDate = null;
            that._setOption('filter', filter);
        },
        _render: function () {
            var that = this;
            $(that.datePickerEl).uiDatepicker({
                dateFormat: that.options.datePickerDateFormat || 'yy-mm-dd',
                dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
                showOtherMonths: true
            });
            that.element.find('.datepicker-inline').uiDatepicker({
                dateFormat: that.options.datePickerDateFormat || 'yy-mm-dd',
                dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
                showOtherMonths: true
            });
            that.datePickerEl.bind('change', function (e) {
                that._dateChanged(e);
            });
            that.element.find('.datepicker-inline').bind('change', function (e) {
                that._dateChanged(e);
            });
        },
        _refresh: function () {
            var that = this;
            if (!that.options.filter.programIds) {
               delete that.options.filter.programIds;
            }
            var postData = {
                jsondata: JSON.stringify($.extend({
                    pageSize: 50,
                    startDate: new Date().toString(),
                    endDate: null,
                    start: 0,
                    end: 50,
                    days: 90,
                    groupIds: null,
                    tagIds: null,
                    activityIds: null,
                    sectionId: 'ALL'
                }, that.options.filter))
            };
            if (that.options.dataStoreFilter) {
                postData.filter = JSON.stringify(that.options.dataStoreFilter);
            }
            if (that.options.dataStoreSort) {
                postData.sort = JSON.stringify(that.options.dataStoreSort);
            }
            if (that.options.dataStoreSearch) {
                postData.storeSearch = JSON.stringify(that.options.dataStoreSearch);
            }
           
            $.ajax({
                url: that.options.dataUrl,
                type: 'POST',
                data: postData
            }).done(function (res) {
                if (res.success) {
                    that._state.records = res.items;
                    that._renderItems();

                }
            });
        },
        _renderItems: function () {
            var that = this, items = that._state.records;
            that.eventListTarget.empty();
      
            if (items.length) {
                for (var i = 0; i < items.length; i++) {

                    var item = items[i];

                    var itemEl = $($.parseHTML(that._state.eventItemTemplate(item)));
                    itemEl.appendTo(that.eventListTarget);
                }
            }
            else {
                if (that.options.noItemsTemplate) {
                    that.eventListTarget.html(that.options.noItemsTemplate);
                }
            }
     
            if (that.options.afterRenderItems) {
                that.options.afterRenderItems(that);
            }
            if ('retinaCover' in jQuery.fn) {
                setTimeout(function () {
                    that.eventListTarget.find('.bg-stretch').retinaCover();
                });
            }
           
        },
        _destroy: function () {
            // remove generated elements



        },

        // _setOptions is called with a hash of all options that are changing
        // always refresh when changing options
        _setOptions: function () {
            // _super and _superApply handle keeping the right this-context
            this._superApply(arguments);
            this._refresh();
        },

        // _setOption is called for each individual option that is changing
        _setOption: function (key, value) {
            this._super(key, value);
            this._refresh();
        }
    }
    $.widget('cms.eventList', EventListWidget);

})(window, jQuery, Handlebars);