@section('page_title')
    {{ $info['school']->short_name }}
@stop

@section('page_sub_title')    
   Manage {{ Session::get('year') }}-{{ substr(intval(Session::get('year')) + 1, 2, 2) }} {{ $info['school']->name }} Staff
@stop

@section('scripts')
    @parent

    <style type="text/css">
    	table.staff {
    		width: 100%;
    		border-collapse: collapse;
    	}

    	table.staff thead th {
    		padding: 4px 2px;
			text-align: left;
    	}    	

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

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

    	#content .group {
    		width: 1010px;
    		height: auto;
    		overflow: hidden;
    		border: 1px solid #cccccc;
    		margin-bottom: 0.5em;
    		padding: 0.5em 0.5em 0.5em 0.5em;
    	}

    	#content .bar {
    		
    		background: #005fa9; /* Old browsers */
			background: -moz-linear-gradient(top,  #005fa9 0%, #1c43a6 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005fa9), color-stop(100%,#1c43a6)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #005fa9 0%,#1c43a6 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #005fa9 0%,#1c43a6 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #005fa9 0%,#1c43a6 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #005fa9 0%,#1c43a6 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005fa9', endColorstr='#1c43a6',GradientType=0 ); /* IE6-9 */

    		position: absolute; 
    		float: left; 
    		z-index: -1; 
    		top: 0; 
    		left: 0; 
    		height: 33px; 
    		width: 1024px;
    	}

    	#content .group .view_state {
    		display: inline-block;
    		width: 20px;
    		height: 16px;
    		background-image: url('{{ asset('/images/icons/bullet_arrow_down.png') }}');
    		background-repeat: no-repeat;
    	}

    	#content .group .title {
    		display: inline-block;
    		font-size: 13pt;
    		color: #ffffff;
    		font-weight: bold;
    		margin-bottom: 0.5em;
    		top: 4px;
    	}

    	#content .group .people {
    		margin-top: 0.5em;
    	}

    	.page_functions {
    		width: auto !important;
    	}


    </style>

@stop

@section('jquery_init')

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

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

	// Standard modifiers
	$('.tooltip').tooltip();
	$('.button').button();	
	$('.button.cancel').button({ icons : { primary : 'ui-icon-circle-close'}});
	$('.button.help').button({ icons : { primary : 'ui-icon-help'}}).css('margin-right', '10px');
	$('.button.download').button({ 'icons' : { 'primary' : 'ui-icon-arrowthickstop-1-s'}}).css({ 'font-size' : '8pt', 'margin-right' : '10px' });

	// Expand All Button
	$('.expand_all_button')
		.button({ 'icons' : { 'primary' : ' ui-icon-triangle-1-s'}})
		.css({ 'font-size' : '8pt', 'margin-right' : '10px' })
		.click(function ()
		{
			$('#content .group').each(function ()
			{				
				var expand = '{{ asset('/images/icons/bullet_arrow_down.png') }}';

				$('.view_state', $(this))
					.css({'background-image' : 'url(' + expand + ')'})
					.attr('data-state', 'collapse');

				$(this).css('height', 'auto');
			})
		});

	// Collapse All Button
	$('.collapse_all_button')
		.button({ 'icons' : { 'primary' : ' ui-icon-triangle-1-e'}})
		.css({ 'font-size' : '8pt', 'margin-right' : '10px'  })
		.click(function ()
		{
			$('#content .group').each(function ()
			{				
				var collapse = '{{ asset('/images/icons/bullet_arrow_right.png') }}';

				$('.view_state', $(this))
					.css({'background-image' : 'url(' + collapse + ')'})
					.attr('data-state', 'collapse');

				$(this).css('height', '1.25em');				
			})
		});
	

	// Manage Alerts Button
	$('.manage_alerts_button')
		.button({ 'icons' : { 'primary' : 'ui-icon-clock'}})
		.css({ 'font-size' : '8pt'})
		.click(function ()
		{
			$('<div></div>')
			    .appendTo('body')			    
			    .dialog(
			    {	      		    
	      			resizable: false,
	      			height: 400,
	      			width: 550,
	      			modal: true,	      			
	      			title: 'Manage Staff Certification Alerts',
			      	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 : 'http://www.osaa.org/schools/{{ $info['school']->id }}/manage-alerts',
          							dataType : 'html'
          						})
          						.done(function (data)
								{
                                	dialog_object.html(data);
                                })
                                .fail(function (jqXHR, status, error)
                                {			                                    	
                                	var response = jqXHR.responseText;
                                	var errorData = $.parseJSON(response);			                                    	
                                	console.log(errorData);
                                	dialog_object.html('<h3 style="margin: 0.5em 0;">' + errorData.error.type + '</h3>' + errorData.error.message + '<br /><br /><span style="font-size: 9pt;">Line ' + errorData.error.line + ' in ' + errorData.error.file);

                                	if (dialog_object.html() == '')
                                	{
                                		dialog_object.html('There was an error.');
                                	}
                                })
                                .complete(function()
                                {
                                	$('.toggle_alerts')
                                	    .click(function(event)
                                	    {
                                	    	var link = $(this);

                                	    	var status = link.attr('data-status');

                                	    	event.preventDefault();

								            $('<div></div>')								                
								                .appendTo('body')
								                .dialog(
								                {                       
								                    dialogClass : 'data_confirm',
								                    draggable : true,
								                    resizable : false,
								                    modal : true,
								                    height : 250,
								                    width : 425,                    
								                    title : 'Confirmation',
								                    buttons: [
								                        {
								                            text : "Yes",
								                            'class' : "float_left",
								                            icons : { primary : 'ui-icon-check'},
								                            click : function()
								                                    {                                                       
								                                        var dialog_object = $(this);

								                                        $('<div><div>')
																            .attr('data-sending', 1)
																            .addClass('ui-widget-overlay ui-front')
																            .appendTo('body');
																          
																        $('<div><div>').appendTo('body')
																            .attr('data-sending', 1)
																            .css('width', '225px')
																            .css('height', '170px')
																            .css('text-align', 'center')
																            .css('padding', '0.5em')
																            .position({my : "center center", at : "center center", of : window})
																            .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-di    buttons')
																            .html('<br />Updating...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait while your school\'s preferences are saved...</div>');

								                                        // Execute the toggle                    
																        var jqxhr = $.ajax(
																            {
																                type : 'POST',
																                url : '/schools/{{ $info['school']->id }}/update-preferences',
																                data : { 'preference' : 'school_staff_certification_alerts',
																                         'property' : 'is_enabled',
																                         'type' : 'BOOL',
																                         'value' : status,
																                         'school_id' : {{ $info['school']->id }} },
																                dataType : 'html'
																            })
																            .done(function (data)
																            {                                                
																                if (status == 1)
																                {
																                	link.html('Turn alerts off');
																                	link.attr('data-status', 0);
																                	$('.schedule_alert').html('<span style="color: #0d581b;">Next scheduled alert: ' + $('.schedule_alert').attr('data-schedule') + '</span>');     
																                }
																                else
																               	{
																               		link.html('Turn alerts on');
																               		link.attr('data-status', 1);
																               		$('.schedule_alert').html('<span style="color: #990000;">Alerts are turned off.</span>');
																                }																                
																            })
																            .fail(function (jqXHR, status, error)
																            {                                                   
																                var response = jqXHR.responseText;
																                var errorData = $.parseJSON(response);
																                //console.log(errorData);
																                alert("There was an error while trying to toggle the alert status.\n\n" + errorData.error.message + "\n\nThis page will be reloaded.");
																                location.reload();
																            })
																            .complete(function ()
																            {
																            	$('[data-sending]').remove();
																            	dialog_object.dialog("close");
																        	});
								                                    }
								                        },
								                        {
								                            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);

								                            if (status == 0)
								                            {
																dialog_object.html('<br />Are you sure you want to turn OFF staff certification alerts?<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">Your school will not be sent any certification alerts.  You can turn alerts back ON from this window in the future.</div>');
								                        	}
								                        	else
								                        	{
								                            	dialog_object.html('<br />Are you sure you want to turn ON staff certification alerts?<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">You can turn alerts ON/OFF from this window in the future.</div>');
								                            }
								                            
								                            $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
								                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%'); 
								                            $('.data_confirm .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');                                     
                                      						$('.data_confirm .ui-widget-content').css('border-color', '#dddddd').css('font-size', '10pt');                                       

								                            $('[data-autofocus="true"]').focus();
								                        },
								                    close : function ()
								                        {
								                            var dialog_object = $(this);
								                            $(dialog_object).remove();
								                        }                
								                });
                                		});


                                	$('.demand_button')
                                	    .button()
                                	    .click(function()
                                	    {
                                	    	var button = $(this);

                                	    	$('<div><div>')
									            .attr('data-sending', 1)
									            .addClass('ui-widget-overlay ui-front')
									            .appendTo('body');
									          
									        $('<div><div>').appendTo('body')
									            .attr('data-sending', 1)
									            .css('width', '225px')
									            .css('height', '170px')
									            .css('text-align', 'center')
									            .css('padding', '0.5em')
									            .position({my : "center center", at : "center center", of : window})
									            .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-di    buttons')
									            .html('<br />Sending...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait while an e-mail is generated...</div>');

									        var url = button.attr('data-href');

									        // Execute link
									        var jqxhr = $.ajax(
									            {
									                type : 'GET',
									                url : url,									                
									                dataType : 'html'
									            })
									            .done(function (data)
									            {                                                
									                if (data == 'success')
									                {
										                $('[data-sending]').remove();

										                $('.demand_status').html('An e-mail was successfully sent.').fadeIn();									                
										                $('.demand_button').button("disable");
										            }
										            else
										           	{
										           		alert("There was an error while trying to send the e-mail.\n\n" + data + "\n\nThis page will be reloaded.");
									                	location.reload();
										            }
									            })
									            .fail(function (jqXHR, status, error)
									            {                                                   
									                var response = jqXHR.responseText;
									                var errorData = $.parseJSON(response);
									                //console.log(errorData);
									                alert("There was an error while trying to send the e-mail.\n\n" + errorData.error.message + "\n\nThis page will be reloaded.");
									                location.reload();
									            });
                                		});
                            	});
				      	}
				});
		});


	// Group Functions
	$('#content .group')
		.addClass('ui-corner-all')
		.each(function ()
		{
			$('.staff:odd', $(this)).css('background-color', '#dedede');
		});



	$('#content .group .title')
		.click(function ()
			{
				var collapse = '{{ asset('/images/icons/bullet_arrow_right.png') }}';
				var expand = '{{ asset('/images/icons/bullet_arrow_down.png') }}';

				var group = $(this).parents('.group');

				var view_state = $('.view_state', $(group));

				if ($(view_state).attr('data-state') == 'expand')
				{
					$(view_state)
						.css({'background-image' : 'url(' + collapse + ')'})
						.attr('data-state', 'collapse');

					$(group).css('height', '1.25em');					
				}
				else
				{
					$(view_state)
						.css({'background-image' : 'url(' + expand + ')'})
						.attr('data-state', 'expand');

					$(group).css('height', 'auto');					
				}
			})
			.hover(function()
			{
				$(this).css('cursor', 'pointer');
			}, function ()
			{
				$(this).css('cursor', 'auto');
			});

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

			$('tbody tr:visible', $(this)).each(function ()
			{
				if (i % 2 == 0)
				{
					$(this).addClass('odd');
				}
				else
				{
					$(this).removeClass('odd');
				}
				i = i + 1;
			});		
		});
	}	
	colorRows();
	
	
	// 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);
		})
	});


	$('#training_course_help')
		.click(function(event)
		{
			event.preventDefault();

			$('<div></div>')
			    .appendTo('body')			    
			    .dialog(
			    {	      		    
	      			resizable: false,
	      			height: 600,
	      			width: 700,
	      			modal: false,	      			
	      			title: 'Training Course Information',
			      	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 : 'http://www.osaa.org/help/training-courses?ajax=true',
				          							dataType : 'html'
				          						})
				          						.done(function (data)
												{
			                                    	dialog_object.html(data);
			                                        
			                                    }).fail(function (jqXHR, status, error)
			                                    {			                                    	
			                                    	var response = jqXHR.responseText;
			                                    	var errorData = $.parseJSON(response);			                                    	
			                                    	console.log(errorData);
			                                    	dialog_object.html('<h3 style="margin: 0.5em 0;">' + errorData.error.type + '</h3>' + errorData.error.message + '<br /><br /><span style="font-size: 9pt;">Line ' + errorData.error.line + ' in ' + errorData.error.file);

			                                    	if (dialog_object.html() == '')
			                                    	{
			                                    		dialog_object.html('There was an error.');
			                                    	}
			                                    });		                
				      	}
				});
		});

	$('.edit_staff_button')
		.button({ text : false,
		          icons : { primary : 'ui-icon-pencil'}})
		.css({'width' : '16px',
		      'height' : '16px',
		      'position' : 'absolute',
		      'right' : '10px',
		  	  'top' : '0'})
		.tooltip()
		.click(function ()
		{
			var button_obj = $(this);
			var ap_staff_id = $(button_obj).attr('data-ap-staff-id');						

			$('<div></div>')
			    .appendTo('body')			    
			    .dialog(
			    {	      			
	      			resizable: false,
	      			height: 560,
	      			width: 725,
	      			modal: true,	      			
	      			title: 'Edit Contact Information',
	      			buttons: [
	      				{
	      					text : "Save Changes",
	      		   			'class' : "float_left",
	      		   			icons : { primary : 'ui-icon-disk'},
	      		   		 	click : function()
	      		   		  		  {                   							          
							          

							          $('form', $(this)).submit();

							          $(this).dialog("close");							          

							          return true;
							       }
						},
						{
	      					text : "Replace this Person",
	      		   			'class' : "float_left",
	      		   			'style' : "margin-left: 35px;",
	      		   			icons : { primary : 'ui-icon-closethick'},
	      		   		 	click : function()
	      		   		  		    {                   
							          	// Confirm the user's choice
							          	var result = confirm("Are you sure you want to retire this current person's contact information?\n\nThis will remove the person from his/her current position.  Once this person is removed, you will be able to add a new staff contact as a replacement.");

							          	if (result == true)
							          	{
							            	// Create a flag to retire this staff
							            	var input = $('<input>')
							            				    .attr('type', 'hidden')
							            				    .attr('name', 'replace')
							            				    .val('true');

							            	// Append the flag to the form submission
							            	$('form', $(this)).append($(input));

							            	// Submit the form
							            	$('form', $(this)).submit();

									        $(this).dialog("close");

									        return true;
							            }
							            else
							           	{
							           		return false;
							           	}
							          
							        }
						},						
						{
							text : "Cancel",
							'class' : "float_right",
							'autofocus' : true,
							icons : { primary : 'ui-icon-cancel'},
							click : function()
									{
							        	$(this).dialog( "close" );
							        	$(this).remove();
							          	return false;
							        }
						}
					],
			      	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 : 'http://www.osaa.org/schools/activity-staff/' + ap_staff_id + '/edit',
				          							dataType : 'html'
				          						})
				          						.done(function (data)
												{
			                                    	dialog_object.html(data);
			                                        
			                                    }).fail(function (jqXHR, status, error)
			                                    {			                                    	
			                                    	var response = jqXHR.responseText;
			                                    	var errorData = $.parseJSON(response);			                                    	
			                                    	console.log(errorData);
			                                    	dialog_object.html('<h3 style="margin: 0.5em 0;">' + errorData.error.type + '</h3>' + errorData.error.message + '<br /><br /><span style="font-size: 9pt;">Line ' + errorData.error.line + ' in ' + errorData.error.file);

			                                    	if (dialog_object.html() == '')
			                                    	{
			                                    		dialog_object.html('There was an error.');
			                                    	}
			                                    });	
			                			                
			                $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
			          		$('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');	

			          		$(this).parent().find('[autofocus]').focus();		      
				      	}
				});
		});

	$('.course_record')
		.hover(function()
		{
			$(this).css({'border-color' : '#ff0000',
						 'cursor' : 'pointer'});

		},
		function ()
		{
			$(this).css({'border-color' : 'transparent',
						 'cursor' : 'auto'});
		})
		.click(function ()
		{
			var button_obj = $(this);
			var record_id = $(button_obj).attr('data-record-id');
			var staff_id = $(button_obj).attr('data-staff-id');
			var course_slug = $(button_obj).attr('data-course-slug');

			$('<div></div>')
			    .appendTo('body')			    
			    .dialog(
			    {	      			
	      			resizable: false,
	      			height: 525,
	      			width: 700,
	      			modal: true,	      			
	      			title: 'Edit Training Course Record',
	      			buttons: [
	      				{
	      					text : "Save Changes",
	      		   			'class' : "float_left",
	      		   			icons : { primary : 'ui-icon-disk'},
	      		   		 	click : function()
	      		   		  		  {                   							          
							          var completion_date = $('input[name="completion_date"]').val();

							          if (completion_date == '')
							          {
							              alert('You must provide a completion date in MM/DD/YYYY format.');
							              return false;
							      	  }

							          $('form', $(this)).submit();

							          $(this).dialog("close");							          

							          return true;
							       }
						},	
						{
	      					text : "Remove Certification Record",
	      		   			'class' : "float_left",
	      		   			'style' : "margin-left: 35px;",
	      		   			icons : { primary : 'ui-icon-closethick'},
	      		   		 	click : function()
	      		   		  		    {                   
							          	// Confirm the user's choice
							          	var result = confirm("Are you sure you want to remove this training course certification record?");

							          	if (result == true)
							          	{
							            	// Create a flag to retire this staff
							            	var input = $('<input>')
							            				    .attr('type', 'hidden')
							            				    .attr('name', 'remove')
							            				    .val('true');

							            	// Append the flag to the form submission
							            	$('form', $(this)).append($(input));

							            	// Submit the form
							            	$('form', $(this)).submit();

									        $(this).dialog("close");

									        return true;
							            }
							            else
							           	{
							           		return false;
							           	}
							          
							        }
						},											
						{
							text : "Cancel",
							'class' : "float_right",
							'autofocus' : true,
							icons : { primary : 'ui-icon-cancel'},
							click : function()
									{
							        	$(this).dialog( "close" );
							        	$(this).remove();
							          	return false;
							        }
						}
					],
			      	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 : 'http://www.osaa.org/schools/course-records/edit',
				          							data : { 'record_id' : record_id,
				          							         'staff_id' : staff_id,
				          									 'course_slug' : course_slug},
				          							dataType : 'html'
				          						})
				          						.done(function (data)
												{
			                                    	dialog_object.html(data);
			                                    	$('input[data-datepicker="true"]', dialog_object)
			          									.datepicker({dateFormat : 'm/d/yy',changeYear:true});
			                                        
			                                    }).fail(function (jqXHR, status, error)
			                                    {			                                    	
			                                    	var response = jqXHR.responseText;
			                                    	var errorData = $.parseJSON(response);			                                    	
			                                    	console.log(errorData);
			                                    	dialog_object.html('<h3 style="margin: 0.5em 0;">' + errorData.error.type + '</h3>' + errorData.error.message + '<br /><br /><span style="font-size: 9pt;">Line ' + errorData.error.line + ' in ' + errorData.error.file);

			                                    	if (dialog_object.html() == '')
			                                    	{
			                                    		dialog_object.html('There was an error.');
			                                    	}
			                                    });	
			                			                
			                $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
			          		$('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');				          		

			          		$(this).parent().find('[autofocus]').focus();		      
				      	}
				});
		});

	// Add New Staff Button
	$('.add_new')
		.button({ 'icons' : { 'primary' : ' ui-icon-plusthick'}})
		.css({ 'font-size' : '8pt', 'margin-right' : '10px' })
		.click(function ()
		{
			var button_obj = $(this);
			var school_id = $(button_obj).attr('data-school-id');

			$('<div></div>')
			    .appendTo('body')			    
			    .dialog(
			    {	      			
	      			resizable: false,
	      			height: 525,
	      			width: 700,
	      			modal: true,	      			
	      			title: 'Add New Staff',
	      			buttons: [
	      				{
	      					text : "Save Changes",
	      		   			'class' : "float_left",
	      		   			icons : { primary : 'ui-icon-disk'},
	      		   		 	click : function()
	      		   		  		  {                   							          
							          if ($('select[name="school_staff_list"]').val() == '')
							          {

								          var name_prefix = ($('input[name="name_prefix"]').val()).trim();
								          var first_name = ($('input[name="first_name"]').val()).trim();
								          var middle_name = ($('input[name="middle_name"]').val()).trim();
								          var last_name = ($('input[name="last_name"]').val()).trim();
								          var name_suffix = ($('input[name="name_suffix"]').val()).trim();								          

								          var name = '';

								          if (name_prefix != '')
								          {
								              name = name_prefix + ' ';
								      	  }

								      	  name = name + first_name + ' ';

								      	  if (middle_name != '')
								      	  {
								      	      name = name + middle_name + ' ';
								      	  }

								      	  name = name + last_name;

								      	  if (name_suffix != '')
								      	  {
								      	      name = name + ' ' + name_suffix;
								      	  }

								          // Confirm the user's choice
							          	  var result = confirm("Are you sure you want to create a new contact with this name?\n\n" + name + "\n\nOnce you create this contact, the name cannot be changed.");
							          }
							          else
							          {
							              var result = true;
							          }

						          	  if (result == true)
						          	  {
						            	  

						            	  $('form', $(this)).submit(); 

								          $(this).dialog("close");

								          return true;
						              }
						              else
						           	  {
						           		  return false;
						           	  }
							      }
						},												
						{
							text : "Cancel",
							'class' : "float_right",
							'autofocus' : true,
							icons : { primary : 'ui-icon-cancel'},
							click : function()
									{
							        	$(this).dialog( "close" );
							        	$(this).remove();
							          	return false;
							        }
						}
					],
			      	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 : 'http://www.osaa.org/schools/' + school_id + '/activity-staff/new',
				          							dataType : 'html'
				          						})
				          						.done(function (data)
												{
			                                    	dialog_object.html(data);

			                                    	// DEBUG
			                                    	//console.log(staff_info);			                                    	

			                                    	function nameSelect(id)
			                                    	{
			                                    		if (id == 'RESET')
			                                    		{
			                                    			// Clear out any residual staff information
					                                    	$('input[name="name_prefix"]')
					                                    		.val('')
					                                    		.css({'color' : '#000000'})
					                                    		.removeAttr('readonly');
					                                    	
					                                    	$('input[name="first_name"]')
					                                    		.val('')
					                                    		.css({'color' : '#000000'})
					                                    		.removeAttr('readonly');

					                                    	$('input[name="middle_name"]')
					                                    		.val('')
					                                    		.css({'color' : '#000000'})
					                                    		.removeAttr('readonly');

					                                    	$('input[name="last_name"]')
					                                    		.val('')
					                                    		.css({'color' : '#000000'})
					                                    		.removeAttr('readonly');

					                                    	$('input[name="name_suffix"]')
					                                    		.val('')
					                                    		.css({'color' : '#000000'})
					                                    		.removeAttr('readonly');

					                                    	$('select[name="staff_type"]')
					                                    		.val('')
					                                    		.css({'color' : '#000000'})
					                                    		.removeAttr('disabled');

					                                    	$('input[name="email"]')
					                                    		.val('')
					                                    		.css({'color' : '#000000'})
					                                    		.removeAttr('readonly');

					                                    	$('input[name="work_phone"]')
					                                    		.val('')
					                                    		.css({'color' : '#000000'})
					                                    		.removeAttr('readonly');

					                                    	$('input[name="mobile_phone"]')
					                                    		.val('')
					                                    		.css({'color' : '#000000'})
					                                    		.removeAttr('readonly');
			                                    		}
			                                    		else
			                                    		{
			                                    			// Find this staff's information
			                                    			var staff = null;
			                                    			for (var i = 0; i < staff_info.length; i++)
			                                    			{
			                                    				if (staff_info[i].id == id)
			                                    				{
			                                    					var staff = staff_info[i];
			                                    				}
			                                    			}

			                                    			// DEBUG
					                                    	//console.log(staff);

					                                    	// Ensure a staff was found
					                                    	if (staff != null)
					                                    	{
						                                    	// Load this staff's information
						                                    	$('input[name="name_prefix"]')
						                                    		.val(staff.name_prefix)
						                                    		.css({'color' : '#7d7b7d'})
						                                    		.attr('readonly', 'readonly');
						                                    	
						                                    	$('input[name="first_name"]')
						                                    		.val(staff.first_name)
						                                    		.css({'color' : '#7d7b7d'})
						                                    		.attr('readonly', 'readonly');

						                                    	$('input[name="middle_name"]')
						                                    		.val(staff.middle_name)
						                                    		.css({'color' : '#7d7b7d'})
						                                    		.attr('readonly', 'readonly');

						                                    	$('input[name="last_name"]')
						                                    		.val(staff.last_name)
						                                    		.css({'color' : '#7d7b7d'})
						                                    		.attr('readonly', 'readonly');

						                                    	$('input[name="name_suffix"]')
						                                    		.val(staff.name_suffix)
						                                    		.css({'color' : '#7d7b7d'})
						                                    		.attr('readonly', 'readonly');

						                                    	$('select[name="staff_type"]')
						                                    		.val(staff.staff_type)
						                                    		.css({'color' : '#7d7b7d'})
						                                    		.attr('disabled', 'disabled');

						                                    	$('input[name="email"]')
						                                    		.val(staff.email)
						                                    		.css({'color' : '#7d7b7d'})
						                                    		.attr('readonly', 'readonly');

						                                    	$('input[name="work_phone"]')
						                                    		.val(staff.work_phone)
						                                    		.css({'color' : '#7d7b7d'})
						                                    		.attr('readonly', 'readonly');

						                                    	$('input[name="mobile_phone"]')
						                                    		.val(staff.mobile_phone)
						                                    		.css({'color' : '#7d7b7d'})
						                                    		.attr('readonly', 'readonly');
						                                    }
			                                    		}
			                                    	}

			                                    	$('.clear_existing_staff_info')
									          			.button()
									          			.css({'font-size':'8pt'})
									          			.click(function ()
									          			{
									          				$('select[name="school_staff_list"]').val('');

									          				nameSelect('RESET');
									          			});
													
													$('.clear_existing_staff_info').button('disable');

													$('select[name="school_staff_list"]').on('change', function ()
													{
														if ($(this).val() != '')
														{
															$('.clear_existing_staff_info').button('enable');

															nameSelect($(this).val());
														}
														else
														{
															$('.clear_existing_staff_info').button('disable');

															nameSelect('RESET');
														}
													});

			                                        
			                                    }).fail(function (jqXHR, status, error)
			                                    {			                                    	
			                                    	var response = jqXHR.responseText;
			                                    	var errorData = $.parseJSON(response);			                                    	
			                                    	console.log(errorData);
			                                    	dialog_object.html('<h3 style="margin: 0.5em 0;">' + errorData.error.type + '</h3>' + errorData.error.message + '<br /><br /><span style="font-size: 9pt;">Line ' + errorData.error.line + ' in ' + errorData.error.file);

			                                    	if (dialog_object.html() == '')
			                                    	{
			                                    		dialog_object.html('There was an error.');
			                                    	}
			                                    });	
			                			                
			                $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
			          		$('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');	

			          		$(this).parent().find('[autofocus]').focus();

			          		
				      	}
				});
		});	

@stop

@section('page_functions')  

	<a href="{{ url('/schools/' . $info['school']->id . '/download-activity-program-staff') }}" class="button download tooltip" style="font-size:9pt;" target="_blank" title="Download All Staff to a File">Download</a>

    <a href="{{ asset('/docs/osaainfo/13-14OSAAAccountInstructions.pdf') }}" target="_blank" class="button help tooltip" style="font-size:9pt;" title="Get Help">Help</a>

    <a href="{{ url('/schools/' . $info['school']->id) }}" class="button cancel tooltip" style="font-size:9pt;" title="Discard all unsaved changes and return to this school's information page.">Close</a>    

@stop


@section('main_content')    		

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

	<div style="float: left; position: relative; font-size: 8pt; top: -3px;">
		<img src="{{ asset('/images/icons/hidden_text_16px.png') }}" style="position: absolute; top: 0px;" />
		<div style="display: inline-block; width: 20px;"></div>Not publicly visible information<br />
		<img src="{{ asset('/images/icons/visible_text_16px.png') }}" style="position: absolute; top: 17px;" />
		<div style="display: inline-block; width: 20px;"></div>Publicly visible Information
	</div>	

	<div style="float: left; position: relative; font-size: 8pt; top: -3px; margin-left: 20px;">		
		<a href="#" id="training_course_help">Training courses, abbreviations, icons?</a>
	</div>

	{{-- Expand/Collapse All Buttons --}}	
	<div style="float: right; font-size: 9pt; position: absolute; right: 0;">		
		<div class="add_new" data-school-id="{{ $info['school']->id }}">Add New Staff</div>
		<div class="expand_all_button">Expand All</div>
		<div class="collapse_all_button">Collapse All</div>
		<div class="manage_alerts_button">Alerts</div>
	</div>	

	<br /><br />

	@if (count($info['ad_staff_objects']) > 0)
		<div class="group" style="position: relative;">

			<div class="bar"></div>
			<div class="view_state" data-state="expand"></div>
			<div class="title">Athletic Director</div>
				
			<div class="people">

				@foreach ($info['ad_staff_objects'] as $staff)
			
					<div class="staff" style="height: 36px; padding: 2px 0 0 4px; font-size: 9pt; line-height: 9pt;">

						<div style="float: left; width: 100px; min-height: 1px;">
							<b>Athletic<br />Director</b>									
						</div>

						<div style="float: left; width: 295px; min-height: 1px;">
							<div style="position: relative;">
								{{ $staff->school_staff->getDisplayName() }}										
							</div>
							<div style="margin-top: 0.25em; position: relative;">
								<br />
<b>Fatal error</b>:  Class 'Helpers' not found in <b>/home/osaa/web_app/dev/app/views/schools/manage_staff_OLD.blade.php</b> on line <b>1138</b><br />