<?php

define('LAYOUT_IMAGES_URI', '/images/layouts/');
define('LAYOUT_IMAGES_THUMBS_URI', '/images/layouts/thumbnails200px/');

function getThumbnailUri($layout_identifier)
{
    return LAYOUT_IMAGES_THUMBS_URI . $layout_identifier . '.jpg';
}
function getRefreshThumbnailJsCode($layout_identifier, $description, $name = 'current')
{
    return sprintf('refreshThumbnail(\'%s\', \'%s\', \'%s\');',
        esc_js($name),
        esc_js(getThumbnailUri($layout_identifier)),
        str_replace(array("'", '"'), array('\\\'', '&quot;'), $description));
}

$ContentTreeNode = $ContentTree->getCurrentNode();

$currentLayout = LayoutManager::instance()->getLayout($node->getCurrentLayout());

use_helper('Escaping');
$optionsAvailableLayouts = '';

$layoutManager = LayoutManager::instance();
foreach($layoutManager->getSupportedLayouts($page) as $layoutId) {
    $layout = $layoutManager->getLayout($layoutId);
    $selectedCode = ($layout['id'] == $currentLayout['id'])?' selected="selected"':'';
    $optionsAvailableLayouts .= "\n" . sprintf('<option value="%s" onmouseover="%s"%s>%s</option>',
        $layout['id'],
        getRefreshThumbnailJsCode($layout['id'], $layout['description'], 'current'),
        $selectedCode,
        esc_js($layout['name'])
        );
}

$currentlyUsedLayout = LayoutManager::instance()->getLayout($ContentTreeNode->getCurrentLayoutForAction());

?>


				<table width="100%" border="0" cellpadding="2" cellspacing="0">
				<tr valign="top">
					<td height="115" width="200">
						<img src="<?php echo getThumbnailUri($currentlyUsedLayout['id']);

?>" name="layout_current_img" width="200" height="115" id="layout_current_img" style="border: 1px solid #000000;" />
					</td>
					<td>
						<span id="layout_current_description"><?php echo $currentlyUsedLayout['description'];

?></span>
					</td>
				</tr>
				<tr><td colspan="2">&nbsp;</td></tr>

<?php
if ($canUseInheritedLayout) {
    $parentLayout = LayoutManager::instance()->getLayout($ContentTreeNode->parent->getCurrentLayoutForAction());

    ?>
				<tr>
					<td height="25" colspan="2">
						<?php

    echo radiobutton_tag('layout_current_type',
        Node::LAYOUT_INHERIT, Node::LAYOUT_INHERIT == $node->getCurrentLayoutType(),
        array('id' => 'layout_current_type_inherit',
            'onclick' => getRefreshThumbnailJsCode($parentLayout['id'], $parentLayout['description'], 'current')));

    ?>
						<label for="layout_current_type_inherit"><?php echo __('Use parent style:', null, 'catalyz');

    ?> <strong><?php echo $parentLayout['name'];

    ?></strong></label>
						</td>
				</tr>
<?php
}

?>				<tr>
					<td height="25" colspan="2">
						<?php echo radiobutton_tag('layout_current_type', Node::LAYOUT_CUSTOM, Node::LAYOUT_CUSTOM == $node->getCurrentLayoutType(),
    array('id' => 'layout_current_type_custom',
        'onclick' => 'var selectBox = document.getElementById(\'catalyz_current_layout\'); selectBox.options[selectBox.selectedIndex].onmouseover();'));

?>
						<label for="layout_current_type_custom"><?php echo __('Use a specific style:', null, 'catalyz');

?></label><?php
echo select_tag('catalyz_current_layout',
    $optionsAvailableLayouts,
    array('onclick' => 'document.getElementById(\'layout_current_type_custom\').checked = true; this.options[this.selectedIndex].onmouseover();' , 'style' => 'font-size: 10px;'));

?></td>
				</tr>
				</table>

		<script language="javascript">
		function refreshThumbnail(name, thumbnail, description){
			document.getElementById('layout_'+name+'_img').src = thumbnail;
			document.getElementById('layout_'+name+'_description').innerHTML = description;
		}

<?php

foreach($availableLayouts as $layout) {
    printf('var preloadImage = new Image(200, 115); preloadImage.src = \'' . getThumbnailUri($layout) . '\';');
}

?>
		</script>