<? global $lang; ?>
<div class='action_panel'>
	<div class='title'><?=ucfirst( $lang -> getTrans( 'T_STRONA' ) );?>: <?=$this -> _title;?></div>
</div>
<div class='icons'>
  <div class='icon' onClick='saveOrder()'>
    <img src='../images/system/sico_save_ajax.png'>
    <?=$lang -> getTrans( 'T_ZAPISZ' );?>
  </div>
  <div class='icon' onClick='document.location.href="./?rw=back";'>
    <img src='../images/system/sico_cancel.png'>
    <?=$lang -> getTrans( 'T_ANULUJ' );?>
  </div>
</div>
<? global $lang;?>
<fieldset>
  <ul id="articles">
    <?
    if ( is_array( $this -> _articles ) ) foreach ( $this -> _articles as $art )
    {
      ?>
        <li id="<?=$art['id'];?>"><?=$art['title'];?></li>
      <?
    }
    ?>
  </ul>
</fieldset>
<script type="text/javascript">

  function saveOrder() {
    var order = $('ul#articles').sortable("toArray");
    $.prompt('<?=ucfirst( $lang -> getTrans( 'T_TRWA_ZAPISYWANIE' ) );?>...');
    xajax_saveArticlesOrder( <?=$this -> _id;?> , order );
  }

  $(function() {
    $('ul#articles').sortable({
      axis: "y",
      cursor: "move"
    });
  });
</script>
<style type="text/css">
  ul#articles {
    margin: 20px 35px;
  }
  ul#articles li {
    border: 1px solid #DADADA;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    padding: 7px 12px;
    margin-bottom: 4px;
    margin-top: 4px;
    list-style-type: circle;
    color: #596a72;
    font-size: 11px;
  }
  ul#articles li:hover {
    background-color: white;
    cursor: move;
  }
</style>