{footer_script require='jquery.ui.sortable'}{literal}
  jQuery(document).ready(function(){
    jQuery(".catPos").hide();
    jQuery(".drag_button").show();
    jQuery(".categoryLi").css("cursor","move");
    jQuery(".categoryUl").sortable({
      axis: "y",
      opacity: 0.8
    });
    jQuery("#categoryOrdering").submit(function(){
      ar = jQuery('.categoryUl').sortable('toArray');
      for(i=0;i<ar.length;i++) {
        module = ar[i].split('module_');
        document.getElementsByName('position[' + module[1] + ']')[0].value = i;
      }
    });
  });
{/literal}{/footer_script}

{html_head}

{$SCRIPT}
{literal}
<style>
#screenshot{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	z-index: 10;
	}

</style>
{/literal}

{/html_head}


<div class="titrePage">
  <h2>Flash Gallery</h2>
</div>

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

  <p style="text-align: center;">
    <input class="submit" name="submitOrder" type="submit" value="{'Save order'|@translate}" {$TAG_INPUT_ENABLED} />
  <br />
  </p>

	<ul class="categoryUl">
  {foreach from=$modules item=module}

    <li class="categoryLi virtual_cat" id="module_{$module.ID}">
      {if $module.TYPE != 'MainBlock'}
      <ul class="categoryActions">
		<li><a href="{$module.U_HOME}" title="{$module.ON_HOME_LIB}"><img src="{$module.ON_HOME}"  title="{$module.ON_HOME_LIB}"/></a></li>        
		<li><a href="{$module.U_CATS}" title="{$module.ON_CATS_LIB}"><img src="{$module.ON_CATS}"   title="{$module.ON_CATS_LIB}"/></a></li>        
        <li><a href="{$module.U_RECURS}" title="{$module.RECURS_CATS_LIB}"><img src="{$module.RECURS_CATS}"  title="{$module.RECURS_CATS_LIB}"/></a></li>        
		
		<li><a href="{$module.U_EDIT}" title="{'flashgal_edit'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_edit.png" class="button" alt="{'flash_edit'|@translate}"/></a></li>
        {if !empty($module.U_DELETE) }
        <li><a href="{$module.U_DELETE}" title="{'flashgal_delete'|@translate}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');"><img src="{$themeconf.admin_icon_dir}/category_delete.png" class="button" alt="{'flashgal_delete'|@translate}" /></a></li>
        {/if}
		
      </ul>
      {/if}

      <p>
      <img src="{$themeconf.admin_icon_dir}/cat_move.png" class="button drag_button" style="display:none;" alt="{'Drag to re-order'|@translate}" title="{'Drag to re-order'|@translate}"/>
     <strong>{if $module.TYPE == 'MainBlock'}<span class="MainBlock">{$module.NAME}</span>{else}<a href="{$module.U_EDIT}" class="screenshot" rel="{$module.SCREEN}"  title="{$module.NAME}" >{$module.NAME}</a>{/if}</strong>

	 {if $module.TYPE != 'MainBlock'}&nbsp;-  &nbsp;{$module.TYPE_NAME}{/if}
      </p>

	  
      {if !empty($module.DESC)}
      <p style="margin-left: 30px;"><i>{$module.DESC}</i></p>
      {/if}

      <p class="catPos">
        <label>
          {'Position'|@translate}
          <input type="text" size="4" name="position[{$module.ID}]" maxlength="4" value="{$module.POS}" />
        </label>
      </p>
    </li>
    {/foreach}
  </ul>

  <p style="text-align: center;">
  <br />
    <input class="submit" name="submitOrder" type="submit" value="{'Save order'|@translate}" {$TAG_INPUT_ENABLED} />
  </p>
</form>



{*
	<legend>{'flashgal_mods_management'|@translate}</legend>
	<table class="table2">
	<thead>
		<tr class="throw">
  		<td>{'flashgal_module_title'|@translate}</td>
  		<td>{'flashgal_desc'|@translate}</td>
 			<td>{'flashgal_type'|@translate}</td>
 			<td>{'flashgal_position'|@translate}</td>
 			<td>{'flashgal_action'|@translate}</td>
		</tr>
	</thead>

	{foreach from=$modules item=module}
	<tr class="{$module.CLASS}" height="28">
  		<td align="center">{$module.NAME}</td>
  		<td align="center">{$module.DESC}</td>
  		<td align="center">{$module.TYPE}</td>
  		<td align="center"><input type="text" size="2" maxlength="2" value="{$module.POS}" name="position[{$module.ID}]"/></td>
  		<td align="center">{$module.ACTION}</td>
	</tr>
	{/foreach}
*}