@section('page_title')
    OSAA - Music Registration Form
@stop

@section('page_sub_title')    
	
	Application to Participate in the Music State Championships
	
@stop

@section('scripts')
    @parent

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

    <style type="text/css">
    	

    	h3 {
    		color: #990000 !important;
    	}

    	.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;
    	}    		
    	
    	/* Help Dialog */
        .help_dialog {
            font-size: 10pt;
        }

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

        .help_dialog h2 {
            font-size: 12pt;
            color: #990000;
            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;
        } 

        .form_meta_notes {
        	position: absolute;
        	top: 0;
        	right: 0;
        	text-align: right;        	
        	font-size: 8pt;
        	line-height: 115%;
        }

        .category_icon {
        	float: left;
            width: 64px;
            height: 64px; 
        	position: relative; 
        	top: -0.5em; 
        	margin-right: 0.5em;
        }

        label, .label {
            font-weight: bold;
            width: 125px;
            text-align: right;
            margin-right: 25px;
            display: inline-block;
            position: relative;
            vertical-align: top;
        }     
        
        .required {
            color: #990000;
            font-weight: bold;
            font-size: 14pt;
            position: relative;
            top: 4px;
            margin-left: 5px;
        }

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

    	table.music thead th {
    		text-align: left;
    		vertical-align: bottom;
    	}

    	table.music tbody td {
    		line-height: 2em;
    		padding-right: 15px;
    	}

    	table.music tbody tr.odd {
    		background-color: #f2f2f2;
    	}

    	table.music tbody td input {
    		width: 100%;
    	}

    	.submit_area {
    		float: right; 
    		width: 600px; 
    		border: 1px solid #005fa9; 
    		padding: 0.5em;

    		background: #e1ffff; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 20%, #e6f8fd 30%, #c8eefb 81%, #bee4f8 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e1ffff), color-stop(7%,#e1ffff), color-stop(12%,#e1ffff), color-stop(20%,#fdffff), color-stop(30%,#e6f8fd), color-stop(81%,#c8eefb), color-stop(100%,#bee4f8)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 20%,#e6f8fd 30%,#c8eefb 81%,#bee4f8 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 20%,#e6f8fd 30%,#c8eefb 81%,#bee4f8 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 20%,#e6f8fd 30%,#c8eefb 81%,#bee4f8 100%); /* IE10+ */
			background: linear-gradient(135deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 20%,#e6f8fd 30%,#c8eefb 81%,#bee4f8 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#bee4f8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    	}

    </style>
	
@stop

@section('jquery_init')
	
	// Succecss 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);
		})
	});
	
	// Back button
	$('.back_button')
		.button({icons : { primary : ' ui-icon-arrowthick-1-w'} })
		.css({'font-size' : '9pt'});

	// Submit button
	$('.submit_button')
		.button()
		.css({'font-size' : '12pt'})
		.click(function (event)
        {
            event.preventDefault();

            var button = $(this);

            var form = button.parents('form');

             $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    draggable : true,
                    resizable : false,
                    modal : true,
                    height : 250,
                    width : 400,                    
                    title : 'Confirmation',
                    buttons: [
                        {
                            text : "Yes",
                            'class' : "float_left",
                            icons : { primary : 'ui-icon-check'},
                            click : function()
                                    {                                                       
                                        form.submit();
                                    }
                        },
                        {
                            text : "No",
                            'class' : "float_right",
                            'data-autofocus' : "true",
                            icons : { primary : 'ui-icon-close'},
                            click : function()
                                    {
                                        // Close the dialog box
                                        $(this).dialog("close");                           
                                    }
                        }
                    ],
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            dialog_object.html('<br />Are you sure you want to submit this form?<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">Did you fill out all of the required fields?</div>');
                                                        
                            $('.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();
                        }                
                });
        });


	// Help button    
    $('.help_button')
        .button({'icons':{'primary':'ui-icon-help'}})
        .css({'font-size':'9pt', 'margin-right':'10px'})
        .click(function(event)
        {
            event.preventDefault();

            var topic = 'registration_form'; 
            var form_id = {{ $info['form']->id }};

            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    draggable : true,
                    resizable : true,
                    height : 725,
                    minHeight : 400,
                    width : 615,
                    minWidth : 330,
                    modal : false,
                    title : '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/music/help') }}?topic=' + topic + '&form=' + form_id,
                                          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\nThis page will be reloaded.");
                                          location.reload();
                                      })
                                      .complete(function ()
                                      {
                                           
                                      });                            
                            
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);

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


        });

    // Map link button
	$('.map_link')
		.button({ icons : { primary : 'ui-icon-pin-s' }});
	
	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();
		
	// Required field marker
    $('[data-required]').after('<span class="required">*</span>'); 
	
	// Phone field
	$('[data-phone-field]').mask("(999) 999-9999");	

	$('input[name="participants"]').bind('input', function()
	{
  	    $(this).val($(this).val().replace(/[^0-9]/gi, ''));
	});		

	// Do not allow special characters in some fields
	$('[data-name-field]').bind('input', function()
	{
		$(this).val($(this).val().replace(/[^A-Za-z \-',\.]/gi, ''));
	});

	/* 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/music/registration') }}/' + 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);
            $('#updated_by').html(info.updated_by);

            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\nPlease try again.  Please note, that if you try to reload this page, your unsaved data to be lost.");
        })
        .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))
            {
                saveFormData(field, value, type, reload);
                input_field.attr('data-original', value);
            }
        }, 50);
    }

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


@stop

@section('page_functions') 	

	<a href="#" class="help_button">Help</a>
	<a href="{{ url('/forms/music/registration/' . $info['division']) }}" class="back_button">Back</a>

@stop


@section('main_content')    

	@if (Session::has('success'))

		<div class="success_bar">
			<div class="message">				
				{{ Session::get('success') }}
			</div>			
		</div>

	@endif	
	
	<br />	
		
	<div class="form_meta_notes">			
		Form ID {{ $info['form']->id }}<br />
		Created at {{ date('g:i a m/d/Y', strtotime($info['form']->created_at)) }}<br />
		Updated at {{ date('g:i a m/d/Y', strtotime($info['form']->updated_at)) }}<br />
		Last updated by {{ $info['user']->getDisplayFullName() }}
	</div>

	<img src="{{ asset('/images/icons/' . strtolower(str_replace('-', '_', str_replace('concert-', '', $info['division']))) . '_64px.png') }}" alt="" title="" class="category_icon" />

	<h1 style="width: 800px; line-height: 115%;">State {{ ucwords(str_replace('-', ' ', str_replace('concert-', '', $info['division']))) }} Registration Form for {{ $info['ap']->name }}</h1>		

	<br /><br />
		

	@if (Session::has('errors'))                
        <div class="ui-state-error" style="padding: 0.5em 0.5em;">
			<span class="ui-icon ui-icon-alert" style="display:inline-block; position:relative; top:2px;"></span>
        	@foreach ($errors->all() as $error){{ $error }} @endforeach
        </div>
        <br />
    @endif        
	

	{{ Form::open(array('url'    => url('/forms/music/registration/' . $info['form']->id . '/submit'),
					    'method' => 'post',
					    'class'  => 'registration_form')) }}

		{{ Form::hidden('form_id', $info['form']->id) }}
		{{ Form::hidden('qualification', $info['form']->data->qualification) }}
		{{ Form::hidden('category', $info['division']) }}			

		<div class="ui-corner-all submit_area">
		
			{{ Form::submit('Submit', array('class' => 'submit_button float_right')) }}

			<div style="float: left; width: 400px;">
				When you are ready, click the button to submit your form.  An e-mail confirmation will be sent to the school.
			</div>				

		</div>

		<h2>Qualification Status</h2>

		<br />
<b>Fatal error</b>:  Class 'Helpers' not found in <b>/home/osaa/web_app/dev/app/views/music/registration_form.blade.php</b> on line <b>666</b><br />