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

	$("body").append('<div id="theme-changer" style="display:none;"> <div id="changer-inner"> <div id="color" style=""> <span><i class="fa fa-plus"></i></span> <a style="background: #ae9364 ; " href="assets/css/style.css"></a> <a style="background: #ED145B ; " href="assets/css/style-red.css"></a> <a style="background: #3DC9B3 ; " href="assets/css/style-green.css"></a> <a style="background: #18829C ; " href="assets/css/style-blue.css"></a> <a style="background: #E7D720 ; " href="assets/css/style-yellow.css"></a> <a style="background: #D86838 ; " href="assets/css/style-orange.css"></a> <a style="background: #3FC35F ; " href="assets/css/style-green-2.css"></a> <a style="background: #FA3AAB ; " href="assets/css/style-pink.css"></a> <a style="background: #6B798F ; " href="assets/css/style-slate.css"></a> <a style="background: #970001 ; " href="assets/css/style-dark-red.css"></a> <a style="background: #C762CB ; " href="assets/css/style-purple.css"></a> </div> </div> <div class="open-close"><i class="fa fa-gear fa-spin"></i></div> </div> ');

	var $theme_changer = $("#theme-changer"),
		$style = $("<style />"),
		$style_2 = $("<link />").attr({rel: 'stylesheet', href: 'assets/css/1.css'}),

		color = 'blockquote , a , .color , #navigation .menu-container ul > li.active a, #navigation .menu-container ul > li:hover a , .infobox .icon , .infobox.style-3 .icon:before , .call-to-action .btn:hover  , .skill.style-2 .chart span , .fun-facts.style-2 .icon, #moments .events .icon ,.team-member .social li a:hover,.team-member:hover .caption,.pricing-table li.pricing-details,.blog-item .blog-info ,.comments-cont .icon-notepad-1{color: #ae9364 ; } \n \n ',

		background = '.btn:hover , .bg-primary, #header-slide .owl-controls .owl-pagination .owl-page.active span , #navigation .logo , .header-section h2:after , .infobox.style-2 .icon,.infobox.style-5:hover .text,.servicebox,.call-to-action , #moments .quotation .icon ,#moments .twitter ,.process.style-1 span,.process.style-1:hover:before,.process.style-2 span:before, .process.style-2 span:after ,.portfolio-filters a:hover, .portfolio-filters a.active,.map .office .office-img,.blog-item:hover,.widget h3:after,.widget .tagcloud a:hover,.social ul a:hover .fa{background: #ae9364; } \n \n',

		background_2 = '.fun-facts li , .work-item .caption , .work-item .caption  {background: rgba(174, 147, 100, 0.8); } \n \n' ,

		border_color = 'blockquote , .btn ,.btn:hover , #navigation .inner ,.servicebox.style-2 span,.servicebox.style-2 span:after ,.team-member:after , .process.style-2 span , .map .office .office-img , .blog-item:hover ,.blog-single .blog-author .Image{border-color: #ae9364 ; } .infobox.style-5:hover .text:before { border-right-color: #ae9364; } \n \n',

		svg = '.skills-list .skill svg .circle{stroke: #ae9364 !important; } \n \n',

		svg_2 = '.map .office .office-img svg path{fill: #ae9364; } \n \n';

	$("head").append($style_2);
	$("head").append($style);

	$(".open-close").click(function(event) {
		$theme_changer.toggleClass('open');
	});

	$("#color a").click(function(event) {
		$style.html('');
		var baseStyle = $(this).attr("href");
		$style_2.prop("href",baseStyle);
		return false;
	});


	$('#color span').ColorPicker({
		onChange: function (hsb, hex, rgb) {
			$('#color span').css('backgroundColor', '#' + hex);
			$style.html(
				color.replace("ae9364", hex) +
				border_color.replace(/ae9364/g, hex) +
				svg.replace("ae9364", hex) +
				svg_2.replace("ae9364", hex) +
				background.replace("ae9364", hex) +
				background_2.replace("174", rgb.r).replace("147", rgb.g).replace("100", rgb.b)
			); 
			// console.log(rgb);
		}
	});

});