<style type="text/css">
	#sortable { list-style-type: none; margin: 0; padding: 0;  }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; font-size: 1.4em; }
	html>body #sortable li { height: 1.5em; line-height: 1.2em; }
	.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
	</style>
	<script type="text/javascript">
	$(function() {
		$("#sortable").sortable({
			placeholder: 'ui-state-highlight',
			update: function(event, ui){$("#order").val($("#sortable").sortable('serialize'));}
		});
		$("#sortable").disableSelection();
	});
	</script>
<?php

define('RENDER_MODE', 'catalyz');

$properties = array();
$properties['page'] = $page;
$node = $page->getNode();
$properties['node'] = $node;
if (!isset($culture)) {
    $culture = sfConfig::get('translations_default_language');
}
$properties['culture'] = $culture;
$properties['ContentTree'] = $ContentTree;
$ContentTreeNode = $ContentTree->getCurrentNode();

ob_start();

use_helper('Javascript');
use_helper('Form');

include_partial('catalyz/header');

?>

<div id="catalyz-content">
<div id="catalyz-content-internal">


<h1><?php echo __('Updating subitems order of "%s"', array('%s' =>
        sprintf('<a href="%s">%s</a>', $ContentTreeNode->getUrl(), $ContentTreeNode->getTitle())
        ), 'catalyz') ;

?></h1>

<p><?php echo __('Please update the order of the following subitems using drag and drop:', null, 'catalyz'); ?></p>
<?php

echo form_tag('@node-reorder?node_id=' . $ContentTreeNode->getId());
echo input_hidden_tag('order', '');

?>

<div id="listContainer" style="border: 1px solid #C0C0C0; width: 364px; margin: 3px; padding-top: 3px;">

<ul id="sortable">

	<?php

$hasHiddenItems = false;
$hasVisibleItems = false;

foreach($ContentTreeNode->children as/*(ContentTreeNode)*/ $child) {
    $hasHiddenItems |= $child->isVisibleInMenu();
    $hasVisibleItems |= !$child->isVisibleInMenu();

    ?>
<li id="child-<?php echo $child->getId();?>" class="ui-state-default" style="cursor: pointer;">
	<span class="ui-icon  <?php echo $child->isVisibleInMenu()?'ui-icon-circle-check':'ui-icon-circle-close'; ?>" style="float: left; margin-right: 0.3em;"></span>
	<b><?php echo $child->getTitle();?></b>
</li>
	<?php
}

?>
</ul>
</div>


	<fieldset class="ui-corner-all" style="width: 350px; margin-bottom: 10px;">
		<legend><?php echo __('Legend', null, 'catalyz'); ?></legend>
		<p style="height: 16px"><span class="ui-icon ui-icon-circle-check" style="float: left;"></span>&nbsp;<?php echo __('This item is visible in menu', null, 'catalyz'); ?></p>
		<p style="height: 16px"><span class="ui-icon ui-icon-circle-close" style="float: left;"></span>&nbsp;<?php echo __('This item is <b>not</b> visible in menu', null, 'catalyz'); ?></p>
	</fieldset>

      <?php echo submit_tag(__('Save', null, 'catalyz'), array('name' => 'Save'));?>
      <?php echo submit_tag(__('Cancel', null, 'catalyz'), array('name' => 'Cancel'));?>
    </p>

</form>


</div>
</div>
<?php

$content = ob_get_contents();

ob_end_clean();

$layout = LayoutManager::instance()->getCatalyzTemplate($ContentTree->getCurrentNode()->getCurrentLayoutNameForAction());
$properties['layout_family'] = $layout[0];
$properties['layout_name'] = $layout[1];
$properties['content'] = $content;
$properties['node'] = $node;
$properties['page'] = $page;
$properties['culture'] = $culture;

include_component($properties['layout_family'], $properties['layout_name'], $properties);

?>