/*!

 * Ladda

 * http://lab.hakim.se/ladda

 * MIT licensed

 *

 * Copyright (C) 2014 Hakim El Hattab, http://hakim.se

 */

/* jshint node:true, browser:true */

(function( root, factory ) {

    // CommonJS

    if( typeof exports === 'object' )  {

        module.exports = factory(require('spin.js'));

    }

    // AMD module

    else if( typeof define === 'function' && define.amd ) {

        define( [ 'spin' ], factory );

    }

    // Browser global

    else {

        root.Ladda = factory( root.Spinner );

    }

}

(this, function( Spinner ) {

    'use strict';

    // All currently instantiated instances of Ladda

    var ALL_INSTANCES = [];

    /**

     * Creates a new instance of Ladda which wraps the

     * target button element.

     *

     * @return An API object that can be used to control

     * the loading animation state.

     */

    function create( button ) {

        if( typeof button === 'undefined' ) {

            console.warn( "Ladda button target must be defined." );

            return;

        }

        // The text contents must be wrapped in a ladda-label

        // element, create one if it doesn't already exist

        if( !button.querySelector( '.ladda-label' ) ) {

            button.innerHTML = '<span class="ladda-label">'+ button.innerHTML +'</span>';

        }

        // The spinner component

        var spinner;

        // Wrapper element for the spinner

        var spinnerWrapper = document.createElement( 'span' );

        spinnerWrapper.className = 'ladda-spinner';

        button.appendChild( spinnerWrapper );

        // Timer used to delay starting/stopping

        var timer;

        var instance = {

            /**

             * Enter the loading state.

             */

            start: function() {

                // Create the spinner if it doesn't already exist

                if( !spinner ) spinner = createSpinner( button );

                button.setAttribute( 'disabled', '' );

                button.setAttribute( 'data-loading', '' );

                clearTimeout( timer );

                spinner.spin( spinnerWrapper );

                this.setProgress( 0 );

                return this; // chain

            },

            /**

             * Enter the loading state, after a delay.

             */

            startAfter: function( delay ) {

                clearTimeout( timer );

                timer = setTimeout( function() { instance.start(); }, delay );

                return this; // chain

            },

            /**

             * Exit the loading state.

             */

            stop: function() {

                button.removeAttribute( 'disabled' );

                button.removeAttribute( 'data-loading' );

                // Kill the animation after a delay to make sure it

                // runs for the duration of the button transition

                clearTimeout( timer );

                if( spinner ) {

                    timer = setTimeout( function() { spinner.stop(); }, 1000 );

                }

                return this; // chain

            },

            /**

             * Toggle the loading state on/off.

             */

            toggle: function() {

                if( this.isLoading() ) {

                    this.stop();

                }

                else {

                    this.start();

                }

                return this; // chain

            },

            /**

             * Sets the width of the visual progress bar inside of

             * this Ladda button

             *

             * @param {Number} progress in the range of 0-1

             */

            setProgress: function( progress ) {

                // Cap it

                progress = Math.max( Math.min( progress, 1 ), 0 );

                var progressElement = button.querySelector( '.ladda-progress' );

                // Remove the progress bar if we're at 0 progress

                if( progress === 0 && progressElement && progressElement.parentNode ) {

                    progressElement.parentNode.removeChild( progressElement );

                }

                else {

                    if( !progressElement ) {

                        progressElement = document.createElement( 'div' );

                        progressElement.className = 'ladda-progress';

                        button.appendChild( progressElement );

                    }

                    progressElement.style.width = ( ( progress || 0 ) * button.offsetWidth ) + 'px';

                }

            },

            enable: function() {

                this.stop();

                return this; // chain

            },

            disable: function () {

                this.stop();

                button.setAttribute( 'disabled', '' );

                return this; // chain

            },

            isLoading: function() {

                return button.hasAttribute( 'data-loading' );

            },

            remove: function() {

                clearTimeout( timer );

                button.removeAttribute( 'disabled', '' );

                button.removeAttribute( 'data-loading', '' );

                if( spinner ) {

                    spinner.stop();

                    spinner = null;

                }

                for( var i = 0, len = ALL_INSTANCES.length; i < len; i++ ) {

                    if( instance === ALL_INSTANCES[i] ) {

                        ALL_INSTANCES.splice( i, 1 );

                        break;

                    }

                }

            }

        };

        ALL_INSTANCES.push( instance );

        return instance;

    }

    /**

    * Get the first ancestor node from an element, having a

    * certain type.

    *

    * @param elem An HTML element

    * @param type an HTML tag type (uppercased)

    *

    * @return An HTML element

    */

    function getAncestorOfTagType( elem, type ) {

        while ( elem.parentNode && elem.tagName !== type ) {

            elem = elem.parentNode;

        }

        return ( type === elem.tagName ) ? elem : undefined;

    }

    /**

     * Returns a list of all inputs in the given form that

     * have their `required` attribute set.

     *

     * @param form The from HTML element to look in

     *

     * @return A list of elements

     */

    function getRequiredFields( form ) {

        var requirables = [ 'input', 'textarea' ];

        var inputs = [];

        for( var i = 0; i < requirables.length; i++ ) {

            var candidates = form.getElementsByTagName( requirables[i] );

            for( var j = 0; j < candidates.length; j++ ) {

                if ( candidates[j].hasAttribute( 'required' ) ) {

                    inputs.push( candidates[j] );

                }

            }

        }

        return inputs;

    }

    /**

     * Binds the target buttons to automatically enter the

     * loading state when clicked.

     *

     * @param target Either an HTML element or a CSS selector.

     * @param options

     *          - timeout Number of milliseconds to wait before

     *            automatically cancelling the animation.

     */

    function bind( target, options ) {

        options = options || {};

        var targets = [];

        if( typeof target === 'string' ) {

            targets = toArray( document.querySelectorAll( target ) );

        }

        else if( typeof target === 'object' && typeof target.nodeName === 'string' ) {

            targets = [ target ];

        }

        for( var i = 0, len = targets.length; i < len; i++ ) {

            (function() {

                var element = targets[i];

                // Make sure we're working with a DOM element

                if( typeof element.addEventListener === 'function' ) {

                    var instance = create( element );

                    var timeout = -1;

                    element.addEventListener( 'click', function( event ) {

                        // If the button belongs to a form, make sure all the

                        // fields in that form are filled out

                        var valid = true;

                        var form = getAncestorOfTagType( element, 'FORM' );

                        if( typeof form !== 'undefined' ) {

                            var requireds = getRequiredFields( form );

                            for( var i = 0; i < requireds.length; i++ ) {

                                // Alternatively to this trim() check,

                                // we could have use .checkValidity() or .validity.valid

                                if( requireds[i].value.replace( /^\s+|\s+$/g, '' ) === '' ) {

                                    valid = false;

                                }

                            }

                        }

                        if( valid ) {

                            // This is asynchronous to avoid an issue where setting

                            // the disabled attribute on the button prevents forms

                            // from submitting

                            instance.startAfter( 1 );

                            // Set a loading timeout if one is specified

                            if( typeof options.timeout === 'number' ) {

                                clearTimeout( timeout );

                                timeout = setTimeout( instance.stop, options.timeout );

                            }

                            // Invoke callbacks

                            if( typeof options.callback === 'function' ) {

                                options.callback.apply( null, [ instance ] );

                            }

                        }

                    }, false );

                }

            })();

        }

    }

    /**

     * Stops ALL current loading animations.

     */

    function stopAll() {

        for( var i = 0, len = ALL_INSTANCES.length; i < len; i++ ) {

            ALL_INSTANCES[i].stop();

        }

    }

    function createSpinner( button ) {

        var height = button.offsetHeight,

            spinnerColor;

        if( height === 0 ) {

            // We may have an element that is not visible so

            // we attempt to get the height in a different way

            height = parseFloat( window.getComputedStyle( button ).height );

        }

        // If the button is tall we can afford some padding

        if( height > 32 ) {

            height *= 0.8;

        }

        // Prefer an explicit height if one is defined

        if( button.hasAttribute( 'data-spinner-size' ) ) {

            height = parseInt( button.getAttribute( 'data-spinner-size' ), 10 );

        }

        // Allow buttons to specify the color of the spinner element

        if( button.hasAttribute( 'data-spinner-color' ) ) {

            spinnerColor = button.getAttribute( 'data-spinner-color' );

        }

        var lines = 12,

            radius = height * 0.2,

            length = radius * 0.6,

            width = radius < 7 ? 2 : 3;

        return new Spinner( {

            color: spinnerColor || '#fff',

            lines: lines,

            radius: radius,

            length: length,

            width: width,

            zIndex: 'auto',

            top: 'auto',

            left: 'auto',

            className: ''

        } );

    }

    function toArray( nodes ) {

        var a = [];

        for ( var i = 0; i < nodes.length; i++ ) {

            a.push( nodes[ i ] );

        }

        return a;

    }

    // Public API

    return {

        bind: bind,

        create: create,

        stopAll: stopAll

    };

}));