/*
 *
 *		THEME-OPTIONS.JS
 *
 */

$(document).ready(function() {
    
	var theme_options_content = ' \
		<h4>Change Theme Options</h4> \
		<a href="#"></a> \
		<br> \
		<h5>Change Color</h5> \
		<div class="colors clearfix"> \
			<a id="default" href="#" data-style="default"></a> \
			<a id="color-1" href="#" data-style="color-1"></a> \
			<a id="color-2" href="#" data-style="color-2"></a> \
			<a id="color-3" href="#" data-style="color-3"></a> \
		</div><!-- colors --> \
		<h5>Footer Style</h5> \
		<div class="footer clearfix"> \
			<a class="footer-dropdown" href="#">Select footer style</a>\
			<ul> \
				<li><a href="#" data-footer-style="footer-style-1">Style 1</a></li> \
				<li><a href="#" data-footer-style="footer-style-2">Style 2</a></li> \
				<li><a href="#" data-footer-style="footer-style-3">Style 3</a></li> \
			</ul> \
		</div><!-- sticky --> \
		<h5>Sticky Header</h5> \
		<div class="sticky clearfix"> \
			<div class="toggle-button"> \
				ON <span class="button"><a class="sticky-on" href="#" data-style="sticky-header-on"></a><a class="sticky-off" href="#" data-style="sticky-header-off"></a></span> OFF \
			</div><!-- toggle-button --> \
		</div><!-- sticky --> \
		<h5>Page Header Parallax</h5> \
		<div class="page-header-parallax clearfix"> \
			<div class="toggle-button"> \
				ON <span class="button"><a class="page-header-parallax-on" href="#" data-style="page-header-parallax-on"></a><a class="page-header-parallax-off" href="#" data-style="page-header-parallax-off"></a></span> OFF \
			</div><!-- toggle-button --> \
		</div><!-- sticky --> \
	\ ';
	
	$("#theme-options").prepend(theme_options_content);
	
	$("#theme-options > a").on("click", function(e) {
        
		e.preventDefault();
		e.stopPropagation();
		$("#theme-options").toggleClass("open");
		
    });
	
	$("#theme-options").on("click", function(e) {
        
		e.stopPropagation();
		
    });
	
	$("body").on("click", function() {
		if ($("#theme-options").hasClass("open")) {
			$("#theme-options").removeClass("open");
		}
	});
	
	$(".sticky .button a").on("click", function(e) {
		e.preventDefault();
		$(".sticky .button a").removeClass("active")
		$(this).addClass("active");
	});
	
	$(".page-header-parallax .button a").on("click", function(e) {
		e.preventDefault();
		$(".page-header-parallax .button a").removeClass("active")
		$(this).addClass("active");
	});
	
	$(".footer a").on("click", function(e) {
		e.preventDefault();
		$(this).next("ul").slideToggle(200);
	});
	
	
	var link = $('link[data-style="styles"]');
	var retta_01_colors = $.cookie('retta_01_colors'),
		retta_01_sticky = $.cookie('retta_01_sticky'),
		retta_01_page_header_parallax = $.cookie('retta_01_page_header_parallax'),
		retta_01_footer_style = $.cookie('retta_01_footer_style');
		
	if (!($.cookie('retta_01_colors'))) {
		
		$.cookie('retta_01_colors', 'default', 365);
		retta_01_colors = $.cookie('retta_01_colors');
		$('#theme-options .colors a[data-style="'+retta_01_colors+'"]');
		
	} else {
		
		link.attr('href','assets/css/alternative-styles/' + retta_01_colors + '.css');
		$("#logo img").attr('src','assets/css/alternative-styles/logos/logo-' + retta_01_colors + '.png');
		$(".header-style-3 #logo img, .header-style-7 #logo img, .header-style-8 #logo img, .header-style-9 #logo img, .header-style-10 #logo img, .header-style-11 #logo img, .header-style-12 #logo img").attr('src','assets/css/alternative-styles/logos/logo-white-' + retta_01_colors + '.png');
		$(".header-style-11 .menu-slide-container #logo img").attr('src','assets/css/alternative-styles/logos/logo-' + retta_01_colors + '.png');
		$("#footer-bottom .widget-text img").attr('src','assets/css/alternative-styles/logos/footer-logo-white-' + retta_01_colors + '.png');
		$('#theme-options .colors a[data-style="'+retta_01_colors+'"]');
		
	};
	
	
	if (!($.cookie('retta_01_sticky'))) {
		
		$.cookie('retta_01_sticky', 'sticky-header-on', 365);
		retta_01_sticky = $.cookie('retta_01_sticky');
		$("body").addClass(retta_01_sticky);
		$('#theme-options .sticky a[data-style="sticky-header-on"]');
		
	} else {
		
		if (retta_01_sticky=="sticky-header-off") {
			
			$("body").addClass(retta_01_sticky);
			$("body").removeClass("sticky-header-on");
			
		} else { 
		
			$("body").addClass(retta_01_sticky);
			$("body").removeClass("sticky-header-off");
			
		};
		
	};
	
	
	if (!($.cookie('retta_01_page_header_parallax'))) {
		
		$.cookie('retta_01_page_header_parallax', 'page-header-parallax-on', 365);
		retta_01_page_header_parallax = $.cookie('retta_01_page_header_parallax');
		$("body").addClass(retta_01_page_header_parallax);
		$('#theme-options .page-header-parallax a[data-style="page-header-parallax-on"]');
		
	} else {
		
		if (retta_01_page_header_parallax=="page-header-parallax-off") {
			
			$("body").addClass(retta_01_page_header_parallax);
			$("body").removeClass("page-header-parallax-on");
			
		} else { 
		
			$("body").addClass(retta_01_page_header_parallax);
			$("body").removeClass("page-header-parallax-off");
			
		};
		
	};
	
	
	if ($.cookie('retta_01_footer_style')) {
		
		$("body").removeClass("footer-style-1 footer-style-2 footer-style-3");
		$("body").addClass(retta_01_footer_style);
		
	};


	// CHANGE COLOR //
	$('#theme-options .colors a').on('click',function(e) {
		
		var $this = $(this),
			retta_01_colors = $this.data('style');
			
		e.preventDefault();
		
		link.attr('href', 'assets/css/alternative-styles/' + retta_01_colors + '.css');
		$("#logo img").attr('src','assets/css/alternative-styles/logos/logo-' + retta_01_colors + '.png');
		$(".header-style-3 #logo img, .header-style-7 #logo img, .header-style-8 #logo img, .header-style-9 #logo img, .header-style-10 #logo img, .header-style-11 #logo img, .header-style-12 #logo img").attr('src','assets/css/alternative-styles/logos/logo-white-' + retta_01_colors + '.png');
		$(".header-style-11 .menu-slide-container #logo img").attr('src','assets/css/alternative-styles/logos/logo-' + retta_01_colors + '.png');
		$("#footer-bottom .widget-text img").attr('src','assets/css/alternative-styles/logos/footer-logo-white-' + retta_01_colors + '.png');
		$.cookie('retta_01_colors', retta_01_colors, 365);
		
	});
	
	
	// STICKY ON //
	$('#theme-options .sticky a.sticky-off').on('click',function(e) {
		
		e.preventDefault(); 
		
		$("body").addClass("sticky-header-off");
		$("body").removeClass("sticky-header-on");
		$.cookie('retta_01_sticky', 'sticky-header-off', 365);
		
	});

	// STICKY OFF //
	$('#theme-options .sticky a.sticky-on').on('click',function(e) {
		
		e.preventDefault(); 
		
		$("body").addClass("sticky-header-on");
		$("body").removeClass("sticky-header-off");
		$.cookie('retta_01_sticky', 'sticky-header-on', 365);
		
	});
	
	
	// PAGE HEADER PARALLAX ON //
	$('#theme-options .page-header-parallax a.page-header-parallax-off').on('click',function(e) {
		
		e.preventDefault(); 
		
		$("body").addClass("page-header-parallax-off");
		$("body").removeClass("page-header-parallax-on");
		$.cookie('retta_01_page_header_parallax', 'page-header-parallax-off', 365);
		
	});

	// PAGE HEADER PARALLAX OFF //
	$('#theme-options .page-header-parallax a.page-header-parallax-on').on('click',function(e) {
		
		e.preventDefault(); 
		
		$("body").addClass("page-header-parallax-on");
		$("body").removeClass("page-header-parallax-off");
		$.cookie('retta_01_page_header_parallax', 'page-header-parallax-on', 365);
		
	});
	
	
	// FOOTER STYLE //
	$('#theme-options .footer ul li a').on('click',function(e) {
		
		var $this = $(this),
			retta_01_footer_style = $this.data('footer-style');
			
		e.preventDefault();
		
		$("body").removeClass("footer-style-1 footer-style-2 footer-style-3");
		$("body").addClass(retta_01_footer_style);
		$.cookie('retta_01_footer_style', retta_01_footer_style, 365);
		
	});
	
	
	
	if ($("body").hasClass("sticky-header-off") || (!$("body").hasClass("sticky-header"))) {
		$("#theme-options .sticky .button a.sticky-off").addClass("active");
	} else {
		$("#theme-options .sticky .button a.sticky-on").addClass("active");
	}
	
	if ($("body").hasClass("page-header-parallax-off")) {
		$("#theme-options .page-header-parallax .button a.page-header-parallax-off").addClass("active");
	} else {
		$("#theme-options .page-header-parallax .button a.page-header-parallax-on").addClass("active");
	}
	
	
	
	// DEMOS PANNEL //
	var demos_pannel = ' \
		<h4>Retta Demos</h4> \
		<div class="demos-container"> \
			<div class="item-preview"> \
				<a href="index.html"> \
					<img src="assets/plugins/theme-options/images/demo-01.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 01 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-02/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-02.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 02 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-03/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-03.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 03 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-04/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-04.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 04 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-05/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-05.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 05 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-06/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-06.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 06 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-07/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-07.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 07 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-08/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-08.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 08 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-09/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-09.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 09 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-10/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-10.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 10 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-11/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-11.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 11 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-12/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-12.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 12 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-13/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-13.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 13 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-14/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-14.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 14 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-15/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-15.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 15 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-16/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-16.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 16 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-17/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-17.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 17 \
			</div><!-- item-preview --> \
			<div class="item-preview"> \
				<a href="../demo-18/index.html"> \
					<img src="assets/plugins/theme-options/images/demo-18.jpg" alt=""> \
					<span>Live Preview</span> \
				</a> \
				Demo 18 \
			</div><!-- item-preview --> \
		</div><!-- demos-container --> \
		<a class="btn btn-default" href="#">Purchase Retta</a> \
	\ ';
		
	$("#demos-pannel").prepend(demos_pannel);
	
	$("#demos-pannel > h4").on("click", function(e) {
        
		e.preventDefault();
		e.stopPropagation();
		$("#demos-pannel").toggleClass("open");
		
    });
	
	$("#demos-pannel").on("click", function(e) {
        
		e.stopPropagation();
		
    });
	
	$("body").on("click", function() {
		if ($("#demos-pannel").hasClass("open")) {
			$("#demos-pannel").removeClass("open");
		}
	});

});