<?php defined('_JEXEC') or die('Restricted access'); ?>



<?php JHTML::script( 'sortables.js', 'administrator/components/com_jce/js/' );?>

<?php JHTML::stylesheet( 'layout.css', 'administrator/components/com_jce/css/' );?>

<?php

	

?>

<style type="text/css">

	.editor { width: <?php echo $this->dimensions['width'];?>px; }

</style>

<form action="index.php" method="post" name="adminForm">

    <fieldset>

        <div style="float: right">

            <button type="button" onclick="submitbutton();"><?php echo JText::_( 'Save' );?></button>

            <button type="button" onclick="window.parent.document.getElementById('sbox-window').close();"><?php echo JText::_( 'Cancel' );?></button>

        </div>

        <div class="configuration" >

            <?php echo JText::_( 'JCE LAYOUT EDITOR' );?>

        </div>

    </fieldset>

    <fieldset>

    	<div><?php echo JText::_('JCE LAYOUT NOTE');?>

        </div>

    </fieldset>

    <fieldset>

        <table class="admintable">

            <tr>

                <td><?php echo JText::_('JCE LAYOUT DESC');?></td>

            </tr>

            <tr>

                <td><div class="sortableList" style="cursor:auto;">

                <?php 

                $width 	= $this->dimensions['width'] + 100;

				$sortid = array();

				for( $i=0; $i<count( $this->items ); $i++ ){

					$r = $i + 1;

					$sortid[] = "'row". $r ."'";

				?>

					<ul class="sortableRow" id="row<?php echo $r;?>" style="width:<?php echo $width;?>px">

                <?php

					foreach( $this->items[$i] as $item ){

						$n = "row_li_". $item->id;

						$path = $item->type == 'command' ? '../plugins/editors/jce/tiny_mce/themes/advanced/img/'. $item->layout .'.gif' : '../plugins/editors/jce/tiny_mce/plugins/'. $item->name .'/img/'. $item->layout .'.gif';

					?>

						<li class="sortableItem" id="<?php echo $n;?>"><img src="<?php echo $path;?>" alt="<?php echo $item->title;?>" title="<?php echo $item->title;?>" /></li>

					<?php }?>

                    </ul>

				<?php }?>

				<input type="hidden" id="row<?php echo $r;?>_out" name="row<?php echo $r;?>_out" />

            	</div></td>

            </tr>

        </table>

    </fieldset>		

	<script type="text/javascript">

        var form = document.adminForm;

        function submitbutton(){

			form.layout.value = $$('.sortableItem').map(function(el, i){

				return el.getParent().getProperty('id') + '[]=' + el.getProperty('id').replace(/[^0-9]/gi, '');

            }).join('&').replace(',', '&', 'gi');

            submitform('layoutsave');

        }

       	new Sortables('.sortableRow', {revert: true});

    </script>

    <span id="debug"></span>

    <input type="hidden" name="layout" value="" />

    <input type="hidden" name="option" value="com_jce" />

    <input type="hidden" name="type" value="plugin" />

    <input type="hidden" name="task" value="" />

    <?php echo JHTML::_( 'form.token' ); ?>

</form>