<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">
	<inp2:m_RenderElement design="form_row" pass_params="1">
		<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>
</inp2:m_DefineElement>

<inp2:m_DefineElement name="inp_edit_options_style">
	<inp2:m_RenderElement design="form_row" pass_params="1">
		<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>
</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"/>