{combine_script id='slider' load='footer' require='jquery' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
{combine_script id='button' load='footer' require='jquery' path='themes/default/js/ui/minified/jquery.ui.button.min.js'}
{combine_script id='farbtastic' load='footer' require='jquery' path='themes/Slimi/admin/js/farbtastic.js'}
{combine_css path="themes/Slim/admin/jquery.ui.button.custom.css" order=-10}
{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css" order=-10}
{combine_css path="themes/Slimi/admin/theme.css" order=-10}

	
{footer_script}{literal}
	(function($) {
		$(document).ready(function() {
			$('#option').buttonset();
			
			var f = $.farbtastic('#picker');
			var p = $('#picker').css('opacity', 1);
			var selected;
			$('.colorwell')
			.each(function () { f.linkTo(this); $(this).css('opacity', 1); })
			.focus(function() {
				if (selected) {
				$(selected).css('opacity', 1).removeClass('colorwell-selected');
				}
				f.linkTo(this);
				p.css('opacity', 1);
				$(selected = this).css('opacity', 1).addClass('colorwell-selected');
			});
			$(function() {
			$('#slider-range-max').slider({
				range: "max",
				min: 1,
				max: 20,
				value: {/literal}{$selected_carousel_speed}{literal},
				slide: function( event, ui ) {
					$('#carspeed').val( ui.value );
				}
			});
			$('#carspeed').val( $('#slider-range-max').slider('value'));
			});
		});
	})(jQuery);
{/literal}{/footer_script}
	
	
<div class="titrePage">
<h2>Slimi</h2>
</div>

<form action="" method="post">
<fieldset>
<legend>{'Open picture'|@translate}</legend>
<div class="opt">
<div id="option">
		
 <input type="radio" id="radio1" name="lytebox_slimi" value="1" {if $selected_lytebox_slimi=='1'}checked="checked"{/if}><label for="radio1">Lightbox</label>
 <input type="radio" id="radio2" name="lytebox_slimi" value="2" {if $selected_lytebox_slimi=='2'}checked="checked"{/if}><label for="radio2">{'Picture page'|@translate}</label>
</div>
</div>
<br>
</fieldset>


<fieldset>
	<legend>{'Color of theme'|@translate}</legend>
	  <div id="textcolor">
	  <div class="form-item"><label>Background color:</label><input type="text" name="bg_slimi" class="colorwell" value="{$selected_bg_slimi}" /></div>
	  <div class="form-item"><label>Color picture of cardre:</label><input type="text" name="bd_slimi" class="colorwell" value="{$selected_bd_slimi}" /></div>
	  <div class="form-item"><label>Color title:</label><input type="text" name="title_slimi" class="colorwell" value="{$selected_title_slimi}" /></div>
	  <p><input type="submit" name="default" value="{'Default'|@translate}" ></p>
	  </div>
	  <div id="picker"></div>
</fieldset>  

<fieldset>
	<legend>{'Carousel'|@translate}</legend>
<div id="car_speed" class="option" style="margin-top:20px">
	<p>
	<label for="carspeed">Carousel speed</label>
	<input type="text" id="carspeed" style="border:0; color:#f6931f; font-weight:bold;" name="carousel_speed" value={$selected_carousel_speed}>
	</p>
	<br>	
	<div id="slider-range-max"></div>
		
</div>
</fieldset>	

<p><input type="submit" name="submit" value="{'Submit'|@translate}" >
</form>