/**
 * Live customizer preview
 */
(function($) {

    "use strict";

    var option_id = gnar_customize.option_id,
        template_uri = gnar_customize.template_uri;

    function themeblvd_hex_to_rgb(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

    // Site Style > Site Style
    wp.customize(option_id+'[layout_style]', function( value ) {
        value.bind(function( val ) {
            if ( val == 'boxed' ) {
                $('body').addClass('gnar-boxed');
            } else {
                $('body').removeClass('gnar-boxed');
            }
        });
    });

    // Site Style > Primary Buttons
    wp.customize(option_id+'[btn_color]', function( value ) {
        value.bind(function( color ) {

            var css =   '<style id="tb-btn-color-styles"> \
                    	.btn:not(.tb-custom-button), \
                    	input[type=\"submit\"], \
                    	input[type=\"reset\"], \
                    	input[type=\"button\"], \
                    	.button, \
                    	button, \
                    	.primary, \
                    	.bg-primary, \
                    	.btn-primary, \
                    	a.alt, \
                    	button.alt, \
                    	input.alt, \
                    	.label-primary, \
                    	.panel-primary > .panel-heading, \
                    	.tb-filter-nav > ul > li.active a, \
                    	.tb-filter-nav > ul > li.active a:hover, \
                    	.tb-filter-nav > ul > li.active a:focus { \
                        background-color: '+color+'; \
                        } \
                        </style>';

            $('#tb-btn-color-styles').remove();
            $('head').append(css);
        });
    });

    // Site Style > Highlight
    wp.customize(option_id+'[highlight]', function( value ) {
        value.bind(function( color ) {

            var css =   '<style id="tb-highlight-styles"> \
                        .highlight, \
                        .gnar-lang-selector a:hover, \
                        .gnar-lang-selector a:focus, \
                        .woocommerce-tabs .tabs > li > a:hover, \
                        .woocommerce-tabs .tabs > li > a:focus, \
                        .woocommerce-tabs .tabs > li.active > a, \
                        .tb-mobile-menu .sub-menu a.menu-btn:hover, \
                        .tb-mobile-menu .sub-menu a.menu-btn:focus, \
                        .fancy-title:before, \
                        .fancy-title:after, \
                        .tb-tags a:hover, \
                        .tb-tags a:focus, \
                        .btn-share:hover, \
                        .btn-share:focus, \
                        .featured-quote > a:hover, \
                        .featured-quote > a:focus, \
                        .tb-thumb-link:after, \
                        .post_showcase .showcase-item.has-title .featured-item.showcase .tb-thumb-link:after, \
                        .post_showcase .showcase-item.has-title .featured-item.showcase.tb-thumb-link:after, \
                        .tb-filter-nav > ul > li > a:hover, \
                        .tb-filter-nav > ul > li > a:focus, \
                        .text-light .tb-filter-nav > ul > li > a:hover, \
                        .text-light .tb-filter-nav > ul > li > a:focus, \
                        .tb-tag-cloud .tagcloud a:hover, \
                        .btn-default:hover, \
                        .btn-default:focus, \
                        .btn-default:active, \
                        .btn-default.active:hover, \
                        input[type=\"submit\"]:hover, \
                        input[type=\"submit\"]:focus, \
                        input[type=\"submit\"]:active, \
                        input[type=\"reset\"]:hover, \
                        input[type=\"reset\"]:focus, \
                        input[type=\"reset\"]:active, \
                        input[type=\"button\"]:hover, \
                        input[type=\"button\"]:focus, \
                        input[type=\"button\"]:active, \
                        .button:hover, \
                        .button:focus, \
                        .button:active, \
                        button:hover, \
                        button:focus, \
                        button:active, \
                        .pagination .btn-group .btn:hover, \
                        .primary:hover, \
                        .primary:focus, \
                        a.bg-primary:hover, \
                        .btn-primary:hover, \
                        .btn-primary:focus, \
                        .btn-primary:active, \
                        .btn-primary.active, \
                        a.alt:hover, \
                        a.alt:focus, \
                        button.alt:hover, \
                        button.alt:focus, \
                        input.alt:hover, \
                        input.alt:focus, \
                        .tb-team-member .member-image:before { \
                        background-color: '+color+'; \
                        } \
                        .tooltip-inner { \
                        background-color: '+color+'; \
                        } \
                        .tooltip.top .tooltip-arrow { \
                        border-top-color: '+color+'; \
                        } \
                        .tooltip.bottom .tooltip-arrow { \
                        border-bottom-color: '+color+'; \
                        } \
                        .tb-floating-search.full .tb-search, \
                        .tooltip.bottom .tooltip-arrow { \
                        border-bottom-color: '+color+'; \
                        } \
                        </style>';

            $('#tb-highlight-styles').remove();
            $('head').append(css);
        });
    });

    // Header > Header Style
    wp.customize(option_id+'[header_style]', function( value ) {
        value.bind(function( val ) {
            $('.site-header, .site-menu-toggle, .site-menu-panel').removeClass('edgy bold modern').addClass(val);
        });
    });

    // Header > Logo Placement
    wp.customize(option_id+'[header_logo_placement]', function( value ) {
        value.bind(function( css_class ) {
            $('body').removeClass('logo-left logo-right').addClass('logo-'+css_class);
        });
    });

    // Header > Logo Color
    wp.customize(option_id+'[header_logo_color]', function( value ) {
        value.bind(function( bg_color ) {

            var css  = '<style id="tb-header-logo-styles"> \
                        @media (min-width: 992px) { \
                        .site-header.edgy > .wrap .header-logo, \
                        .site-header.bold > .wrap .header-logo { \
                        background-color: '+bg_color+'; \
                        } \
                        } \
                        </style>';

            $('#tb-header-logo-styles').remove();
            $('head').append(css);

        });
    });

    // Header > Menu Toggle Color
    wp.customize(option_id+'[header_toggle_color]', function( value ) {
        value.bind(function( bg_color ) {

            var css  = '<style id="tb-header-toggle-styles"> \
                        @media (min-width: 992px) { \
                        .site-menu-toggle.edgy, \
                        .site-menu-toggle.bold { \
                        background-color: '+bg_color+'; \
                        } \
                        .site-menu-toggle.edgy:after, \
                        .site-menu-toggle.bold:after { \
                        border-color: '+bg_color+' transparent transparent; \
                        } \
                        } \
                        </style>';

            $('#tb-header-toggle-styles').remove();
            $('head').append(css);

        });
    });

    // Header > Mobile Menu Toggle Color
    wp.customize(option_id+'[mobile_header_toggle_color]', function( value ) {
        value.bind(function( bg_color ) {

            var css  = '<style id="tb-mobile-header-toggle-styles"> \
                        @media (max-width: 991px) { \
                        .site-menu-toggle.edgy, \
                        .site-menu-toggle.bold { \
                        background-color: '+bg_color+'; \
                        } \
                        .site-menu-toggle.edgy:after, \
                        .site-menu-toggle.bold:after { \
                        border-color: '+bg_color+' transparent transparent; \
                        } \
                        } \
                        </style>';

            $('#tb-mobile-header-toggle-styles').remove();
            $('head').append(css);

        });
    });

    // Background Colors > Header Background
    wp.customize(option_id+'[header_bg_color]', function( value ) {
        value.bind(function( bg_color ) {

            var rgba = themeblvd_hex_to_rgb(bg_color),
                rgba = 'rgba('+rgba.r+', '+rgba.g+', '+rgba.b+', .95)',
                css  = '<style id="tb-header-styles"> \
                        .header-bg, \
                        .tb-primary-menu.sf-menu ul.non-mega-sub-menu, \
                        .tb-primary-menu.sf-menu .sf-mega { \
                        background-color: '+bg_color+'; \
                        } \
                        .has-fs-menu .site-menu-panel { \
                        background-color: '+rgba+'; \
                        } \
                        .header-nav .tb-primary-menu > li.active > a:after, \
                        .header-nav .tb-primary-menu > li.sfHover:not(.highlight) > a:after { \
                        border-top-color: '+bg_color+'; \
                        } \
                        .site-menu-toggle.edgy .hamburger span, \
                        .site-menu-toggle.bold .hamburger span { \
                        background-color: '+bg_color+'; \
                        } \
                        .site-menu-toggle.edgy .hamburger span:after, \
                        .site-menu-toggle.bold .hamburger span:after { \
                        border-color: '+bg_color+'; \
                        } \
                        </style>';

            $('#tb-header-styles').remove();
            $('head').append(css);

        });
    });

    wp.customize(option_id+'[header_bg_brightness]', function( value ) {
        value.bind(function( brightness ) {
            $('.site-header, .header-nav').removeClass('light dark').addClass(brightness);
        });
    });

    // Background Colors > Mobile Header BG Color
    wp.customize(option_id+'[mobile_header_bg_color]', function( value ) {
        value.bind(function( bg_color ) {

            var rgba = themeblvd_hex_to_rgb(bg_color),
                rgba = 'rgba('+rgba.r+', '+rgba.g+', '+rgba.b+', .95)',
                css  = '<style id="tb-mobile-header-styles"> \
                        @media (max-width: 991px) { \
                        .site-header { \
                        background-color: '+bg_color+'; \
                        } \
                        .site-mobile-panel { \
                        background-color: '+rgba+'; \
                        } \
                        .site-menu-toggle .hamburger span { \
                        background-color: '+bg_color+'; \
                        } \
                        .site-menu-toggle .hamburger span:after { \
                        border-color: '+bg_color+'; \
                        } \
                        } \
                        </style>';

            $('#tb-mobile-header-styles').remove();
            $('head').append(css);

        });
    });

    wp.customize(option_id+'[mobile_header_bg_brightness]', function( value ) {
        value.bind(function( brightness ) {
            $('.site-header, .site-mobile-panel, .tb-mobile-menu').removeClass('mobile-light mobile-dark').addClass('mobile-'+brightness);
        });
    });

    // Background Colors > Search Panel BG Color
    wp.customize(option_id+'[search_panel_bg_color]', function( value ) {
        value.bind(function( bg_color ) {
            $('.tb-floating-search.full').css('background-color', bg_color);
        });
    });

    wp.customize(option_id+'[search_panel_brightness]', function( value ) {
        value.bind(function( brightness ) {
            $('.tb-floating-search').removeClass('light dark').addClass(brightness);
        });
    });

    // Background Colors > Footer BG Color
    wp.customize(option_id+'[footer_bg_color]', function( value ) {
        value.bind(function( bg_color ) {
            $('.site-footer').css('background-color', bg_color);
        });
    });

    wp.customize(option_id+'[footer_bg_brightness]', function( value ) {
        value.bind(function( brightness ) {
            $('.site-footer').removeClass('light dark').addClass(brightness);
        });
    });

    // Background Colors > Copyright BG Color
    wp.customize(option_id+'[copyright_bg_color]', function( value ) {
        value.bind(function( bg_color ) {
            $('.site-footer .footer-sub-content').css('background-color', bg_color);
        });
    });

    wp.customize(option_id+'[copyright_bg_brightness]', function( value ) {
        value.bind(function( brightness ) {

            $('.site-footer .footer-sub-content').removeClass('light dark').addClass(brightness);

            if ( brightness == 'light' ) {
                $('.site-footer .footer-sub-content .tb-social-icons').removeClass('light grey').addClass('grey');
            } else {
                $('.site-footer .footer-sub-content .tb-social-icons').removeClass('light grey').addClass('light');
            }

        });
    });

})(jQuery);
