/**
 * Provides the functionality to toggle sections with additional informations.
 *
 * The `.presentationUiTogglesection()` provides the functionality to toggle areas with additional informations.
 *
 * ### Examples
 * Explanation for example,
 *
 * JavaScript:
 *
 *
 *     <div class="ep-js" data-js=".presentationUiTogglesection({
 *         selector: $(elem).closest('.row').find('.ep-toggle-section-area'),
 *         duration: 800,
 *         iconElement: $(elem).find('.iconElement'),
 *         iconClass: {open: 'icon-plus', close: 'icon-minus'}
 *     })">
 *
 *
 * @class jQuery.ui.presentationUiDnduploader
 * @extends jQuery.widget
 *
 * @uses jquery
 * @uses jquery.ui.widget
 * @uses ep
 * @uses de_epages
 * @since 6.17.38
 */

/**
 * @cfg {Object} [options] A map of additional options pass to the method.
 */

/**
 * @cfg {String} [selector] A valid css selector, a DOM node or a jQuery element representing the toggle area.
 */

/**
 * @cfg {Integer} [duration] A number containing the duration of the animation.
 */

/**
 * @cfg {String} [iconElement] A valid css selector, a DOM node or a jQuery element representing the element which contains the state icon.
 */

/**
 * @cfg {Object} [iconClass] A object containing the icon classes for the icon states.
 */

/**
 * @cfg {Boolean} [storeState] A boolean to set if toggle states should be saved in local storage.
 */

/**
 * See `jQuery.ui.presentationUiTogglesection` for details.
 *
 * @param {Object} [options] A map of additional options pass to the method.
 * @param {String} [selector] A valid css selector, a DOM node or a jQuery element representing the toggle area.
 * @param {Integer} [duration] A number containing the duration of the animation.
 * @param {String} [iconElement] A valid css selector, a DOM node or a jQuery element representing the element which contains the state icon.
 * @param {Object} [iconClass] A object containing the icon classes for the icon states.
 * @param {Boolean} [storeState] A boolean to set if toggle states should be saved in local storage.
 *
 * @method presentationUiTogglesection
 * @member jQuery
 *
 * @since 6.17.38
 */

/*
 * @copyright       © Copyright 2006-2010, epages GmbH, All Rights Reserved.
 *
 * @module          de_epages.presentation.ui.togglesection
 *
 * @revision        $Revision$
 */

define( "de_epages/presentation/ui/togglesection", [
    "jquery",
    "ep",
    "de_epages",
    "util/storage",

    "jquery/ui/widget"
], function ($, ep, de_epages, storage) {

    $.widget('ui.presentationUiTogglesection', {

        options: {
            selector: '.ep-toggle-section-area',
            duration: 600,
            iconElement: undefined,
            iconClass: {
                open: 'fa-minus',
                close: 'fa-plus'
            },
            storeState: true
        },

        _create: function () {
            var self = this,
                elem = self.element,
                o = self.options,
                localStorage;

            // toggle area
            self.toggleArea = $(o.selector);

            // if toggle state should be saved in local storage
            if (o.storeState) {
                // get local storage object for toggle states
                self.storageKey = elem.data('storageKey');

                // if local storage object doesn't exist
                if (!storage.localStorage('toggleareas')) {
                    storage.localStorage('toggleareas', {});
                }
                // get and set local storage variable
                localStorage = storage.localStorage('toggleareas');

                // if already an entry for this element exists => set data attribute depending on the storage value
                if (self.storageKey && localStorage[self.storageKey] !== undefined) {
                    elem.data('open', !localStorage[self.storageKey].open);
                } else {
                    elem.data('open', true);
                }
            } else {
                elem.data('open', true);
            }

            // default icon element
            self.iconElement = o.iconElement===undefined ? elem.find('.fa') : $(o.iconElement);

            // save state (open/close) of toggle area
            // elem.data('open', self.toggleArea.is(':visible'));

            // register handling for toggle button
            elem.on('click', $.proxy(function (e) {
                self._toggleArea(e);
            }, self));

            // initial call to set toggle areas
            self._toggleArea();
        },

        _toggleArea: function (e) {
            var self = this,
                elem = self.element,
                o = self.options,
                open = elem.data('open'),
                localStorage;

            // stop already running animations and set state to the end
            self.toggleArea.stop(false, true);
            // toggle area
            self.toggleArea[open ? 'slideUp' : 'slideDown']({
                duration: o.duration,
                complete: function () {
                    self.iconElement.addClass(open ? o.iconClass.close : o.iconClass.open);
                    self.iconElement.removeClass(open ? o.iconClass.open : o.iconClass.close);

                    // set new state for area
                    elem.data('open', !open);

                    // if toggle states should be saved and a corresponding key exists
                    if (o.storeState && self.storageKey) {
                        // get and set local storage object
                        localStorage = storage.localStorage('toggleareas');

                        if (!localStorage[self.storageKey]) {
                            localStorage[self.storageKey] = {};
                        }

                        localStorage[self.storageKey].open = !open;
                        storage.localStorage('toggleareas', localStorage);
                    }
                }
            });
        },

        /**
         * This method removes the container on which the selection toggler has been appended to.
         *
         * @method destroy
         * @member jQuery.ui.presentationUiTogglesection
         *
         * @since 6.17.37
         */
        destroy: function () {
            var self = this;

            //self.elem.off('.presentationUiTogglesection');

            self._superApply(arguments);
        }

    });

    return de_epages;

});