<?php echo $this->Html->script('site_js/common');?>
<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 22px;cursor: pointer; }
	#sortable li span { position: absolute; margin-left: -1.3em;margin-top: -6px; }
	#sortable li a { font-size: 12px;}
</style>
<script>
	$(function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	});
</script>
<?php //pr($sections)?>
<div >
	<div class="blocktitle"> Section</div>
	<div class="tar borb">
		<?php echo $this->Html->link('Back',array('action'=>'add'),array('class'=>'btn btn-mini'))?>		
	</div>
	<br/>
	
	<div class="w97p pdl10" >
		<div>
			<?php if(!empty($sections)):?>	
			<div class="font150 bold mrb10">Table of content</div>
			<div id="table-of-content">
				<?php echo $this -> Form -> Create ('Section', array('url' => array( 'action' => 'order')));?>
				<ul id="sortable">
				<?php
					$str='';
					foreach ($sections as $section): 
						$str .="<li class='ui-state-default'>".
								"<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>".
								"<a class='' >" .$section['Section']['name']."</a>".
								"<input type='hidden' name='seq[]' value='".$section['Section']['id']."'/>".
							"</li>";
						
					endforeach; 
					
					echo $str
					?>
					
				</ul>
				<div class="tar bort pdt5 mrt10">
					<input type="submit" class="btn learningbutton" name="btnOrder" value="Save"/>
					<?php echo $this->Form->end();?>
				</div>
				<br/>
			</div>
			
			<?php endif;?>	
		</div>
	</div>
</div>


<?php 
	echo $this->Html->css('dialogbox/jquery.ui.all');
	echo $this->Html->script('dialogbox/jquery-1.9.0');
	echo $this->Html->script('dialogbox/jquery.ui.core');
	
	echo $this->Html->script('dialogbox/jquery.ui.widget');
	echo $this->Html->script('dialogbox/jquery.ui.mouse');
	echo $this->Html->script('dialogbox/jquery.ui.sortable');
?>
