<span tal:replace="structure here/manage_page_header"/>
<span tal:replace="structure here/manage_tabs"/>

<p class="form-help">
    This page lists the layouts defined in this portal and you can choose one of those for the presentation. After choosing a layout, select the appropriate color scheme for it.
</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>

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

<form name="frmSyncro" method="post" action="manageLayout">
<table border="0" cellspacing="2" cellpadding="2">
	<tr>
		<td class="form-label">Layout</td>
		<td><span tal:replace="structure python:here.getMasterCombo()"/></td>
	</tr>
	<tr>
		<td class="form-label">Color scheme</td>
		<td><span tal:replace="structure python:here.getSlaveCombo()"/></td>
	</tr>
	<tr>
		<td class="form-label" style="vertical-align: top">Preview</td>
		<td>
			<img src="" name="theScreenshot" class="layout-preview" alt="Preview" />
		</td>
	</tr>
	<tr><td></td><td><input type="submit" value="Save changes" /></td></tr>
</table>
</form>

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

<span tal:replace="structure here/manage_page_footer"/>
