VolunteersJobListingFSGDM.page

<apex:page controller="GW_Volunteers.VOL_CTRL_VolunteersJobListingFS" language="{!strLanguage}" showheader="false" sidebar="false" standardStylesheets="false" cache="false">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script>

<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/ui-lightness/jquery-ui.css" /> 
<apex:stylesheet value="{!strURLtoCSSFile}" /> 

<div class="header">

<script type="text/javascript">
    var j$ = jQuery.noConflict();

    j$(function() {
        j$("#dlgSignUp").dialog({modal: true, autoOpen: false, draggable: true, width: 600, resizeable: true });
        j$("#dlgThankYou").dialog({modal: true, autoOpen: false, draggable: true, width: 500, resizeable: true });

        // if there are errors, display the signup dialog.
        // we detect this by seeing if Salesforce inserted the error style on any item.        
        if (j$(".error").size() > 0 || '{!JSENCODE(strSaveResult)}' != '') {
            j$('#dlgSignUp').dialog("option", "position", [(document.documentElement.offsetWidth /2)-300, 20] );
            j$('#dlgSignUp').dialog('open');
        } else if ('{!JSENCODE(volunteerHoursIdSignUp)}' != '') { // display thank you!
            j$('#dlgThankYou').dialog("option", "position", [(document.documentElement.offsetWidth /2)-250, 20] );          
            j$('#dlgThankYou').dialog('open');     
        } 
         
    });
    
    function OpenSignUpDlg(x, y, JobId, ShiftId, JobName, ShiftName) {
        j$('input[name$=txtJobId]').val(JobId);                         
        j$('input[name$=txtShiftId]').val(ShiftId);                         
        j$('span[id$="txtJobDisplayName"]').text(JobName); 
        j$('span[id$="txtShiftDisplayName"]').text(ShiftName);         
        j$('#dlgSignUp').dialog("option", "position", [(document.documentElement.offsetWidth /2)-300, 20] );          
        j$('#dlgSignUp').dialog('open'); 
        return false;
    };
    
    function MyDateFormat(dt, strDateFormat) {
        var strDt = strDateFormat;
        strDt = strDt.replace('EEEE', '');  // server formatting supports this.  backward compat doesn't have to support it.
        strDt = strDt.replace('MM', ((dt.getMonth() < 9) ? ('0' + (dt.getMonth() + 1)) : (dt.getMonth() + 1)));
        strDt = strDt.replace('M', (dt.getMonth() + 1));
        strDt = strDt.replace('dd', ((dt.getDate() < 10) ? ('0' + dt.getDate()) : dt.getDate()));
        strDt = strDt.replace('d', (dt.getDate()));
        strDt = strDt.replace('yyyy', (dt.getFullYear()));
        strDt = strDt.replace('yy', (dt.getFullYear().toString().substring(2,4)));
        return strDt;
    }
    
    function MyTimeFormat(dt, strTimeFormat) {
        var strTm = strTimeFormat;
        var is12hrFormat = strTimeFormat.indexOf('h') >= 0;
        var includeAMPM = strTimeFormat.indexOf('tt') >= 0;
        var intHours = dt.getHours();
        var intMinutes = dt.getMinutes();
        var strAM = (intHours >= 12) ? 'pm' : 'am';
        if (!includeAMPM) strAM = '';
        if (intHours > 12 && is12hrFormat) intHours = intHours - 12;   
        if (is12hrFormat && intHours == 0) intHours = 12;   
        strTm = strTm.replace('hh', intHours < 10 ? ('0' + intHours) : intHours);
        strTm = strTm.replace('h', intHours);
        strTm = strTm.replace('HH', intHours < 10 ? ('0' + intHours) : intHours);
        strTm = strTm.replace('H', intHours);
        strTm = strTm.replace('mm', (intMinutes == 0) ? '00' : (intMinutes < 10 ? ('0' + intMinutes) : intMinutes));
        strTm = strTm.replace('m', (intMinutes == 0) ? '00' : intMinutes);
        strTm = strTm.replace('tt', strAM);     
        return strTm;   
    }

    // Starting in version 3.0, date time formatting is done in Apex on the server, but we still use this
    // for backward compatibility, if the System Note field hasn't been made visible on the Site's Guest User Profile,
    // which is the field we temporarily store the server datetime formatted string to use.
    function JobShiftDateTimeString(dt, duration) {
        var dtStart = new Date(dt);        

        // strDateFormat is a page parameter (set by the controller) that allows some simple date formatting.
        var strStartDate = MyDateFormat(dtStart, '{!JSENCODE(strDateFormat)}');
        
        return strStartDate + ' ' + JobTimeSpanFormat(dt, duration);
    }

    function JobFormatDate(dt) {
        var dtStart = new Date(dt);        

        return j$.datepicker.formatDate("DD, MM d, yy", dtStart);
    }

    function JobTimeSpanFormat(dt, duration) {
        var dtStart = new Date(dt);        

        // strDateFormat is a page parameter (set by the controller) that allows some simple date formatting.
        var strStartDate = MyDateFormat(dtStart, '{!JSENCODE(strDateFormat)}');
                
        // strTimeFormat is a page parameter (set by the controller) that allows some simple time formatting.
        var strStartTime = MyTimeFormat(dtStart, '{!JSENCODE(strTimeFormat)}');
        
        var dtEnd = new Date(dt);
        dtEnd.setMinutes(dtEnd.getMinutes() + (duration * 60));
        var strEndTime = MyTimeFormat(dtEnd, '{!JSENCODE(strTimeFormat)}');

        return strStartTime + ' - ' + strEndTime
    }
      
</script>

<style>
*{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #232426;
    font-size: 14px;
    line-height: 1.5;
}

h2.signup {
    text-align: center;
    color: #3399cc;
    border-bottom: solid #3399cc 2px;
}

h4.signup {
    margin: 0;
    line-height: 1.3:
}

.signup-btn {
    border: solid #3399cc 1px;
    color: #3399cc;
    background: white;
    font-weight: bold;
    padding: .5rem 1rem;
    display: inline-block;
}

.signup-slot {
    margin-bottom: 1rem;
}

.signup-duration {
    padding-bottom: .5rem;
}

.bullet {
    padding: 0 .4rem;
}

.signup-scroll-down {
    color: #999;
    font-size: 15.5px;
}

.ui-dialog {
    background: white;
}

.ui-dialog-titlebar {
    background: #3399cc;
    border-color: #3399cc;
}

.ui-dialog-title {
    color: white;
}

.dialog p{
    text-align:center;
    margin:0 20% 14px;
}

.dialog a:link, .dialog a:visited:link {
    -webkit-tap-highlight-color: rgba(0,0,0,.3);
}
.dialog a, .dialog a:visited {
    color: #39c;
}
.dialog a:focus, .dialog a:hover, .dialog a:visited:focus, .dialog a:visited:hover {
    color: #2b81ab;
}
h2.dialog{
    font-size: 30px;
    color: #232426;
    font-weight: 700;
    text-transform: lowercase;
    text-align: center;
    margin: .6em auto 0;
}

.dialog-timeframe {
    text-align: center;
}

.dialog h4{
    font-size: 18px;
    color: #232426;
    font-weight: 700;
    text-align: center;
}

.dialog table{
    width:100%;
}

.jobContainer table {
    width: 100%;
}

.dialog .cssLabelsColumn{
    text-align:right;
    width: 40%;
}

.dialog .cssInputFields {
    width: 80%;
}

.dialog .crew-leader-description {
    color: gray;
}

.dialog label{
  font-weight:700;
}

.required{
  color:#EE2724;
}

.dialog input{
  padding:7px;
  margin:3px 0;
  background: #FFFFFF;
  border: 1px solid #C5C5C5;
  border-radius: 5px;
}
.help{
  color: #8A8A8A;
}

.dialog .submit{
  text-align: center;
}
</style>
<div id="signup-list">
    <apex:outputPanel rendered="{!fCalendar}" layout="block" style="text-align:right">
        <apex:outputLink value="{!$Site.CurrentSiteUrl + IF(fPersonalSite, 'GW_Volunteers__PersonalSiteJobCalendar', 'GW_Volunteers__JobCalendar') + '?' + strParams}" id="linkCal1" >{!$Label.gw_volunteers__labelreturntocalendar}</apex:outputLink>
    </apex:outputPanel>

    <apex:outputPanel rendered="{!$CurrentPage.parameters.campaignId == '70161000000QC7I'}">
        <!-- Add a link to scroll to the bottom of the list where specific org signups live -->
        <p class="signup-scroll-down">Volunteering with your organization? <a href="javascript:window.scrollTo(0,document.body.scrollHeight);">Scroll down to the bottom.</a></p>
    </apex:outputPanel>

    <!-- List of available jobs to sign up for -->
    <apex:repeat value="{!listVolunteerJobs}" var="job" id="rptJobs" >
        <apex:variable var="containerClass" value="{!IF(job.GW_Volunteers__External_Signup_Url__c != null, 'externalJob', IF(jobAllShiftsInThePast, 'pastEvent', ''))}" />
        <div id="jobContainer" class="{!containerClass} jobContainer">
        
        <apex:outputPanel rendered="{!ShowJobName}" >
            <apex:outputPanel >
                <h2 class="signup">{!job.Name}</h2>
            </apex:outputPanel>
        </apex:outputPanel>

        <apex:outputPanel rendered="{!ShowSkills && job.GW_Volunteers__Skills_Needed__c <> null}" >
            <p class="cssJobSkills" >{!$ObjectType.Contact.Fields.GW_Volunteers__Volunteer_Skills__c.Label}:&nbsp;&nbsp;
            <apex:outputField value="{!job.GW_Volunteers__Skills_Needed__c}" />
            </p>  
        </apex:outputPanel>

        <apex:outputPanel rendered="{!ShowLocationAddress && job.GW_Volunteers__Location_Street__c <> null}" >
            <p class="cssJobLocationAddress">
            <apex:outputField value="{!job.GW_Volunteers__Location_Street__c}" /><br/>
            <apex:outputField value="{!job.GW_Volunteers__Location_City__c}" />,&nbsp;
            <apex:outputField value="{!job.GW_Volunteers__Location__c}" />&nbsp;&nbsp;
            <apex:outputField value="{!job.GW_Volunteers__Location_Zip_Postal_Code__c}" />
            <apex:outputPanel rendered="{!ShowLocationMap && strGoogleMapAPIKey <> null}">
                <p class="cssJobLocationMap">
                <iframe class="cssGoogleMapIFrame" 
                    src="https://www.google.com/maps/embed/v1/place?q={!job.GW_Volunteers__Location_Street__c}+{!job.GW_Volunteers__Location_City__c}+{!job.GW_Volunteers__Location__c}+{!job.GW_Volunteers__Location_Zip_Postal_Code__c}&key={!strGoogleMapAPIKey}">
                </iframe>
                </p>
            </apex:outputPanel>
            </p>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!ShowLocationInfo && job.GW_Volunteers__Location_Information__c <> null}">
            <p>
            <apex:outputField value="{!job.GW_Volunteers__Location_Information__c}" />
            </p>
        </apex:outputPanel>
        
        <apex:outputPanel id="panelJobOnly" rendered="{!(job.GW_Volunteers__Number_of_Shifts__c == 0 || ShowShifts == false) && job.GW_Volunteers__External_Signup_Url__c == null}" >
            <table style="width: 100%;">
                <tr>
                    <td style="padding-left: 35px;">
                        <br/>
                        <a href="SignUp" style="text-decoration: none; color: #39c; width: 104px; padding: 19px 25px; border: 2px solid #39c; background-color: transparent; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;" 
                            onclick="OpenSignUpDlg(event.clientX, event.clientY, '{!job.Id}', '', '{!JSENCODE(job.Name)}', '');
                            return false;"
                            onmouseover="this.style.backgroundColor='#39c';this.style.color='#FFF';return true;"
                            onmouseout="this.style.backgroundColor='transparent';this.style.color='#39C';return true;">
                            {!$Label.gw_volunteers__labelbuttonsignup}
                        </a>
                    </td>
                </tr>
            </table>
        </apex:outputPanel>
        
        <apex:outputPanel id="panelExternalJob" rendered="{!job.GW_Volunteers__External_Signup_Url__c != null && NOT(jobAllShiftsInThePast)}" >
            <apex:outputLink target="_blank" styleClass="externalJobLink" value="{!job.GW_Volunteers__External_Signup_Url__c}" >Sign Up (external site)</apex:outputLink>
            <br/><br/>
        </apex:outputPanel>

        <apex:outputPanel id="panelEventInThePast" rendered="{!jobAllShiftsInThePast}" >
            <!-- This used to be a reference to labelEventInThePast, but it's protected so in order to use custom code I've hard-coded this. -->
            <apex:outputText value="This job has no upcoming shifts" /> 
            &nbsp;<apex:outputText rendered="{!job.GW_Volunteers__First_Shift__c != null}" value="First Shift" />
            <apex:outputPanel rendered="{!job.GW_Volunteers__First_Shift__c != null}" id="txtFirstShiftDate">
                <script>
                    var dt = new Date('{!job.GW_Volunteers__First_Shift__c}');
                    var strFirstShift = MyDateFormat(dt, '{!JSENCODE(strDateFormat)}');
                    document.write(strFirstShift);
                </script>
            </apex:outputPanel>
        </apex:outputPanel>
        
        <apex:dataTable value="{!job.GW_Volunteers__Volunteer_Job_Slots__r}" var="shift" id="rptShifts" columnClasses="cssJobShiftSignup" columnsWidth="100%" rendered="{!ShowShifts}" cellpadding="10px" >
            <apex:column rendered="{!NULLVALUE(shift.GW_Volunteers__Number_of_Volunteers_Still_Needed__c, 0) > 0}" style="text-align:center;" html-data-volunteers-needed="{!shift.GW_Volunteers__Number_of_Volunteers_Still_Needed__c}">
                <apex:outputPanel rendered="{!shift.GW_Volunteers__Number_of_Volunteers_Still_Needed__c != 0 && DATEVALUE(shift.GW_Volunteers__Start_Date_Time__c) >= TODAY() && job.GW_Volunteers__External_Signup_Url__c == null}" >
                    <div class="signup-slot">
                    <h4 class="signup">
                    <script>
                        var formattedDate = JobFormatDate('{!shift.GW_Volunteers__Start_Date_Time__c}');
                        document.write(formattedDate);
                    </script>
                    </h4>
                    <apex:outputPanel rendered="{!shift.GW_Volunteers__Description__c <> ''}">
                    <div class="signup-slot-description">
                    {!shift.GW_Volunteers__Description__c}
                    </div>
                    </apex:outputPanel>
                    <div class="signup-duration">
                    <script>
                        var formattedDate = JobTimeSpanFormat('{!shift.GW_Volunteers__Start_Date_Time__c}', '{!shift.GW_Volunteers__Duration__c}');
                        document.write(formattedDate);
                    </script><span class="bullet">•</span><apex:outputText value="{!NULLVALUE(shift.GW_Volunteers__Number_of_Volunteers_Still_Needed__c, 0)}" /> more volunteers still needed!
                    </div>
                    <a href="SignUp" class="signup-btn" onclick="
                        var x = '{!shift.GW_Volunteers__System_Note__c}';   
                        if (x == '') x = JobShiftDateTimeString('{!shift.GW_Volunteers__Start_Date_Time__c}', '{!shift.GW_Volunteers__Duration__c}');
                        OpenSignUpDlg(event.clientX, event.clientY, '{!job.Id}', '{!shift.Id}', '{!JSENCODE(job.Name)}', x); 
                        return false;"
                        onmouseover="this.style.backgroundColor='#39c';this.style.color='#FFF';return true;"
                        onmouseout="this.style.backgroundColor='transparent';this.style.color='#39C';return true;"
                        >{!LOWER($Label.GW_Volunteers__labelLinkSignUp)}</a>
                    </div>
                </apex:outputPanel>
            </apex:column>
        </apex:dataTable>
        </div>
    </apex:repeat>
    
    <!-- Message displayed if no jobs -->
    <apex:outputText value="{!$Label.gw_volunteers__labelmessagenojobs}" rendered="{!NOT(VolunteersHasJobs)}" />
    
    <!-- Calendar link -->
    <apex:outputPanel rendered="{!fCalendar}" layout="block" style="text-align:right">
        <apex:outputLink value="{!$Site.CurrentSiteUrl + IF(fPersonalSite, 'GW_Volunteers__PersonalSiteJobCalendar', 'GW_Volunteers__JobCalendar') + '?' + strParams}" id="linkCal2" >{!$Label.gw_volunteers__labelreturntocalendar}</apex:outputLink>     
    </apex:outputPanel>
</div> <!-- end of primary content div -->

<!-- Signup dialog (displayed if a Sign Up link above is clicked) -->
<div id="dlgSignUp" class="dialog" title="{!$Label.gw_volunteers__labeltitlejobsignup}" style="font-size: 1.5em;">
    <apex:form styleClass="cssForm" id="frmSignUp" > 
        <h2 class="dialog-timeframe"><span>Sign up for </span><apex:outputText value=" {!strShiftDisplayName}" id="txtShiftDisplayName" /></h2>
        <p><a href="#" onclick="j$('#dlgSignUp').dialog('close');">Choose a different date (close).</a></p>
        <table align="center"  columns="2">
            <tr>
            <td class="cssLabelsColumn">
                <label for="txtFirstName">First Name <span class="required">*</span></label>
            </td>
            <td class="cssInputFieldsColumn" style="padding-left: 10px;">
                <apex:inputField value="{!contact.FirstName}" id="txtFirstName" required="true" styleClass="cssInputFields" />
            </td>
            </tr>
            <tr>
            <td class="cssLabelsColumn">
                <label for="txtLastName">Last Name <span class="required">*</span></label>
            </td>
            <td class="cssInputFieldsColumn" style="padding-left: 10px;">
                <apex:inputField value="{!contact.LastName}" id="txtLastName" required="true" styleClass="cssInputFields" />
            </td>
            </tr>
            <tr>
            <td class="cssLabelsColumn">
                <label for="txtEmail">Email <span class="required">*</span></label>
            </td>
            <td class="cssInputFieldsColumn" style="padding-left: 10px;">
                <apex:inputField value="{!contact.Email}" id="txtEmail" required="true" styleClass="cssInputFields" />
            </td>
            </tr>
            <apex:repeat value="{!$ObjectType.Contact.FieldSets.GW_Volunteers__VolunteersJobListingFS}" var="f" >
                <apex:outputPanel rendered="{!TRIM(f.Label) == 'Emergency Contact'}">
                <tr>
                    <td colspan="2">
                    <h4>Emergency Contact</h4>
                    </td>
                </tr>
                </apex:outputPanel>
                <apex:outputPanel rendered="{!contains(f.Label, 'I agree to')}">
                <tr>
                    <td colspan="2">
                        <h4>Waiver of Liability</h4>
                    </td>
                </tr>
                </apex:outputPanel>
                <apex:outputPanel rendered="{!contains(f.Label, 'I am over 18')}">
                <tr>
                    <td colspan="2">
                        <h4>Under 18?</h4>
                        <p>16 &amp; 17 year olds can volunteer with an adult (requires an additional sign up)
                        and a printed waiver (see below) signed by your parent or guardian.
                        </p>
                    </td>
                </tr>
                </apex:outputPanel>
                <apex:outputPanel rendered="{!contains(f.Label, 'Crew Leader')}">
                <tr>
                    <td colspan="2">
                        <h4>Crew Leader</h4>
                    </td>
                </tr>
                </apex:outputPanel>
                          
                <tr>
                    <td class="cssLabelsColumn">
                        <apex:outputLabel value="{!f.Label}" />
                        <apex:outputPanel rendered="{!OR(f.DBRequired, f.Required)}">
                            <span class="required">*</span>
                        </apex:outputPanel>
                    </td>
                    <td class="cssInputFieldsColumn" style="padding-left: 10px;">
                        <apex:inputField value="{!Contact[f]}" required="{!IF(OR(f.DBRequired, f.Required), 'true', 'false')}"
                        styleClass="{!IF(f.Type == 'Long Text Area', 'cssInputFields cssTextArea', 'cssInputFields')}" />
                        
                        <apex:outputPanel rendered="{!contains(f.Label, 'Crew Leader')}">
                            <div class="crew-leader-description">
                                Crew Leaders receive training to guide groups of volunteers.  No previous construction skills needed.
                            </div>
                        </apex:outputPanel>
                    </td>
                </tr>

                <apex:outputPanel rendered="{!contains(f.Label, 'I agree to')}">
                <tr>
                    <td colspan="2">
                        <h4>Waivers</h4>
                        <p>
                            <apex:outputLink styleClass="cssDisclaimerLink" value="{!$Label.Volunteer_Disclaimer_General}" id="generalWaiver" target="_blank">
                                Download and read the waiver.
                            </apex:outputLink>
                            By clicking “Sign Up” you agree to this disclaimer.
                        </p>
                        <p>
                            <span>Under 18? </span><apex:outputLink styleClass="cssDisclaimerLink" value="{!$Label.Volunteer_Disclaimer_Minor}" id="youthWaiver" target="_blank">Download and print the youth waiver</apex:outputLink>
                            and have your parent or guardian sign it.
                        </p>
                    </td>
                </tr>
                </apex:outputPanel>  
            </apex:repeat>
        </table>
        
        <div class="submit">
            <a href="#" id="btnSubmit" onclick="
                    j$('input[name$=btnSubmit]').attr('disabled', 'disabled');
                    j$('input[name$=txtContactIdSignUp]').val(''); 
                    j$('input[name$=txtVHIdSignUp]').val('');
                    VolunteerShiftSignUp();
                    return false;" 
                    onmouseover="this.style.backgroundColor='#39c';this.style.color='#FFF !important';return true;"
                        onmouseout="this.style.backgroundColor='transparent';this.style.color='#39C !important';return true;"
                immediate="false" status="statusSignUp" class="signup-btn">{!$Label.gw_volunteers__labelbuttonsignup}</a>
        </div>
        
        <apex:actionFunction name="VolunteerShiftSignUp" action="{!VolunteerShiftSignUp}" status="statusSignUp" />         
        <apex:actionFunction name="ClearVolunteerHoursIdSignUp" action="{!ClearVolunteerHoursIdSignUp}" />      
        <apex:inputHidden value="{!jobIdSignUp}" id="txtJobId" />               
        <apex:inputHidden value="{!shiftIdSignUp}" id="txtShiftId" /><br/>  
        <apex:inputHidden value="{!contactIdSignUp}" id="txtContactIdSignUp" />
        <apex:inputHidden value="{!volunteerHoursIdSignUp}" id="txtVHIdSignUp" />
    </apex:form>
</div> <!-- end of the signup dialog -->

<!-- this div contains the thank you dialog we'll use jQuery to display -->
<div id="dlgThankYou" title="{!$Label.GW_Volunteers__labelTitleJobSignup}">
            <p class="cssThankYou">{!$Label.GW_Volunteers__labelVolunteerSignupThankYou}</p>
            <a href="#" class="signup-btn" onclick="j$('#dlgThankYou').dialog('close'); return false;">{!$Label.GW_Volunteers__labelButtonClose}</a>
</div> <!-- end of the thank you dialog -->
</div>
</apex:page>