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

<p class="form-help">
	Here you can customize the center side.
</p>

<script type="text/javascript">
<!--

function add()
{
	var selectleft = document.frmportlets.available;
	var selectright = document.frmportlets.portlets;
	var i;
	for(i = 0; i < selectleft.options.length; i++)
	{
		if(selectleft.options[i].selected)
		{
			var o = document.createElement( "option");
			o.text = selectleft.options[i].text;
			o.value = selectleft.options[i].value;
			selectright.options[selectright.options.length] = o;
			selectleft.remove(i);
			i--;
		}
	}
}
function remove()
{
	var selectleft = document.frmportlets.available;
	var selectright = document.frmportlets.portlets;
	var i;
	for( i = 0; i < selectright.options.length; i++)
	{
		if(selectright.options[i].selected)
		{
			var o = document.createElement( "option");
			o.text = selectright.options[i].text;
			o.value = selectright.options[i].value;
			selectleft.options[selectleft.options.length] = o;
			selectright.remove(i);
			i--;
		}
	}
}

function moveup()
{
	var selectright = document.frmportlets.portlets;
	var i;
	for( i = 0; i < selectright.options.length; i++)
	{
		if(selectright.options[i].selected && (i > 0))
		{
			var o1 = document.createElement( "option");
			o1.text = selectright.options[i-1].text;
			o1.value = selectright.options[i-1].value;
			var o2 = document.createElement( "option");
			o2.text = selectright.options[i].text;
			o2.value = selectright.options[i].value;
			selectright.options[i-1] = o2;
			selectright.options[i] = o1;
			selectright.options[i-1].selected = true;
		}
	}
}

function movedown()
{
	var selectright = document.frmportlets.portlets;
	var i;
	for( i = selectright.options.length-1; i >= 0; i--)
	{
		if(selectright.options[i].selected && (i < selectright.options.length-1))
		{
			var o1 = document.createElement( "option");
			o1.text = selectright.options[i].text;
			o1.value = selectright.options[i].value;
			var o2 = document.createElement( "option");
			o2.text = selectright.options[i+1].text;
			o2.value = selectright.options[i+1].value;
			selectright.options[i] = o2;
			selectright.options[i+1] = o1;
			selectright.options[i+1].selected = true;
		}
	}
}

function dosubmit()
{
	var selectright = document.frmportlets.portlets;
	var i;
	for( i = 0; i < selectright.options.length; i++)
	{
		selectright.options[i].selected = true;
	}
	document.frmportlets.submit();
}

// -->
</script>

<form name="frmportlets" method="post" action="manage_center_portlets">
<table border="0" cellspacing="4" cellpadding="4">
	<tr>
		<td>Available portlets:</td>
		<td></td>
		<td>Current center portlets:</td>
		<td></td>
	</tr>
	<tr>
		<td>
			<select name="available" size="10" multiple="multiple">
				<option tal:repeat="item here/get_available_center_portlets_objects"
						tal:attributes="value item/id">
					<span tal:replace="item/title_or_id" /> (<span tal:replace="item/get_type_label" />)
				</option>
			</select>
		</td>
		<td style="vertical-align: middle">
			<input type="button" value="Add ->" onclick="javascript:add();"/>
			<br /><br />
			<input type="button" value="<- Remove" onclick="javascript:remove();" />
		</td>
		<td>
			<select name="portlets" size="10" multiple="multiple">
				<option tal:repeat="item here/get_center_portlets_objects"
						tal:attributes="value item/id">
					<span tal:replace="item/title_or_id" /> (<span tal:replace="item/get_type_label" />)
				</option>
			</select>
		</td>
		<td style="vertical-align: middle">
			<input type="button" value="Move Up" onclick="javascript:moveup();" />
			<br /><br />
			<input type="button" value="Move Down" onclick="javascript:movedown();" />
		</td>
	</tr>
	<tr>
		<td colspan="4" style="text-align: center">
			<input type="button" value="Save changes" onclick="javascript:dosubmit();" />
		</td>
	</tr>
</table>
</form>

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