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

    /**
     * 
     * CLASS: cz_date_picker_control
     * 
     */
    
    if ( $( '.cdpc' ).length > 0 ) {
    
        /**
         * Initialize the date pickers - this function will add a whole bunch
         * more classes to the corresponding divs - per jQuery UI.
         */
        $( '.cdpc-datepicker' ).datepicker();
        
    }

    /**
     * 
     * CLASS: cz_media_library_control
     * 
     */
    
    if ( $( '.cmlc' ).length > 0 ) {

        /**
         * The cz_media_library_control is responsible for setting an
         * image (or media file).  To do that, a button is displayed and when
         * it is clicked, this function is responsible for making the Media
         * Library dialog appear.
         */
        $( '.cmlc-select-media' ).on( '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, grab the URL and set it
            //  as the text field's value; note the $.change call -
            //  this is what enables the "Save & Publish" button
            //  in the Theme Customizer.
            var container = $( this ).closest( '.cmlc' );
            dialog.on( 'select', function() {

                //  The 'attachment' will be an array of a ton of information about the selected image.
                attachment = dialog.state().get( 'selection' ).first().toJSON();
                
                container.find( '.cmlc-value-preview' ).attr( 'src', attachment.url );
                container.find( '.cmlc-value-hidden' ).val( attachment.id ).trigger( 'change' );
                container.find( '.cmlc-no-media-warning' ).addClass( 'hidden' );

            });

            //  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.
         */
        $( '.cmlc-remove-media' ).on( 'click', function( e ) {

            var container = $( this ).closest( '.cmlc' );
            container.find( '.cmlc-value-preview' ).attr( 'src', '' );
            container.find( '.cmlc-value-hidden' ).val( '-1' ).trigger( 'change' );
            container.find( '.cmlc-no-media-warning' ).removeClass( 'hidden' );

        });

    }
    
    /**
     * 
     * CLASS: cz_number_bar_control
     * 
     */
    
    if ( $( '.cnbc' ).length > 0 ) {

        /**
         * There is a hidden field marked up with the rest of the slider;
         * it is this hidden field that gets updated by the slider, then
         * the hidden field gets saved to the DB as theme options.
         */
        $( '.cnbc-slider' ).on( 'slide', function( e, ui ) {

            var container = $( this ).closest( '.cnbc' );
            container.find( '.cnbc-value-hidden' ).val( ui.value ).trigger( 'change' );
            container.find( '.cnbc-display-value' ).html( ui.value );

        });

        /**
         * Initialize the sliders - this function will add a whole bunch
         * more classes to the #slider div - per jQuery UI.
         */
        $( '.cnbc-slider' ).slider( {

            create:     function() {

                //  For whatever reason, these properties cannot be set to dynamic values
                //  in the value-pairs section (e.g. min: +$( this ).data( 'min' ).
                var min = +$( this ).data( 'min' );
                var max = +$( this ).data( 'max' );
                var step = +$( this ).data( 'step' );
                $( this ).slider( 'option', 'min', min );
                $( this ).slider( 'option', 'max', max );
                $( this ).slider( 'option', 'step', step );

                //  Set an initial value - it sits in the hidden field.
                var container = $( this ).closest( '.cnbc' );
                var starting_value = +container.find( '.cnbc-value-hidden' ).val();
                $( this ).slider( 'option', 'value', starting_value );

                //  Set the labels.
                container.find( '.cnbc-display-value' ).html( starting_value );

            }

        });
        
    }

    /**
     * 
     * CLASS: cz_radio_image_control
     * 
     */
    
    if ( $( '.cric' ).length > 0 ) {

        /**
         * Highlight the image that is selected in a group of radio options.
         */
        $( '.cric-label' ).on( 'click', function() {

            $( this ).children( '.cric-image' ).addClass( 'cric-selected' );
            $( this ).siblings().children( '.cric-image' ).removeClass( 'cric-selected' );

        });
        
    }

});