/// <reference path="../../Scripts/jquery.enableTouch.js"/>

(function ($, window, undefined) {
    var plugin = {};

    plugin._create = function () {
        this._super();

        this._populateElements();
        this._applyBaseStyle();
        this._addHandlers();

        this.initialized = true;
        this.refresh();
    };

    plugin._setOption = function (key, value) {
        this._super(key, value)

        if (this.initialized) this.refresh();
    };

    plugin.refresh = function () {
        this._updateLayout();
    };

    plugin.options = {
        'show': $.noop,
        'hide': $.noop,
        'canexpand': true,
        'layout': 'expanded', 	// or 'collapsed' or 'popout'
        'popoutOffset': 100, 	// CSS px between collapsed and popout
        'popoutHideDelay': 5000, // ms
        'popoutHideExtendedDelay': 10000 // ms
    };

    // #region States

    plugin.layout = function (layout) {
        this.options.layout = layout;
        this._updateLayout();
    };

    plugin._togglePopout = function (show) {
        this._cancelHideDelay();
        if (show === true || (show !== false && this.options.layout != "popout")) {
            this._updateLayout("popout");
            this._hideAfterDelay();
        } else if (this.options.layout != "expanded") {
            this._updateLayout("collapsed");
        }
    };

    plugin._hideAfterDelay = function (extended) {
        var delay = extended ? this.options.popoutHideExtendedDelay : this.options.popoutHideDelay;
        this._cancelHideDelay();
        this._popoutTimer = setTimeout(
            this._togglePopout.bind(this, false),
            delay);
    },
    plugin._cancelHideDelay = function () {
        clearTimeout(this._popoutTimer);
    };
    // #region Setup

    plugin._populateElements = function () {
        this.element.empty();
        this.element.html(this._html);
        var collapsedSib = new Mediasite.Player.SingleImageButton(this.element.find(this.selectors.collapsed).get(0));
        this.element.data("sib", collapsedSib);
    };

    plugin._populateContents = function (contents) {
        this.element.find(this.selectors.content).html(contents);
    };

    plugin._html = '	\
		<div class="expanded"></div>	\
		<button class="collapsed">  \
            <!-- text: .ui-button-text -->  \
        </button> \
		<div class="popout"></div>  \
	';


    plugin.selectors = {
        text: '.text',
        popout: '.popout',
        collapsed: '.collapsed',
        expanded: '.expanded',
        content: '.expanded, .popout'
    };

    // #endregion

    // #region Style

    plugin._applyBaseStyle = function () {
        var self = this;

        this.element.css('position', 'relative');
        this.element.addClass('ui-responsive-container');
        this.element.find(this.selectors.popout).css('position', 'absolute');
    };

    plugin._updateLayout = function (layout) {
        this._cancelHideDelay();

        switch (layout) {
            case 'popout':
            case 'collapsed':
            case 'expanded':
                break;
            default:
                layout = this.options.layout || 'expanded';
                break;
        }
        if (!this.options.canexpand && layout == 'expanded') layout = 'collapsed';

        this.element.removeClass('layout-popout layout-collapsed layout-expanded').addClass('layout-' + layout);
        switch (layout) {
            case "popout":
                this._showPopout();
                break;
            case "collapsed":
                this._hidePopout();
                break;
            case "expanded":
                this._hidePopout(true);
                break;
        }


        this.options.layout = layout;
    };

    plugin._updateTextSize = function () {
        if (this.options.layout == "expanded") return;

        // todo: resize text to fit
    };



    plugin._showPopout = function () {
        var popout = this.element.find(this.selectors.popout);
        popout.stop().fadeIn(50);

        popout.position({
            "my": "center",
            "at": "center",
            "of": this.element.find(this.selectors.collapsed),
            using: function (offset) {
                popout.css('left', offset.left);
            }
        });

        this._trigger('show');
    };

    plugin._hidePopout = function (fast) {
        var popout = this.element.find(this.selectors.popout);
        if (fast) { popout.stop(true, true).hide(); }
        else { popout.stop(true, true).fadeOut(200); }

        this._trigger('hide', null, { fast: fast });
    };

    // #endregion

    // #region User interaction handlers
    plugin._addHandlers = function () {
        var self = this;

        this.element.find(this.selectors.collapsed).bind("click", function (e) {
            self._onClickTogglePopout();
        });

        this.element.find(this.selectors.popout).bind('click mouseover mousemove', function (e) {
            self._onInteractPopout();
        });
    };

    plugin._onClickTogglePopout = function () {
        this._togglePopout();
    };

    plugin._onInteractPopout = function () {
        this._hideAfterDelay(true);
    };

    // #endregion


    $.widget('ui.responsiveContainer', plugin);
} (jQuery, window));



