﻿function initSliderLevelsHome()
{

//    $("#sldLevel").append("<div class='ui-slider-handle' id='dist-handle-one'></div>");
//    $("#sldLevel").append("<div class='ui-slider-handle' id='dist-handle-two'></div>");

    // Levels slider               
	$("#sldLevel").slider(
	{
		values: [ 0, 6 ],
		range: true,		
		min: 0,
		max: 6,
		step: 1,
		slide: function(e, ui)
		{
		    var sliderValues = $("#sldLevel").slider('option', 'values');
            var sliderOneValue = sliderValues[0];
            var sliderTwoValue = sliderValues[1];
            
            if( ( sliderTwoValue - sliderOneValue ) <= 0 )
            {
                return false;
            }
            
		},
		change: function(e, ui) // change gets called on slide stop, but only if the slider position has changed, e and ui, for event and user-interface respectively
		{				    			          
            var sliderValues = $("#sldLevel").slider('option', 'values');
            var sliderOneValue = sliderValues[0];
            var sliderTwoValue = sliderValues[1];          
                                             
			
			$(".cbl-level-home :input").each(function(counter)
			{ 					
				if( counter < sliderTwoValue && counter >= sliderOneValue )
				{
					if(counter == sliderTwoValue)
					{										    
					    if(this.checked) // if already checked
					    {					    					    					    																															
						    // call the trigger on the last one - this will uncheck it
						    $(this).trigger("click");
						    
						    // re-check it
						    this.checked = true;
						}
						else // if not already checked
						{
						    // call the trigger on the last one - this will check it
						    $(this).trigger("click");
						}
						
					}
					else
					{							
						this.checked = true;
					}
				}
				else
				{
					this.checked = false;
				}											
			});										
		}
	});
	
	// insert overlay after the range
	$("#sldLevel .ui-slider-range").after('<div class = "levels-overlay"><div class="key"><a href="#sldLevel" onclick="return false" class="key-1"><span>Level 1 - GCSEs Grades D – G, BTEC Introductory Diplomas, NVQs Level 1, Diplomas</span></a><a href="#sldLevel" onclick="return false" class="key-2"><span>Level 2 - GCSEs Grades A* - C, BTEC First Diplomas, NVQs Level 2, Diplomas</span></a><a href="#sldLevel" onclick="return false" class="key-3"><span>Level 3 - A Levels, BTEC National Diplomas, NVQs Level 3, Diplomas</span></a><a href="#sldLevel" onclick="return false" class="key-4"><span>Level 4 - NVQs Level 4</span></a></div></div>');
	
	// if js enabled remove the no-js class
	$(".key-levels").removeClass("no-js");
}