jQuery( document ).ready( function( $ ) {

    /**
     * 
     * CLASS: mb_date_picker_control
     * 
     */

    if ( $( '.mb_date_picker_ctl' ).length > 0 ) {

        /**
         * Initialize the date pickers - this function will add a whole bunch
         * more classes to the corresponding divs - per jQuery UI.
         */
        $( '.mb-datepicker' ).datepicker();
        
    }

    /**
     * 
     * CLASS: mb_media_library_control
     * 
     */
    
    if ( $( '.mb_media_library_ctl' ).length > 0 ) {

        /**
         * Initialize each media library control.
         */
        $( '.mb_media_library_ctl' ).each( function() {

            //  Only turn on sort ability if allowing multiple media.
            var container = $( this );
            var preview = container.find( '.mbmlc-preview' );
            var value_element = container.find( '.mbmlc-value' );
            var multiple = value_element.data( 'multiple' );
            if ( multiple ) {

                preview.sortable( {
                    items: 'li'         //  Excludes the 'select' button from being included in the sort.
                });
                preview.disableSelection();

            }

            //  Refresh the preview.
            mbmlc_refresh_preview( container );

        });

        /**
         * The mb_media_library_control is responsible for selection
         * of images (or media files).  Images are selected through
         * a Media Library dialog that is invoked through a 'select'
         * button within the control.
         */
        $( '.mbmlc-select' ).live( 'click', function( e ) {

            //  Instantiate a wp.media object - this is the
            //  Media Library Selector dialog.
            var dialog = wp.media.frames.file_frame = wp.media({

                title: 'Choose Image',
                button: {

                    text: 'Choose Image'

                },
                multiple: false

            });

            //  When a file is selected, add the URL to the hidden
            //  input element and refresh the preview panel.
            var container = $( this ).closest( '.mbc' );
            dialog.on( 'select', function() {

                //  Get the media that was selected.
                attachment = dialog.state().get( 'selection' ).first().toJSON();

                //  Get the list of URLs.
                var url_list = mbmlc_get_url_list( container );

                //  Only process if the image has not already been selected.
                if ( $.inArray( attachment.url, url_list ) == -1 ) {

                    //  Add to the list of URLs.
                    url_list.push( attachment.url );

                    //  Re-compose the one long string with the new URL.
                    container.find( '.mbmlc-value' ).val( url_list.join( '|' ) );

                    //  Refresh the preview pane.
                    mbmlc_refresh_preview( container );
                }

            });

            //  The dialog should exist now, so open it..
            dialog.open();

        });

        /**
         * Removes the image from the cz_media_library_control;
         * note the $.change call - this is what enables the "Save & Publish"
         * button in the Theme Customizer.
         * 
         * Note:    Using 'live' instead of 'on' because the remove
         *          elements are dynamically created.
         * @link http://api.jquery.com/live/
         * @link http://www.webgeekly.com/tutorials/jquery/use-jquery-event-handling-with-dynamically-loaded-elements/
         */
        $( '.mbmlc-remove' ).live( 'click', function( e ) {

            //  Get the URL that was selected for removal.
            var container = $( this ).closest( '.mbc' );
            var image_container = $( this ).closest( '.image-container' );
            var remove_url = image_container.find( 'img' ).attr( 'src' );

            //  Remove the URL from the value list.
            var url_list = mbmlc_get_url_list( container );
            url_list = $.grep( url_list, function( a ) {
                return ( a != remove_url );
            });

            //  Re-compose the one long string with the new URL.
            container.find( '.mbmlc-value' ).val( url_list.join( '|' ) );

            //  Refresh the preview pane.
            mbmlc_refresh_preview( container );

        });

        /**
         * This is an event for capturing when the user is done changing
         * the order of a preview image.  The original purpose for this
         * event is to update the hidden input field that stores the
         * list of images.  It is important to do this because the refresh
         * routine is based on the value of that hidden input field.
         */
        $( '.mbmlc-preview' ).on( 'sortupdate', function( e, ui ) {

            //  Get a list of the image URLs in the preview container.
            url_list = [];
            var preview = $( this );
            preview.find( 'img' ).each( function() {

                var url = $( this ).attr( 'src' );
                url_list.push( url );

            });

            //  Re-compose the one long string with the new URL.
            var container = preview.closest( '.mbc' );
            var value_element = container.find( '.mbmlc-value' );
            value_element.val( url_list.join( '|' ) );

        });

        /**
         * Draws up previews for a list of images.
         * @param object container The overall control container
         */
        function mbmlc_refresh_preview( container ) {

            //  Get the list of URLs.
            var url_list = mbmlc_get_url_list( container );

            //  Run through the list of URLs and create a preview image for each.
            var preview = container.find( '.mbmlc-preview' );
            preview.empty();
            $.each( url_list, function( index, value ) {

                var image_markup =
                    '<li class="image-container">' +
                        '<img src="' + value + '">' +
                        '<span class="mbmlc-remove">&times;</span>' +
                    '</li>';
                var image = $( image_markup );
                preview.append( image );

            });

            //  Show the 'select' button based on the settings and how many previews are displayed.
            var value_element = container.find( '.mbmlc-value' );
            var multiple = value_element.data( 'multiple' );
            if ( multiple || ( !multiple && ( url_list.length == 0 ) ) ) {

                var select_text = value_element.data( 'button-text' );
                var button_markup =
                    '<button class="mbmlc-select button-secondary" type="button">' +
                        select_text + '<br><i class="fa fa-plus"></i>' +
                    '</button>';
                var button = $( button_markup );
                preview.append( button );
            }

        }

        /**
         * Retrieves an array of URLs.  This function was broken out because it
         * has a special case to handle with empty array elements from parsing.
         * @param object container The overall control container
         * @returns array The list of URLs in the given container
         */
        function mbmlc_get_url_list( container ) {

            //  Find the element that contains the URLs.
            var value_element = container.find( '.mbmlc-value' );

            //  The URLs are stored as one long string, so split them up.
            var url_list = value_element.val().split( '|' );

            //  If the URLs were empty, the split function returns a single empty
            //  element instead of nothing, so get rid of it.
            url_list = $.grep( url_list, function( a ) {
                return ( a.length > 0 );
            });

            //  Return the prepared list.
            return url_list;
        }
        
    }

    /**
     * 
     * CLASS: mb_number_bar_control
     * 
     */

    if ( $( '.mb_number_bar_ctl' ).length > 0 ) {
    
        /**
         * Initialize the sliders - this function will add a whole bunch
         * more classes to the corresponding divs - per jQuery UI.
         */
        $( '.mbnbc-slider' ).slider( {

            //  Note:   The documentation states that there is an event listener
            //          for 'slidecreate', but that does not appear to work; thus
            //          now using the direct 'create' handler in the constructor.
            // @link http://api.jqueryui.com/slider/#event-create
            create: function( event, ui ) {

                //  Set the range information ON the slider.
                var container = $( this ).closest( '.mbc' );
                var value_element = container.find( '.mbnbc-value' );
                var min = +value_element.data( 'min' );
                var max = +value_element.data( 'max' );
                var step = +value_element.data( 'step' );
                $( this ).slider( 'option', 'min', min );
                $( this ).slider( 'option', 'max', max );
                $( this ).slider( 'option', 'step', step );

                //  Set the initial value - where the thumb appears.
                var starting_value = +value_element.val();
                $( this ).slider( 'option', 'value', starting_value );

            }

        });

        /**
         * Update the hidden field when the user moves the slider -
         * the hidden field contains the value saved to the database.
         */
        $( '.mbnbc-slider' ).on( 'slide', function( e, ui ) {

            var container = $( this ).closest( '.mbc' );
            var value_element = container.find( '.mbnbc-value' );
            value_element.val( ui.value );

        });
        
    }

});