<apex:page standardcontroller="Survey__c" extensions="ViewSurveyController" cache="false" sidebar="false" showheader="false" applyBodyTag="false" applyHtmlTag="false" id="thePage">
<html>
<head>
<meta name="viewport" content="width=768,user-scalable=yes" />
<title>{!surveyName}</title>
<script type="text/javascript">
    function setScaleValue(idx, val) {
        var t = "thePage:theForm:outerBlock:aQPreview:" + idx + ":innerblock:scaleHiddenValue";
        document.getElementById(t).value = val;
    }
</script>
<style>
    <apex:outputText value="{!surveyContainerCss}" />
</style>
</head>
<body>
<div id="survey_container">
    <apex:form id="theForm">
        <apex:outputPanel id="seeSurvey" rendered="{!thankYouRendered == false}" >
            <apex:outputField value="{!Survey__c.Survey_Header__c}"/>
            <h1><apex:outputField value="{!Survey__c.Name}" rendered="{!Survey__c.Hide_Survey_Name__c == false}" /></h1>
        </apex:outputPanel>
    
        <apex:pageMessages />
        <apex:pageBlock rendered="{!thankYouRendered == false}" id="outerBlock"> 
            <div id="qList">
<apex:variable value="{!0}" var="cnt" />
<apex:repeat value="{!allQuestions}" var="qPreview" id="aQPreview">
                <div id="{!qPreview.id}" >
                    <apex:pageBlock id="innerblock">
                        <h1 class="question">
                            <span class="questionNumber">{!qPreview.orderNumber}</span>
                            {!qPreview.question}
                            <apex:outputPanel rendered="{!qPreview.required}" styleClass="requiredText">
                                ({!$Label.LABS_SF_Required})
                            </apex:outputPanel>
                        </h1>
                        <div id="radio">
                          <apex:selectRadio layout="pageDirection" rendered="{!qPreview.renderSelectRadio}" value="{!qPreview.selectedOption}" >
                            <apex:selectOptions value="{!qPreview.singleOptions}"/>
                          </apex:selectRadio>
                        </div>
                        <div id="checkbox">
                          <apex:selectCheckboxes layout="pageDirection" rendered="{!qPreview.renderSelectCheckboxes}" value="{!qPreview.selectedOptions}" >
                            <apex:selectOptions value="{!qPreview.multiOptions}"/>
                          </apex:selectCheckboxes>
                        </div>
                        <div id="text">
                           <apex:inputTextArea cols="50" rows="10" rendered="{!qPreview.renderFreeText}" value="{!qPreview.choices}"/>  
                        </div>
                        <div id="row">
                          <apex:selectRadio rendered="{!qPreview.renderSelectRow}" value="{!qPreview.selectedOption}">
                            <apex:selectOptions value="{!qPreview.rowOptions}"/>
                          </apex:selectRadio>
                        </div>
                        <div id="singleText">
                           <apex:inputText style="width:90%;" rendered="{!qPreview.renderSingleText}" value="{!qPreview.choices}"/>  
                        </div>
                        <div id="picklist">
                          <apex:selectList size="1" rendered="{!qPreview.renderPicklist}" value="{!qPreview.selectedOption}" >
                            <apex:selectOptions value="{!qPreview.pickOptions}"/>
                          </apex:selectList>
                        </div>
                        <div id="scale">
                          <apex:outputPanel layout="none" rendered="{!qPreview.renderScale}">
                            <table border="0" cellpadding="5" cellspacing="0">
                                <tr>
                                    <td>&nbsp;</td>
                                        <apex:repeat value="{!qPreview.scaleOptions}" var="s">
                                            <td style="text-align:center;">{!s.label}</td>
                                        </apex:repeat>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td><apex:outputText value="{!qPreview.minLabel}" /></td>
                                        <apex:repeat value="{!qPreview.scaleOptions}" var="s">
                                            <td><input type="radio" name="scale{!qPreview.Id}" id="scale{!qPreview.Id}_{!s.label}" onclick="setScaleValue('{!cnt}', '{!s.label}');"/></td>
                                        </apex:repeat>
                                    <td>
                                      <apex:outputText value="{!qPreview.maxLabel}" />
                                      <apex:inputHidden value="{!qPreview.selectedOption}" id="scaleHiddenValue" />
                                    </td>
                                </tr>
                            </table>
                            <script type="text/javascript">
                                var cnt = '{!cnt}';
                                var val = document.getElementById("thePage:theForm:outerBlock:aQPreview:" + cnt + ":innerblock:scaleHiddenValue").value;
                                var div = document.getElementById("thePage:theForm:outerBlock:aQPreview:" + cnt + ":innerblock");
                                var input = div.getElementsByTagName("input");
                                
                                var qid = '{!qPreview.Id}';
                                for (var i = 0; i < input.length; i++) {
                                    if (input[i].id == "scale" + qid + "_" + val) {
                                        input[i].checked = true;
                                    }
                                }
                            </script>
                          </apex:outputPanel>
                        </div>
                        <div id="mail">
                           <apex:inputField style="width:200px;" rendered="{!qPreview.renderMail}" value="{!qPreview.sq.Mail__c}"/>  
                        </div>
                        <div id="phone">
                           <apex:inputField style="width:120px;" rendered="{!qPreview.renderPhone}" value="{!qPreview.sq.Phone__c}"/>  
                        </div>
                        <!-- IN ORDER TO ADD A QUESTION TYPE YOU MUST CHANG THE JAVASCRIPT BELOW AS WELL -->
                    </apex:pageBlock>
                </div>  <!-- qPreview.id -->
<apex:variable value="{!cnt+1}" var="cnt" />
</apex:repeat>
            </div> <!-- qList -->
        </apex:pageBlock>
<apex:outputPanel rendered="{!thankYouRendered == false}">
    <apex:outputPanel rendered="{!isInternal}" >
        {!$Label.LABS_SF_Answer_as}: 
        <apex:selectRadio value="{!anonymousAnswer}">
            <apex:selectOptions value="{!anonymousOrUser}" />
            <apex:actionSupport event="onchange" rerender="hiddenAnonymousAnswer"/>
        </apex:selectRadio>
        <apex:inputHidden value="{!anonymousAnswer}" id="hiddenAnonymousAnswer"/>
        <BR />
    </apex:outputPanel>
        <apex:commandButton action="{!submitResults}" value="{!$Label.LABS_SF_SubmitSurvey}" rerender="theForm" />
</apex:outputPanel>
<apex:outputPanel rendered="{!thankYouRendered == true}">
        <apex:outputText value="{!surveyThankYouText}"  escape="false"  />
</apex:outputPanel>
    </apex:form>
</div>
</body>
</html>
</apex:page>