@section('page_title')
    OSAA - Officials
@stop

@section('page_sub_title')    
   OSAA Officials Contracts
@stop

@section('scripts')
    @parent

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

    <style type="text/css">

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

        .page_functions {
            padding-top: 2px !important;
        }

        h3 {
            color: #990000 !important;
        }  

        .odd {
            background-color: #dedede;
        }

        .tooltip {
            font-size: 9pt;
        }

        img.certification_required {
            vertical-align: middle;
        }

        .ui-tabs-vertical { width: 100%; }
        .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 14em;}
        .ui-tabs-vertical .ui-tabs-nav li {clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0;}
        .ui-tabs-vertical .ui-tabs-nav li a { display:block; width: 144px;}
        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; margin-bottom: 0.2em;}
        .ui-tabs-vertical .ui-tabs-panel { padding: 0 0.5em 1em 0.5em; float: right; width: 80%;}

        ul.list_instructions li,
        ol.list_instructions li {
            margin-bottom: 1em;
        }


        /* Dialog Box */
        .dialog_box {
            font-size: 10pt;
            padding-top: 0.5em;
            overflow: hidden;
        }

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

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

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

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

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

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

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

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

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

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

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

        .success_note {
            position: absolute;
            bottom: 30px;
            left: 0;
            text-align: center;
            padding: 0.25em;
            border: 1px solid #0d581b;
            background-color: #b0ffbe;
            width: 708px;
            height: 1em;
        }

    </style>

@stop

@section('jquery_init')

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

	$('.button').button();    

    $('a[data-jump-tab]').click(function(event)
    {
        event.preventDefault();

        var link = $(this);

        var target_tab_id = link.attr('data-jump-tab');
        activateTab(target_tab_id, '#content');
    });

	$('.tabs').tabs({
        beforeActivate : function (event, ui)
        {
            if (ui.newTab.is('[data-escape]'))
            {
                event.preventDefault();
                window.location = ui.newTab.attr('data-escape');                
            }   
        }
    });   


    /*
     * Tab activation and element focus
     */
    function activateTab(target_tab_id, focus)
    {
        var target_tab = $('.tabs ul:first li a[href="#' + target_tab_id + '"]');
        var target_tab_index = target_tab.attr('data-tab-order');

        $('.tabs').tabs('option', 'active', target_tab_index);

        if (focus)
        {
            focusOnElement($(focus));
        }
    }    

    @if (!Helpers::strIsEmpty($info['tab']))
        var anchor = "{{ $info['tab'] }}";        
    @else
        var anchor = window.location.hash.substring(1);
    @endif

    var focus = false;
    
    if (anchor)
    {
        activateTab(anchor, false);
        focus = '#content';
    }    

    @if (!Helpers::strIsEmpty($info['focus']))
        focus = "#{{ Session::get('focus') }}";        
    @endif

    function focusOnElement(focus_element)
    {        
        var top = focus_element.offset().top - 45;
        setTimeout(function() {                                
            $('html, body').scrollTop(top);
        }, 100);        
    }   

    if (focus)
    {
        focusOnElement($(focus));  
    }

    // Table row highlighter
    function colorRows ()
    {       
        $('table[data-color-rows]').each(function ()
        {
            var i = 0;
            var table = $(this);

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


@stop

@section('page_functions')
    
    <a href="http://osaa.arbitersports.com" target="_blank" style="" class="no_print">
        <img src="{{ asset('images/icons/central_hub_button.png')}}" alt="" title="" />    
    </a>  

@stop


@section('main_content')    

    {{-- Tabbed Content Holder --}}
    <div class="tabs awards">
        
        {{-- Tab List --}}
        <ul style="padding-left:5px; font-size:9pt;">            
            @foreach ($info['sports'] as $index => $sport)
                <li><a href="#{{ $sport }}" data-tab-order="{{ $index }}">{{ ucfirst($sport) }}</a></li>
            @endforeach
        </ul>
        {{-- End Tab List --}}
  

        {{-- Sport Tabs --}}
        @foreach ($info['sports'] as $index => $sport)    
            <div id="{{ $sport }}">
                
                <h1>{{ ucfirst($sport) }}</h1>

                <br class="clear" />

            </div>        
        @endforeach
        {{-- End of Sports Tabs --}}


        


    </div>
    {{-- End Tabbed Content Holder --}}

    
	
@stop