<apex:page controller="ApplicationSubmissionController">
    
    <apex:stylesheet value="{!URLFOR($Resource.customerPortalBranding)}"/>

    <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'name-spaced-bootstrap.css')}" />

    <style>
        
        /*
        .rich-tabhdr-cell-active > table{
            width: 100%;
        }  
        
        .ui-tabs .ui-tabs-nav li {
            border: none;
            width:19.5%;
        }
        .ui-tabs .ui-tabs-nav li a {
            display:block;
            width:87%;
        }
        .ui-tabs .ui-tabs-nav a { 
            vertical-align: center;
            text-align: center;
           background-color: #0074c9;
        }

        .ui-tabs .ui-tabs-nav a:hover{
            opacity: .7!important;
            transition: all .4s ease-in-out!important;
        }
        .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { 
            background-color: #0074c9;
            cursor: pointer !important;
        }
        .ui-tabs .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0px !important;
        }
        /*
        #tabs .ui-widget-header {
         background-color: #0074c9;
         background-image:none;
        }

        #tabs .ui-state-default a { 
            color: #fff !important; 
        }
        #tabs .ui-state-active a { 
            color: white !important; 
        }
        #tabs .ui-state-hover a, .ui-state-focus a { 
            color: white !important;
        }
        */
        .bPageBlock .detailList .dataCol {
           width: 100% !important;
        }
        input.btn.customButton{
            font-family: Arial,Helvetica,sans-serif !important;
            font-size: .9em !important;
            width: 70px;
            position: relative;
        }
        input.btn.customButton.buttonPrevious{
            left: 5px;
        }
        input.btn.customButton.lastButtonPrevious{
            left: 5px;
        }
        input.btn.customButton.saveButton{
            left: 328px;
        }
        input.btn.customButton.saveButton.first{
            left: 400px;
        }
        input.btn.customButton.buttonNext{
            left: 648px;
        }
        input.btn.customButton.buttonNext.first{
            left: 720px;
        }
        .frozenLabel {
            display: block;
            color: #a94442;
            font-weight: bold!important;
        }
        #messageContainer .pbBody > div {
            font-size: 14px;
            font-weight: bold;
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
        
        .ui-tabs .ui-tabs-panel {
            padding: 0em 0em!important;
        
        }

        .ui-widget-content {
            border: 0px solid #aaaaaa!important;
        }

        .ui-widget-header {
            border: 0px solid #aaaaaa!important;
            background: none!important;
        }

        .buttonDiv {
            padding-top: 10px!important;
        }

        .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
            background: #0074c9!important;

        }

        .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
            color: #fff!important;
        }
        
        body a {
            color: #4d4d4d !important;
            font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif!important;
            font-weight: bold!important;
            text-decoration: none!important;
        }

        .tw-bs .nav>li>a:hover, .tw-bs .nav>li>a:focus {
            background-color: transparent!important;
        }

    </style>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"/>
    <script type="text/javascript" src="https://cdn.rawgit.com/jmont75/spin.js/master/spin.js"></script>

    <script>
        
        $(function() {
            $( "#tabs" ).tabs({
                beforeActivate: function( event, ui ) {
                    if ($('label[style *= "color: red"]:visible').size() != 0){
                        event.preventDefault();
                    }
                }
            });
          });
        $(function() {
            $('.btn.customButton.buttonNext').click(function( event ) {
                event.preventDefault();
            });
            $('.btn.customButton.buttonPrevious').click(function( event ) {
                event.preventDefault();
            });
            $('.btn.customButton.lastButtonPrevious').click(function( event ) {
                event.preventDefault();
            });
            $('.btn.customButton.saveButton').click(function( event ) {
                event.preventDefault();
            });
        });
        window.onload = init;

        function init() {
            var tables = document.getElementsByClassName('makeRows');
            for (var i = 0; i < tables.length; i++) {
                table = tables[i];
                makeRows(table, 2);
            }
            tables = document.getElementsByClassName('subjectChecks');
            for (var i = 0; i < tables.length; i++) {
                table = tables[i];
                makeRows(table, 3);
            } 
            tables = document.getElementsByClassName('scholarshipCheck');
            for (var i = 0; i < tables.length; i++) {
                table = tables[i];
                makeRows(table, 3);
            } 
            if ('{!actualApplication.AppStatus__c}' != 'Application In Progress'){
                $('#tabs :input').prop('disabled', true);
            }
        }

        function makeRows(table, columnCount) {
            var cells = table.rows[0].cells;
            var cellCount = cells.length;
            var rowCount = Math.ceil(cellCount / columnCount);

            for (var i = 0; i < rowCount; i++) {
                table.insertRow(0);
            }
            for (var i = 0; i < cellCount; i++) {
                row = Math.floor(i / columnCount);
                table.rows[row].appendChild(cells[i].cloneNode(true));
            }
            table.deleteRow(rowCount);
        } 

        function hideElement(selector, myValue, elementClass, inputFieldId) {
            if (selector.value == myValue){
                document.getElementsByClassName(elementClass)[0].style.display = '';
            } else {
                document.getElementsByClassName(elementClass)[0].style.display = 'none';
                $('*[id$="'+inputFieldId+'"]')[0].value = '';
            }
        }

        function showOther(selector, value, elementClass, inputFieldId) {
            if (selector.checked && (selector.value == value)){
                document.getElementsByClassName(elementClass)[0].style.display = '';
            } else if (!selector.checked && (selector.value == value)){
                document.getElementsByClassName(elementClass)[0].style.display = 'none';
                $('input[id$="'+inputFieldId+'"]')[0].value = '';
            }
        }
        function nextTab(){
            if ($('label[style *= "color: red"]:visible').size() == 0){
                var tabIndex = $( '#tabs' ).tabs('option', 'active');
                $( '#tabs' ).tabs({ active: (tabIndex+1) });
            }
        }
        function previousTab(){
            if ($('label[style *= "color: red"]:visible').size() == 0){
                var tabIndex = $( '#tabs' ).tabs('option', 'active');
                $( '#tabs' ).tabs({ active: (tabIndex-1) });
            }
        }
        $(document).ready(function() {
            var numberFields = document.getElementsByClassName('numberInput');
            for (var i = 0; i < numberFields.length; i++) {
                numberFields[i].addEventListener('keydown',function (e) {
                    // Allow: backspace, delete, tab, escape, enter and .
                    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                         // Allow: Ctrl+A
                        (e.keyCode == 65 && e.ctrlKey === true) ||
                         // Allow: Ctrl+C
                        (e.keyCode == 67 && e.ctrlKey === true) ||
                         // Allow: Ctrl+X
                        (e.keyCode == 88 && e.ctrlKey === true) ||
                         // Allow: home, end, left, right
                        (e.keyCode >= 35 && e.keyCode <= 39)) {
                             // let it happen, don't do anything
                             return;
                    }
                    // Ensure that it is a number and stop the keypress
                    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                        e.preventDefault();
                    }
                });
            }
        });
        pageOneSaved = true;
        pageTwoInfoSaved = true;
        pageTwoResumeSaved = true;
        pageTwoTranscriptSaved = true;
        pageThreeSaved = true;
        pageFourSaved = true;
        pageFiveSaved = true;
        $(window).on('beforeunload', function(){
            if(!pageOneSaved || !pageTwoInfoSaved || !pageTwoResumeSaved || !pageTwoTranscriptSaved || !pageThreeSaved || !pageFourSaved || !pageFiveSaved){
                return 'You have unsaved changes. Are you sure you want to leave without saving?';
            }
        });

        var spinner = null;
        var spinner_div = 0;

        function showSpinner() {
            var opts = {
              lines: 9, // The number of lines to draw
              length: 9, // The length of each line
              width: 6, // The line thickness
              radius: 11, // The radius of the inner circle
              corners: 1, // Corner roundness (0..1)
              rotate: 0, // The rotation offset
              direction: 1, // 1: clockwise, -1: counterclockwise
              color: '#000', // #rgb or #rrggbb
              speed: 0.6, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e15, // The z-index (defaults to 2000000000)
              top: '50px', // Top position relative to parent in px
              left: '480px' // Left position relative to parent in px
            };
            spinner_div = $('#spinner').get(0);
            spinner_div.style.display = '';
            spinner = new Spinner(opts).spin(spinner_div);
            $('#tabs')[0].style.display = 'none';
        }

        function hideSpinner() {
            spinner.stop(spinner_div);
            spinner_div.style.display = 'none';
            $('#tabs')[0].style.display = '';
        }

        function checkEmail(emailField){
            if (!emailField.checkValidity() && emailField.nextSibling == null){
                emailField.style.borderColor = 'red';
                emailField.style.borderWidth = '3px';
                $('<label style="color: red; font-weight: bold; display: block;">That email is invalid</label>').insertAfter(emailField)
            } else if (emailField.checkValidity() && emailField.nextSibling != null){
                    emailField.style.borderColor = '';
                    emailField.style.borderWidth = '';
                    emailField.nextSibling.remove()
            }
        }

        function checkMinLength(field, expectedLength){
            if (field.value.length < expectedLength && field.nextSibling == null){
                field.style.borderColor = 'red';
                field.style.borderWidth = '3px';
                $('<label style="color: red; font-weight: bold; display: block;">The length can not be less '+expectedLength+' characters</label>').insertAfter(field)
            } else if (field.value.length >= expectedLength && field.nextSibling != null){
                    field.style.borderColor = '';
                    field.style.borderWidth = '';
                    field.nextSibling.remove()
            }
        }

    </script>

        <div id="messageContainer">
            <apex:pageBlock rendered="{!AND(actualApplication.Frozen__c , actualApplication.AppStatus__c == 'Application In Progress', backdoorApplicationOpen)}">
        
                <apex:pageBlockSection columns="1" collapsible="false">
                    <apex:outputLabel styleClass="frozenLabel" value="{!$Label.TFA_ApplicationStatusFrozen}" escape="false"/>
                </apex:pageBlockSection>
        
            </apex:pageBlock>
        </div>
        
        <apex:form rendered="{!OR(AND(NOT(actualApplication.Frozen__c), NOT(ISBLANK(actualApplication.Id)), (NOT(isRegularDeadlineReach) || backdoorApplicationOpen)), actualApplication.Frozen__c && actualApplication.AppStatus__c == 'Offer Accepted', actualApplication.Frozen__c && actualApplication.AppStatus__c == 'Offer Pending')}" html-novalidate="novalidate">
            <div id='spinner' class='spinner' style="background-color:#D8D9DB; background:none !important; height: 100px; display: none"></div>

            <div id="tabs">
                <div class="tw-bs">
                    <ul class="nav nav-pills">
                        <li role="presentation"><a href="#tabs-1">Profile</a></li>
                        <li role="presentation"><a href="#tabs-2">Experience</a></li>
                        <li role="presentation"><a href="#tabs-3">Short Answer</a></li>
                        <li role="presentation"><a href="#tabs-4">Preferences</a></li>
                        <li role="presentation"><a href="#tabs-5">Submission</a></li>
                    </ul>
                </div>

                <apex:pageMessages />
                <div class="message infoM3" id="appSaved" role="alert" style="display: none;">
                    <table border="0" cellpadding="0" cellspacing="0" class="messageTable" style="padding:0px;margin:0px;">
                        <tbody>
                            <tr valign="top">
                                <td>
                                    <img alt="INFO" class="msgIcon" src="/s.gif" title="INFO"/>
                                </td>
                                <td class="messageCell">
                                    <div id="j_id0:j_id5:j_id7:j_id8:j_id9:0:j_id10:j_id11:j_id13" class="messageText">
                                        <span id="j_id0:j_id5:j_id7:j_id8:j_id9:0:j_id10:j_id11:j_id14">
                                            <h4></h4>
                                        </span>
                                        Application saved.
                                        <br/>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div id="tabs-1">
                    <c:ProfileSubmit actualContact="{!actualContact}" actualApplication="{!actualApplication}"/>
                </div>

                <div id="tabs-2">
                    <c:ExperienceSubmit actualApplication="{!actualApplication}" resumeFile="{!resumeFile}" transcriptFile="{!transcriptFile}" recommendation="{!recommendation}" confirmEmail="{!emailConfirmation}" breakthroughPreviousExperienceCheckbox="{!breakthroughPreviousExperienceCheckbox}" languagesCheckbox="{!languagesCheckbox}" rolesInOrganizationCheckbox="{!rolesInOrganizationCheckbox}" recommender="{!recommender}"/>
                </div>

                <div id="tabs-3">
                    <c:EssaysSubmit actualApplication="{!actualApplication}"/>
                </div>

                <div id="tabs-4">
                    <c:PreferencesSubmit actualApplication="{!actualApplication}" excitedToTeachNewCheckbox="{!excitedToTeachNewCheckbox}" couldTeachNewCheckbox="{!couldTeachNewCheckbox}" couldNotTeachNewCheckbox="{!couldNotTeachNewCheckbox}" departmentToChairCheckbox="{!departmentToChairCheckbox}"/>
                </div>

                <div id="tabs-5">
                    <c:SubmissionSubmit actualApplication="{!actualApplication}" affiliationsScholarshipsCheckbox="{!affiliationsScholarshipsCheckbox}" howDidYouHearAboutUsCheckbox="{!howDidYouHearAboutUsCheckbox}"/>
                </div>
                
                <apex:outputPanel styleClass="buttonDiv" style="padding-top: 0px; padding-bottom: 11px;" rendered="{!actualApplication.AppStatus__c == 'Application In Progress'}">
                    <apex:commandButton action="{!submitApplication}" value="Submit" styleClass="customButton" reRender="" onclick=""/>
                </apex:outputPanel>

            </div>
        </apex:form>

        <apex:form rendered="{!ISBLANK(actualApplication.Id) && (NOT(isRegularDeadlineReach) || (backdoorApplicationOpen && NOT(backdoorApplicationClosed)))}">
            <apex:pageBlock >
                    <apex:outputPanel styleClass="buttonDiv" >
                        <apex:commandButton action="{!newApplication}" onclick="this.disabled = true;" oncomplete="location.reload()" value="New Application" styleClass="customButton" style="width:116px" reRender=""/>
                    </apex:outputPanel>
            </apex:pageBlock>
        </apex:form>

</apex:page>