<?php
/**
 * Settings API.
 * 
 * @package DiviSupreme
 */
namespace DiviSupreme\Core;

class SettingsAPI {

    /**
     * settings sections array
     *
     * @var array
     */
    protected $settings_sections = array();

    /**
     * Settings fields array
     *
     * @var array
     */
    protected $settings_fields = array();

    public function __construct() {
        add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
    }

    /**
     * Echo settings field markup (esc_attr / esc_html / wp_kses_post applied when the string is built).
     *
     * @param string $html Field markup.
     * @return void
     */
    private function echo_admin_field_markup( $html ) {
        echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Markup is assembled in callbacks with esc_attr, esc_html, or wp_kses_post.
    }

    /**
     * Echo a settings section description block.
     *
     * @param string $desc Section description HTML (plugin-defined).
     * @return void
     */
    private function echo_section_description_markup( $desc ) {
        echo wp_kses_post( $desc );
    }

    /**
     * Enqueue scripts and styles
     */
    function admin_enqueue_scripts( $hook ) {
        if ( 'toplevel_page_divi_supreme_settings' !== $hook ) {
            return;
        }
            wp_enqueue_style( 'wp-color-picker' );
            wp_enqueue_media();
            wp_enqueue_script( 'wp-color-picker' );
            wp_enqueue_script( 'jquery' );
    }

    /**
     * Set settings sections
     *
     * @param array $sections setting sections array.
     */
    function set_sections( $sections ) {
        $this->settings_sections = $sections;

        return $this;
    }

    /**
     * Add a single section
     *
     * @param array $section
     */
    function add_section( $section ) {
        $this->settings_sections[] = $section;

        return $this;
    }

    /**
     * Set settings fields
     *
     * @param array $fields settings fields array
     */
    function set_fields( $fields ) {
        $this->settings_fields = $fields;

        return $this;
    }

    function add_field( $section, $field ) {
        $defaults = array(
            'name'  => '',
            'label' => '',
            'desc'  => '',
            'type'  => 'text',
        );

        $arg                                 = wp_parse_args( $field, $defaults );
        $this->settings_fields[ $section ][] = $arg;

        return $this;
    }

    /**
     * Initialize and registers the settings sections and fileds to WordPress
     *
     * Usually this should be called at `admin_init` hook.
     *
     * This function gets the initiated settings sections and fields. Then
     * registers them to WordPress and ready for use.
     */
    function admin_init() {
        // register settings sections
        foreach ( $this->settings_sections as $section ) {
            if ( false == get_option( $section['id'] ) ) {
                add_option( $section['id'] );
            }

            if ( isset( $section['desc'] ) && ! empty( $section['desc'] ) ) {
                $section['desc'] = '<div class="inside">' . $section['desc'] . '</div>';
                $callback        = function() use ( $section ) {
                    $this->echo_section_description_markup( $section['desc'] );
                };
            } elseif ( isset( $section['callback'] ) ) {
                $callback = $section['callback'];
            } else {
                $callback = null;
            }

            add_settings_section( $section['id'], $section['title'], $callback, $section['id'] );
        }

        // register settings fields
        foreach ( $this->settings_fields as $section => $field ) {
            foreach ( $field as $option ) {

                $name     = $option['name'];
                $type     = isset( $option['type'] ) ? $option['type'] : 'text';
                $label    = isset( $option['label'] ) ? $option['label'] : '';
                $callback = isset( $option['callback'] ) ? $option['callback'] : array( $this, 'callback_' . $type );

                $args = array(
                    'id'                => $name,
                    'class'             => isset( $option['class'] ) ? $option['class'] : $name,
                    'label_for'         => "{$section}[{$name}]",
                    'desc'              => isset( $option['desc'] ) ? $option['desc'] : '',
                    'name'              => $label,
                    'section'           => $section,
                    'size'              => isset( $option['size'] ) ? $option['size'] : null,
                    'options'           => isset( $option['options'] ) ? $option['options'] : '',
                    'std'               => isset( $option['default'] ) ? $option['default'] : '',
                    'sanitize_callback' => isset( $option['sanitize_callback'] ) ? $option['sanitize_callback'] : '',
                    'type'              => $type,
                    'placeholder'       => isset( $option['placeholder'] ) ? $option['placeholder'] : '',
                    'min'               => isset( $option['min'] ) ? $option['min'] : '',
                    'max'               => isset( $option['max'] ) ? $option['max'] : '',
                    'step'              => isset( $option['step'] ) ? $option['step'] : '',
                    'always_enabled'    => ! empty( $option['always_enabled'] ),
                );

                add_settings_field( "{$section}[{$name}]", $label, $callback, $section, $section, $args );
            }
        }

        // creates our settings in the options table
        foreach ( $this->settings_sections as $section ) {
            register_setting( $section['id'], $section['id'], array( $this, 'sanitize_options' ) );
        }
    }

    /**
     * Get field description for display
     *
     * @param array $args settings field args
     */
    public function get_field_description( $args ) {
        if ( ! empty( $args['desc'] ) ) {
            $desc = sprintf( '<p class="description">%s</p>', wp_kses_post( $args['desc'] ) );
        } else {
            $desc = '';
        }

        return $desc;
    }

    /**
     * Displays a text field for a settings field
     *
     * @param array $args settings field args
     */
    function callback_text( $args ) {

        $value       = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
        $size        = isset( $args['size'] ) && ! is_null( $args['size'] ) ? $args['size'] : 'regular';
        $type        = isset( $args['type'] ) ? $args['type'] : 'text';
        $placeholder = empty( $args['placeholder'] ) ? '' : ' placeholder="' . $args['placeholder'] . '"';

        $html  = sprintf( '<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s/>', $type, $size, $args['section'], $args['id'], $value, $placeholder );
        $html .= $this->get_field_description( $args );

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays a url field for a settings field
     *
     * @param array $args settings field args
     */
    function callback_url( $args ) {
        $this->callback_text( $args );
    }

    /**
     * Displays a number field for a settings field
     *
     * @param array $args settings field args
     */
    function callback_number( $args ) {
        $value       = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
        $size        = isset( $args['size'] ) && ! is_null( $args['size'] ) ? $args['size'] : 'regular';
        $type        = isset( $args['type'] ) ? $args['type'] : 'number';
        $placeholder = empty( $args['placeholder'] ) ? '' : ' placeholder="' . $args['placeholder'] . '"';
        $min         = ( $args['min'] == '' ) ? '' : ' min="' . $args['min'] . '"';
        $max         = ( $args['max'] == '' ) ? '' : ' max="' . $args['max'] . '"';
        $step        = ( $args['step'] == '' ) ? '' : ' step="' . $args['step'] . '"';

        $html  = sprintf( '<input type="%1$s" class="%2$s-number" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s%7$s%8$s%9$s/>', $type, $size, $args['section'], $args['id'], $value, $placeholder, $min, $max, $step );
        $html .= $this->get_field_description( $args );

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays a checkbox for a settings field
     *
     * @param array $args settings field args
     */
    function callback_checkbox( $args ) {

        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );

        $html = '<fieldset>';

        if ( ! empty( $args['always_enabled'] ) ) {
            $html .= sprintf(
                '<input type="hidden" name="%1$s[%2$s]" value="on" />',
                esc_attr( $args['section'] ),
                esc_attr( $args['id'] )
            );
            /* translators: Module cannot be deactivated from settings. */
            $html .= '<p><strong>' . esc_html__( 'Always enabled', 'dsm-supreme-modules-pro-for-divi' ) . '</strong></p>';
            $html .= $this->get_field_description( $args );
            $html .= '</fieldset>';

            $this->echo_admin_field_markup( $html );

            return;
        }

        $html .= sprintf( '<label for="dsm-%1$s[%2$s]">', $args['section'], $args['id'] );
        $html .= sprintf( '<input type="hidden" name="%1$s[%2$s]" value="off" />', $args['section'], $args['id'] );
        $html .= sprintf( '<input type="checkbox" class="checkbox" id="dsm-%1$s[%2$s]" name="%1$s[%2$s]" value="on" %3$s /><span class="dsm-settings-slider dsm-settings-round"></span></label><br>', $args['section'], $args['id'], checked( $value, 'on', false ) );
        $html .= $this->get_field_description( $args );
        $html .= '</fieldset>';

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays a multicheckbox for a settings field
     *
     * @param array $args settings field args
     */
    function callback_multicheck( $args ) {

        $value = $this->get_option( $args['id'], $args['section'], $args['std'] );
        $html  = '<fieldset>';
        $html .= sprintf( '<input type="hidden" name="%1$s[%2$s]" value="" />', $args['section'], $args['id'] );
        foreach ( $args['options'] as $key => $label ) {
            $checked = isset( $value[ $key ] ) ? $value[ $key ] : '0';
            $html   .= sprintf( '<label for="wpuf-%1$s[%2$s][%3$s]">', $args['section'], $args['id'], $key );
            $html   .= sprintf( '<input type="checkbox" class="checkbox" id="wpuf-%1$s[%2$s][%3$s]" name="%1$s[%2$s][%3$s]" value="%3$s" %4$s />', $args['section'], $args['id'], $key, checked( $checked, $key, false ) );
            $html   .= sprintf( '%1$s</label><br>', $label );
        }

        $html .= $this->get_field_description( $args );
        $html .= '</fieldset>';

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays a radio button for a settings field
     *
     * @param array $args settings field args
     */
    function callback_radio( $args ) {

        $value = $this->get_option( $args['id'], $args['section'], $args['std'] );
        $html  = '<fieldset>';

        foreach ( $args['options'] as $key => $label ) {
            $html .= sprintf( '<label for="wpuf-%1$s[%2$s][%3$s]">', $args['section'], $args['id'], $key );
            $html .= sprintf( '<input type="radio" class="radio" id="wpuf-%1$s[%2$s][%3$s]" name="%1$s[%2$s]" value="%3$s" %4$s />', $args['section'], $args['id'], $key, checked( $value, $key, false ) );
            $html .= sprintf( '%1$s</label><br>', $label );
        }

        $html .= $this->get_field_description( $args );
        $html .= '</fieldset>';

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays a selectbox for a settings field
     *
     * @param array $args settings field args
     */
    function callback_select( $args ) {

        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
        $size  = isset( $args['size'] ) && ! is_null( $args['size'] ) ? $args['size'] : 'regular';
        $html  = sprintf( '<select class="%1$s" name="%2$s[%3$s]" id="%2$s[%3$s]">', $size, $args['section'], $args['id'] );

        foreach ( $args['options'] as $key => $label ) {
            $html .= sprintf( '<option value="%s"%s>%s</option>', $key, selected( $value, $key, false ), $label );
        }

        $html .= sprintf( '</select>' );
        $html .= $this->get_field_description( $args );

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays a textarea for a settings field
     *
     * @param array $args settings field args
     */
    function callback_textarea( $args ) {

        $value       = esc_textarea( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
        $size        = isset( $args['size'] ) && ! is_null( $args['size'] ) ? $args['size'] : 'regular';
        $placeholder = empty( $args['placeholder'] ) ? '' : ' placeholder="' . $args['placeholder'] . '"';

        $html  = sprintf( '<textarea rows="5" cols="55" class="%1$s-text" id="%2$s[%3$s]" name="%2$s[%3$s]"%4$s>%5$s</textarea>', $size, $args['section'], $args['id'], $placeholder, $value );
        $html .= $this->get_field_description( $args );

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays the html for a settings field
     *
     * @param array $args settings field args
     * @return string
     */
    function callback_html( $args ) {
        $this->echo_admin_field_markup( $this->get_field_description( $args ) );
    }

    /**
     * Displays a rich text textarea for a settings field
     *
     * @param array $args settings field args
     */
    function callback_wysiwyg( $args ) {

        $value = $this->get_option( $args['id'], $args['section'], $args['std'] );
        $size  = isset( $args['size'] ) && ! is_null( $args['size'] ) ? $args['size'] : '500px';

        echo '<div style="max-width: ' . esc_attr( $size ) . ';">';

        $editor_settings = array(
            'teeny'         => true,
            'textarea_name' => $args['section'] . '[' . $args['id'] . ']',
            'textarea_rows' => 10,
        );

        if ( isset( $args['options'] ) && is_array( $args['options'] ) ) {
            $editor_settings = array_merge( $editor_settings, $args['options'] );
        }

        wp_editor( $value, $args['section'] . '-' . $args['id'], $editor_settings );

        echo '</div>';

        $this->echo_admin_field_markup( $this->get_field_description( $args ) );
    }

    /**
     * Displays a file upload field for a settings field
     *
     * @param array $args settings field args
     */
    function callback_file( $args ) {

        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
        $size  = isset( $args['size'] ) && ! is_null( $args['size'] ) ? $args['size'] : 'regular';
        $id    = $args['section'] . '[' . $args['id'] . ']';
        $label = isset( $args['options']['button_label'] ) ? $args['options']['button_label'] : __( 'Choose File' );

        $html  = sprintf( '<input type="text" class="%1$s-text dsm-url" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s"/>', $size, $args['section'], $args['id'], $value );
        $html .= '<input type="button" class="button dsm-browse" value="' . $label . '" />';
        $html .= $this->get_field_description( $args );

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays a password field for a settings field
     *
     * @param array $args settings field args
     */
    function callback_password( $args ) {

        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
        $size  = isset( $args['size'] ) && ! is_null( $args['size'] ) ? $args['size'] : 'regular';

        $html  = sprintf( '<input type="password" class="%1$s-text" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s"/>', $size, $args['section'], $args['id'], $value );
        $html .= $this->get_field_description( $args );

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays a color picker field for a settings field
     *
     * @param array $args settings field args
     */
    function callback_color( $args ) {

        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
        $size  = isset( $args['size'] ) && ! is_null( $args['size'] ) ? $args['size'] : 'regular';

        $html  = sprintf( '<input type="text" class="%1$s-text wp-color-picker-field" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s" data-default-color="%5$s" />', $size, $args['section'], $args['id'], $value, $args['std'] );
        $html .= $this->get_field_description( $args );

        $this->echo_admin_field_markup( $html );
    }


    /**
     * Displays a select box for creating the pages select box
     *
     * @param array $args settings field args
     */
    function callback_pages( $args ) {

        $html = wp_dropdown_pages(
            array(
                'selected' => esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) ),
                'name'     => esc_attr( $args['section'] . '[' . $args['id'] . ']' ),
                'id'       => esc_attr( $args['section'] . '[' . $args['id'] . ']' ),
                'echo'     => 0,
            )
        );
        $this->echo_admin_field_markup( $html );
    }

    /**
     * Sanitize callback for Settings API
     *
     * @return mixed
     */
    function sanitize_options( $options ) {

        if ( ! $options ) {
            return $options;
        }

        foreach ( $options as $option_slug => $option_value ) {
            $sanitize_callback = $this->get_sanitize_callback( $option_slug );

            // If callback is set, call it
            if ( $sanitize_callback ) {
                $options[ $option_slug ] = call_user_func( $sanitize_callback, $option_value );
                continue;
            }
        }

        return $options;
    }

    /**
     * Get sanitization callback for given option slug
     *
     * @param string $slug option slug
     *
     * @return mixed string or bool false
     */
    function get_sanitize_callback( $slug = '' ) {
        if ( empty( $slug ) ) {
            return false;
        }

        // Iterate over registered fields and see if we can find proper callback
        foreach ( $this->settings_fields as $section => $options ) {
            foreach ( $options as $option ) {
                if ( $option['name'] != $slug ) {
                    continue;
                }

                // Return the callback name
                return isset( $option['sanitize_callback'] ) && is_callable( $option['sanitize_callback'] ) ? $option['sanitize_callback'] : false;
            }
        }

        return false;
    }

    /**
     * Get the value of a settings field
     *
     * @param string $option  settings field name
     * @param string $section the section name this field belongs to
     * @param string $default default text if it's not found
     * @return string
     */
    function get_option( $option, $section, $default = '' ) {

        $options = get_option( $section );

        if ( isset( $options[ $option ] ) ) {
            return $options[ $option ];
        }

        return $default;
    }

    /**
     * Show navigations as tab
     *
     * Shows all the settings section labels as tab
     */
    function show_navigation() {
        $html = '<h2 class="nav-tab-wrapper">';

        $count = count( $this->settings_sections );

        // don't show the navigation if only one section exists
        if ( $count === 1 ) {
            return;
        }

        foreach ( $this->settings_sections as $tab ) {
            $html .= sprintf( '<a href="#%1$s" class="nav-tab" id="%1$s-tab">%2$s</a>', $tab['id'], $tab['title'] );
        }

        $html .= '</h2>';

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Displays a  2 colspan subheading field for a settings field
     *
     * @param array $args settings field args
     */
    function callback_subheading( $args ) {

        $html  = '<h3 class="setting_subheading_title">' . esc_html( $args['name'] ) . '</h3>';
        $html .= $this->get_field_description( $args );

        $this->echo_admin_field_markup( $html );
    }

    /**
     * Show the section settings forms
     *
     * This function displays every sections in a different form
     */
    function show_forms() {
        ?>
    <div id="poststuff" class="dsm-settings-panel">
        <div id="post-body" class="metabox-holder columns-2">
            <div id="post-body-content">
            <div class="meta-box-sortables ui-sortable">
            <?php foreach ( $this->settings_sections as $form ) {
                $id = sanitize_text_field( $form['id'] );
                ?>
                <div id="<?php echo esc_attr( $id ); ?>" class="group" style="display: none;">
                    <form method="post" action="options.php">
                        <?php
                        do_action( 'dsm_form_top_' . $id, $form );
                        settings_fields( $id );
                        do_settings_sections( $id );
                        do_action( 'dsm_form_bottom_' . $id, $form );
                        if ( isset( $this->settings_fields[ $id ] ) ) :
                            ?>
                        <div>
                            <?php submit_button(); ?>
                        </div>
                        <?php endif; ?>
                    </form>
                </div>
            <?php } ?>
        </div>
        </div>
            <?php $this->divi_supreme_settings(); ?>
        </div>
        <br class="clear">
    </div>
        <?php
        // $this->divi_supreme_settings();
        $this->script();
    }

    function divi_supreme_settings() {
        ?>
<div id="postbox-container-1" class="postbox-container">
    <div class="meta-box-sortables">
        <div class="postbox">
            <h3 class="activity-block"><span class="dashicons dashicons-media-document"></span> <?php esc_html_e( 'Documentation', 'dsm-supreme-modules-pro-for-divi' ); ?></h3>
            <div class="inside">
                <p><?php esc_html_e( 'Get started by spending some time with the documentation to get familiar with Divi Supreme Pro. The Documentation will cover all the information needed when using our Divi Supreme to build an amazing website, as well as some helpful tips and tricks that will make your experience working with our Divi modules and extensions easier and more enjoyable.', 'dsm-supreme-modules-pro-for-divi' ); ?></p>
                <a href="https://docs.divisupreme.com/" class="button button-primary" target="_blank"><?php esc_html_e( 'Documentation', 'dsm-supreme-modules-pro-for-divi' ); ?></a>
            </div>
        </div>
    </div>
    <div class="meta-box-sortables">
        <div class="postbox">
            <h3 class="activity-block"><span class="dashicons dashicons-sos"></span> <?php esc_html_e( 'Need Help?', 'dsm-supreme-modules-pro-for-divi' ); ?></h3>
            <div class="inside">
                <p><?php esc_html_e( 'Having issues or difficulties? Get help from the community on our Facebook Divi Supreme Community or contact us through our website contact form.', 'dsm-supreme-modules-pro-for-divi' ); ?></p>
                <p>
                <a href="https://www.facebook.com/groups/261974664518981/" class="button button-primary" target="_blank"><?php esc_html_e( 'Join Divi Supreme Community', 'dsm-supreme-modules-pro-for-divi' ); ?></a>
            </p>
                <a href="https://divisupreme.com/contact/" class="button button-primary" target="_blank"><?php esc_html_e( 'Contact Support', 'dsm-supreme-modules-pro-for-divi' ); ?></a>
            </div>
        </div>
    </div>
    <div class="meta-box-sortables">
        <div class="postbox">
            <h3 class="activity-block"><span class="dashicons dashicons-heart"></span> <?php esc_html_e( 'Motivate us!', 'dsm-supreme-modules-pro-for-divi' ); ?></h3>
            <div class="inside">
                <p><?php esc_html_e( 'Could you please do us a BIG favor and leave us a review on Trustpilot? This would boost our motivation and help other users make a comfortable decision while choosing Divi Supreme.', 'dsm-supreme-modules-pro-for-divi' ); ?></p>
                <p>
                <a href="https://www.trustpilot.com/review/divisupreme.com" target="_blank" style="color:#ffb900; text-decoration: none;" class="dsm-rating-link" data-rated="' . esc_attr__( 'Thanks :)', 'dsm-supreme-modules-pro-for-divi' ) . '"><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span></a>
                </p>
                <a href="https://www.trustpilot.com/review/divisupreme.com" data-rated="' . esc_attr__( 'Thanks :)', 'dsm-supreme-modules-pro-for-divi' ) . '" class="button button-primary" target="_blank"><?php esc_html_e( 'Write a review', 'dsm-supreme-modules-pro-for-divi' ); ?></a>
            </div>
        </div>
    </div>
</div>
        <?php
    }

    /**
     * Tabbable JavaScript codes & Initiate Color Picker
     *
     * This code uses localstorage for displaying active tabs
     */
    function script() {
        ?>
    <script>
        jQuery(document).ready(function($) {
            //Initiate Color Picker
            $('.wp-color-picker-field').wpColorPicker();

            // Switches option sections
            $('.group').hide();
            var activetab = '';
            if (typeof(localStorage) != 'undefined' ) {
                activetab = localStorage.getItem("activetab");
            }

            //if url has section id as hash then set it as active or override the current local storage value
            if(window.location.hash){
                activetab = window.location.hash;
                if (typeof(localStorage) != 'undefined' ) {
                    localStorage.setItem("activetab", activetab);
                }
            }

            if (activetab != '' && $(activetab).length ) {
                $(activetab).fadeIn();
            } else {
                $('.group:first').fadeIn();
            }
            $('.group .collapsed').each(function(){
                $(this).find('input:checked').parent().parent().parent().nextAll().each(
                function(){
                    if ($(this).hasClass('last')) {
                        $(this).removeClass('hidden');
                        return false;
                    }
                    $(this).filter('.hidden').removeClass('hidden');
                });
            });

            if (activetab != '' && $(activetab + '-tab').length ) {
                $(activetab + '-tab').addClass('nav-tab-active');
            }
            else {
                $('.nav-tab-wrapper a:first').addClass('nav-tab-active');
            }
            $('.nav-tab-wrapper a').click(function(evt) {
                $('.nav-tab-wrapper a').removeClass('nav-tab-active');
                $(this).addClass('nav-tab-active').blur();
                var clicked_group = $(this).attr('href');
                if (typeof(localStorage) != 'undefined' ) {
                    localStorage.setItem("activetab", $(this).attr('href'));
                }
                $('.group').hide();
                $(clicked_group).fadeIn();
                evt.preventDefault();
            });

            $('.dsm-browse').on('click', function (event) {
                event.preventDefault();

                var self = $(this);

                // Create the media frame.
                var file_frame = wp.media.frames.file_frame = wp.media({
                    title: self.data('uploader_title'),
                    button: {
                        text: self.data('uploader_button_text'),
                    },
                    multiple: false
                });

                file_frame.on('select', function () {
                    attachment = file_frame.state().get('selection').first().toJSON();
                    self.prev('.dsm-url').val(attachment.url).change();
                });

                // Finally, open the modal
                file_frame.open();
            });
            // Make the subheading single row.
            $('.setting_subheading_title').each(function (index, element) {		
                var $element = $(element);
                var $element_parent = $element.parent('td');
                $element_parent.attr('colspan', 2);
                $element_parent.prev('th').remove();
                $element_parent.addClass('setting_subheading');
            });
    });
    </script>
        <?php
        $this->_style_fix();
    }

    function _style_fix() {
        global $wp_version;

        if ( version_compare( $wp_version, '3.8', '<=' ) ) :
            ?>
    <style type="text/css">
        /** WordPress 3.8 Fix **/
        .form-table th { padding: 20px 10px; }
        #wpbody-content .metabox-holder { padding-top: 5px; }
    </style>
            <?php
        endif;
    }

}