{combine_css path="themes/Junk/admin/theme.css"}
	
{combine_css path="themes/default/js/ui/theme/jquery.ui.button.css"}
{combine_css path="themes/Junk/admin/jquery-ui-1.10.4.custom.css"}
{footer_script require='jquery.ui.button'}
{literal}
jQuery(document).ready(function(){
  jQuery( ".radio" ).buttonset();
});
{/literal}
{/footer_script}
{footer_script}
  var tab_active = "{$junk.tab}";
{/footer_script}	
{footer_script require='jquery.ui.tabs'}
{literal}
jQuery(document).ready(function(){
   var $tabs= $( "#tabs" ).tabs({ active: tab_active }).addClass( "ui-tabs-vertical ui-helper-clearfix" );
   jQuery( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
   
	$('#tabs li').click(function(){
		var active = $tabs.tabs('option', 'active');
		$('#tab_activ').val(active);
	});
});
{/literal}
{/footer_script}	
	
<div class="titrePage">
	<h2>Junk</h2>
</div>

<form action="" method="post">

<div id="configContent">

	<fieldset>
		
			<legend>{'Junk style'|@translate}</legend>
			<p>{'Choose your theme color:'|@translate}</p>
			
<div id="tabs"> 
<ul>
<li><a href="#tabs-1">Green</a></li>
<li><a href="#tabs-2">Red</a></li>
<li><a href="#tabs-3">Pink</a></li>
<li><a href="#tabs-4">Blue</a></li>
<li><a href="#tabs-5">Gray</a></li>
<li><a href="#tabs-6">White and Black</a></li>
<li><a href="#tabs-7">Yellow</a></li>
<li><a href="#tabs-8">Purple</a></li>

</ul>	
	<div id="tabs-1">	
			<ul >
				<li class="radio" style="list-style:none">
					<input type="radio" id="green" name="Junk_style" value="green" {if $junk.style=='green'}checked="checked"{/if} ><label for="green" ><span class="imag"><img src="themes/Junk/admin/images/green.jpg"/></span><div>Junk_green</div></label>
					<input type="radio" id="dark_green" name="Junk_style" value="dark_green" {if $junk.style=='dark_green'}checked="checked"{/if} ><label for="dark_green" ><span class="imag"><img src="themes/Junk/admin/images/dark_green.jpg"/></span><div>Junk_dark_green</div></label>
					<input type="radio" id="greene" name="Junk_style" value="greene" {if $junk.style=='greene'}checked="checked"{/if} ><label for="greene" ><span class="imag"><img src="themes/Junk/admin/images/greene.jpg"/></span><div>Junk_greene</div></label>
					<input type="radio" id="light_greene" name="Junk_style" value="light_greene" {if $junk.style=='light_greene'}checked="checked"{/if} ><label for="light_greene" ><span class="imag"><img src="themes/Junk/admin/images/light_greene.jpg"/></span><div>Junk_light_greene</div></label>
				</li>
		</ul>
	</div>	
	<div id="tabs-2">	
			<ul >
				<li class="radio" style="list-style:none">
					<input type="radio" id="red" name="Junk_style" value="red" {if $junk.style=='red'}checked="checked"{/if} ><label for="red"><span class="imag"><img src="themes/Junk/admin/images/red.jpg"/></span><div>Junk_red</div></label>
					<input type="radio" id="dark_red" name="Junk_style" value="dark_red" {if $junk.style=='dark_red'}checked="checked"{/if} ><label for="dark_red"><span class="imag"><img src="themes/Junk/admin/images/dark_red.jpg"/></span><div>Junk_dark_red</div></label>
					<input type="radio" id="rede" name="Junk_style" value="rede" {if $junk.style=='rede'}checked="checked"{/if} ><label for="rede"><span class="imag"><img src="themes/Junk/admin/images/rede.jpg"/></span><div>Junk_rede</div></label>
					<input type="radio" id="light_rede" name="Junk_style" value="light_rede" {if $junk.style=='light_rede'}checked="checked"{/if} ><label for="light_rede"><span class="imag"><img src="themes/Junk/admin/images/light_rede.jpg"/></span><div>Junk_light_rede</div></label>
				</li>
		</ul>
	</div>	
	<div id="tabs-3">	
			<ul >
				<li class="radio" style="list-style:none">
					<input type="radio" id="pink" name="Junk_style" value="pink" {if $junk.style=='pink'}checked="checked"{/if} ><label for="pink"><span class="imag"><img src="themes/Junk/admin/images/pink.jpg"/></span><div>Junk_pink</div></label>
					<input type="radio" id="dark_pink" name="Junk_style" value="dark_pink" {if $junk.style=='dark_pink'}checked="checked"{/if} ><label for="dark_pink"><span class="imag"><img src="themes/Junk/admin/images/dark_pink.jpg"/></span><div>Junk_dark_pink</div></label>
					<input type="radio" id="pinki" name="Junk_style" value="pinki" {if $junk.style=='pinki'}checked="checked"{/if} ><label for="pinki"><span class="imag"><img src="themes/Junk/admin/images/pinki.jpg"/></span><div>Junk_pinki</div></label>
					<input type="radio" id="light_pinki" name="Junk_style" value="light_pinki" {if $junk.style=='light_pinki'}checked="checked"{/if} ><label for="light_pinki"><span class="imag"><img src="themes/Junk/admin/images/light_pink.jpg"/></span><div>Junk_light_pinki</div></label>
				</li>
		</ul>
	</div>	
	<div id="tabs-4">	
			<ul >
				<li class="radio" style="list-style:none">
					<input type="radio" id="blue" name="Junk_style" value="blue" {if $junk.style=='blue'}checked="checked"{/if} ><label for="blue"><span class="imag"><img src="themes/Junk/admin/images/blue.jpg"/></span><div>Junk_blue</div></label>
					<input type="radio" id="dark_blue" name="Junk_style" value="dark_blue" {if $junk.style=='dark_blue'}checked="checked"{/if} ><label for="dark_blue"><span class="imag"><img src="themes/Junk/admin/images/dark_blue.jpg"/></span><div>Junk_dark_blue</div></label>
					<input type="radio" id="blube" name="Junk_style" value="blube" {if $junk.style=='blube'}checked="checked"{/if} ><label for="blube"><span class="imag"><img src="themes/Junk/admin/images/blube.jpg"/></span><div>Junk_blube</div></label>
					<input type="radio" id="light_blube" name="Junk_style" value="light_blube" {if $junk.style=='light_blube'}checked="checked"{/if} ><label for="light_blube"><span class="imag"><img src="themes/Junk/admin/images/light_blube.jpg"/></span><div>Junk_light_blube</div></label>
				</li>
		</ul>
	</div>	
	<div id="tabs-5">	
			<ul >
				<li class="radio" style="list-style:none">
					<input type="radio" id="gray" name="Junk_style" value="gray" {if $junk.style=='gray'}checked="checked"{/if} ><label for="gray"><span class="imag"><img src="themes/Junk/admin/images/gray.jpg"/></span><div>Junk_gray</div></label>
					<input type="radio" id="dark_gray" name="Junk_style" value="dark_gray" {if $junk.style=='dark_gray'}checked="checked"{/if} ><label for="dark_gray"><span class="imag"><img src="themes/Junk/admin/images/dark_gray.jpg"/></span><div>Junk_dark_gray</div></label>
					<input type="radio" id="grayb" name="Junk_style" value="grayb" {if $junk.style=='grayb'}checked="checked"{/if} ><label for="grayb"><span class="imag"><img src="themes/Junk/admin/images/grayb.jpg"/></span><div>Junk_grayb</div></label>
					<input type="radio" id="light_grayb" name="Junk_style" value="light_grayb" {if $junk.style=='light_grayb'}checked="checked"{/if} ><label for="light_grayb"><span class="imag"><img src="themes/Junk/admin/images/light_grayb.jpg"/></span><div>Junk_light_grayb</div></label>
				</li>
		</ul>
	</div>	
	<div id="tabs-6">	
			<ul >
				<li class="radio" style="list-style:none">
					<input type="radio" id="black" name="Junk_style" value="black" {if $junk.style=='black'}checked="checked"{/if} ><label for="black"><span class="imag"><img src="themes/Junk/admin/images/black.jpg"/></span><div>Junk_black</div></label>
					<input type="radio" id="dark_black" name="Junk_style" value="dark_black" {if $junk.style=='dark_black'}checked="checked"{/if} ><label for="dark_black"><span class="imag"><img src="themes/Junk/admin/images/dark_black.jpg"/></span><div>Junk_dark_black</div></label>
					<input type="radio" id="white" name="Junk_style" value="white" {if $junk.style=='white'}checked="checked"{/if} ><label for="white"><span class="imag"><img src="themes/Junk/admin/images/white.jpg"/></span><div>Junk_white</div></label>
					<input type="radio" id="dark_white" name="Junk_style" value="dark_white" {if $junk.style=='dark_white'}checked="checked"{/if} ><label for="dark_white"><span class="imag"><img src="themes/Junk/admin/images/dark_white.jpg"/></span><div>Junk_dark_white</div></label>
				</li>
		</ul>
	</div>	
	<div id="tabs-7">	
			<ul >
				<li class="radio" style="list-style:none">
					<input type="radio" id="yellow" name="Junk_style" value="yellow" {if $junk.style=='yellow'}checked="checked"{/if} ><label for="yellow"><span class="imag"><img src="themes/Junk/admin/images/yellow.jpg"/></span><div>Junk_yellow</div></label>
					<input type="radio" id="dark_yellow" name="Junk_style" value="dark_yellow" {if $junk.style=='dark_yellow'}checked="checked"{/if} ><label for="dark_yellow"><span class="imag"><img src="themes/Junk/admin/images/dark_yellow.jpg"/></span><div>Junk_dark_yellow</div></label>
					<input type="radio" id="yello" name="Junk_style" value="yello" {if $junk.style=='yello'}checked="checked"{/if} ><label for="yello"><span class="imag"><img src="themes/Junk/admin/images/yello.jpg"/></span><div>Junk_yello</div></label>
					<input type="radio" id="light_yello" name="Junk_style" value="light_yello" {if $junk.style=='light_yello'}checked="checked"{/if} ><label for="light_yello"><span class="imag"><img src="themes/Junk/admin/images/light_yello.jpg"/></span><div>Junk_light_yello</div></label>
				</li>
		</ul>
	</div>	
	<div id="tabs-8">	
			<ul >
				<li class="radio" style="list-style:none">
					<input type="radio" id="purple" name="Junk_style" value="purple" {if $junk.style=='purple'}checked="checked"{/if} ><label for="purple"><span class="imag"><img src="themes/Junk/admin/images/purple.jpg"/></span><div>Junk_purple</div></label>
					<input type="radio" id="dark_purple" name="Junk_style" value="dark_purple" {if $junk.style=='dark_purple'}checked="checked"{/if} ><label for="dark_purple"><span class="imag"><img src="themes/Junk/admin/images/dark_purple.jpg"/></span><div>Junk_dark_purple</div></label>
					<input type="radio" id="purp" name="Junk_style" value="purp" {if $junk.style=='purp'}checked="checked"{/if} ><label for="purp"><span class="imag"><img src="themes/Junk/admin/images/purp.jpg"/></span><div>Junk_purp</div></label>
					<input type="radio" id="light_purp" name="Junk_style" value="light_purp" {if $junk.style=='light_purp'}checked="checked"{/if} ><label for="light_purp"><span class="imag"><img src="themes/Junk/admin/images/light_purp.jpg"/></span><div>Junk_light_purp</div></label>
				</li>
		</ul>
	</div>	

</div>	

	</fieldset>

</div>
	<p><input id="tab_activ" type="hidden" name="tab" value="{$junk.tab}"></p>

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


</form>