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

<inp2:m_include t="incs/header"/>
<inp2:m_RenderElement name="combined_header" prefix="css" section="in-portal:configure_styles" title_preset="style_edit"/>

<script src="js/colorselector.js" type="text/javascript"></script>
<style type="text/css">
	.ColorBox
	{
		font-size: 1px;
		border: #808080 1px solid;
		width: 10px;
		position: static;
		height: 10px;
	}
</style>

<!-- 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('selectors','OnSaveStyle');
						}
					) );

				a_toolbar.AddButton( new ToolBarButton('cancel', '<inp2:m_phrase label="la_ToolTip_Cancel" escape="1"/>', function() {
							window_close();
						}
				 ) );

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

				a_toolbar.AddButton( new ToolBarButton('reset_to_base', '<inp2:m_phrase label="la_ToolTip_ResetToBase" escape="1"/>', function() {
							submit_event('selectors','OnResetToBase');
						}
				) );

				a_toolbar.Render();
			</script>
		</td>
	</tr>
</tbody>
</table>

<inp2:m_DefineElement name="inp_edit_color">
	<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" title_phrase="$title_phrase" title="$title" is_last="$is_last"/>
		<td class="control-cell">
			<input	type="text"
					name="<inp2:{$prefix}_InputName field="$field" subfield="$subfield"/>"
					id="<inp2:{$prefix}_InputName field="$field" subfield="$subfield"/>"
					value="<inp2:{$prefix}_Field field="$field" subfield="$subfield"/>"
					tabindex="<inp2:m_get param="tab_index"/>"
					size="<inp2:m_param name="size"/>"
					maxlength="<inp2:m_param name="maxlength"/>"
					class="<inp2:m_param name="class"/>"
					onkeyup="updateColor(event,'<inp2:{$prefix}_InputName field="$field" subfield="$subfield"/>')"
					onblur="<inp2:m_Param name="onblur"/>">
			<div id="color_<inp2:{$prefix}_InputName field="$field" subfield="$subfield"/>" style="display: inline; border: 1px solid #000000;" onclick="openColorSelector(event,'<inp2:{$prefix}_InputName field="$field" subfield="$subfield"/>');">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
			<script language="javascript">
				updateColor(null,'<inp2:{$prefix}_InputName field="$field" subfield="$subfield"/>');
			</script>
		</td>
		<inp2:m_RenderElement name="inp_edit_error" pass_params="1"/>
	</tr>
</inp2:m_DefineElement>

<inp2:m_DefineElement name="inp_edit_options_style">
	<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" title_phrase="$title_phrase" title="$title" is_last="$is_last"/>
		<td class="control-cell">
			<select tabindex="<inp2:m_get param="tab_index"/>" name="<inp2:{$prefix}_InputName field="$field" subfield="$subfield"/>" id="<inp2:{$prefix}_InputName field="$field" subfield="$subfield"/>" onchange="<inp2:m_Param name="onchange"/>">
				<inp2:{$prefix}_PredefinedOptions field="$field" value_field="$value_field" subfield="$subfield" block="inp_option_item" selected="selected"/>
			</select>
		</td>
		<inp2:m_RenderElement name="inp_edit_error" pass_params="1"/>
	</tr>
</inp2:m_DefineElement>


<inp2:m_DefineElement name="subsection_collapse">
	<tr class="subsectiontitle">
		<td colspan="5"><inp2:m_phrase label="$title"/></td>
	</tr>
</inp2:m_DefineElement>

<inp2:selectors_SaveWarning name="grid_save_warning"/>
<inp2:selectors_ErrorWarning name="form_error_warning"/>

<div id="scroll_container">
	<table class="edit-form">
		<inp2:m_RenderElement name="subsection_collapse" prefix="selectors" fields="SelectorData" title="!la_Font!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="font" title="!la_fld_Font!" size="50"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="font-family" title="!la_fld_FontFamily!" size="40"/>
			<inp2:m_RenderElement name="inp_edit_color" prefix="selectors" field="SelectorData" subfield="color" title="!la_fld_FontColor!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="font-size" title="!la_fld_FontSize!"/>
			<inp2:m_RenderElement name="inp_edit_options_style" prefix="selectors" field="SelectorData" subfield="font-style" value_field="FontStyle" title="!la_fld_FontStyle!"/>
			<inp2:m_RenderElement name="inp_edit_options_style" prefix="selectors" field="SelectorData" subfield="font-weight" value_field="FontWeight" title="!la_fld_FontWeight!"/>
			<inp2:m_RenderElement name="inp_edit_options_style" prefix="selectors" field="SelectorData" subfield="text-align" value_field="TextAlign" title="!la_fld_TextAlign!"/>
			<inp2:m_RenderElement name="inp_edit_options_style" prefix="selectors" field="SelectorData" subfield="text-decoration" value_field="TextDecoration" title="!la_fld_TextDecoration!"/>
		<inp2:m_RenderElement name="subsection_collapse" prefix="selectors" fields="SelectorData" title="!la_Background!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="background" title="!la_fld_Background!" size="50"/>
			<inp2:m_RenderElement name="inp_edit_color" prefix="selectors" field="SelectorData" subfield="background-color" title="!la_fld_BackgroundColor!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="background-image" title="!la_fld_BackgroundImage!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="background-repeat" title="!la_fld_BackgroundRepeat!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="background-attachment" title="!la_fld_BackgroundAttachment!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="background-position" title="!la_fld_BackgroundPosition!"/>
		<inp2:m_RenderElement name="subsection_collapse" prefix="selectors" fields="SelectorData" title="!la_Borders!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="border" title="!la_fld_Borders!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="border-top" title="!la_fld_BorderTop!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="border-right" title="!la_fld_BorderRight!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="border-bottom" title="!la_fld_BorderBottom!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="border-left" title="!la_fld_BorderLeft!"/>
		<inp2:m_RenderElement name="subsection_collapse" prefix="selectors" fields="SelectorData" title="!la_Paddings!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="padding" title="!la_fld_Paddings!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="padding-top" title="!la_fld_PaddingTop!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="padding-right" title="!la_fld_PaddingRight!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="padding-bottom" title="!la_fld_PaddingBottom!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="padding-left" title="!la_fld_PaddingLeft!"/>
		<inp2:m_RenderElement name="subsection_collapse" prefix="selectors" fields="SelectorData" title="!la_Margins!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="margin" title="!la_fld_Margins!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="margin-top" title="!la_fld_MarginTop!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="margin-right" title="!la_fld_MarginRight!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="margin-bottom" title="!la_fld_MarginBottom!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="margin-left" title="!la_fld_MarginLeft!"/>
		<inp2:m_RenderElement name="subsection_collapse" prefix="selectors" fields="SelectorData" title="!la_PositionAndVisibility!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="width" title="!la_fld_Width!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="height" title="!la_fld_Height!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="left" title="!la_fld_Left!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="top" title="!la_fld_Top!"/>
			<inp2:m_RenderElement name="inp_edit_options_style" prefix="selectors" field="SelectorData" subfield="position" value_field="StylePosition" title="!la_fld_Position!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="selectors" field="SelectorData" subfield="z-index" title="!la_fld_Z-Index!"/>
			<inp2:m_RenderElement name="inp_edit_options_style" prefix="selectors" field="SelectorData" subfield="display" value_field="StyleDisplay" title="!la_fld_Display!"/>
			<inp2:m_RenderElement name="inp_edit_options_style" prefix="selectors" field="SelectorData" subfield="visibility" value_field="StyleVisibility" title="!la_fld_Visibility!"/>
			<inp2:m_RenderElement name="inp_edit_options_style" prefix="selectors" field="SelectorData" subfield="cursor" value_field="StyleCursor" title="!la_fld_Cursor!"/>
			<inp2:m_RenderElement name="inp_edit_filler"/>
	</table>
</div>

<script type="text/javascript">
	$(document).ready(
		function() {
			InitColorSelector();
		}
	);
</script>

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