/**
 * (c) by aheadware.com
 */
"use strict";

var app = app || {};
app.gui = app.gui || {};

/**
 * ActionButton
 */
app.gui.ActionButton = (function()
{
    var $actionButtonRoot,
        $actionButton,
        transitionTime = 0.3;

    function closeActions(button) {
        var list = button.querySelector('.action-list');
        var dimensions = {
            width: list.clientWidth,
            height: list.clientHeight
        };

        button.classList.remove('is-open');

        requestAnimationFrame(morphList);

        function moveButton() {
            var buttonPosition = 0;

            list.style.transition = 'margin-right ' + transitionTime/2 + 's ease';
            button.style.transition = 'margin-right ' + transitionTime/2 + 's ease';

            list.style.marginRight = '';
            button.style.marginRight = '';
        }

        function morphList() {
            var buttonPosition = (dimensions.width/2) - 30;

            button.style.transition = 'all ' + transitionTime + 's ease';
            list.style.transition = 'all ' + transitionTime + 's ease';

            button.style.marginRight = buttonPosition + 'px';
            list.style.marginRight = -buttonPosition + 'px';

            button.style.width = '';
            button.style.height = '';
            button.style.borderRadius = '';
            button.style.backgroundColor = '';

            list.style.opacity = '';

            $(list).one('transitionend', moveButton);
        }
    }

    function openActions(button) {
        var list = button.querySelector('.action-list');
        var dimensions = {
            width: list.clientWidth,
            height: list.clientHeight
        };

        button.classList.add('is-open');

        requestAnimationFrame(moveButton);

        function moveButton() {
            var buttonPosition = (dimensions.width/2) - 30;

            list.style.transition = 'margin-right ' + transitionTime/2 + 's ease';
            button.style.transition = 'margin-right ' + transitionTime/2 + 's ease';

            list.style.marginRight = -buttonPosition + 'px';
            button.style.marginRight = buttonPosition + 'px';

            $(button).one('transitionend', morphButton);
        }

        function morphButton() {
            button.style.transition = 'all ' + transitionTime + 's ease';
            list.style.transition = 'all ' + transitionTime + 's ease';

            button.style.marginRight = '0px';
            list.style.marginRight = '0px';

            button.style.width = dimensions.width + 'px';
            button.style.height = dimensions.height + 'px';
            button.style.borderRadius = '0';
            button.style.backgroundColor = 'rgba(255, 152, 0, 0)';

            list.style.opacity = '1';
        }
    }

    function triggerLink( e )
    {
        var $li = $(e.currentTarget);
        $actionButton.find( '.action-list' ).off( 'click', 'li.action-list-item', triggerLink );
        app.core.Controller.redirect( $li.find( 'a' ).first().attr( 'href' ) );
        setTimeout( function()
        {
            closeActions($actionButton.get(0));
        }.bind( this ), 250 );
        e.stopPropagation();
        return false;
    }

    return {
        init : function()
        {
            $actionButtonRoot = app.core.View.getBody().find( '[data-id="container-actionbutton"]' ).first();
            $actionButtonRoot.html( app.core.View.getTemplate( 'gui-actionbutton' ) );
            $actionButton = $actionButtonRoot.find( '[data-id="btn-action-button"]' ).first();

            $actionButton.on( 'click', function( e )
            {
                e.stopPropagation();
                var target = e.currentTarget;
                if ($(target).hasClass('is-open')) return;

                openActions(target);

                setTimeout( function()
                {
                    $actionButton.find( '.action-list' ).on( 'click', 'li.action-list-item', triggerLink );
                }.bind( this ), 250 );

                return false;

            });

            $(document).on('click', function(e) {
                if ( $actionButton.hasClass( 'is-open' ) )
                {
                    $actionButton.find( '.action-list' ).off( 'click', 'li.action-list-item', triggerLink );
                    closeActions($actionButton.get(0));
                }
            }.bind( this ));

            app.core.EventManager.on( 'STATEMANAGER_ON_STATE_ENTER', function( stateId )
            {
                if ( !app.model.SessionUser || false === app.model.SessionUser.isAdminOfAnyTeam() )
                {
                    $actionButton.hide();
                    return;
                }

                switch ( stateId )
                {
                    case 'appointment-create':
                    case 'appointment-edit':
                    case 'appointment-edit-attendee':
                    case 'configuration-profile-edit':
                    case 'group-detail-edit':
                    case 'group-members-edit':
                    case 'group-member-management':
                        $actionButton.hide();
                    break;

                    default:
                        $actionButton.css( 'right', '20px' );
                        $actionButton.css( 'marginRight', 0);
                        $actionButton.show();
                }
            }.bind( this ));
        }
        ,
        rerender : function()
        {
            $actionButtonRoot.html( app.core.View.getTemplate( 'gui-actionbutton' ) );
        }
    };
}());