//function used to create all of the sliders
function RenderSliders() {
	$("div.slider-container").each(function()
		{
			if($(this).css('display') != 'none') {
				RenderSlider(this);
			}
		});
}
		

//function used to create sliders in supplied container
function RenderChildSliders(container) {
	var sliders = container.find("div.slider-container");
	sliders.each(function()
		{
			RenderSlider(this);
		});
}

//function used to create a slider
function RenderSlider(sliderElement) {
	//Get our slider container vars.
	var sliderContainer = $(sliderElement);
	var uiSliderContainer = sliderContainer.children("div.ui-slider-container");	//the main slider container
	var sliderTrack = uiSliderContainer.children("div.ui-slider-track");			//the actual area the handles move along
	var sliderHandles = sliderTrack.children("div.ui-slider-handle");				//handle(s) used to alter the selected values on the slider
	var sliderRange = sliderTrack.children("div.ui-slider-range");					//range is the highlighted area showing the area covered by the slider				
	var sliderSummary = uiSliderContainer.children('label.ui-slider-summary');		//label showing the value currently selected by the slider
	var sliderLowerLabel = uiSliderContainer.children('label.limit-low');			//label showing the lower bound of the slider
	var sliderUpperLabel = uiSliderContainer.children('label.limit-high');			//label showing the upper bound of the slider
	var sliderLabels = uiSliderContainer.children('label.ui-slider-limit');			//labels for showing limit values
	
	var handleCount = sliderHandles.length;											//indicates whether this is a single or dual slider
	var dataContainer = sliderContainer.children("select");							//select list(s) used to create this slider
	var upperRangeLimit = sliderContainer.find('input#UPPER_RANGE_LIMIT').val();		//the left param of the slider, used by the summary control to see if the upper handle has been moved or not
	var summaryDefaultText = sliderContainer.find('input#DUAL_SLIDER_SUMMARY_DEFAULT_TEXT').val();	//the text used by a dual slider's summary if neither handle has been moved
	var summaryPrefix = sliderContainer.find('input#DUAL_SLIDER_SUMMARY_PREFIX').val();			//the text used by a dual slider's summary if only the upper handle has been moved e.g. 'Up to £10,000'
	var summarySuffix = sliderContainer.find('input#DUAL_SLIDER_SUMMARY_SUFFIX').val();			//the text used by a dual slider's summary if only the lower handle has been moved e.g. '£10,000 and above'
	var summarySeparator = sliderContainer.find('input#DUAL_SLIDER_SUMMARY_SEPARATOR').val();		//the text used by a dual slider's summary if both handles have been moved e.g. '£10,000 to £20,000'
	var useRange = sliderContainer.find('input#USE_RANGE').val();		//value used to signify if the dual slider should use the range param
	var rangeHtml = sliderContainer.find('input#RANGE_HTML').val();		//the html to be inserted into the range div
	var intervalContainer = sliderContainer.find('div.ui-slider-track-intervals-container');   //the div that contains each of the interval markers
	var intervalCollection = intervalContainer.find('div.ui-slider-track-interval');				   //collection of the interval markers
	var trackWidth = sliderTrack.css('width').substring(0,sliderTrack.css('width').length-2);			//the width of the track minus the unit e.g 75px = 75
	var intervalItems = [];												//array of interval distances
	var dataItems = [];  													//values as an array of jquery objects.
	var selectedDataItem = 0;
	
	// parse true boolean for use range settings
	if (useRange.toLowerCase() === "true")
	{
		useRange = true;
	}
	else if (useRange.toLowerCase() === "false")
	{
		useRange = false;
	}
	
	//Loop though each of our available data items in our data container.
	$(dataContainer[0]).children().each(function(iDataItem)
	{		
		//Create a string key of this option.
		var dataItemKey = this.value + ":" + this.text;
		
		//get the selected
		if(this.selected == true)
		{
			selectedDataItem = iDataItem;
		}
		
		//we dont want a 0 value as this is covered by the 'any' option
		if(sliderContainer.value != '0') {					
			dataItems.push({key: dataItemKey, item: this, ordinal: [iDataItem,null]});	
		}
	});
					
	//The number of steps is equal to the data length - 1. (if we don't -1 then the slider is too big by one on the end)
	var dataLength = (dataItems.length-1);
	//Hide our select element.
	dataContainer.hide();

	//setup the inital state of the slider summary label
	sliderSummary.html(dataItems[selectedDataItem].item.text);

	//now we need to setup the widths for each of the interval markers
	CalculateIntervalWidths();
	
	
	
	// work out what our selected handle values are
	var handleValues = [];
	if (useRange === true)
	{
		handleValues[0] = selectedDataItem;			// min
		handleValues[1] = dataItems.length - 1;		// max
	}	
	else
	{
		handleValues[0] = selectedDataItem;
	}
	
	//Enable and show our slider bar.
	
	// add muliple handle values to slider if nessary
	if (useRange === true)
	{
		sliderTrack.slider(
		{
			//Set the number of steps to equal the options in the select element.
			step: 1,
			min: 0,
			max: dataLength,
			animate: true,
			range: useRange,
			rangeHtml: rangeHtml,
			values : handleValues,
			slide: function(event, ui) {
				//on the slide we need to update the summary label
				//sliderSummary.html(dataItems[ui.value].item.text);
				//RefreshSummaryText(event,ui);
			},
			change: function(event, ui) {
				//update the dataContainer
				RefreshSummaryText(event,ui);
				//sliderSummary.html(dataItems[ui.value].item.text);
				dataContainer.eq(0)[0].selectedIndex = dataItems[ui.value].ordinal[0];
				dataContainer.eq(0).trigger("change");
			}				
		});
	}
	else
	{
		sliderTrack.slider(
		{
			//Set the number of steps to equal the options in the select element.
			step: 1,
			min: 0,
			max: dataLength,
			animate: true,
			range: useRange,
			rangeHtml: rangeHtml,
			value: handleValues[0],
			slide: function(event, ui) {
				//on the slide we need to update the summary label
				//sliderSummary.html(dataItems[ui.value].item.text);
				//RefreshSummaryText(event,ui);
			},
			change: function(event, ui) {
				//update the dataContainer
				RefreshSummaryText(event,ui);
				//sliderSummary.html(dataItems[ui.value].item.text);
				dataContainer.eq(0)[0].selectedIndex = dataItems[ui.value].ordinal[0];
				dataContainer.eq(0).trigger("change");
			}				
		});
	}
	
	// now show
	sliderTrack.slider().show();
	
	function RefreshSummaryText(event, ui)
	{
		/*
		var summaryDefaultText = sliderContainer.find('input#DUAL_SLIDER_SUMMARY_DEFAULT_TEXT').val();	//the text used by a dual slider's summary if neither handle has been moved
		var summaryPrefix = sliderContainer.find('input#DUAL_SLIDER_SUMMARY_PREFIX').val();			//the text used by a dual slider's summary if only the upper handle has been moved e.g. 'Up to £10,000'
		var summarySuffix = sliderContainer.find('input#DUAL_SLIDER_SUMMARY_SUFFIX').val();			//the text used by a dual slider's summary if only the lower handle has been moved e.g. '£10,000 and above'
		var summarySeparator = sliderContainer.find('input#DUAL_SLIDER_SUMMARY_SEPARATOR').val();		//the text used by a dual slider's summary if both handles have been moved e.g. '£10,000 to £20,000'
		var sliderLabels = uiSliderContainer.children('label.ui-slider-limit');			//labels for showing limit values
		*/
		
		if (ui.values == null)
		{
			ui.values = [ui.value];
		}
		
		// set slider labels
		if (ui.values && ui.values.length > 0)
		{
			// loop through all selected handle values
			for (var i = 0; i < ui.values.length; i++)
			{
				// do we have a label to update
				if (i < sliderLabels.length)
				{
					// get value for label
					var dataValue, formattedValue;
					dataValue = dataItems[ui.values[i]].item.text;
					
					if (i === 0)
					{
						// add prefix
						formattedValue = ((summaryPrefix) ? summaryPrefix : '') + dataValue;
					}
					else if (i === 1)
					{
						// add sufix
						formattedValue = dataValue + summarySuffix;
					}
					else
					{
						// normal
						formattedValue = dataValue;
					}
					
					$(sliderLabels[i]).html(formattedValue);
				}
			}
		}
		
		// set summary text
		var summaryText;
		if (ui.values && ui.values.length > 1)
		{
			for (var i = 0; i < ui.values.length; i++)
			{
				if (i == 0)
				{
					summaryText = dataItems[ui.values[i]].item.text;
				}
				else
				{
					summaryText += summarySeparator + dataItems[ui.values[i]].item.text;
				}
			}
		}
		else
		{
			summaryText = dataItems[ui.values[0]].item.text;
		}
		
		sliderSummary.html(summaryText);
	}
	
	
	//internal function used to calculate the widths required for the interval markers
	function CalculateIntervalWidths() {
		//get the standard widths and any excess that might be left	
		var standardWidth = Math.floor(trackWidth / (dataLength));
		var excessWidth = trackWidth % standardWidth;
		var excessStart = 0;
		var excessEnd = 0;
		
		//if theres any excess left, then split it between the beginning and end
		if(excessWidth > 0) {
			var isExcessEven = (excessWidth % 2 == 0);
			if(isExcessEven) {
				excessStart = excessWidth / 2;
				excessEnd = excessWidth / 2;
			}
			else {
				var evenSplit = (excessWidth -1) / 2;
				excessStart = evenSplit + 1;
				excessEnd = evenSplit;
			}
			//alert("trackWidth = " + trackWidth + " // dataLength =  " + dataLength + " // excessWidth = " + excessWidth + " // excessStart = " + excessStart + " // excessEnd = " + excessEnd);
		}
		else {
			excessStart = 0;
			excessEnd	= 0;	
		}
		
		//insert the middle standard values
		var indexCounter = 0;
		var widthCounter = 0;
		intervalCollection.each(function() {
			$(this).css('left',widthCounter);
		
			//increment the indexCounter
			//indexCounter = indexCounter+1;
			indexCounter++;
					
			//now increment the widthCounter, depending on the position
			if(indexCounter == 1) {
				widthCounter = widthCounter + standardWidth + excessStart;	
			}
			else if (indexCounter == dataLength) {
				widthCounter = widthCounter + standardWidth + excessEnd;
			}
			else {
				widthCounter = widthCounter + standardWidth;
			}
		});
	}

	//internal function used to return the index of a value within the array passed in
	function containsKey(key, array)
	{
		for(var i = 0 ; i < array.length ; i++)
		{
			if(array[i].key == key) return i;
		}
		return -1;
	}
	
	
	
	// Broadcast SliderRenderComplete event
	
	var sliderCompleteEvent = 
	{
		target : sliderContainer
		
	}
	
	var sliderCompleteEvent = jQuery.Event("SLIDER-RENDER-COMPLETE");
	sliderCompleteEvent.targetSliderContainer = sliderContainer;

	$(document).trigger(sliderCompleteEvent); 
	
}


//function used to destroy all sliders!
function DestroySliders() {
	$("div.slider").each(
		function() {
			var sliderContainer = $(this);
			var uiSliderContainer = sliderContainer.children("div.ui-slider-container");
			var sliderTrack = uiSliderContainer.children("div.ui-slider-track");
			sliderTrack.slider('destroy');
		}
	);
}

//function used to destroy all sliders that are child of the container!
function DestroyChildSliders(container) {
	var sliders = container.find("div.slider");
	sliders.each(
		function() {
			var sliderContainer = $(this);
			var uiSliderContainer = sliderContainer.children("div.ui-slider-container");
			var sliderTrack = uiSliderContainer.children("div.ui-slider-track");
			sliderTrack.slider('destroy');
		}
	);
}

//fucntion used to reset all sliders
function ResetSliders() {
	$("div.slider").each(
		function() {
			ResetSlider($(this));	
		}
	);
}

//function used to reset a slider
function ResetSlider(container) {
	var sliderTrack = container.find("div.ui-slider-track");
	var steps = container.find('option').length;
	
	//we need to handle dual and single sliders differently
	var handleCount = sliderTrack.find("div.ui-slider-handle").length;
	if(handleCount == 1) {
		sliderTrack.slider('moveTo',steps,0);
	}
	else {
		sliderTrack.slider('moveTo',steps-1,1);
		sliderTrack.slider('moveTo',0,0);
	}
}


/*
 **************
 * Bind slider png fix trigger to SliderRenderComplete event
 **************
 */

	$(document).bind("SLIDER-RENDER-COMPLETE", function (e)
	{
		if ($.browser.msie && $.browser.version < 7)
		{
			var sliderContainer = e.targetSliderContainer;
			
			var pngs = sliderContainer.find(".png");
			for (var i = 0; i < pngs.length; i++) 
			{
				fix_PNG(pngs[i]);
			}
		}
	});