@section('page_title')
    OSAA - Heat Index
@stop


@section('page_sub_title')
   OSAA Heat Index Calculator, Notifications, and Policies
@stop

@section('scripts')
    @parent


@stop

@section('jquery_init')
    $('.tabs').tabs();

    $('#subscribeToNotifications')
        .click(function()
        {
            $('#subscriptionArea').slideDown();
            $('#subscribe_place').focus();
            $('#subscribe_place').val($('#place').val())
            $('#subscribe_place').blur();
        });

    $('button, input[type=submit]').button();
    $('.tooltip').tooltip();

    $('#subscribe-heat-index input[type=submit]').click(function(){

    });

    $('[placeholder]').focus(function()
    {
        var input = $(this);
        if (input.val() == input.attr('placeholder'))
        {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function()
    {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder'))
        {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();

    $('[placeholder]').parents('form').submit(function()
    {
        $(this).find('[placeholder]').each(function()
        {
            var input = $(this);
            if (input.val() == input.attr('placeholder'))
            {
                input.val('');
            }
        })
    });

    @if (isset ($weather))
        $('#temperature_bar').progressbar({max   : 5,
                                           value : {{ $weather['category'] }}});

        $('#max_temperature_bar').progressbar({max   : 5,
                                               value : {{ $weather['max_category'] }}});



        $('#temperature_bar .ui-progressbar-value').css({'background' : '{{ $weather['bar_color'] }}'});
        $('#max_temperature_bar .ui-progressbar-value').css({'background' : '{{ $weather['max_bar_color'] }}'});

        $('.recommendation').tooltip();
    @endif
@stop


@section('page_functions')

@stop


@section('main_content')


    <div class="tabs heat_index">
        <ul style="padding-left:5px;">
            <li><a href="#tabs-1">Heat Index Calculator</a></li>
            <li><a href="#tabs-2">Practice Policies</a></li>
            <li><a href="#tabs-3">How It Works</a></li>
        </ul>

        <div id="tabs-1">
            <h1>Heat Index Calculator</h1>
            <p>
                Enter your zip code or a city, state in the field below.
            </p>

            {{ Form::open(array('url' => url('/dev/heat-index'), 'class' => 'login', 'id' => 'heat-index')) }}


                @if (Session::has('errors'))
                    <div class="error ui-state-error"><span class="ui-icon ui-icon-alert box_icon"></span>@foreach ($errors->all() as $error){{ $error }} @endforeach</div>
                @endif


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


                        {{ Form::label('place', 'Location', array('class' => 'input_label', 'style' => 'width:150px;')) }}

                        {{ Form::text('place', null, array('style' => 'width:200px;'))}}


                    </div>



                    <div class="half">

                        {{ Form::submit('Calculate Heat Index', array('class' => 'submit')) }}

                        {{ Form::button('Subscribe to Notifications', array('id' => 'subscribeToNotifications')) }}

                    </div>

                </div>



            {{ Form::close() }}



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



            @if (isset ($output))

                <pre>

                    <b>Output:</b><br>

                    NULL

                </pre>

            @endif



            @if (isset ($subscription_result))
                <div id="subscriptionResult">
                    <div class="ui-state-highlight ui-corner-all" style="padding: 0.5em 1em;">
                        <span class="ui-icon ui-icon-info" style="float:left;"></span>
                        {{ $subscription_result }}
                    </div>

                    @if (isset ($input))

                        <pre>
                            NULL
                        </pre>
                    @endif
                </div>

            @endif



            @if (isset($input))
                <div id="subscriptionArea">
            @else
                <div id="subscriptionArea" style="display:none">
            @endif

                <h2>OSAA Heat Index Notifications</h2>

                
                <h3 style="color: #990000;">What Is a Notification</h3>
                <p>
                    An OSAA Heat Index Notification is generated for areas around Oregon where the forecasted high temperature could indicate a high heat index that would require practice modifications.  Notifications are sent out at 10:30 AM every day via e-mail and SMS to subscribers.  Only those areas that have a forecasted high heat index of 95, or higher, receive alerts.
                </p>

                <p>
                    Schools are still bound by OSAA rule to use the Heat Index Calculator within one hour of the start of practice to determine the heat index for their area.  OSAA Heat Index Notifications only alert subscribers to the likelihood that their area may have a high heat index and servers as a reminder of this rule, not a replacement.
                </p>

                <p>
                    <b>Note:</b> You must be logged in to your OSAA user account in order to subscribe to notifications.
                </p>

                @if (!Auth::check())
                    </p>Please <a href="{{ url('/account') }}?redirect=/dev/heat-index">log in</a> to subscribe.</p>
                @else
                
                <h3 style="color: #990000;">Subscribe</h3>
                <p>
                    Use this form to subscribe and receive daily OSAA Heat Index Notifications.
                </p>
                <p>
                    Type in your practice location's zip-code and select to receive alerts by e-mail and/or text message (SMS).  If you subscribe to receive SMS alerts, your carrier's data rates may apply.
                </p>


                    {{ Form::open(array('url' => url('/dev/subscribe-heat-index'), 'class' => 'login', 'id' => 'subscribe-heat-index')) }}


                        <div class="full">

                            <div class="quarter">

                                {{ Form::label('subscribe_place',
                                               'Location',
                                               array('class' => 'input_label',
                                                     'style' => 'width: 150px;')) }}

                            </div>

                            <div class="half">

                                {{ Form::text('subscribe_place',
                                              null,
                                              array('style' => 'width: 200px;',
                                              'placeholder' => 'zip-code')) }}

                            </div>

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

                            <div class="quarter">

                                {{ Form::label('is_notify_email', 'Notify by E-mail', array('class' => 'input_label', 'style' => 'width:150px;')) }}

                            </div>

                            <div class="half">

                                {{ Form::checkbox('is_notify_email', 'true', null)}}

                                {{ Form::email('email', Auth::user()->email, array('style' => 'width:200px;', 'disabled'=>'true'))}}

                            </div>



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

                            <div class="quarter">

                                {{ Form::label('is_notify_sms', 'Notify by SMS', array('class' => 'input_label', 'style' => 'width:150px;')) }}

                            </div>

                            <div class="half">

                                {{ Form::checkbox('is_notify_sms', 'true', null)}}

                                {{ Form::text('mobile', Auth::user()->getPhoneNumbers('M'), array('style' => 'width:120px;', 'class' => 'tooltip', 'title' => 'If you change this number here, we will remember it on your OSAA account.', 'placeholder' => 'mobile number'))}}

                                {{Form::select('carrier', array_merge(array('Select your carrier'), PhoneCarrier::all()->lists('name')));}}

                            </div>





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

                            <div class="third" style="margin-left: 174px">

                                {{ Form::submit('Subscribe', array('class' => 'submit')) }}

                            </div>

                        </div>



                    {{ Form::close() }}

                @endif

            </div>





            @if (isset ($weather))

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



                <h2>{{ $weather['title'] }}</h2>



                <div class="columns">

                    <div class="fourth">

                        <div class="weather_label">Temp</div>

                        <div class="weather_value">{{ $weather['temp'] }} &#176;F</div>

                    </div>



                    <div class="fourth">

                        <div class="weather_label">Forecast High</div>

                        <div class="weather_value">{{ $weather['high'] }} &#176;F</div>

                    </div>



                    <div class="fourth">

                        <div class="weather_label">Humidity</div>

                        <div class="weather_value">{{ $weather['humidity'] }} %</div>

                    </div>

                </div>



                <div class="weather_extra">

                    <div>{{ $weather['timestamp'] }}</div>



                    <br />



                    <div class="small gray note" style="display:inline-block; margin-right:25px;">Sunrise: {{ $weather['sunrise'] }}</div>

                    <div class="small gray note" style="display:inline-block;">Sunset: {{ $weather['sunset'] }}</div>

                </div>



                <br class="clear" />



                <div class="columns">

                    <div class="half">

                        <h2>Current</h2>

                        <div id="temperature_bar" style="height:8px;"></div>

                        <div class="bar_marker @if ($weather['category'] == 1) black @endif">normal</div>

                        <div class="bar_marker @if ($weather['category'] == 2) black @endif">notice</div>

                        <div class="bar_marker @if ($weather['category'] == 3) black @endif">caution</div>

                        <div class="bar_marker @if ($weather['category'] == 4) black @endif">warning</div>

                        <div class="bar_marker @if ($weather['category'] == 5) black @endif">danger</div>



                        <div class="weather_index">

                            <div class="heat_index_value">Heat Index</div>

                            {{ $weather['heat_index'] }}

                        </div>



                        @if ($weather['category'] == 1)

                            <img src="{{ asset('images/icons/max_5_hours_48px.png') }}" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />

                            <img src="{{ asset('images/icons/drink_water_48px.png') }}" class="recommendation" alt="" title="Provide ample amounts of water." />



                            <h3 style="color:{{ $weather['bar_color'] }};">Normal</h3>



                            <ul>

                                <li>Maximum of 5 hours of practice today.</li>

                                <li>Provide ample amounts of water.</li>

                            </ul>



                        @endif



                        @if ($weather['category'] == 2)

                            <img src="{{ asset('images/icons/max_5_hours_48px.png') }}" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />

                            <img src="{{ asset('images/icons/drink_water_48px.png') }}" class="recommendation" alt="" title="Water should always be available and athletes should be able to take in as must water as they desire." />



                            <h3 style="color:{{ $weather['bar_color'] }};">Notice</h3>



                            <ul>

                                <li>Maximum of 5 hours of practice today.</li>

                                <li>Provide ample amounts of water.</li>

                                <li>Water should always be available and athletes should be able to take in as much water as they desire.</li>

                                <li>Watch/monitor athletes for necessary action.</li>

                            </ul>

                        @endif



                        @if ($weather['category'] == 3)

                            <img src="{{ asset('images/icons/max_5_hours_48px.png') }}" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />

                            <img src="{{ asset('images/icons/drink_water_48px.png') }}" class="recommendation" alt="" title="Water should always be available and athletes should be able to take in as must water as they desire." />

                            <img src="{{ asset('images/icons/recovery_48px.png') }}" class="recommendation" alt="" title="Practices limited to 3 hours maximum.  Mandatory minimum 3 hour recovery period between practices." />

                            <img src="{{ asset('images/icons/delay_48px.png') }}" class="recommendation" alt="" title="Consider postponing practice to later in the day." />



                            <h3>Caution</h3>



                            <ul>

                                <li>Maximum of 5 hours of practice today.</li>

                                <li>OSAA Recommendation:  Consider postponing practice to later in the day.</li>

                                <li>Practice length a maximum of 3 hours.</li>

                                <li>Mandatory 3 hour recovery period between practices.</li>

                                <li>Contact sports and activities with additional equipment - Helmets and other possible equipment removed if not involved in contact or necessary for safety.</li>

                                <li>Provide ample amounts of water.</li>

                                <li>Water should always be available and athletes should be able to take in as much water as they desire.</li>

                                <li>Watch/monitor athletes for necessary action.</li>

                            </ul>

                        @endif



                        @if ($weather['category'] == 4)

                            <img src="{{ asset('images/icons/max_5_hours_48px.png') }}" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />

                            <img src="{{ asset('images/icons/drink_water_48px.png') }}" class="recommendation" alt="" title="Water should always be available and athletes should be able to take in as must water as they desire." />

                            <img src="{{ asset('images/icons/recovery_48px.png') }}" class="recommendation" alt="" title="Practices limited to 3 hours maximum.  Mandatory minimum 3 hour recovery period between practices." />

                            <img src="{{ asset('images/icons/alert_delay_48px.png') }}" class="recommendation" alt="" title="Highly recommended to postpone practice to a later time in the day." />



                            <h3 style="color:{{ $weather['bar_color'] }};">Warning</h3>

                            <ul>

                                <li>Maximum of 5 hours of practice today.</li>

                                <li>OSAA Recommendation:  Postpone practice to later in the day.</li>

                                <li>Practice length a maximum of 3 hours.</li>

                                <li>Mandatory 3 hour recovery period between practices.</li>

                                <li>Alter uniform by removing items if possible - Allow for changes to dry t-shirts and shorts.</li>

                                <li>Contact sports and activities with additional equipment - Helmets and other possible equipment removed if not involved in contact or necessary for safety.</li>

                                <li>Reduce time of planned outside activity as well as indoor activity if air conditioning is unavailable.</li>

                                <li>Provide ample amounts of water.</li>

                                <li>Water should always be available and athletes should be able to take in as much water as they desire.</li>

                                <li>Watch/monitor athletes for necessary action.</li>

                            </ul>

                        @endif



                        @if ($weather['category'] == 5)

                            <img src="{{ asset('images/icons/no_practice_48px.png') }}" class="recommendation" alt="" title="Stop all outside activities." />



                            <h3 style="color:{{ $weather['bar_color'] }};">Danger</h3>



                            <ul>

                                <li>OSAA Recommendation:  Stop all outside activity in practice and/or play, and stop all inside activity if air conditioning is unavailable.</li>

                            </ul>

                        @endif



                    </div>



                    <div class="half">

                        <h2>Forecast</h2>

                        <div id="max_temperature_bar" style="height:8px;"></div>

                        <div class="bar_marker @if ($weather['max_category'] == 1) black @endif">normal</div>

                        <div class="bar_marker @if ($weather['max_category'] == 2) black @endif">notice</div>

                        <div class="bar_marker @if ($weather['max_category'] == 3) black @endif">caution</div>

                        <div class="bar_marker @if ($weather['max_category'] == 4) black @endif">warning</div>

                        <div class="bar_marker @if ($weather['max_category'] == 5) black @endif">danger</div>



                        <div class="weather_index">

                            <div class="heat_index_value">Heat Index</div>

                            {{ $weather['max_heat_index'] }}

                        </div>



                        @if ($weather['max_category'] == 1)

                            <img src="{{ asset('images/icons/max_5_hours_48px.png') }}" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />

                            <img src="{{ asset('images/icons/drink_water_48px.png') }}" class="recommendation" alt="" title="Provide ample amounts of water." />



                            <h3 style="color:{{ $weather['max_bar_color'] }};">Normal</h3>



                            <ul>

                                <li>Maximum of 5 hours of practice today.</li>

                                <li>Provide ample amounts of water.</li>

                            </ul>



                        @endif



                        @if ($weather['max_category'] == 2)

                            <img src="{{ asset('images/icons/max_5_hours_48px.png') }}" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />

                            <img src="{{ asset('images/icons/drink_water_48px.png') }}" class="recommendation" alt="" title="Water should always be available and athletes should be able to take in as must water as they desire." />



                            <h3 style="color:{{ $weather['max_bar_color'] }};">Notice</h3>



                            <ul>

                                <li>Maximum of 5 hours of practice today.</li>

                                <li>Provide ample amounts of water.</li>

                                <li>Water should always be available and athletes should be able to take in as much water as they desire.</li>

                                <li>Watch/monitor athletes for necessary action.</li>

                            </ul>

                        @endif



                        @if ($weather['max_category'] == 3)

                            <img src="{{ asset('images/icons/max_5_hours_48px.png') }}" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />

                            <img src="{{ asset('images/icons/drink_water_48px.png') }}" class="recommendation" alt="" title="Water should always be available and athletes should be able to take in as must water as they desire." />

                            <img src="{{ asset('images/icons/recovery_48px.png') }}" class="recommendation" alt="" title="Practices limited to 3 hours maximum.  Mandatory minimum 3 hour recovery period between practices." />

                            <img src="{{ asset('images/icons/delay_48px.png') }}" class="recommendation" alt="" title="Consider postponing practice to later in the day." />



                            <h3>Caution</h3>



                            <ul>

                                <li>Maximum of 5 hours of practice today.</li>

                                <li>OSAA Recommendation:  Consider postponing practice to later in the day.</li>

                                <li>Practice length a maximum of 3 hours.</li>

                                <li>Mandatory 3 hour recovery period between practices.</li>

                                <li>Contact sports and activities with additional equipment - Helmets and other possible equipment removed if not involved in contact or necessary for safety.</li>

                                <li>Provide ample amounts of water.</li>

                                <li>Water should always be available and athletes should be able to take in as much water as they desire.</li>

                                <li>Watch/monitor athletes for necessary action.</li>

                            </ul>

                        @endif



                        @if ($weather['max_category'] == 4)

                            <img src="{{ asset('images/icons/max_5_hours_48px.png') }}" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />

                            <img src="{{ asset('images/icons/drink_water_48px.png') }}" class="recommendation" alt="" title="Water should always be available and athletes should be able to take in as must water as they desire." />

                            <img src="{{ asset('images/icons/recovery_48px.png') }}" class="recommendation" alt="" title="Practices limited to 3 hours maximum.  Mandatory minimum 3 hour recovery period between practices." />

                            <img src="{{ asset('images/icons/alert_delay_48px.png') }}" class="recommendation" alt="" title="Highly recommended to postpone practice to a later time in the day." />



                            <h3 style="color:{{ $weather['max_bar_color'] }};">Warning</h3>

                            <ul>

                                <li>Maximum of 5 hours of practice today.</li>

                                <li>OSAA Recommendation:  Postpone practice to later in the day.</li>

                                <li>Practice length a maximum of 3 hours.</li>

                                <li>Mandatory 3 hour recovery period between practices.</li>

                                <li>Alter uniform by removing items if possible - Allow for changes to dry t-shirts and shorts.</li>

                                <li>Contact sports and activities with additional equipment - Helmets and other possible equipment removed if not involved in contact or necessary for safety.</li>

                                <li>Reduce time of planned outside activity as well as indoor activity if air conditioning is unavailable.</li>

                                <li>Provide ample amounts of water.</li>

                                <li>Water should always be available and athletes should be able to take in as much water as they desire.</li>

                                <li>Watch/monitor athletes for necessary action.</li>

                            </ul>

                        @endif



                        @if ($weather['max_category'] == 5)

                            <img src="{{ asset('images/icons/no_practice_48px.png') }}" class="recommendation" alt="" title="Stop all outside activities." />



                            <h3 style="color:{{ $weather['max_bar_color'] }};">Danger</h3>



                            <ul>

                                <li>OSAA Recommendation:  Stop all outside activity in practice and/or play, and stop all inside activity if air conditioning is unavailable.</li>

                            </ul>

                        @endif



                    </div>

                </div>



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





            @endif



        </div>



        <div id="tabs-2">

            <h1>OSAA Practice Policies</h1>

            <h2>Heat Index</h2>

            <p>

                The OSAA Fall Sports Practice Model is in effect for all OSAA member schools.  Outlined below are the steps that each member school shall take in order to implement the model.

                <ol>

                    <li class="bottom_space">Designate someone within your program as the person who will take the steps necessary to determine and record the heat index for your area prior to each time period that you will be conducting practice sessions.  Depending on practice schedules it is possible that the designated person will have to record the heat index multiple times on the same day.</li>



                    <li class="bottom_space">Within one hour of the practice time the designated person shall utilize the <a href="#tabs-1">OSAA Heat Index Calculator</a> to determine the heat index.</li>



                    <li class="bottom_space">The designated person shall record the calculated heat index number from the OSAA Heat Index Calculator on the heat index record sheet provided with this memo or on the <a href="{{ asset('/docs/health-safety/heatindexrecord.pdf') }}">OSAA Heat Index Record</a>. A separate heat index record shall be kept for all fall sports.</li>



                    <li class="bottom_space">This form must be completed and a copy maintained at the school for inspection at the request of the OSAA.</li>

                </ol>

            </p>

        </div>



        <div id="tabs-3">

            <h1>Practice Regimen</h1>

            <p>

                During the fall sports season each year, all student-athletes are required to adhere to the following practice regimen.

            </p>



            <h2>A. Football</h2>

            <ol style="list-style-type:decimal;">

                <li class="bottom_space">Practice Requirements

                    <ol style="list-style-type:lower-alpha;">

                        <li>Schools may conduct multiple on-field practice sessions but student-athletes shall not engage in more than five hours of on-field practice activities each day.</li>



                        <li>Within one hour of the start of practice, schools must determine the heat index for their area.</li>



                        <li>When the heat index is 95 or above, each practice session will be a maximum of three hours in length and there must be at least three continuous hours of recovery time between the end of the first practice and the start of the next practice that day.  During this recovery time, student-athletes may not engage in other physical activities (e.g., weight training, conditioning, 7-on-7).  Total on-field practice time combined may not exceed five hours.</li>



                        <li>During the first three days of practice, helmets and shoulder pads shall be the only pieces of protective equipment student-athletes may wear.</li>



                        <li>Beginning on day four, student-athletes may participate in full pads.</li>

                    </ol>

                </li>



                <li class="bottom_space">An individual shall become eligible to participate in a jamboree or interscholastic contest after completing a minimum of nine days of actual on-field practice.</li>



                <li class="bottom_space">All practices shall allow for water breaks and general acclimatization to hot and / or humid weather.</li>



                <li class="bottom_space">To calculate the heat index, use the <a href="#tabs-1">OSAA Heat Index Calculator</a>.</li>

            </ol>





            <h2>B. Cross Country, Soccer, Volleyball</h2>

            <ol style="list-style-type:decimal;">

                <li class="bottom_space">Practice Requirements

                    <ol style="list-style-type:lower-alpha;">

                        <li>Schools may conduct multiple on-field / court practice sessions but student-athletes shall not engage in more than five hours of on-field / court practice activities each day.</li>



                        <li>Within one hour of the start of practice, schools must determine the heat index for their area.</li>



                        <li>When the heat index is 95 or above, each practice session will be a maximum of three hours in length and there must be at least three continuous hours of recovery time between the end of the first practice and the start of the next practice that day.  During this recovery time, student-athletes may not engage in other physical activities (e.g., weight training, conditioning).  Total practice time combined may not exceed five hours.</li>

                    </ol>

                </li>



                <li class="bottom_space">All practices shall allow for water breaks and general acclimatization to hot and / or humid weather.</li>



                <li class="bottom_space">To calculate the heat index, use the <a href="#tabs-1">OSAA Heat Index Calculator</a>.</li>

            </ol>





        </div>









    </div>













@stop