<style type="text/css">
.demo_bg{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index:-1;
	height: 100%;
}
#style_selector{
	width:215px;
	position:fixed;
	left:-215px;
	top:100px;
	z-index:1000;
}
#style_selector_container{
	background:#fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  -box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	border:1px solid #dcdcdc;
  border-radius:0 3px 3px 0;
  -border-radius:0 3px 3px 0;
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
}
.style-main-title{
	color:#000000;
  font-weight:bold;
	font-size:15px;
  padding:0 20px;
	height:44px;
	line-height:44px;
	border-bottom:1px solid #dcdcdc;  
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 15px rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF inset;
  -box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 15px rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 15px rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF inset;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 15px rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF inset;
}
.box-title{
	font-size:12px;
	line-height:15px;
	padding:10px 20px 0 20px;
}
.input-box{
	padding:10px;
	padding-left:20px;
}
.input-box input[type=text]{
	background:#f7f7f7;
	width:60px;
	border:1px solid rgba(23,24,26,0.15);
	font-size:11px;
	color:#000000;
	padding:3px;
	margin-left:10px;
}
.input-box select{
	background:#fff;
	width:170px;
	border: 1px solid #E0E0E0;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.06) inset;
  -box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.06) inset;
  -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.06) inset;
  -moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.06) inset;
  border-radius: 3px;
  -border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
	font-size:11px;
  padding: 5px;
	color:#666;
}
#style_selector .toggle-button{
	width:44px;
	height:44px;
	background:#fff url(<?php bloginfo('template_directory'); ?>/admin/assets/images/switcher.gif) center center no-repeat;
	cursor:pointer;
  border-radius:0 3px 3px 0;
  -border-radius:0 3px 3px 0;
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  -box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #DCDCDC;
  border-left:0;
  position:absolute;
	top:0px;
	right:-44px;
	width:44px;
  z-index:-1;
}
#style_selector .images{
	width:180px;
	padding-left:20px;
	margin-top:15px;
	padding-bottom:10px;
	position:relative;
	z-index:1000000;
}
#style_selector .images img{
	width:25px;
	height:24px;
	margin-right:3px;
	margin-bottom:8px;
	z-index:1000;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  border:2px solid transparent;
}
#style_selector .images img.active{
	border-color:#ccc;
	opacity:0.9;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#style_selector select[name=layout]').change(function() {
		var current = jQuery(this).find('option:selected').val();
		
		if(current == 'Boxed') {
			var html = 'body{background-color:#f1f1f1;background-image:url("http://localhost/wordpress/wp-content/themes/alora/images/patterns/pattern1.png");background-repeat:repeat;}#wrapper{background:#fff;width:1000px;margin:0 auto;-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);}';
			jQuery('head').append('<style type="text/css" id="ss"></style>');
			jQuery('style#ss').append(html);
		} else {
			jQuery('style#ss').empty();
			jQuery('body').attr('style', '');
		}

	});
	jQuery('#style_selector select[name=color_skin]').change(function() {
		var current = jQuery(this).find('option:selected').val();
		
		if(current == 'Light') {
			window.location = 'http://demo.theme4press.com/alora/';
		} else {
			window.location = 'http://demo.theme4press.com/aloradark/';
		}

	});
  
	if(jQuery.cookie('style_selector_status') == 'disabled') {

		jQuery('#style_selector_container').hide();
		jQuery('#style_selector .close').hide();
		jQuery('#style_selector .open').show();

	}  
  
  jQuery("#style_selector .toggle-button").click(function(e){
			e.preventDefault();
			var div = jQuery("#style_selector");
			console.log(div.css("left"));
			if (div.css("left") === "0px") {
				jQuery("#style_selector").animate({
					left: "-215px"
				}); 
			} else {
				jQuery("#style_selector").animate({
					left: "0px"
				});
			}   
		});  

	jQuery('.patterns a').click(function(e) {
		e.preventDefault();

		var current = jQuery('#style_selector select[name=layout]').find('option:selected').val();

		if(current == 'Boxed') {
			jQuery(this).parent().find('img').removeClass('active');
			jQuery(this).find('img').addClass('active');

			var name = jQuery(this).attr('name');
			
			if(jQuery(this).hasClass('bkgd')) {
				jQuery('body').css('background', 'url(<?php bloginfo("template_directory"); ?>/images/patterns/'+name+'.jpg) no-repeat center center fixed');
				jQuery('body').css('background-size', 'cover');
			} else {
				jQuery('body').css('background', 'url(<?php bloginfo("template_directory"); ?>/images/patterns/'+name+'.png) repeat center center scroll');
				jQuery('body').css('background-size', 'auto');
			}
		} else {
		alert('Please select boxed layout');
		}
	});

	jQuery('.predefined a').click(function(e) {
		e.preventDefault();

		jQuery(this).parent().find('img').removeClass('active');
		jQuery(this).find('img').addClass('active');

		var name = jQuery(this).attr('name');

		if(name == 'cyan') {
			jQuery('#style_selector_ss').attr('href', '');
		} else {
			jQuery('head').append('<link rel="stylesheet" id="style_selector_ss" href="#" />');
			jQuery('#style_selector_ss').attr('href', '<?php bloginfo("template_directory"); ?>/css/skins/'+name+'.css');
		}

	});
});
</script>
<div id="style_selector">
	<div id="style_selector_container">
	<div class="style-main-title">Style Switcher</div>
  	<div class="box-title">Color Scheme</div>
	<div class="images predefined">
    <a href="#" name="cyan"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/cyan.png" alt="" class="active" /></a>
    <a href="#" name="red"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/red.png" alt="" /></a>
    <a href="#" name="blue"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/blue.png" alt="" /></a>
    <a href="#" name="navy"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/navy.png" alt="" /></a>
		<a href="#" name="green"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/green.png" alt="" /></a>
		<a href="#" name="olive"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/olive.png" alt="" /></a>
		<a href="#" name="orange"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/orange.png" alt="" /></a>
    <a href="#" name="pink"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/pink.png" alt="" /></a>
    <a href="#" name="brown"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/brown.png" alt="" /></a>
    <a href="#" name="grey"><img src="<?php bloginfo('template_directory'); ?>/images/colorpicker/grey.png" alt="" /></a>
	</div>  
	<div class="box-title">Color Skin</div>
	<div class="input-box">
		<div class="input">
			<select name="color_skin">
				<option>Light</option>
				<option>Dark</option>
			</select>
		</div>
	</div>
  	<div class="box-title">Layout Style</div>
	<div class="input-box">
		<div class="input">
			<select name="layout">
				<option>Wide</option>
				<option>Boxed</option>
			</select>
		</div>
	</div>
	<div class="box-title">Patterns for Boxed Layout</div>
	<div class="images patterns">
		<a href="#" name="pattern1"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern1.png" alt="" class="active" /></a>
		<a href="#" name="pattern2"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern2.png" alt="" /></a>
		<a href="#" name="pattern3"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern3.png" alt="" /></a>
		<a href="#" name="pattern4"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern4.png" alt="" /></a>
		<a href="#" name="pattern5"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern5.png" alt="" /></a>
		<a href="#" name="pattern6"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern6.png" alt="" /></a>
		<a href="#" name="pattern7"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern7.png" alt="" /></a>
		<a href="#" name="pattern8"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern8.png" alt="" /></a>
		<a href="#" name="pattern9"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern9.png" alt="" /></a>
		<a href="#" name="pattern10"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/pattern10.png" alt="" /></a>
	</div>
    <div class="box-title">Demo Images for Boxed Layout (Not included in the theme package)</div>
	<div class="images patterns">
		<a href="#" class="bkgd" name="bkgd1"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/bkgd1_thumbnail.png" alt="" /></a>
		<a href="#" class="bkgd" name="bkgd2"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/bkgd2_thumbnail.png" alt="" /></a>
		<a href="#" class="bkgd" name="bkgd3"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/bkgd3_thumbnail.png" alt="" /></a>
		<a href="#" class="bkgd" name="bkgd4"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/bkgd4_thumbnail.png" alt="" /></a>
    <a href="#" class="bkgd" name="bkgd5"><img src="<?php bloginfo('template_directory'); ?>/images/patterns/bkgd5_thumbnail.png" alt="" /></a>
	</div>
	</div>
	<div class="style-toggle toggle-button"></div>
</div>