<script type='text/javascript'>
jQuery(document).ready(function($) {
	<?php include 'panel/js/colorpicker.js'; ?>
	
	jQuery('#custom_bg .colorSelector').ColorPicker({
		color: '#444444',
		onShow: function (colpkr) {
			jQuery(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			jQuery(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			jQuery('#custom_bg .colorSelector div').css('backgroundColor', '#' + hex);
			jQuery('#custom_bg input').val(hex);
			
			jQuery('html').css('background-color', '#' + hex);
		}
	});
	
	jQuery('#custom_header_bg .colorSelector').ColorPicker({
		color: '#272625',
		onShow: function (colpkr) {
			jQuery(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			jQuery(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			jQuery('#custom_header_bg .colorSelector div').css('backgroundColor', '#' + hex);
			jQuery('#custom_header_bg input').val(hex);
			
			jQuery('.top').css('background-color', '#' + hex);
		}
	});
	jQuery('#custom_spotlight_title_bg .colorSelector').ColorPicker({
		color: '#272625',
		onShow: function (colpkr) {
			jQuery(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			jQuery(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			jQuery('#custom_spotlight_title_bg .colorSelector div').css('backgroundColor', '#' + hex);
			jQuery('#custom_spotlight_title_bg input').val(hex);
			
			jQuery('.spotlight-title').css('background-color', '#' + hex);
		}
	});
	
	jQuery('#patterns a').click(function(e) {
		e.preventDefault();
		
		var pattern = $(this).attr('target')
		
		jQuery(this).parent().find('a').removeClass('selected');
		jQuery(this).addClass('selected');
		
		jQuery('body').css('background', 'url(<?php bloginfo('template_url'); ?>/images/patterns/' + pattern + '.png)');
	});
	jQuery('#style-switcher-container').hide();
	jQuery('#style-switcher .hide_switcher').hide();
	jQuery('#style-switcher .show_switcher').show();
	jQuery('#style-switcher .show_switcher').click(function(e) {
		e.preventDefault();
		jQuery('#style-switcher-container').show();
		
		jQuery(this).hide();
		jQuery('#style-switcher .hide_switcher').show();
	});
	jQuery('#style-switcher .hide_switcher').click(function(e) {
		e.preventDefault();
		
		jQuery('#style-switcher-container').hide();
		
		jQuery(this).hide();
		jQuery('#style-switcher .show_switcher').show();
	});
	
	
});
</script>
<div id='style-switcher'>
	<div id='style-switcher-container'>
		<div id='skin'>
			<div class='title'>Skin Color</div>
			<a href='http://google.com'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/light.png' alt='' />
			</a>
			<a href='#'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/dark.png' alt='' />
			</a>
		</div>
		<div id='custom_header_bg' class='colorpicker_wrapper'>
			<div class='title'>Top Bg</div>
			
			<div class='input'>
				<input type='text' value='272625' name='custom_header_bg' />
				<div class="colorSelector"><div style='background-color: #272625;'></div></div>
			</div>
		</div>
		<div id='custom_spotlight_title_bg' class='colorpicker_wrapper'>
			<div class='title'>Spotlight Title Bg</div>
			
			<div class='input'>
				<input type='text' value='272625' name='custom_spotlight_title_bg' />
				<div class="colorSelector"><div style='background-color: #272625;'></div></div>
			</div>
		</div>
		<div id='custom_bg' class='colorpicker_wrapper'>
			<div class='title'>Bg Color</div>
			
			<div class='input'>
				<input type='text' value='444444' name='custom_bg' />
				<div class="colorSelector"><div style='background-color: #444444;'></div></div>
			</div>
		</div>
		<div id='patterns'>
			<div class='title'>Patterns</div>
			<a href='#' target='pattern5'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb5.png' alt='' />
			</a>
			<a href='#' target='pattern6'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb6.png' alt='' />
			</a>
			<a href='#' target='pattern7'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb7.png' alt='' />
			</a>
			<a href='#' target='pattern8'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb8.png' alt='' />
			</a>
			<a href='#' target='pattern11'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb11.png' alt='' />
			</a>
			<a href='#' target='pattern12'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb12.png' alt='' />
			</a>
			<a href='#' target='pattern13' class='selected'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb13.png' alt='' />
			</a>
			<a href='#' target='pattern14'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb14.png' alt='' />
			</a>
			<a href='#' target='pattern15'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb15.png' alt='' />
			</a>
			<a href='#' target='pattern16'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb16.png' alt='' />
			</a>
			<a href='#' target='pattern18'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb18.png' alt='' />
			</a>
			<a href='#' target='pattern19'>
				<img src='<?php bloginfo('template_directory'); ?>/panel/images/pattern-thumbs/pattern-thumb19.png' alt='' />
			</a>
		</div>
	</div>
	
	<a href='#' class='hide_switcher'><img src='<?php bloginfo('template_directory'); ?>/panel/images/color_wheel.png' alt='Hide'/></a>
	<a href='#' class='show_switcher'><img src='<?php bloginfo('template_directory'); ?>/panel/images/color_wheel.png' alt='Show'/></a>
	
	<div class='clear'></div>
</div>