@section('page_title')
    OSAA - Coop Application
@stop

@section('page_sub_title')    
    Cooperative Sponsorship Application Form
@stop

@section('scripts')
    @parent

    <script src="{{ asset('/scripts/jquery.maskedinput.min.js') }}" type="text/javascript"></script>

    <style type="text/css">
    	h2 {
            color: #1C43A6 !important;
        }

        h2.line {
            border-bottom: 1px solid #1C43A6;
            padding-bottom: 0.25em;
            margin-bottom: 0.25em;
        }

        h3 {
            color: #990000 !important;
        }

        h4.line {
            border-bottom: 1px solid #cccccc;
            padding-bottom: 0.25em;
            margin-bottom: 1em;
        }

        .no-close .ui-dialog-titlebar-close {
            display: none;
        }

    	.success_bar {
    		position: fixed;
    		top: 600px;
    		left: 0;
    		width: 100%;
    		padding: 0.25em 0;
    		line-height: 1.5em;
    		background-color: rgba(176, 255, 190, 0.0);
    		border-bottom: 2px solid rgba(13, 88, 27, 0.50);
    		border-top: 2px solid rgba(13, 88, 27, 0.50);
    		z-index: 500;
    	}

    	.success_bar .message {
    		width: 1200px;
    		margin: 0 auto;
    		font-size: 14pt;
    		color: #151515;
    	}    	

    	.page_functions {
    		width: auto !important;
    	}  

        .odd {
            background-color: #dedede;
        }

        tr.total{
            background-color: #ffffff;
        }

        tr.total td {
            border-top: 2px solid #000000;
            font-weight: bold;
        }

        .required {
            color: #990000;
            font-weight: bold;
            font-size: 14pt;
            position: relative;
            top: 4px;
            margin-left: 5px;
        }

        table {
            border-collapse: collapse;            
            width: 100%;
        }

        table thead {
            background-color: #005fa9;
            color: #ffffff;
        }

        table thead th {
            padding: 4px 0;
            text-align: left;
        }       

        table tbody tr{
            height: 1.75em;
        }

        /* Help Dialog */
        .help_dialog {
            font-size: 10pt;
        }

        .help_dialog h1 {
            font-size: 14pt;
            color: #005fa9 !important;
            margin: 1em 0 1em 0;
        }

        .help_dialog h2 {
            font-size: 12pt;
            color: #1C43A6 !important;
            margin: 1em 0 0.5em 0;
        }

        .help_dialog h3 {
            font-size: 10pt;
            color: #000000 !important;
            margin: 0.75em 0 0em 0;
        }

        .help_dialog ul, ol {
            margin-left: 28px;
        }

        .help_dialog dl dt {
            float: left;
            width: 200px;
            text-align: right;
            margin-right: 20px;
            font-weight: bold;
            clear: both;
        }

        .ui-autocomplete {
            font-size: 9pt !important;
            max-height: 200px;
            overflow-y: auto;
        }        

        label, .label {            
            font-weight: bold;            
            float: left;
            width: 115px;
        }

        .ui-dialog label,
        .ui-dialog .label {
            width: auto;
            float: none;
        }

        .fourth .label {
            width: auto;
            margin-right: 8px;
        }
        
        /* Form Action Area */
        .action_area {
            padding: 1.5em 1em 0.5em 1em;
            background-color: #f2f2f2;
            border: 1px solid black;
            margin: -9px -10px 1em 0;
            position: relative;
            height: 2em;            
        }

        .action_area.sticky {
            position: fixed;
            top: 40px;  
            width: 1000px;
            z-index: 50 !important;
        }

        .action_area .title {
            position: absolute;
            font-size: 8pt;
            top: 0;
            left: 4px;
            color: #005fa9;
            width: 100%;
        }

        .action_area .title .title_right {
            position: absolute;
            top: 0;
            right: 10px;
        }

        .action_area .status_path {
            float: right;
        }

        .action_area .status_path .state,
        .help_dialog .status_path .state {
            display: inline-block;
            color: #999999;
        }

        .action_area .status_path img,
        .help_dialog .status_path img {
            position: relative;
            top: 2px;
        }

        .action_area .status_path .state.current,
        .help_dialog .status_path .state.current {
            font-weight: bold;
            color: #000000;
        }

        .action_area .status_path .state.complete,
        .help_dialog .status_path .state.complete {
            color: #77aa77;
        }

        .progress_alert {
            padding: 0.25em 0.5em;
            margin-bottom: 1em; 
            line-height: 32px; 
            font-size: 12pt; 
            font-weight: bold;
        }

        img.current_step {
            position: absolute;
            width: 16px;
            left: -35px;
        }
        
        @media print {
            * {
                display:none;
            }
        }  

    </style>

@stop

@section('jquery_init')	        
    
    if(!window.console)
    {
        window.console = { log: $.noop, group: $.noop, groupEnd: $.noop };            
    }

    // Make this script play well with IE8
    if (typeof String.prototype.trim !== 'function')
    {
        String.prototype.trim = function()
        {
            return this.replace(/^\s+|\s+$/g, ''); 
        }
    }

	// Success bar
	$('.success_bar').animate({ 'top' : 32, 'background-color' : 'rgba(176, 255, 190, 1.0)'}, 1600, 'easeOutQuad', function ()
	{		
		$(this).delay(6000).fadeOut(4000);	

		$(this).hover(function ()
		{
			$(this).stop(true).css('opacity', '1.0');
		},
		function ()
		{
			$(this).fadeOut(4000);
		})
	});

    
    // Reload indicator
    $('input[type="text"][data-reload], select[data-reload]')
        .css({'border-left-color' : '#005fa9',
              'border-left-width' : '2px'});


    


    /* 
     * Make the action area sticky
     */
    var window_object = $(window);
    var action_area = $('.action_area');
    var top = (action_area.offset().top) - 40;
    window_object.scroll(function()
    {
        action_area.toggleClass('sticky', window_object.scrollTop() > top);
    });


    /*
     * Action Area Buttons
     */
    $('.action_area a')
        .css({'font-size' : '9pt',
              'margin-right' : '1em'})
        .button()
        .each(function ()
        {
            var link = $(this);

            if (link.has('[data-icon]'))
            {
                var icon = link.attr('data-icon');
                link.button({'icons' : {'primary' : icon }});
            }

            if (link.has('[data-help]'))
            {
                var help = link.attr('data-help');
                link.tooltip({'content' : help, 'items' : 'a'});
            }
        });
    

    /*
     * Run check button
     */
    $('[data-action="check"]')
        .click(function(event)
        {
            event.preventDefault();

            var button = $(this);
            button.blur();

            $('<div><div>')
                .attr('data-check', 1)
                .addClass('ui-widget-overlay ui-front')
                .appendTo('body');
              
            $('<div><div>').appendTo('body')
                .attr('data-check', 1)
                .css('width', '225px')
                .css('height', '170px')
                .css('text-align', 'center')
                .css('padding', '0.5em')
                .position({my : "center center", at : "center center", of : window})
                .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front')
                .html('<br />Checking Form...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait while your form is checked, this may take a while to process...</div>');

            // Get a form check
            var jqxhr = $.ajax(
                {
                    type : 'GET',
                    url : '{{ url('/forms/coop-application/' . $info['form']->id . '/check') }}',
                    dataType : 'html'
                })
                .done(function (data)
                {                                                
                    $('[data-check]').remove();

                    var check = $.parseJSON(data);
                    //console.log(check);

                    showCheckResults(check);
                })
                .fail(function (jqXHR, status, error)
                {                                                   
                    var response = jqXHR.responseText;
                    var errorData = $.parseJSON(response);
                    //console.log(errorData);
                    alert("There was an error checking form's data.\n\n" + errorData.error.message + "\n\nThis page will be reloaded.");                    
                    location.reload();
                });
        });

    /* 
     * Submit button
     */    
    $('[data-action="submit"]')
        .click(function(event)
        {
            event.preventDefault();

            var button = $(this);
            button.blur();

            $('<div><div>')
                .attr('data-check', 1)
                .addClass('ui-widget-overlay ui-front')
                .appendTo('body');
              
            $('<div><div>').appendTo('body')
                .attr('data-check', 1)
                .css('width', '225px')
                .css('height', '170px')
                .css('text-align', 'center')
                .css('padding', '0.5em')
                .position({my : "center center", at : "center center", of : window})
                .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front')
                .html('<br />Checking Form...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait while your form is checked, this may take a while to process...</div>');

            // Get a form check
            var jqxhr = $.ajax(
                {
                    type : 'GET',
                    url : '{{ url('/forms/coop-application/' . $info['form']->id . '/check') }}',
                    dataType : 'html'
                })
                .done(function (data)
                {                                                
                    $('[data-check]').remove();

                    var check = $.parseJSON(data);
                    //console.log(check);

                    if (!check[0])
                    {
                        showCheckResults(check);
                        return;
                    }                    

                    // Passed, now confirm
                    $('<div></div>')
                        .appendTo('body')
                        .dialog(
                        {                       
                            modal : true,
                            draggable : true,
                            resizable : false,
                            height : 400,
                            width : 500,                    
                            title : 'Confirm Form Submission',
                            buttons: [
                                {
                                    text : "Submit",
                                    'class' : "float_left",
                                    icons : { primary : 'ui-icon-circle-arrow-e'},
                                    click : function()
                                            {                                                       
                                                // Submit the form
                                                $('<div><div>')
                                                    .attr('data-check', 1)
                                                    .addClass('ui-widget-overlay ui-front')
                                                    .appendTo('body');
                                                  
                                                $('<div><div>').appendTo('body')
                                                    .attr('data-check', 1)
                                                    .css('width', '225px')
                                                    .css('height', '170px')
                                                    .css('text-align', 'center')
                                                    .css('padding', '0.5em')
                                                    .position({my : "center center", at : "center center", of : window})
                                                    .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front')
                                                    .html('<br />Submitting Form...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Form check passed, now please wait while your form is submitted, this may take a while to process...</div>');

                                                // Submit the form
                                                window.location.href = "{{ url('/forms/coop-application/' . $info['form']->id . '/submit') }}";
                                            }
                                },                        
                                {
                                    text : "Cancel",
                                    'class' : "float_right",
                                    'data-autofocus' : "true",
                                    icons : { primary : 'ui-icon-cancel'},
                                    click : function()
                                            {
                                                // Close the dialog box
                                                $(this).dialog("close");                                                 
                                            }
                                }
                            ],
                            open : function ()
                                {  
                                    var dialog_object = $(this);                                    

                                    var html = '<div style="font-size: 10pt; margin: 1em 0;">';
                                    html += '<span class="ui-icon ui-icon-alert" style="display: inline-block; vertical-align: middle; margin-right: 4px;"></span>';
                                    @if (Helpers::strEqual($info['form']->status, 'WORK'))
                                        html += '<b>Are you sure you want to submit this report??</b>';
                                        html += '<br /><br />';
                                        html += '<div class="small gray">Your report has passed initial inspection for all of the required information.  Please note that once you submit this report, you will not be able to make any changes.<br /><br />A printable version will be generated once you submit this form.</div>';

                                        html += '<br />You will need to send to the OSAA office the following items:<br /><ol style="padding-left: 20px;">';
                                        html += '<li>The printed version of this ticket report form</li>';
                                        html += '<li>A check for the total ticket sales of $' + $('[name="gate_total"]').text() + '</li>';

                                        html += '</ol>';
                                    @else
                                        html += '<b>Are you sure you want to submit this report?</b>';
                                        html += '<br /><br />';
                                        html += '<div class="small gray">Your form passed initial inspection.  Please note that once you submit this form, you will not be able to make any additional edits.</div>';
                                    @endif                                    
                                    
                                    html += '</div>';

                                    dialog_object.html(html);
                                    
                                    $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                                    $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');   

                                    $('[data-autofocus="true"]').focus();                            
                                },
                            close : function ()
                                {
                                    var dialog_object = $(this);
                                    $(dialog_object).remove();
                                }                
                        });                    
                })
                .fail(function (jqXHR, status, error)
                {                                                   
                    var response = jqXHR.responseText;
                    var errorData = $.parseJSON(response);
                    //console.log(errorData);
                    alert("There was an error checking form's data.\n\n" + errorData.error.message + "\n\nThis page will be reloaded.");
                    location.reload();
                });
        });     


    /* showCheckResults
     *
     * Shows the results of the form check operation.
     */
    function showCheckResults(check)
    {
        var pass = check[0];

        if (pass)
        {
            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    draggable : true,
                    resizable : false,
                    height : 280,                    
                    width : 400,                    
                    modal : true,
                    title : 'Form Check: Pass',
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            var html = '<div style="font-size: 10pt;">';
                            html += '<div style="font-size: 14pt; line-height: 32px; font-weight: bold; color: #0d581b; margin: 0.5em 0 1em 0;">';
                            html += '<img src="{{ asset('images/icons/accept_32px.png') }}" alt="" title="" style="float: left; vertical-align: middle; margin-right: 10px;" />';
                            html += 'Your Form Passed Inspection';
                            html += '</div>';
                            html += 'All required information has been provided.  This coop application form is ready to be submitted.<br /><br />When you are ready, click the "Submit" button submit your form to the OSAA.<br /><br /><div style="text-align: center;"><a href="#" class="close_button">OK</a></div>';
                            html += '</div>';

                            dialog_object.html(html);                            

                            $('.close_button', dialog_object)
                                .button({'icons' : {'secondary' : 'ui-icon-check'}})
                                .css({'font-size' : '9pt'})
                                .focus()
                                .click(function(event)
                                {
                                    event.preventDefault();

                                    dialog_object.dialog('close');
                                });

                        },
                    close : function ()
                        {
                            var dialog_object = $(this);
                            $(dialog_object).remove();
                        }                
                });
        }
        else
        {
            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    draggable : true,
                    resizable : false,
                    height : 330,
                    width : 500,                    
                    modal : true,
                    title : 'Form Check: Fail',
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            var html = '<div style="font-size: 10pt;">';
                            html += '<div style="font-size: 14pt; line-height: 32px; font-weight: bold; color: #990000; margin: 0.5em 0 1em 0;">';
                            html += '<img src="{{ asset('images/icons/decline_32px.png') }}" alt="" title="" style="float: left; vertical-align: middle; margin-right: 10px;" />';
                            html += 'Your Form Failed Inspection';
                            html += '</div>';
                            html += 'You are missing some required information or some other item.  Your coop application form is incomplete.<br /><br /><b>Error Details</b><br />';
                            html += '<div style="width: 100%; max-height: 6em; height: 6em; overflow-x: hidden; overflow-y: auto; border-top: 1px solid gray; padding-top: 0.25em;"><ul style="margin-left: 20px;">';

                            $.each(check, function (i, item)
                            {
                                if (i > 0)
                                {
                                    html += '<li>' + item + '</li>';
                                }
                            });

                            html += '</ul></div><br />';
                            html += '<div style="text-align: center;"><a href="#" class="close_button">OK</a></div>';
                            html += '</div>';

                            dialog_object.html(html);                            

                            $('.close_button', dialog_object)
                                .button({'icons' : {'secondary' : 'ui-icon-check'}})
                                .css({'font-size' : '9pt'})
                                .focus()
                                .click(function(event)
                                {
                                    event.preventDefault();

                                    dialog_object.dialog('close');
                                });

                        },
                    close : function ()
                        {
                            var dialog_object = $(this);
                            $(dialog_object).remove();
                        }                
                });
        }
    }
    


    /* Positioned elements
     *
     * Elements that contain the attribute data-position="true" will be positioned
     * using JQuery's UI positioning utility.  Other expected attributes define the
     * element's position:
     *    data-position-my
     *    data-position-at
     *    data-position-of
     */
    $('[data-position="true"]').each(function()
    {
        var element = $(this);
        var my = element.attr('data-position-my');
        var at = element.attr('data-position-at');
        var of = element.attr('data-position-of');

        var options = $.parseJSON('{ "my" : "' + my + '", "at": "' + at + '", "of": "' + of + '"}');

        element.position(options);
    });

    // Required field marker
    $('[data-required]:not([data-required-indicator])').after('<span class="required">*</span>');     

    // Date picker
    $('[data-date-picker]').datepicker({'dateFormat':'mm/dd/yy'});

    // Table row highlighter
    function colorRows ()
    {       
        $('table').each(function ()
        {
            var i = 0;

            $('tbody tr:visible', $(this)).each(function ()
            {
                if (i % 2 == 1)
                {
                    $(this).addClass('odd');
                }
                else
                {
                    $(this).removeClass('odd');
                }
                i = i + 1;
            });     
        });
    }   
    colorRows(); 


    /* alertRequiredField
     *
     * Shows an alert box when attempting to save a blank value to a required field.
     */
    function alertRequiredField()
    {
        $('<div></div>')
            .appendTo('body')
            .dialog(
            {                       
                modal : true,
                draggable : false,
                resizable : false,                    
                height : 275,                    
                width : 415,                    
                title : 'Required Field',                    
                buttons: [
                    {
                        text : "OK",
                        'class' : "float_right",
                        icons : { primary : 'ui-icon-check'},
                        click : function()
                                {                                                       
                                    // Close the dialog box
                                    $(this).dialog("close"); 
                                }
                    }
                ],
                open : function ()
                    {  
                        var dialog_object = $(this);

                        dialog_object.html('<br />You\'ve entered in a blank value for a required field.  Required fields cannot be empty.<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">The original value has been restored.</div>');
                        
                        $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                        $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');
                        $('.ui-dialog-buttonpane .ui-dialog-buttonset').append('<div style="font-size: 8pt; line-height: 1.25em; margin-top: 0.5em;">Still having trouble?<br />(503) 682-6722 x228</div>');
                    },                    
                close : function ()
                    {
                        var dialog_object = $(this);
                        $(dialog_object).remove();
                    }                
            });
    }
    

    /* saveFormData
     *
     * Given a form field and a value, this function will do a
     * JSON POST request to save the form's information.  The optional
     * third parameter will determine if the page will be reloaded or not.
     */
    function saveFormData(field, value, type, reload)
    {
        // Ensure the field and value parameters are provided
        if (typeof field == 'undefined' || typeof value == 'undefined' || typeof type == 'undefined')
        {
            alert('Scripting error.  Unable to save form data.');
        }

        // Get the optional reload parameter
        reload = typeof reload !== 'undefined' ? reload : false;

        // Get the form ID (same across all pages for this form)
        var form_id = {{ $info['form']->id }};

        $('*').css({'cursor':'wait'});

        var jqxhr = $.ajax(
        {
            type : 'POST',                      
            url : '{{ url('/forms/coop-application') }}/' + form_id + '/update',
            data : { 'field' : field,
                     'value' : value,
                     'type'  : type },
            dataType : 'html'
        })
        .done(function(returned_data)
        {                               
            // Success
            console.log("Successfully saved {'" + form_id + "|" + field + "' : '" + value + "'}");
            
            var info = $.parseJSON(returned_data);

            $('#updated_at').html(info.updated_at);

            if (info.force_reload)
            {
                reload = true;
            }

        })
        .fail(function(jqXHR, status, error)
        {                                                   
            // Error
            var response = jqXHR.responseText;
            var errorData = $.parseJSON(response);
            //console.log(errorData);
            alert("There was an error saving this form's data.\n\n" + errorData.error.message + "\n\nThis page will now be reloaded.");
            location.reload();
        })
        .complete(function ()
        {
            // Reload if necessary
            if (reload)
            {
                location.reload();
            }
            else
            {
                $('*').css({'cursor':''});
            }
        });
    }   

    // Autosave text fields
    function autoSaveTextField(input_field)
    {
        clearTimeout(autoSaveTextField.timeout);
        autoSaveTextField.timeout = setTimeout(function (){
            
            var value = input_field.val();
            var original_value = input_field.attr('data-original');
            var field = input_field.attr('data-field');
            var type = input_field.attr('data-type');                        
            
            var readonly_attr = input_field.attr('readonly');            
            if (typeof readonly_attr !== typeof undefined && readonly_attr !== false)
            {
                return false;
            }

            var reload = false;
            var reload_attr = input_field.attr('data-reload');            
            if (typeof reload_attr !== typeof undefined && reload_attr !== false)
            {
                reload = true;
            }

            var required = false;
            var required_attr = input_field.attr('data-required');            
            if (typeof required_attr !== typeof undefined && required_attr !== false)
            {
                required = true;
            }

            if (required && value == '' && !(original_value == '' || typeof original_value === typeof undefined || original_value === false))
            {
                input_field.val(original_value);

                input_field.focus();

                alertRequiredField();          

                return;
            }

            if (value != original_value && ((required && value != '') || !required))
            {
                if (input_field.is('[data-autosave-2]'))
                {                 
                    var field_2 = input_field.attr('data-field-2');
                    var type_2 = input_field.attr('data-type-2');
                    var value_2 = input_field.attr('data-value-2');
                    saveFormData(field_2, value_2, type_2, false);
                }

                saveFormData(field, value, type, reload);
                input_field.attr('data-original', value);                
            }
        }, 50);
    }

    // Autosave text fields without delay
    function autoSaveTextFieldNoDelay(input_field)
    {            
        var value = input_field.val();
        var original_value = input_field.attr('data-original');
        var field = input_field.attr('data-field');
        var type = input_field.attr('data-type');                        
        
        var readonly_attr = input_field.attr('readonly');            
        if (typeof readonly_attr !== typeof undefined && readonly_attr !== false)
        {
            return false;
        }

        var reload = false;
        var reload_attr = input_field.attr('data-reload');            
        if (typeof reload_attr !== typeof undefined && reload_attr !== false)
        {
            reload = true;
        }

        var required = false;
        var required_attr = input_field.attr('data-required');            
        if (typeof required_attr !== typeof undefined && required_attr !== false)
        {
            required = true;
        }

        if (required && value == '' && !(original_value == '' || typeof original_value === typeof undefined || original_value === false))
        {
            input_field.val(original_value);

            input_field.focus();

            alertRequiredField();          

            return;
        }

        if (value != original_value && ((required && value != '') || !required))
        {
            saveFormData(field, value, type, reload);
            input_field.attr('data-original', value);
        }
        
    }

    // Autosave text fields and textareas
    $('input[type="text"][data-autosave]').on('change blur autocompletechange autocompleteselect', function (event)
    {            
        autoSaveTextField ($(this));
    });
    $('textarea[data-autosave]').on('change blur autocompletechange autocompleteselect', function (event)
    {            
        autoSaveTextField ($(this));
    });    

    // Autosave select fields    
    $('select[data-autosave]').on('change', function(event)
    {
        var select_field = $(this);
        var selected = $(':selected', select_field);
        var value = selected.val();
        var original_value = select_field.attr('data-original'); 
        var field = select_field.attr('data-field');
        var type = select_field.attr('data-type');                        
     
        var readonly_attr = select_field.attr('readonly');            
        if (typeof readonly_attr !== typeof undefined && readonly_attr !== false)
        {
            return false;
        }

        var reload = false;
        var reload_attr = select_field.attr('data-reload');            
        if (typeof reload_attr !== typeof undefined && reload_attr !== false)
        {
            reload = true;
        }

        if (value != original_value)
        {
            saveFormData(field, value, type, reload);
            select_field.attr('data-original', value);
        }                
    });

    // Autosave check-box fields    
    $('input[type="checkbox"][data-autosave]').on('change', function(event)
    {
        var checkbox_field = $(this);        
        var value = checkbox_field.is(':checked');
        var original_value = checkbox_field.attr('data-original'); 
        var field = checkbox_field.attr('data-field');
        var type = checkbox_field.attr('data-type');                        
        
        var readonly_attr = checkbox_field.attr('readonly');            
        if (typeof readonly_attr !== typeof undefined && readonly_attr !== false)
        {
            return false;
        }

        var reload = false;
        var reload_attr = checkbox_field.attr('data-reload');            
        if (typeof reload_attr !== typeof undefined && reload_attr !== false)
        {
            reload = true;
        }

        if (value != original_value)
        {
            saveFormData(field, value, type, reload);
            checkbox_field.attr('data-original', value);
        }         
    });


    /* ShowHelp
     *
     * Shows a help topic.
     */
    function showHelp(help_topic, no_button)
    {
        if (no_button !== true)
        {
            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    draggable : true,
                    resizable : true,
                    height : 745,
                    minHeight : 400,
                    width : 650,
                    minWidth : 330,
                    modal : false,                    
                    title : 'Coop Application Help',
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            dialog_object.html("<div class='ajax_loader' style='width:16px; height:11px; margin:4em auto; background-image: url(http://www.osaa.org/images/icons/ajax_loader2.gif); background-repeat:no-repeat;'></div>");

                            var jqxhr = $.ajax(
                            {
                                type : 'GET',
                                url : '{{ url('forms/coop-application/' . $info['form']->id . '/help') }}?topic=' + help_topic,
                                dataType : 'html'
                            })
                            .done(function (returned_data)
                            {                               
                                dialog_object.html(returned_data);
                            })
                            .fail(function (jqXHR, status, error)
                            {                                                   
                                var response = jqXHR.responseText;
                                var errorData = $.parseJSON(response);
                                //console.log(errorData);
                                alert ("There was an error looking up help information.\n\n" + errorData.error.message + "\n\nThis page will be reloaded.");
                                location.reload();
                            })
                            .complete(function ()
                            {
                                 
                            });                            
                            
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);

                            $(dialog_object).remove();
                        }                
                });
        }
        else
        {
            $('<div></div>')
                .appendTo('body')
                .css({'z-index':'2000 !important'})
                .dialog(
                {                       
                    draggable : false,
                    resizable : false,
                    height : 745,
                    minHeight : 745,
                    width : 650,                    
                    modal : true,
                    dialogClass : 'no-close',
                    title : 'New Coop Application Created',
                    open : function ()
                        {  
                            var dialog_object = $(this);                            

                            dialog_object.html("<div class='ajax_loader' style='width:16px; height:11px; margin:4em auto; background-image: url(http://www.osaa.org/images/icons/ajax_loader2.gif); background-repeat:no-repeat;'></div>");

                            var jqxhr = $.ajax(
                            {
                                type : 'GET',
                                url : '{{ url('forms/coop-application/' . $info['form']->id . '/help') }}?topic=' + help_topic,
                                dataType : 'html'
                            })
                            .done(function (returned_data)
                            {                               
                                dialog_object.html(returned_data);
                            })
                            .fail(function (jqXHR, status, error)
                            {                                                   
                                var response = jqXHR.responseText;
                                var errorData = $.parseJSON(response);
                                //console.log(errorData);
                                alert ("There was an error looking up help information.\n\n" + errorData.error.message + "\n\nThis page will be reloaded.");
                                location.reload();
                            })
                            .complete(function ()
                            {
                                 $('.close_first_view_button', dialog_object)
                                     .button()
                                     .click(function ()
                                     {
                                         dialog_object.dialog("close");
                                     });

                                // Shake action items
                                function shakeTheseActionImages (object)
                                {
                                    var direction;
                                    if ($(object).has('[data-direction]'))
                                    {
                                        var direction = $(object).attr('data-direction');
                                    }                                              
                                    if (typeof direction == 'undefined')        
                                    {
                                        var direction = 'left';
                                    }          
                                    $(object).effect("shake", {direction : direction, distance : 5, times : 1}, 600, function ()
                                    {
                                        $(this).delay(Math.floor(Math.random() * 4000) + 2000);
                                        shakeTheseActionImages($(this));
                                    });        
                                }  
                                
                                var img = $('img.action_item', dialog_object);
                                img.position({my:"center center", at : "right+30 center", of : ".close_first_view_button"});

                                shakeTheseActionImages(img);  
                            });                            
                            
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);

                            $(dialog_object).remove();
                        }                
                });
        }
    }


    /* 
     * Help button    
     */
    $('.help_button')
        .button({'icons':{'primary':'ui-icon-help'}})
        .css({'font-size':'9pt'})
        .click(function(event)
        {
            var object = $(this);

            event.preventDefault();

            var topic = object.attr('data-topic');            

            showHelp(topic);

            object.blur();

        });

    /*
     * Special help buttons
     */
    $('[name="category_help"]')        
        .hover(function ()
        {
            $(this).css({'cursor':'pointer'});
        },
        function ()
        {

        })
        .click(function(event)
        {
            var object = $(this);
            
            var topic = object.attr('data-topic'); 
            
            showHelp(topic);
        });    


	/*
     * Close button
     */
	$('.close_button')
		.button({'icons':{'primary':'ui-icon-circle-close'}})
		.css({'font-size':'9pt', 'margin-left':'10px'});     
    

    /* Status Log
     *
     * Shows the ejection log when link is clicked.
     */
    $('[name="status_log"]')
        .click(function(event)
        {
            event.preventDefault();

            var link = $(this);

            var data = {
                created_at : "{{ date('D n/j/y g:ia', strtotime($info['form']->created_at)) }}",
                updated_at : "{{ date('D n/j/y g:ia', strtotime($info['form']->updated_at)) }}",                
                submitted_at : "{{ (!is_null($info['form']->submitted_at)) ? date('D n/j/y g:ia', strtotime($info['form']->submitted_at)) : '- -' }}",
                done_at : "{{ (!is_null($info['form']->done_at)) ? date('D n/j/y g:ia', strtotime($info['form']->done_at)) : '- -' }}"
            };
                        

            var html = '<div style="font-size: 9pt;">';
            html += '<div style="display: inline-block; width: 150px;">Last Updated:</div>' + data.updated_at + '<br />';
            html += '<div style="display: inline-block; width: 150px;">Created:</div>' + data.created_at + '<br />';            
            html += '<div style="display: inline-block; width: 150px;">Submitted:</div>' + data.submitted_at + '<br />';
            html += '<div style="display: inline-block; width: 150px;">Finished:</div>' + data.done_at + '<br />';            
            
            html += '<table style="width: 100%; border-collapse: collapse; margin-top: 1em;"><tbody>';

            @foreach ($info['form']->status_data as $i => $log)

                @if (($i % 2) == 0)
                    html += '<tr style="background-color: #dedede;">';
                @else
                    html += '<tr>';
                @endif
                html += '<td style="padding-right: 15px;vertical-align: top;">{{ date('n/j/y g:ia', strtotime($log->updated_at)) }}</td>';
                html += '<td style="padding-right: 15px;vertical-align: top;">{{ $log->status }}</td>';
                html += '<td style="vertical-align: top;">{{ str_replace('\'', '\\\'', $log->user) }}<br /><i>{{ str_replace("\n", '<br />', str_replace('\'', '&quot;', $log->notes)) }}</i></td></tr>';

            @endforeach 

            html += '</tbody></table></div>';

            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    resizable: false,
                    height: 'auto',
                    width: 550,
                    modal: false,                    
                    title: 'Form Status Log',
                    open : function ()
                        {  
                            var dialog_object = $(this);                            

                            dialog_object.html(html);
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);

                            $(dialog_object).remove();
                        }                
                });

        })
        .hover(function()
        {
            $(this).css({'cursor':'pointer'});
        },
        function()
        {
            $(this).css({'cursor':''});
        })
        .tooltip({'content':'Click to view detailed status history.','items':'.status_path'});


    /* 
     * Custom tooltip items
     */
    $('[data-tooltip]').each(function ()
    {
        var item = $(this);

        var help = item.attr('data-tooltip');
        
        item.tooltip({'content' : help, 'items' : item});
    });


    // Disable preview buttons
    $('[data-button-disabled="disabled"]').button('disable');

    // Disable input if not WORK status
    @if (!Helpers::strEqual($info['form']->status, 'WORK'))

        $('input[type="text"]')
            .attr('readonly', 'readonly')
            .attr('disabled', 'disabled');

    @endif
    

@stop

@section('page_functions')          

    <a href="#" class="help_button" data-topic="add-signature" data-tooltip="Get help with this form.">Help</a>  
    <a href="{{ url('/forms/coop-application') }}" class="close_button">Close</a>    
    
@stop


@section('main_content')    		

 	{{-- Success Bar --}}
 	@if (Session::has('success'))
		<div class="success_bar">
			<div class="message">				
				{{ Session::get('success') }}
			</div>			
		</div>
	@endif

    
    {{-- Action Area --}}
    <div class="ui-corner-bottom action_area">
        <div class="title">
            Form Actions

            <div class="title_right">
                Coop Application Form Status and Progression
            </div>
        </div>

        <a href="#" class="help_button" data-topic="edit" data-tooltip="Get help with this form.">Help</a>  

        @if (is_null($info['form']->form_data->league_approval->signature) or is_null($info['form']->form_data->league_approval->is_approved))
            <span style="font-weight: bold; color: #990000;">Awaiting Your Decision &amp; Digital Signature</span>
        @else
            <span style="font-weight: bold; color: #0d581b;">You Have Already Entered a Decision</span>
        @endif

        @if (count($info['status_path']) > 0)
        
            <div class="status_path" name="status_log">

                @foreach ($info['status_path'] as $step => $action_info)
                    @if ($action_info['show'])                        

                        @if ($action_info['trail'])
                            @if ($action_info['complete'] or $action_info['current'])
                                <img src="{{ asset('/images/icons/progress_complete.png') }}" alt="" title="" />
                                <img src="{{ asset('/images/icons/progress_complete.png') }}" alt="" title="" />
                                <img src="{{ asset('/images/icons/progress_complete.png') }}" alt="" title="" /> 
                            @else
                                <img src="{{ asset('/images/icons/progress_not_yet.png') }}" alt="" title="" />
                                <img src="{{ asset('/images/icons/progress_not_yet.png') }}" alt="" title="" />
                                <img src="{{ asset('/images/icons/progress_not_yet.png') }}" alt="" title="" />
                            @endif
                        @endif

                        @if ($action_info['current'])
                            <div class="state current">
                        @elseif ($action_info['complete'])
                            <div class="state complete">
                        @else
                            <div class="state">
                        @endif
                            {{ $step }}
                        </div>

                    @endif
                @endforeach

            </div>
        @endif        
        
    </div>
   
    {{-- Work in Progress --}}
    @if (Helpers::strEqual($info['form']->status, 'WORK'))        
        <div class="ui-state-highlight progress_alert">
            <img src="{{ asset('/images/icons/construction_32px.png') }}" alt="" title="" style="float: left; width: 32px; display: inline-block; margin-right: 10px;" />
            @if (is_null($info['form']->form_data->league_approval->signature) or is_null($info['form']->form_data->league_approval->is_approved))
                Awaiting your decision and digital signature.
            @else
                You have already indicated your decision for this coop application.
            @endif
            
            <br class="clear" />
        </div>   

    {{-- Submitted --}}
    @elseif (Helpers::strEqual($info['form']->status, 'SUBT'))
        <div class="ui-state-highlight progress_alert">
            <img src="{{ asset('/images/icons/school_review_32px.png') }}" alt="" title="" style="float: left; width: 32px; display: inline-block; margin-right: 10px;" />
            This application has been submitted and is under OSAA review.
            <br class="clear" />
        </div>    
    
    @endif


    {{-- Errors --}}
    @if (Session::has('errors'))        
        <div class="error ui-state-error" style="padding: 0.5em; font-size: 12pt;">
            <span class="ui-icon ui-icon-alert box_icon"></span>
            @foreach ($errors->all() as $error)
                {{ $error }}
            @endforeach
        </div>
    @endif   


    {{-- Instructions --}}
    @if (Helpers::strEqual($info['form']->status, 'WORK'))
        <h3>Instructions</h3>
        <div class="columns small">
            <div class="half text_justify" style="width: 60%;">
                You've been given access to this online Cooperative Sponsorship Application form in order to indicate your league's or special district's approval by adding your digital signature.  If you have any questions, please reach out to the school administrator who sent you the link to this form or contact OSAA Associate Director Kelly Foster, {{ Helpers::obfuscateEmailLink('kellyf@osaa.org') }} or (503) 682-6722 x233.
            </div>

            <div class="third">
                <b>Next Steps</b>
                <ol style="margin-left: 0;">                    
                    <li>Review the information on this form.</li>
                    <li>Indicate if your league approves of this coop.</li>
                    <li>Input your digital signature.</li>                    
                </ol>
            </div>
        </div>   
    @elseif (Helpers::strEqual($info['form']->status, 'SUBT'))
        <h3>Instructions</h3>
        <div class="columns small">
            <div class="half text_justify" style="width: 60%;">
                Your form has been submitted and the OSAA is reviewing this coop application.  If you have any questions, please contact your school contact who sent you the link to this form or contact OSAA Associate Director Kelly Foster, {{ Helpers::obfuscateEmailLink('kellyf@osaa.org') }} or (503) 682-6722 x233.
            </div>

            <div class="third">
                <b>Next Steps</b>
                <ol style="margin-left: 0;">                    
                    <li>All steps are complete.</li>                    
                </ol>
            </div>
        </div>    
    @elseif (Helpers::strEqual($info['form']->status, 'DONE'))
        <h3>Information</h3>
        <div class="columns small">
            <div class="half text_justify">
                This form has been marked as finished.  If you have any questions, please contact your school contact who sent you the link to this form or contact OSAA Associate Director Kelly Foster, {{ Helpers::obfuscateEmailLink('kellyf@osaa.org') }} or (503) 682-6722 x233.
            </div>            
        </div>
    @endif

    <br class="clear" /><br />

    {{-- Coop Application Form --}}
    <h2 class="line">Coop Information - {{ implode(' / ', $info['coop_names']) }}</h2>
    <div class="columns">
        <div class="third">
            <div class="label">Activity:</div>
            {{ Helpers::getActivityName($info['form']->activity )}}
        </div>

        <div class="third">
            <div class="label">Duration:</div>{{ $info['form']->getCoopDuration() }} years
        </div>

        <div class="third">
            <div class="label">School Years:</div>
            {{ $info['form']->starting_school_year }}-{{ substr($info['form']->starting_school_year + 1, 2, 2) }} through 
            {{ $info['form']->ending_school_year }}-{{ substr($info['form']->ending_school_year + 1, 2, 2) }} 
        </div>
    </div>

    <br class="clear" /><br />

    <div class="label">Reason:</div>
    <div class="small gray note">
        This is the reason for creating this cooperative sponsorship.
    </div>
    @if (Helpers::strIsEmpty($info['form']->form_data->reason_to_coop))
        <i>A reason has not yet been provided by the schools</i>
    @else
        {{ $info['form']->form_data->reason_to_coop }}
    @endif
    

    <br /><br />

    <div class="columns">
        <div class="half">

            <div class="label" style="width: 175px;">Practice Location:</div>
            @if (Helpers::strIsEmpty($info['form']->form_data->practice_location))
                <i>Not provided</i>
            @else
                {{ $info['form']->form_data->practice_location }}
            @endif
            <br />

            <span class="small gray note" style="">This is where practices will be held.</span>
        </div>

        <div class="half">    

            <div class="label" style="width: 175px;">Contest Location:</div>
            @if (Helpers::strIsEmpty($info['form']->form_data->contest_location))
                <i>Not provided</i>
            @else
                {{ $info['form']->form_data->contest_location }}
            @endif  
            <br />                    
            <span class="small gray note" style="">This is where home contests will be held.</span>
        </div>
    </div>

    <br class="clear" /><br />

    <h2 class="line">Placement</h2>
    
    <div class="columns">
        <div class="fourth">
            <div class="label" style="width: 125px;">Combined ADM:</div>
            {{ $info['form']->form_data->combined_adm }}            

            <div class="small gray note" style="line-height: 1.15em;">
                Sum of {{ $info['form']->bothOrAll() }} school's ADM numbers from the selected starting school year.
            </div>
        </div>

        <div class="fourth">
            @if (Helpers::strContains('/', $info['form']->division))            
                <div class="label" style="width: 125px;">Coop Division:</div>
            @else
                <div class="label" style="width: 150px;">Coop Classification:</div>
            @endif

            {{ $info['form']->division }}

            <div class="small gray note" style="line-height: 1.15em;">
                Based on the combined ADM, this coop would compete in this {{ (Helpers::strContains('/', $info['form']->division)) ? 'division' : 'classification' }}.
            </div>
        </div>

        <div class="half">
            {{ Form::label('league', 'Coop League:') }}
            @if (is_null($info['league']))
                Independent
            @else
                {{ $info['league']->slug }} {{ $info['league']->name }} 
            @endif

            <div class="small gray note" style="line-height: 1.15em;">
                The selected league in which this coop will join and compete.
            </div>
        </div>
    </div>

    <br class="clear" />

    <div class="columns">
        @foreach ($info['school_data_objects'] as $index => $data_object_name)
            <br />
<b>Fatal error</b>:  Cannot break/continue 1 level in <b>/home/osaa/web_app/dev/app/views/coop_form/add_league_approval.blade.php</b> on line <b>1537</b><br />