<tal:block metal:use-macro="python:here.getFormsTool().getForm('site_admin_template').macros['page']">

<h1 metal:fill-slot="title" i18n:translate="">Portal layout</h1>

<tal:block metal:fill-slot="section" tal:define="layout_tool python:here.getLayoutTool()">
<p i18n:translate="">
	Choose the layout you prefer for your website, then choose one of the
	available color schemes and click <em i18n:name="save-button" i18n:translate="">Save changes</em>. Every time you
	select a layout or a color scheme, you'll see a small preview of the website
	with those settings.
</p>

<script type="text/javascript">
<!--
var isNav = null;
var isIE = null;
var theMasterSelectionList = null;
var theSlaveSelectionList = null;
var theCurrentSyncroObject = null;

function LoadSyncroObject(aSyncroObject)
{
	theCurrentSyncroObject = aSyncroObject;
	theMasterSelectionList.options.length = 0;
	var tmpTopic = theCurrentSyncroObject.FirstTopic();
	while (tmpTopic != null )
	{   AddSelectionListEntry(tmpTopic.label, tmpTopic.id, theMasterSelectionList);
		tmpTopic = theCurrentSyncroObject.NextTopic();}
	var theTopicIndexStr = theMasterIndex;
	var theTopicIndex = parseInt(theTopicIndexStr);
	if (isNaN(theTopicIndex) == false)
		theMasterSelectionList.selectedIndex = theTopicIndex;
	else
		theMasterSelectionList.selectedIndex = 0;
	var theTopicObject = theCurrentSyncroObject.GetTopic(theMasterSelectionList.selectedIndex);
	LoadSyncroCategoryList(theTopicObject);
}

function LoadSyncroCategoryList(aTopicObject)
{
	theSlaveSelectionList.options.length = 0;
	var aURLPair = aTopicObject.FirstURLPair();
	while (aURLPair != null )
	{   AddSelectionListEntry(aURLPair.label,aURLPair.url,theSlaveSelectionList);
		aURLPair = aTopicObject.NextURLPair();}
	theSlaveSelectionList.options.selectedIndex = 0;
}

function OnChangeTopic()
{
	var bUseGoButton = false;
	if (bUseGoButton == false)
	{   SwitchTopic();
		LoadScreenshot();}
}

function SwitchTopic()
{
	var aTopicObject = theCurrentSyncroObject.GetTopic(theMasterSelectionList.selectedIndex);
	LoadSyncroCategoryList(aTopicObject);
}

function AddSelectionListEntry(entryString,entryValue,aSelectListObject)
{
	if (isNav == true)
	{   var oOption = new Option(entryString,entryValue);
		aSelectListObject.options[aSelectListObject.options.length] = oOption;}
	else
	{   var oOption = document.createElement("option");
		oOption.text = entryString;
		oOption.value = entryValue;
		aSelectListObject.add(oOption);}
}

function DetectBrowser()
{
	if (parseInt(navigator.appVersion) >= 4)
	{   if (navigator.appName == "Netscape")
		{   isNav = true;}
		else
		{   isIE = true;}
	}
}

function URLPair(urlLabel,urlTarget)
{
	this.label = urlLabel;
	this.url = urlTarget;
}

function SyncroTopic(topicId, topicLabel)
{
	this.URLPairs = new Array();
	this.URLPairsIndex = 0;
	this.id = topicId;
	this.label = topicLabel;
	this.AddURL = SyncroTopicAddURL;
	this.FirstURLPair = SyncroTopicFirstURLPair;
	this.NextURLPair = SyncroTopicNextURLPair;
}

function SyncroTopicAddURL(aURLPair)
{
	this.URLPairs[this.URLPairs.length] = aURLPair;
}

function SyncroTopicFirstURLPair()
{
	var aURLPair = null;
	if (this.URLPairs.length > 0)
	{   this.URLPairsIndex = 0;
		aURLPair = this.URLPairs[this.URLPairsIndex];
		this.URLPairsIndex++;}
	return aURLPair;
}

function SyncroTopicNextURLPair()
{
	var aURLPair = null;
	if ( (this.URLPairs.length > 0) && (this.URLPairsIndex < this.URLPairs.length)  )
	{   aURLPair = this.URLPairs[this.URLPairsIndex];
		this.URLPairsIndex++;}
	return aURLPair;
}

function SyncroView()
{
	this.TopicArray = new Array();
	this.TopicArrayIndex = 0;
	this.AddTopic = SyncroViewAddTopic;
	this.FirstTopic = SyncroViewFirstTopic;
	this.NextTopic = SyncroViewNextTopic;
	this.GetTopic = SyncroViewTopicByIndex;
}

function SyncroViewAddTopic(aTopicObject)
{
	this.TopicArray[this.TopicArray.length] = aTopicObject;
}

function SyncroViewFirstTopic()
{
	var aTopicObject = null;
	if ( this.TopicArray.length > 0 )
	{   this.TopicArrayIndex = 0;
		aTopicObject = this.TopicArray[this.TopicArrayIndex];
		this.TopicArrayIndex++;}
	return aTopicObject;
}

function SyncroViewNextTopic()
{
	var aTopicObject = null;
	if ( (this.TopicArray.length > 0) && (this.TopicArrayIndex < this.TopicArray.length)  )
	{   aTopicObject = this.TopicArray[this.TopicArrayIndex];
		this.TopicArrayIndex++;
	}
	return aTopicObject;
}

function SyncroViewTopicByIndex(anIndex)
{
	var aTopicObject = null;
	if ( anIndex < this.TopicArray.length)
	{   aTopicObject = this.TopicArray[anIndex];}
	return aTopicObject;
}

function InitializeSyncroFinder()
{
	DetectBrowser();
	if ( isNav == true )
	{   theMasterSelectionList = document.frmSyncro.theMasterList;
		theSlaveSelectionList = document.frmSyncro.theSlaveList;}
	else
	{   theMasterSelectionList = document.all.theMasterList;
		theSlaveSelectionList = document.all.theSlaveList;}
	LoadSyncroObject(SyncroObject);
	var theTopicIndexStr = theMasterIndex;
	var theTopicIndex = parseInt(theTopicIndexStr);
	if (isNaN(theTopicIndex) == false )
		theMasterSelectionList.selectedIndex = theTopicIndex;
	var theSyncroCategoryIndexStr = theSlaveIndex;
	var theSyncroCategoryIndex = parseInt(theSyncroCategoryIndexStr);
	if (isNaN(theSyncroCategoryIndex) == false)
		theSlaveSelectionList.selectedIndex = theSyncroCategoryIndex;
	LoadScreenshot();
}

function OnChangeScheme()
{
	LoadScreenshot();
}

function LoadScreenshot()
{
	if ( isNav == true )
	{   theMasterSelectionList = document.frmSyncro.theMasterList;
		theSlaveSelectionList = document.frmSyncro.theSlaveList;
		theScreenshotImg = document.frmSyncro.theScreenshot;}
	else
	{   theMasterSelectionList = document.all.theMasterList;
		theSlaveSelectionList = document.all.theSlaveList;
		theScreenshotImg = document.all.theScreenshot;}
	skin = theMasterSelectionList.options[theMasterSelectionList.selectedIndex].value;
	scheme = theSlaveSelectionList.options[theSlaveSelectionList.selectedIndex].value;
	theScreenshotImg.src = theLayoutToolPath + "/" + escape(skin) + "/" + escape(scheme) + "/screenshot.gif";
}
//-->
</script>

<style>
	form[name=frmSyncro] select {
		width: 150px;
	}
</style>

<span tal:replace="structure python:layout_tool.getSyncroObject(layout_tool.getDataForLayoutSettings())" />

<form name="frmSyncro" method="post" tal:attributes="action string:${here/getSitePath}/admin_layout">
<table border="0" cellspacing="2" cellpadding="2">
	<tr>
		<td i18n:translate="">Layout</td>
		<td><span tal:replace="structure python:layout_tool.getMasterCombo()"/></td>
	</tr>
	<tr>
		<td i18n:translate="">Color scheme</td>
		<td><span tal:replace="structure python:layout_tool.getSlaveCombo()"/></td>
	</tr>
	<tr>
		<td valign="top" i18n:translate="">Preview</td>
		<td>
			<img src="" name="theScreenshot" class="layout-preview"
			     alt="Preview" i18n:attributes="alt" />
		</td>
	</tr>
	<tr><td></td><td><input type="submit" value="Save changes" i18n:attributes="value" /></td></tr>
</table>
</form>

<script type="text/javascript">
	InitializeSyncroFinder();
</script>

</tal:block>

</tal:block>
