<inp2:adm_SetPopupSize width="750" height="570"/>

<inp2:m_include t="incs/header"/>
<inp2:m_RenderElement name="combined_header" section="in-portal:skins" prefix="skin" title_preset="skin_edit"/>

<!-- ToolBar -->
<table class="toolbar" height="30" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
	<tr>
  	<td>
  		<script type="text/javascript">
				a_toolbar = new ToolBar();
				a_toolbar.AddButton( new ToolBarButton('select', '<inp2:m_phrase label="la_ToolTip_Save" escape="1"/>', function() {
						submit_event('skin','<inp2:skin_SaveEvent/>');
					}
				));
				a_toolbar.AddButton( new ToolBarButton('cancel', '<inp2:m_phrase label="la_ToolTip_Cancel" escape="1"/>', function() {
						cancel_edit('skin','OnCancelEdit','<inp2:skin_SaveEvent/>','<inp2:m_Phrase label="la_FormCancelConfirmation" escape="1"/>');
					}
				));

				a_toolbar.AddButton( new ToolBarButton('reset_edit', '<inp2:m_phrase label="la_ToolTip_Reset" escape="1"/>', function() {
						reset_form('skin', 'OnReset', '<inp2:m_Phrase label="la_FormResetConfirmation" escape="1"/>');
					}
				));

				a_toolbar.AddButton( new ToolBarSeparator('sep1') );

				a_toolbar.AddButton( new ToolBarButton('prev', '<inp2:m_phrase label="la_ToolTip_Prev" escape="1"/>', function() {
							go_to_id('skin', '<inp2:skin_PrevId/>');
						}
				));
				a_toolbar.AddButton( new ToolBarButton('next', '<inp2:m_phrase label="la_ToolTip_Next" escape="1"/>', function() {
							go_to_id('skin', '<inp2:skin_NextId/>');
						}
				));

				a_toolbar.Render();

				<inp2:m_if check="skin_IsSingle" >
					a_toolbar.HideButton('prev');
					a_toolbar.HideButton('next');
					a_toolbar.HideButton('sep1');
				<inp2:m_else/>
					<inp2:m_if check="skin_IsLast" >
						a_toolbar.DisableButton('next');
					</inp2:m_if>
					<inp2:m_if check="skin_IsFirst" >
						a_toolbar.DisableButton('prev');
					</inp2:m_if>
				</inp2:m_if>
			</script>


			<script src="js/swfobject.js" type="text/javascript"></script>
			<script type="text/javascript" src="js/uploader.js"></script>
		</td>
	</tr>
</tbody>
</table>

<inp2:m_DefineElement name="replacement_item" subfield="" class="" is_last="" maxlength="" onblur="" size="" onkeyup="" style="width: 100%">
	<inp2:m_if check="{$prefix}_FieldVisible" field="$field">
		<tr class="<inp2:m_odd_even odd='edit-form-odd' even='edit-form-even'/>">
			<inp2:m_RenderElement name="inp_edit_field_caption" prefix="$prefix" field="$field" subfield="$subfield" title="$Description" is_last="$is_last"/>
			<td class="control-cell">
				<input style="<inp2:m_Param name='style'/>" type="text"
					name="<inp2:{$prefix}_InputName field='$field' subfield='$subfield'/>[<inp2:m_Param name='key'/>][Value]" id="<inp2:{$prefix}_InputName field='$field' subfield='$subfield'/>[<inp2:m_Param name='key'/>]" value="<inp2:m_Param name='Value'/>">
			</td>
		</tr>
	</inp2:m_if>
</inp2:m_DefineElement>

<inp2:m_DefineElement name="inp_edit_serialized" subfield="" class="" is_last="" maxlength="" onblur="" size="" onkeyup="" style="width: 100%">
	<inp2:PrintSerializedFields pass_params="1" field="$field" render_as="$item_render_as"/>
</inp2:m_DefineElement>

<inp2:skin_SaveWarning name="grid_save_warning"/>
<inp2:skin_ErrorWarning name="form_error_warning"/>

<div id="scroll_container">
	<table class="edit-form">
		<inp2:m_RenderElement name="inp_id_label" prefix="skin" field="SkinId" title="!la_fld_Id!"/>

		<inp2:m_RenderElement name="inp_edit_box" prefix="skin" field="Name" title="!la_fld_SkinName!" style="width: 100px"/>

		<inp2:m_RenderElement name="inp_edit_swf_upload" prefix="skin" field="Logo" title="!la_fld_Logo!"/>
		<inp2:m_RenderElement name="inp_edit_swf_upload" prefix="skin" field="LogoBottom" title="la_fld_LogoBottom"/>
		<inp2:m_RenderElement name="inp_edit_swf_upload" prefix="skin" field="LogoLogin" title="la_fld_LogoLogin"/>

		<style type="text/css">
			.skin-table td {width: 90px};
		</style>

		<tr class="<inp2:m_odd_even odd='edit-form-odd' even='edit-form-even'/>">
			<inp2:m_RenderElement name="inp_edit_field_caption" prefix="skin" field="Options" title="la_HeadFrame"/>
			<td class="control-cell">
				<table class="skin-table">
					<tr>
						<td>Font Color (HeadColor)</td>
						<td>Background (HeadBgColor)</td>
						<td>Bar Text Color (HeadBarColor)</td>
						<td>Bar Background (HeadBarBgColor)</td>
					</tr>
					<tr>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[HeadColor][Value]"
								value="<inp2:skin_Field name="Options" format="HeadColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[HeadBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="HeadBgColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[HeadBarColor][Value]"
								value="<inp2:skin_Field name="Options" format="HeadBarColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[HeadBarBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="HeadBarBgColor.Value"/>">
						</td>
					</tr>
				</table>
			</td>
		</tr>

		<tr class="<inp2:m_odd_even odd='edit-form-odd' even='edit-form-even'/>">
			<inp2:m_RenderElement name="inp_edit_field_caption" prefix="skin" field="Options" title="la_GeneralSections"/>
			<td class="control-cell">
				<table class="skin-table">
					<tr>
						<td>Section Title Color (SectionColor)</td>
						<td>Section Background (SectionBgColor)</td>
						<td>Titlebar Font Color (TitleBarColor)</td>
						<td>Titlebar Background (TitleBarBgColor)</td>
					</tr>
					<tr>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[SectionColor][Value]"
								value="<inp2:skin_Field name="Options" format="SectionColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[SectionBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="SectionBgColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[TitleBarColor][Value]"
								value="<inp2:skin_Field name="Options" format="TitleBarColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[TitleBarBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="TitleBarBgColor.Value"/>">
						</td>
					</tr>
				</table>
			</td>
		</tr>

		<tr class="<inp2:m_odd_even odd='edit-form-odd' even='edit-form-even'/>">
			<inp2:m_RenderElement name="inp_edit_field_caption" prefix="skin" field="Options" title="la_DataGrid1"/>
			<td class="control-cell">
				<table class="skin-table">
					<tr>
						<td>Toolbar Backgroun (ToolbarBgColor)</td>
						<td>Filter Row Background (FiltersBgColor)</td>
						<td>Column Titles Color (ColumnTitlesColor)</td>
						<td>Column Titles Background (ColumnTitlesBgColor)</td>
					</tr>
					<tr>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[ToolbarBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="ToolbarBgColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[FiltersBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="FiltersBgColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[ColumnTitlesColor][Value]"
								value="<inp2:skin_Field name="Options" format="ColumnTitlesColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[ColumnTitlesBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="ColumnTitlesBgColor.Value"/>">
						</td>
					</tr>
				</table>
			</td>
		</tr>

		<tr class="<inp2:m_odd_even odd='edit-form-odd' even='edit-form-even'/>">
			<inp2:m_RenderElement name="inp_edit_field_caption" prefix="skin" field="Options" title="la_DataGrid2"/>
			<td class="control-cell">
				<table class="skin-table">
					<tr>
						<td>Grid Odd Row Color (OddColor)</td>
						<td>Grid Odd Row Background Color (OddBgColor)</td>
						<td>Grid Even Row Color (EvenColor)</td>
						<td>Grid Even Row Background Color (EvenBgColor)</td>
					</tr>
					<tr>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[OddColor][Value]"
								value="<inp2:skin_Field name="Options" format="OddColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[OddBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="OddBgColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[EvenColor][Value]"
								value="<inp2:skin_Field name="Options" format="EvenColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[EvenBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="EvenBgColor.Value"/>">
						</td>
					</tr>
				</table>
			</td>
		</tr>

		<tr class="<inp2:m_odd_even odd='edit-form-odd' even='edit-form-even'/>">
			<inp2:m_RenderElement name="inp_edit_field_caption" prefix="skin" field="Options" title="la_Trees"/>
			<td class="control-cell">
				<table class="skin-table">
					<tr>
						<td>Tree Item Color (TreeColor)</td>
						<td>Tree Item Hover Color (TreeHoverColor)</td>
						<td>Tree Highlighted Item Color (TreeHighColor)</td>
						<td>Tree Highlighted Item Hover Color (TreeHighHoverColor)</td>
						<td>Tree Highlighted Item Background Color (TreeHighBgColor)</td>
						<td>Tree Background Color (TreeBgColor)</td>
					</tr>
					<tr>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[TreeColor][Value]"
								value="<inp2:skin_Field name="Options" format="TreeColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[TreeHoverColor][Value]"
								value="<inp2:skin_Field name="Options" format="TreeHoverColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[TreeHighColor][Value]"
								value="<inp2:skin_Field name="Options" format="TreeHighColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[TreeHighHoverColor][Value]"
								value="<inp2:skin_Field name="Options" format="TreeHighHoverColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[TreeHighBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="TreeHighBgColor.Value"/>">
						</td>
						<td>
							<input style="width: 80px" type="text"
								name="<inp2:skin_InputName field="Options"/>[TreeBgColor][Value]"
								value="<inp2:skin_Field name="Options" format="TreeBgColor.Value"/>">
						</td>
					</tr>
				</table>
			</td>
		</tr>

	<!--	<inp2:m_RenderElement name="inp_edit_serialized" prefix="skin" field="Options" title="!la_fld_Options!" style="width: 100px" item_render_as="replacement_item"/>-->
		<inp2:m_RenderElement name="inp_edit_textarea" prefix="skin" field="CSS" title="!la_fld_CSS!" control_options="{min_height: 300}"/>

	</table>
</div>

<inp2:m_include t="incs/footer"/>