/**
 * BeautyMatters Wordpress Theme Customizer
 * @author Emanuel Seibold (info@seiboldsoft.de)
 * @package WordPress
 * @subpackage BeautyMatters Theme
 */

(function ($) {

    // Update the site title in real time...
    wp.customize('blogname', function (value) {
        value.bind(function (newval) {
            $('#site-title a').html(newval);
        });
    });

    //Update the site description in real time...
    wp.customize('blogdescription', function (value) {
        value.bind(function (newval) {
            $('.site-description').html(newval);
        });
    });

    wp.customize('color-header-background', function (value) {
        value.bind(function (newval) {
            $('nav.navbar').css('background-color', newval);

        });
    });

    wp.customize('color-top-header-background', function (value) {
        value.bind(function (newval) {
            $('.top-header-bar').css('background-color', newval);

        });
    });

    wp.customize('color-top-header-text', function (value) {
        value.bind(function (newval) {
            $('.top-header-bar').css('color', newval);
        });
    });

    wp.customize('color-footer-background', function (value) {
        value.bind(function (newval) {
            $('.site-footer').css('background-color', newval);
        });
    });

    wp.customize('color-footer-copyright-background', function (value) {
        value.bind(function (newval) {
            $('.copyright').css('background-color', newval);
        });
    });

    wp.customize('color-content-background', function (value) {
        value.bind(function (newval) {
            $('section.content, article.content, section.archive').css('background-color', newval);
        });
    });

    wp.customize('color-content-text', function (value) {
        value.bind(function (newval) {
            $('section.content, article.content, section.archive').css('color', newval);
        });
    });


    wp.customize('color-widget-background', function (value) {
        value.bind(function (newval) {
            $('.widget').css('background-color', newval);
        });
    });


    wp.customize('color-widget-text', function (value) {
        value.bind(function (newval) {
            $('.widget').css('color', newval);
        });
    });



    //Update site title color in real time...
    wp.customize('header_textcolor', function (value) {
        value.bind(function (newval) {
            $('#site-title a').css('color', newval);
        });
    });

    //Update site background color...
    wp.customize('color-body-background', function (value) {
        value.bind(function (newval) {
            $('body').css('background-color', newval);
        });
    });

    //Update site header background color...
    wp.customize('color-header-background', function (value) {
        value.bind(function (newval) {
            $('.header').css('background-color', newval);
        });
    });

    wp.customize('color-link-default', function (value) {
        value.bind(function (newval) {
            $('a').css('color', newval);
        });
    });

    wp.customize('color-link-default-hover', function (value) {
        value.bind(function (newval) {

            var style, el;

            style = '<style class="hover-styles">a:hover { color: ' + newval + '; }</style>'; // build the style element
            el = $('.hover-styles'); // look for a matching style element that might already be there

            // add the style element into the DOM or replace the matching style element that is already there
            if (el.length) {
                el.replaceWith(style); // style element already exists, so replace it
            } else {
                $('head').append(style); // style element doesn't exist so add it
            }
        });

    });
    wp.customize('color-link-default-visited', function (value) {
        value.bind(function (newval) {
            $('a:visited').css('color', newval);
        });
    });




//Update site title color in real time...
    wp.customize('mytheme_options[link_textcolor]', function (value) {
        value.bind(function (newval) {
            $('a').css('color', newval);
        });
    });


})(jQuery);