<?xml version="1.0" encoding="UTF-8"?>
<f:root
	xmlns:f="http://ajax4jsf.org/cdk/template"
	xmlns:c=" http://java.sun.com/jsf/core"
	xmlns:ui=" http://ajax4jsf.org/cdk/ui"
	xmlns:u=" http://ajax4jsf.org/cdk/u"
	xmlns:x=" http://ajax4jsf.org/cdk/x"
	class="org.richfaces.renderkit.html.InputNumberSliderRenderer"
	baseclass="org.richfaces.renderkit.InputNumberSliderRendererBase"
	component="org.richfaces.component.UIInputNumberSlider"
	>
    <h:styles>css/slider.xcss</h:styles>
    <h:scripts>new org.ajax4jsf.javascript.PrototypeScript(),script/SliderScript.js,/org/richfaces/renderkit/html/scripts/browser_info.js,/org/richfaces/renderkit/html/scripts/events.js</h:scripts>
	<f:clientid var="clientId"/>

	<f:resource name="/org/richfaces/renderkit/html/images/spacer.gif" var="spacer" />
	<f:resource name="org.richfaces.renderkit.html.images.SliderArrowImage" var="arrow" />
	<f:resource name="org.richfaces.renderkit.html.images.SliderArrowSelectedImage" var="arrowSelected" />

    <jsp:scriptlet><![CDATA[
        String inputPosition = (String)component.getAttributes().get("inputPosition");

        boolean disabled = attributeToBoolean(component, "disabled");
        boolean showInput = attributeToBoolean(component, "showInput");
        boolean manualInput = attributeToBoolean(component, "enableManualInput");

        variables.setVariable("inputReadOnly",new Boolean(!manualInput));
        variables.setVariable("inputDisabled",new Boolean(disabled));

        if (!manualInput || disabled){
            variables.setVariable("color", "color: gray;");
        }
        else{
            variables.setVariable("color", "");
        }

        variables.setVariable("inputSize", component.getAttributes().get("inputSize"));
	variables.setVariable("style",component.getStyleValue());

    ]]></jsp:scriptlet>

    <table id="#{clientId}" border="0" cellpadding="0" cellspacing="0" class="dr-insldr rich-slider #{component.attributes['styleClass']}"
           style="#{style}" x:passThruWithExclusions="id,boundClass,tipClass,class,width,height,style">
		<tbody>
			<tr>
                <jsp:scriptlet><![CDATA[
                    if ("left".equalsIgnoreCase(inputPosition)) {
                ]]></jsp:scriptlet>
                <td rowspan="2" style="text-align: right; vertical-align: bottom">
                    <jsp:scriptlet><![CDATA[
                    if (showInput) {
                    ]]></jsp:scriptlet>
                                <input	id="#{clientId}Input"
                                        name="#{clientId}"
                                        value="#{this:getInputValue(context,component)}"
                                        type="text"
                                        class="dr-insldr-field dr-insldr-field-left rich-inslider-field #{component.attributes['inputClass']}"
                                        style="#{component.attributes['inputStyle']}; #{color}"
                                        readonly="#{inputReadOnly}"
                                        disabled="#{disabled}"
                                        onselect="#{component.attributes['onselect']}"
                                        onfocus="#{component.attributes['onfocus']}"
                                        onblur="#{component.attributes['onblur']}"
                                        accesskey="#{component.attributes['accesskey']}"
                                        size="#{inputSize}"
                                        maxlength="#{component.attributes['maxlength']}"
                                />
                            <jsp:scriptlet><![CDATA[
                            } else {
                                ]]></jsp:scriptlet>
                                <input	id="#{clientId}Input"
                                        name="#{clientId}"
                                        value="#{this:getInputValue(context,component)}"
                                        type="hidden"
                                />
                                <jsp:scriptlet><![CDATA[
                    }
                    ]]></jsp:scriptlet>
                </td>
                <jsp:scriptlet><![CDATA[
                    }
                ]]></jsp:scriptlet>

                <td class="dr-insldr-left-num rich-inslider-left-num #{component.attributes['boundClass']}">
				<jsp:scriptlet><![CDATA[
				    if (attributeToBoolean(component, "showBoundaryValues")){
                ]]></jsp:scriptlet>
					#{component.attributes['minValue']}
				<jsp:scriptlet><![CDATA[
				    }
                ]]></jsp:scriptlet>
				</td>
				<td class="dr-insldr-right-num rich-inslider-right-num #{component.attributes['boundClass']}">
				<jsp:scriptlet><![CDATA[
				    if (attributeToBoolean(component, "showBoundaryValues")){
                ]]></jsp:scriptlet>
					#{component.attributes['maxValue']}
				<jsp:scriptlet><![CDATA[
				    }
                ]]></jsp:scriptlet>
				</td>

                <jsp:scriptlet><![CDATA[
                    if ("right".equalsIgnoreCase(inputPosition)) {
                ]]></jsp:scriptlet>
                <td rowspan="2" style="text-align: left; vertical-align: bottom">
					<jsp:scriptlet><![CDATA[
					if (showInput) {
					]]></jsp:scriptlet>
								<input	id="#{clientId}Input"
										name="#{clientId}"
										value="#{this:getInputValue(context,component)}"
										type="text"
										class="dr-insldr-field dr-insldr-field-right rich-inslider-field #{component.attributes['inputClass']}"
										style="#{component.attributes['inputStyle']}; #{color}"
										readonly="#{inputReadOnly}"
										disabled="#{disabled}"
										onselect="#{component.attributes['onselect']}"
										onfocus="#{component.attributes['onfocus']}"
										onblur="#{component.attributes['onblur']}"
										accesskey="#{component.attributes['accesskey']}"
										size="#{inputSize}"
										maxlength="#{component.attributes['maxlength']}"
								/>
							<jsp:scriptlet><![CDATA[
							} else {
								]]></jsp:scriptlet>
								<input	id="#{clientId}Input"
										name="#{clientId}"
										value="#{this:getInputValue(context,component)}"
										type="hidden"
								/>
								<jsp:scriptlet><![CDATA[
					}
					]]></jsp:scriptlet>
				</td>
                <jsp:scriptlet><![CDATA[
                    }
                ]]></jsp:scriptlet>
            </tr>
			<tr>
				<td colspan="2" class="dr-insldr-size dr-insldr-vert-spacer">
					<table border="0" cellpadding="0" cellspacing="0" class="dr-insldr-size">
						<tbody>
							<tr>
								<td id="#{clientId}Track">
									<div style="position : relative">
										<div id="#{clientId}Tip" class="dr-insldr-tip rich-inslider-tip #{component.attributes['tipClass']}" style="display: none;#{component.attributes['tipStyle']}">
                                            <jsp:scriptlet><![CDATA[
                                              writer.write("&nbsp;");
                                            ]]></jsp:scriptlet>
                                        </div>
										<div class="dr-insldr-handler rich-inslider-handler #{component.attributes['handleClass']}" id="#{clientId}Handle">
                                            <jsp:scriptlet><![CDATA[
                                              writer.write("&nbsp;");
                                            ]]></jsp:scriptlet>
                                        </div>
									</div>
									<div class="dr-insldr-track rich-inslider-track #{component.attributes['barClass']}" style="#{component.attributes['barStyle']}">
										<table class="dr-insldr-track-decor-1" cellpadding="0" cellspacing="0">
											<tbody>
												<tr>
													<td class="dr-insldr-track-decor-2">
														<img src="#{spacer}" style="display: block;" />
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<script type="text/javascript">
										new Richfaces.Slider(
															"#{clientId}Handle",
															"#{clientId}Track",
															"#{clientId}Tip",
															"#{clientId}",
															"#{component.attributes['handleSelectedClass']}",
															{
																range			: $R(#{component.attributes['minValue']},#{component.attributes['maxValue']}),
																step			: "#{component.attributes['step']}",
																sliderValue		: "#{this:getInputValue(context,component)}",
																disabled		: #{component.attributes['disabled']},
																currValue		: #{component.attributes['showToolTip']},
																inputId			: "#{clientId}Input",
																arrowSelected	: "#{arrowSelected}",
																onerr			: "#{component.attributes['onerror']}",
																onchange		: "#{component.attributes['onchange']}",
																required		:	#{component.attributes['required']}
															})
									</script>
								</td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</tbody>
	</table>
</f:root>
