/**
 * Make div fixed / unfixed
 */
define('modules/fixable',[],function()
{
    /**
     * Global variable that represents the object
     */
    var fixable;

    /**
     * This is the placeholder that decides the
     * size and position of the fixed element
     *
     * @type {*|jQuery|HTMLElement}
     */
    var $container = $('.fixable-container');

    /**
     * This is the element that is going to be fixed
     *
     * @type {*|jQuery|HTMLElement}
     */
    var $wrapper = $('.fixable-wrapper');

    /**
     * Keep the current state of the element
     *
     * @type {bool}
     */
    var fixed = false;
    var reset = false;
    var animating = false;

    return {

        /**
         * Set fixable object
         */
        init : function()
        {
            fixable = this;

            // Check resize once
            fixable.resize();
        },

        /**
         * Check if there is a fixable object
         *
         * @returns {boolean}
         */
        isset : function()
        {
            return $container.size();
        },

        /**
         * Check whether an element should be fixed or relative.
         * We do this by checking the top of the container, because
         * the container stays at the same place the whole time.
         * Only the wrapper is going to be fixed.
         */
        scroll : function()
        {
            if( ! fixable.isset()) return false;

            if($(window).width() <= 900) return false;

            // When container reaches top of the window
            if($container.offset().top < $(window).scrollTop())
            {
                fixable.fix();
            }
            else
            {
                fixable.unfix();
            }
        },

        /**
         * Handle resize
         */
        resize : function()
        {
            // Get dimensions
            var width = $container.width();
            var height = width * 2 / 3;

            // Keep size container
            $container.css({
                width: width + 'px',
                height: height + 'px'
            });

            // Resize wrapper
            $wrapper.css({
                width: width+'px',
                height: height+'px'
            });

            // Check scroll position
            fixable.scroll();

            reset = false;
        },

        /**
         * Make the wrapper fixed
         */
        fix : function()
        {
            // Check if already fixed
            if(fixed) return false;
            fixed = true;

            var left = $container.offset().left;

            // Resize wrapper
            $wrapper.css({
                position : 'fixed',
                top: 0,
                left: left+'px'
            });
        },

        /**
         * Make the wrapper relative
         */
        unfix : function()
        {
            // Don't unfix if already reset
            if( ! fixed) return false;
            fixed = false;

            // Reset wrapper
            $wrapper.css({
                position : 'relative',
                top: 0,
                left: 0
            });
        },

        /**
         * Make the wrapper relative
         */
        reset : function()
        {
            // Don't unfix if already reset
            if( reset) return false;
            reset = true;
            fixed = false;

            // Reset wrapper
            $wrapper.css({
                width: 'auto',
                height: 'auto',
                position : 'relative',
                top: 0,
                left: 0
            });

            // Reset container
            $container.css({
                width: 'auto',
                height: 'auto'
            });
        },

        /**
         * Show container
         *
         * @param callBack
         */
        show : function(callBack)
        {
            if(animating) return false;
            animating = true;

            $container.stop().animate({ opacity : 1 },100,function()
            {
                animating = false;
                callBack;
            });
        },

        /**
         * Hide container
         *
         * @param callBack
         */
        hide : function(callBack)
        {
            if($(window).width() <= 900) return false;
            if(animating) return false;
            animating = true;

            $container.stop().animate({ opacity : 0 },100,function()
            {
                animating = false;
                callBack;
            });
        }

    }
});