@section('page_title')
    OSAA - Music Large Ensemble Contest Report
@stop

@section('page_sub_title')    
    
    OSAA Music Large Ensemble Contest Report

@stop

@section('scripts')
    @parent

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

    <style type="text/css">
      	@media print {
            input {
                outline: none;
                border: none;
                border-bottom: 1px solid #666666;
                padding-bottom: 1px;
                color: #000000 !important;
            }            

            select {
                outline: none;
                border: none;
                border-bottom: 1px solid #666666;
                padding-bottom: 1px;
                color: #000000 !important;
            }

            #full_page_content,
            .main_content,
            .header {
                width: 100% !important;
            }

            .required_note,            
            .required,
            .success_bar,
            .ad,
            .page_functions,
            .action_item {
                display: none;
            }            

            .groups thead {
                background-color: #000000;
                color: #ffffff;
            }

            .groups {                
                font-size: 11pt;
            }          

            .groups thead th {                            
                font-size: 9pt;                
            }
            
            .groups tbody tr td {
                font-size: 11pt;                
            }
        }

        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;
      	}  

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

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

      	.page_functions {
      		width: auto !important;
      	}    

        .form_area {
            margin-top: 1.5em;
            position: relative;
        }     

        .form_area dl {

        }  

        .form_area dl dt {
            width: 100px !important;
            font-weight: bold;
        }



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

        .required_note {
            position: absolute;
            top: -1em;
            right: 0;
            font-size: 8pt;
        }

        .required_note .required {
            margin: 0;
        }

        .placeholder
        {
            color: #aaaaaa !important;
            font-weight: normal !important;
        }
        
        .odd {
            background-color: #dddddd;
        }      

        /* Groups & Results Table */
        .groups {
            border-collapse: collapse;
            width: 100%;
            font-size: 10pt;
        }

        .groups thead {
            background-color: #005FA9;
            color: #ffffff;
        }

        .groups thead th {            
            padding: 4px 2px;
            text-align: center;
            font-size: 8pt;
            vertical-align: bottom;
            line-height: 115%;
        }

        .groups tbody tr {
            line-height: 2em;
        }  

        .groups tbody tr td {
            font-size: 9.5pt;            
            text-align: center;
        }

        /* Group Checks Window */
        .check_qualification {
            width: 92%;
            margin: 0 auto;            
            text-align: center;
            font-size: 12pt;
            margin-bottom: 1em;
            padding: 0.5em 0;
            font-weight: bold;
        }

        .qualifier_automatic {
            border: 1px solid #0d581b;
            background-color: #b0ffbe;
        }

        .qualifier_tape_pool {
            border: 1px solid #005fa9;
            background-color: #b0dcff;
        }

        .qualifier_none {
            border: 1px solid #990000;
            background-color: #ffb0b0;
        }

        .check_pass {
            color: #0d581b;
            font-weight: bold;
        }

        .check_fail {
            color: #990000;
            font-weight: bold;
        }

        .check_ignore {
            color: #e7a015;
            font-weight: bold;
        }

        /* 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;
        } 

        .ui-menu-item {
            font-size: 9pt;
        }  



    </style>

@stop

@section('jquery_init')

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

    // 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);
  		})
  	});

    // Placeholder functionality
    $('[data-placeholder]').focus(function()
    {
        var input = $(this);
        if (input.val() == input.attr('data-placeholder'))
        {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function()
    {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('data-placeholder'))
        {
            input.addClass('placeholder');
            input.val(input.attr('data-placeholder'));
        }
    }).blur();
    $('[data-placeholder]').parents('form').submit(function()
    {
        $(this).find('[data-placeholder]').each(function()
        {
            var input = $(this);
            if (input.val() == input.attr('data-placeholder'))
            {
                input.val('');
            }
        })
    }); 

    // Reload indicator
    {{-- $('input[type="text"][data-reload], select[data-reload]')
        .each(function(index, item)
        {
            var height = $(item).height();
            var position = $(item).position();
            var form = $(item).parents('form');

            $('<div></div>')
                .css({'border' : '1px solid #005fa9',                      
                      'width' : '0px',
                      'height' : height,
                      'position' : 'absolute',
                      'left' : position.left,
                      'top' : position.top})
                .appendTo(form);            
        }); --}}


    /* 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]').after('<span class="required">*</span>'); 

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

    // Phone field
    $('[data-phone-field]').mask("(999) 999-9999");

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

    // Auto-complete fields
    $('input[type="text"][data-auto-complete]').each(function()
    {
        var min = 3;
        var min_attr = $(this).attr('data-auto-complete-min');        
        if (typeof min_attr !== typeof undefined && min_attr !== false)
        {
            min = min_attr;
        }

        $(this).autocomplete({'source' : '{{ url('/forms/music/') }}/get-' + $(this).attr('data-auto-complete'),
                              'minLength' : min});
    });

    // 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();    


    // Submit button
    $('input[type="submit"]')
        .button()
        .css({'font-size' : '9pt',
              'margin-right' : '50px'})
        .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 : 400,
                    width : 500,                    
                    title : 'Confirmation',
                    buttons: [
                        {
                            text : "No",
                            'class' : "float_right",                            
                            icons : { primary : 'ui-icon-close'},
                            click : function()
                                    {
                                        // Close the dialog box
                                        $(this).dialog("close");                           
                                    }
                        },
                        {
                            text : "Yes",
                            'class' : "float_left",
                            icons : { primary : 'ui-icon-check'},
                            click : function()
                                    {                                                       
                                        form.submit();
                                    }
                        }                        
                    ],
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            dialog_object.html('<br /><b>Are you sure you want to submit this form?</b><br /><br /><div class="ui-state-error" style="font-size: 10pt; line-height: 1.15em;">Once you click "Yes", you cannot make any changes, all groups will receive an automatic email with their status as listed on this form.</div><div style="font-size: 9pt; margin-top: 1em;">Groups cannot register for state unless this form lists them as qualified (Automatic or Tape Pool).<br /><br />If you think a group\'s qualification appears inaccurately on this form,<br /><span class="important">DO NOT SUBMIT THIS FORM</span>, contact the OSAA.<br /><br />If you need help, click the <b>Help</b> button.</div>');
                            
                            $('.ui-widget-header').css('background', '#f6a828 url(http://download.jqueryui.com/themeroller/images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x').css('border-color', '#f6a828');                                     
                            $('.ui-widget-content').css('border-color', '#dddddd');

                            $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');                               
                        },
                    show : { effect : "shake", duration : 200},
                    close : function ()
                        {
                            var dialog_object = $(this);                            

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


    // Delete button
    $('.delete_button')
        .button({'icons':{'primary':' ui-icon-circle-close'}})
        .css({'font-size':'9pt'})
        .click(function(event)
        {               
            event.preventDefault();

            var link = $(this);
            var href = link.attr('href');

            $('<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()
                                    {                                                       
                                        var jqxhr = $.ajax(
                                        {
                                            type : 'POST',
                                            url : '{{ url('/forms/music/large-ensemble/' . $info['form']->id . '/delete') }}',
                                            data : { 'form_id' : '{{ $info['form']->id }}'},
                                            dataType : 'html'
                                        })
                                        .done(function(returned_data)
                                        {                               
                                            // Success
                                            window.location.href = '{{ url('/forms/music/large-ensemble') }}';
                                        })
                                        .fail(function(jqXHR, status, error)
                                        {                                                   
                                            // Error
                                            var response = jqXHR.responseText;
                                            var errorData = $.parseJSON(response);
                                            console.log(errorData);
                                            alert("There was an error deleting this form.\n\n" + errorData.error.message + "\n\nPlease try again.");

                                            location.reload();
                                        })
                                        .complete(function ()
                                        {
                                            
                                        });
                                    }
                        },
                        {
                            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 delete this form?<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">Your form will be deleted.  This cannot be undone.</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();
                        }                
                });
        });


    // Admin button
    $('.admin_button')
        .button({'icons':{'primary':'ui-icon-star'}})
        .css({'font-size':'9pt',
              'margin-right':'10px'});

    // Print button
    $('.print_button')
        .button({'icons':{'primary':'ui-icon-print'}})
        .css({'font-size':'9pt'})
        .click(function(event)
        {
            event.preventDefault();

            window.print()
        });

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

            var topic = 'edit';
            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();
                        }                
                });


        });

    // Add group button
    $('.add_group')
        .button({'icons':{'primary':' ui-icon-plusthick'}})
        .css({'font-size' : '9pt'})
        .click(function(event)
        {
            var button = $(this);

            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    modal : true,
                    draggable : false,
                    resizable : false,
                    title : 'Add a New Group',
                    height : 500,
                    width : 700, 
                    buttons: [
                        {
                            text : "Cancel",
                            'class' : "float_right",                            
                            icons : { primary : 'ui-icon-cancel'},
                            click : function()
                                    {
                                        // Close the dialog box
                                        $(this).dialog("close"); 
                                        $(this).remove();                                       
                                    }
                        },
                        {
                            text : "Add",
                            'class' : "float_left",
                            icons : { primary : 'ui-icon-check'},
                            click : function()
                                  {                                                       
                                      var dialog_object = $(this);
                                      
                                      var form = $('form', dialog_object);
                                      
                                      $(form).submit();                  
                                   }
                        }                        
                    ],                                 
                    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/large-ensemble') }}/{{ $info['form']->id }}/add-group',
                                          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 loading the required data.\n\nThis page will be reloaded.");
                                          location.reload();
                                      })
                                      .complete(function ()
                                      { 
                                          /* 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"]', dialog_object).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);
                                          });

                                          // Time field
                                          $('input[name="time"]', dialog_object).mask("99:99");

                                          // Integer only fields
                                          $('input[data-numbers-only="integer"]', dialog_object).bind('input', function()
                                          {
                                              $(this).val($(this).val().replace(/[^0-9]/gi, ''));
                                          });                                          

                                          // Placeholder functionality
                                          $('[data-placeholder]').focus(function()
                                          {
                                              var input = $(this);
                                              if (input.val() == input.attr('data-placeholder'))
                                              {
                                                  input.val('');
                                                  input.removeClass('placeholder');
                                              }
                                          }).blur(function()
                                          {
                                              var input = $(this);
                                              if (input.val() == '' || input.val() == input.attr('data-placeholder'))
                                              {
                                                  input.addClass('placeholder');
                                                  input.val(input.attr('data-placeholder'));
                                              }
                                          }).blur();
                                          $('[data-placeholder]').parents('form').submit(function()
                                          {
                                              $(this).find('[data-placeholder]').each(function()
                                              {
                                                  var input = $(this);
                                                  if (input.val() == input.attr('data-placeholder'))
                                                  {
                                                      input.val('');
                                                  }
                                              })
                                          });

                                          
                                      }); 

                            $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');                               
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);

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

        }); 

    // Delete group button
    $('.delete_group')    
        .button({'text' : false,
                 'icons' : { 'primary' : 'ui-icon-trash'}})
        .css({'width' : '16px',
              'height' : '16px',
              'top' : '-1px'})
        .click(function()
        {
            var button = $(this);

            var record = button.parents('tr');
            
            var original_background_color = record.css('background-color');            
            
            var index = button.attr('data-group-index'); 
            var group_name = button.attr('data-group-name');

            record.css({'background-color':'yellow'});

            console.log(index);
                        
            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    draggable : true,
                    resizable : false,
                    modal : true,
                    height : 250,
                    width : 400,                    
                    title : 'Remove ' + group_name + '?',
                    buttons: [
                        {
                            text : "Delete",
                            'class' : "float_left",
                            icons : { primary : 'ui-icon-check'},
                            click : function()
                                    {                                                       
                                        var data = { 'index' : index,
                                                     'form_id' : {{ $info['form']->id }} };

                                        // Submit the change
                                        var jqxhr = $.ajax(
                                            {
                                                type : 'POST',
                                                url : '{{ url('forms/music/large-ensemble/' . $info['form']->id) }}/delete-group',
                                                data : data,
                                                dataType : 'html'
                                            })
                                            .done(function (data)
                                            {                               
                                                console.log('Deletion was successful.');
                                                
                                                // Reload of refresh is specified                                                
                                                location.reload();                                                
                                            })
                                            .fail(function (jqXHR, status, error)
                                            {                                                   
                                                // Error
                                                var response = jqXHR.responseText;
                                                var errorData = $.parseJSON(response);
                                                console.log(errorData);
                                                alert("There was an error deleting that group.\n\n" + errorData.error.message + "\n\nThis page will be reloaded.");
                                                location.reload();
                                            });              
                                    }
                        },
                        {
                            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);

                            dialog_object.html('<br />Are you sure you want to delete the ' + group_name + ' group?<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">This group will be removed from the form and a recalculation will automatically be performed.</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);

                            record.css({'background-color':original_background_color});

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

    // Edit group button
    $('.edit_group')    
        .button({'text' : false,
                 'icons' : { 'primary' : 'ui-icon-pencil'}})
        .css({'width' : '16px',
              'height' : '16px',
              'top' : '-1px'})
        .click(function()
        {
            var button = $(this);

            var record = button.parents('tr');
            
            var original_background_color = record.css('background-color');            
            
            var index = button.attr('data-group-index');
            var group_name = button.attr('data-group-name');

            record.css({'background-color':'yellow'});

            console.log(index);
                        
            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    modal : true,
                    draggable : false,
                    resizable : false,
                    title : 'Edit ' + group_name,
                    height : 500,
                    width : 700, 
                    buttons: [
                        {
                            text : "Cancel",
                            'class' : "float_right",                            
                            icons : { primary : 'ui-icon-cancel'},
                            click : function()
                                    {
                                        // Close the dialog box
                                        $(this).dialog("close"); 
                                        $(this).remove();                                       
                                    }
                        },
                        {
                            text : "Save",
                            'class' : "float_left",
                            icons : { primary : 'ui-icon-disk'},
                            click : function()
                                  {                                                       
                                      var dialog_object = $(this);
                                      
                                      var form = $('form', dialog_object);
                                      
                                      $(form).submit();                  
                                   }
                        }                        
                    ],                                 
                    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/large-ensemble') }}/{{ $info['form']->id }}/edit-group/' + index,
                                          dataType : 'html'
                                      })
                                      .done(function (returned_data)
                                      {                               
                                          dialog_object.html(returned_data);                                          
                                      })
                                      .fail(function (jqXHR, status, error)
                                      {                                                   
                                          // Error
                                          var response = jqXHR.responseText;
                                          var errorData = $.parseJSON(response);
                                          console.log(errorData);
                                          alert("There was an error loading the group editor.\n\n" + errorData.error.message + "\n\nThis page will be reloaded.");
                                          location.reload();
                                      })
                                      .complete(function ()
                                      { 
                                          /* 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"]', dialog_object).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);
                                          });

                                          // Time field
                                          $('input[name="time"]', dialog_object).mask("99:99");

                                          // Integer only fields
                                          $('input[data-numbers-only="integer"]', dialog_object).bind('input', function()
                                          {
                                              $(this).val($(this).val().replace(/[^0-9]/gi, ''));
                                          });                                          

                                          // Placeholder functionality
                                          $('[data-placeholder]').focus(function()
                                          {
                                              var input = $(this);
                                              if (input.val() == input.attr('data-placeholder'))
                                              {
                                                  input.val('');
                                                  input.removeClass('placeholder');
                                              }
                                          }).blur(function()
                                          {
                                              var input = $(this);
                                              if (input.val() == '' || input.val() == input.attr('data-placeholder'))
                                              {
                                                  input.addClass('placeholder');
                                                  input.val(input.attr('data-placeholder'));
                                              }
                                          }).blur();
                                          $('[data-placeholder]').parents('form').submit(function()
                                          {
                                              $(this).find('[data-placeholder]').each(function()
                                              {
                                                  var input = $(this);
                                                  if (input.val() == input.attr('data-placeholder'))
                                                  {
                                                      input.val('');
                                                  }
                                              })
                                          });

                                          
                                      }); 

                            $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');                               
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);

                            record.css({'background-color':original_background_color});

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

    // Check group flags link
    $('.check_group_flags').click(function(event)
    {
        event.preventDefault();

        var link = $(this);

        var readonly_attr = link.attr('readonly');            
        if (typeof readonly_attr !== typeof undefined && readonly_attr !== false)
        {
            return false;
        }

        var record = link.parents('tr');
            
        var original_background_color = record.css('background-color');            
            
        var index = link.attr('data-group-index');
        var group_name = link.attr('data-group-name');

        record.css({'background-color':'yellow'});

        console.log(index);

        $('<div></div>')
            .appendTo('body')
            .dialog(
            {                       
                draggable : true,
                resizable : false,
                modal : true,
                height : 550,                
                width : 450,                
                title : 'Qualifications for ' + group_name,                    
                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/large-ensemble/' . $info['form']->id . '/check-group') }}/' + index,
                                      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 ()
                                  {
                                      $('.save_checks')
                                          .css({'font-size' : '9pt'})
                                          .button()
                                          .click(function()
                                          {                                      
                                              var form = $('form', dialog_object);                                              

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

                        record.css({'background-color':original_background_color});

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

    });
    

    @if ($info['first_view'] or Input::has('first_view'))
        
        var topic = 'first_view';
        var form_id = {{ $info['form']->id }};

        $('<div></div>')
            .appendTo('body')
            .dialog(
            {                       
                draggable : false,
                resizable : false,
                modal : true,
                autoOpen : true,
                height : 800,                
                width : 775,                
                title : 'Notice', 
                dialogClass : 'no-close',                  
                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 some information.\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();
                    }                
            });

    @endif 
     
    // Shake action items
    function shakeActionImages (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);
            shakeActionImages($(this));
        });        
    }

    $('img.action_item').each(function()
    {
        var img = $(this);
        shakeActionImages(img);
    });

    // Remove action items
    $('[data-action-item="select"]').on('change', function ()
    {
        var element = $(this);
        var selected = $(':selected', element);
        var value = selected.val();
        var name = element.attr('name');
        var image = $('img.action_item[data-action-item-for="' + name + '"]');        

        if (value != '')
        {
            image.fadeOut(400, function()
            {
                $(this).remove();
            });
        }
    }).each(function ()
    {
        var element = $(this);
        var selected = $(':selected', element);
        var value = selected.val();
        var name = element.attr('name');
        var image = $('img.action_item[data-action-item-for="' + name + '"]');        

        if (value != '')
        {
            image.remove();            
        }
    });


    /* 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 typed 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/large-ensemble') }}/' + 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);
    }

    $('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);
        }         
    });

    @if (isset($info['print_only']))

        // Disable inputs, selects, links, and buttons
        $('input, select').attr('readonly', 'readonly');
        $('.main_content a')
            .attr('readonly', 'readonly')
            .attr('href', '#')
            .css({'color':'#000000'})
            .click(function (event)
            {
                event.preventDefault();                
            });
        $('.ui-button').button('disable');

        $('.print_button').button('enable');

        $('[readonly="readonly"]').on('focus change click', function(event)
        {
            event.preventDefault();

            $(this).blur();

            return false;
        });

        // Show the print dialog
        window.print();       

    @endif
    
@stop

@section('page_functions')

    @if (Auth::check() and Auth::user()->isOsaaUser())
        <a href="{{ url('/forms/music/large-ensemble/admin') }}" class="admin_button">Admin</a>
    @endif

    <a href="#" class="print_button" style="margin-right: 10px;">Print</a>

    <a href="#" class="help_button">Help</a>

    <a href="{{ url('/forms/music/large-ensemble/' . $info['form']->id . '/delete') }}" class="delete_button">Delete Form</a>

@stop


@section('main_content')    		  

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

    <div class="required_note">
        @if (isset($info['print_only']))
            <span style="background-color: yellow;">This form has been submitted.  You cannot edit this form. Form ID # {{ $info['form']->id }}.</span>
        @else
            <span class="required">*</span> Required fields are indicated with a red asterisk.  Form ID # {{ $info['form']->id }}.
        @endif
    </div>      

    <div class="form_area">
    
        @if (Helpers::strEqual($info['form']->activity, array('CHO')))
            <img src="{{ asset('/images/icons/choir_64px.png') }}" alt="" title="" style="position: absolute; top: -12px;" />   
        @elseif (Helpers::strEqual($info['form']->activity, array('BND')))
            <img src="{{ asset('/images/icons/band_64px.png') }}" alt="" title="" style="position: absolute; top: -12px;" />
        @elseif (Helpers::strEqual($info['form']->activity, array('ORC')))
            <img src="{{ asset('/images/icons/string_orchestra_64px.png') }}" alt="" title="" style="position: absolute; top: -12px;" />
        @endif        

        <h1 style="margin-left: 80px;">{{ Helpers::getActivityName($info['form']->activity) }} Large Ensemble Report Form</h1>

        <br />

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

        {{ Form::open(array('url' => '/forms/music/large-ensemble/' . $info['form']->id . '/submit')) }}

            <div style="float: right; position: absolute; right: 0; top: 2em;">
                
                @if (Auth::check() and Auth::user()->isOsaaUser())
                    <label style="width: auto; color: #A05527; margin-right: 80px;"><input type="checkbox" value="1" name="no_email_groups" id="no_email_groups" style="vertical-align: middle; margin-right: 4px;"/>Do Not Email Groups on {{ (is_null($info['form']->submitted_at)) ? 'Submission' : 'Re-submission' }}</label>
                @endif
                

                <b>Link to this form:</b> <a href="{{ url('/forms/music/large-ensemble/' . $info['form']->id) }}" target="_blank">{{ url('/forms/music/large-ensemble/' . $info['form']->id) }}</a>
            </div>

            @if (is_null($info['form']->submitted_at))

                <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;" />
                    This report form has not yet been submitted.
                    <br class="clear" />
                </div>

            @endif

            <h2>Event Information</h2>

            {{ Form::label('event_name', 'Event Name') }}
            {{ Form::text('event_name',
                          $info['form']->event_name,
                          array('style' => 'width: 400px;',
                                'data-required' => true,
                                'data-autosave' => true,
                                'data-field' => 'event_name',
                                'data-type' => 'string',
                                'data-original' => $info['form']->event_name)) }}

            <div class="label">School Year</div>
            {{ $info['display_year'] }}

            <br /><br />

            {{ Form::label('date', 'Date') }}
            {{ Form::text('date',
                          date('m/d/Y', strtotime($info['form']->date)),
                          array('style' => 'width: 100px;',
                                'data-required' => true,
                                'data-date-picker' => true,
                                'data-autosave' => true,
                                'data-field' => 'date',
                                'data-type' => 'date',
                                'data-original' => date('m/d/Y', strtotime($info['form']->date)))) }}

            {{ Form::label('location', 'Location') }}
            {{ Form::text('location',
                          $info['form']->location->name,
                          array('style' => 'width: 250px;',
                                'data-required' => true,
                                'data-auto-complete' => 'locations',                               
                                'data-autosave' => true,
                                'data-field' => 'location',
                                'data-type' => 'location',
                                'data-reload' => true,                                                              
                                'data-original' => $info['form']->location->name)) }}

            {{ Form::label('activity', 'Activity') }}
            {{ Form::select('activity',
                            $info['activities'],
                            $info['form']->activity,
                            array('style' => 'width: 100px;',
                                  'data-required' => true,
                                  'data-autosave' => true,
                                  'data-field' => 'activity',
                                  'data-type' => 'string',
                                  'data-reload' => true,                                                              
                                  'data-original' => $info['form']->activity)) }}

            <br /><br />

            {{ Form::label('event_type', 'Type') }}
            {{ Form::select('event_type',
                            $info['event_types'],
                            $info['form']->event_type,
                            array('style' => 'width: 200px;',
                                  'data-required' => true,
                                  'data-autosave' => true,
                                  'data-field' => 'event_type',
                                  'data-type' => 'string',
                                  'data-reload' => true,
                                  'data-original' => $info['form']->event_type)) }}


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