(function ($) {
    "use strict";
    
    $.fn.colorSwitcher = function (ops) {
        var $el = this,
            $head = $('head'),
            $body = $('body'),
            $colorSwitcher, $colorSwitcherChild;

        $head.append('<style id="colorSwitcher">#colorSwitcher{position:fixed;top:50%;left:-280px;transform:translateY(-50%);width:280px;padding:17px 15px 25px;background-color:#fff;transition:left .55s linear;z-index:0;box-shadow: 0 3px 10px rgba(0,0,0,0.08);}#colorSwitcher.in{left:0}#colorSwitcher button{position:absolute;top:0;right:-41px;padding:10px;background-color:#fff;border-style:solid;border-width:0 0 0 1px;border-color:#eee;outline:0;box-shadow: 0 3px 10px rgba(0,0,0,0.08);}#colorSwitcher button i{display:block;width:20px;height:20px;border:3px dotted #000;border-radius:50%}#colorSwitcher p{margin:0 0 8px;font-size:20px;line-height:30px;font-weight:500}#colorSwitcher ul{max-width:240px;margin:-10px -7.5px 0;padding:0;list-style:none;overflow:hidden}#colorSwitcher li{float:left;width:32px;height:32px;margin:15px 7.5px 0;border-radius:50%;cursor:pointer}</style>');

        $colorSwitcher = $('<div id="colorSwitcher"><button type="button"><i></i></button><p>Try Different Color Scheme:</p><ul></ul></div>')
            .appendTo( $body )
            .on('click', 'button', function () {
                $(this).parent().toggleClass('in');
            })
            .on('click', 'li', function () {
                $el.attr('href', ops[ this.getAttribute('data-c') ]);
            });

        $colorSwitcherChild = $colorSwitcher.children('ul');

        for ( var $color in ops ) {
            $colorSwitcherChild.append('<li style="background-color: '+ $color +';" data-c="'+ $color +'"></li>');
        }
    };
}(jQuery));