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, if it is not a duplicate, then add the
            //  ID/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 IDs.
                var attachment_list = mbmlc_get_attachment_list( container );

                //  Determine if the attachment is already in the list.
                var is_dupe = false;
                $.each( attachment_list, function( index, value ) {
                    if ( attachment.id == value.id ) {
                        is_dupe = true;
                        return false;
                    }
                });

                //  Only process if the image has not already been selected.
                if ( !is_dupe ) {

                    //  Add the ID/URL pair to the list of attachments.
                    attachment_list.push( { id: attachment.id, url: attachment.url } );

                    //  Re-compose the ID and URL delimited strings with the newly-added attachment.
                    var all_ids = [];
                    var all_urls = [];
                    $.each( attachment_list, function( index, value ) {
                        all_ids.push( value.id );
                        all_urls.push( value.url );
                    });
                    container.find( '.mbmlc-value' ).val( all_ids.join( '|' ) );
                    container.find( '.mbmlc-value' ).attr( 'data-paths', all_urls.join( '|' ) );    //  Note: .data( 'paths' ) does not update the DOM for some reason

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

            });

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

        });

        /**
         * Removes the image from the mb_media_library_control.
         * 
         * 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_id = image_container.find( 'img' ).attr( 'data-id' );

            //  Get the list of attachments and remove the one desired.
            var attachment_list = mbmlc_get_attachment_list( container );
            attachment_list = $.grep( attachment_list, function( a ) {
                return ( a.id != remove_id );
            });

            //  Re-compose the ID and URL delimited strings without the newly-removed attachment.
            var all_ids = [];
            var all_urls = [];
            $.each( attachment_list, function( index, value ) {
                all_ids.push( value.id );
                all_urls.push( value.url );
            });
            container.find( '.mbmlc-value' ).val( all_ids.join( '|' ) );
            container.find( '.mbmlc-value' ).attr( 'data-paths', all_urls.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 -
            //  this order is important since the sortable functionality
            //  could have changed things.
            var all_ids = [];
            var all_urls = [];
            var preview = $( this );
            preview.find( 'img' ).each( function() {
                all_ids.push( $( this ).attr( 'data-id' ) );
                all_urls.push( $( this ).attr( 'src' ) );
            });

            //  Re-compose the ID and URL delimited strings with the new ordering.
            var container = preview.closest( '.mbc' );
            container.find( '.mbmlc-value' ).val( all_ids.join( '|' ) );
            container.find( '.mbmlc-value' ).attr( 'data-paths', all_urls.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 attachment_list = mbmlc_get_attachment_list( container );

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

                var image_markup =
                    '<li class="image-container">' +
                        '<img src="' + value.url + '" data-id="' + value.id + '">' +
                        '<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 && ( attachment_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 a JSON array that pairs IDs with URLs.  This function was broken out
         * because it has a special case to handle with empty array elements from parsing
         * that can get really annoying to handle throughout the rest of the system logic.
         * @param object container The overall control container
         * @returns array The list of IDs in the given container
         */
        function mbmlc_get_attachment_list( container ) {

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

            //  The IDs/URLs are stored as two delimited strings, so split each up.
            var id_list = value_element.val().split( '|' );
            var url_list = value_element.attr( 'data-paths' ).split( '|' );

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

            //  Turn the two lists into a key/value pair structure.
            var list = [];
            for ( var i = 0; i < id_list.length; i++ )
            {
                list.push( { id: +id_list[i], url: url_list[i] } );
            }

            //  Return the prepared list.
            return 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 );

        });
        
    }

});