/*
 * --------------------------------------------------------------------
 * jQuery-Plugin - customSlider - creates a UI slider component

 * --------------------------------------------------------------------
 */


jQuery.fn.customSlider = function(sliderinput, slidermin, slidermax, sliderstep, idmin, idmax, unite){
    var selects = jQuery(this);
    
    //accessible slider options
    var options = jQuery.extend({
        labels: 3, //number of visible labels
        tooltip: true, //show tooltips, boolean
        tooltipSrc: 'text',//accepts 'value' as well
        labelSrc: 'value',//accepts 'value' as well ,
        sliderOptions: null
    });


    //handle ID attrs - selects each need IDs for handles to find them
    var handleIds = (function(){
        var tempArr = [];
        selects.each(function(){
            tempArr.push('handle_'+jQuery(this).attr('id'));
        });
        return tempArr;
    })();
	
	//array of all option elements in select element (ignores optgroups)
    var selectOptions = (function(){
        var opts = [];
        selects.eq(0).find('option').each(function(){
            opts.push({
                value: jQuery(this).attr('value'),
                text: jQuery(this).text()
            });
        });
        return opts;
    })();
	
	//array of opt groups if present
    var groups = (function(){
        if(selects.eq(0).find('optgroup').size()>0){
            var groupedData = [];
            selects.eq(0).find('optgroup').each(function(i){
                groupedData[i] = {};
                groupedData[i].label = jQuery(this).attr('label');
                groupedData[i].options = [];
                jQuery(this).find('option').each(function(){
                    groupedData[i].options.push({text: jQuery(this).text(), value: jQuery(this).attr('value')});
                });
            });
            return groupedData;
        }
        else return null;
    })();
	
    //check if obj is array
    function isArray(obj) {
        return obj.constructor == Array;
    }
    //return tooltip text from option index
    function ttText(optIndex){
        return ''+optIndex;
    }
	
	//plugin-generated slider options (can be overridden)
    var sliderOptions = {
        step: sliderstep,
        min: slidermin,
		max: slidermax,
		values: [ slidermin, slidermax ],
        range: true,//multiple select elements = true
        slide: function(event, ui) {
			//change dynamiquement les valeurs des input et curseurs
			$( idmin ).val( ui.values[ 0 ]);
			$( idmax ).val( ui.values[ 1 ] );
			
			$( "#"+sliderinput+"_val0" ).text(ui.values[ 0 ] + unite);
			$( "#"+sliderinput+"_val1" ).text(ui.values[ 1 ] + unite);
				
        }
    };
	
	

    //slider options from settings
    options.sliderOptions = sliderOptions;
    
    //select element change event   
    selects.bind('change keyup click', function(){
        var thisIndex = jQuery(this).get(0).selectedIndex;
        var thisHandle = jQuery('#handle_'+ jQuery(this).attr('id'));
        var handleIndex = thisHandle.data('handleNum');
        thisHandle.parents('.ui-slider:eq(0)').slider("values", handleIndex, thisIndex);
    });
    

    //create slider component div
    var sliderComponent = jQuery('<div></div>');

    //CREATE HANDLES
    selects.each(function(i){
        var hidett = '';
        
        //associate label for ARIA
        var thisLabel = jQuery('label[for=' + jQuery(this).attr('id') +']');
        //labelled by aria doesn't seem to work on slider handle. Using title attr as backup
        var labelText = (thisLabel.size()>0) ? 'Slider control for '+ thisLabel.text()+'' : '';
        var thisLabelId = thisLabel.attr('id') || thisLabel.attr('id', 'label_'+handleIds[i]).attr('id');
        
        
        if( options.tooltip == false ){hidett = ' style="display: none;"';}
        jQuery('<a '+
                'href="#" tabindex="0" '+
                'id="'+handleIds[i]+'" '+
                'class="ui-slider-handle" '+
                'role="slider" ' +
                'aria-labelledby="'+thisLabelId+'" '+
                'aria-valuemin="'+options.sliderOptions.min+'" '+
                'aria-valuemax="'+options.sliderOptions.max+'" '+
                'aria-valuenow="'+options.sliderOptions.values[i]+'" '+
				'><span class="screenReaderContext">'+labelText+'</span>'+
				'<span class="ui-slider-tooltip ui-widget-content ui-corner-all"'+ hidett +'><span class="ttContent" id="'+sliderinput+'_val'+i+'"></span>'+
                '<span class="ui-tooltip-pointer-down ui-widget-content"><span class="ui-tooltip-pointer-down-inner"></span></span>'+
				'</span></a>')
            .data('handleNum',i)
            .appendTo(sliderComponent);
			
	});
    
   
    
    //show and hide labels depending on labels pref
    //show the last one if there are more than 1 specified
    if(options.labels > 1) sliderComponent.find('.ui-slider-scale li:last span.ui-slider-label, .ui-slider-scale dd:last span.ui-slider-label').addClass('ui-slider-label-show');


    //style the dt's
    sliderComponent.find('.ui-slider-scale dt').each(function(i){
        jQuery(this).css({
            'left': ((100 /( groups.length))*i).toFixed(2) + '%'
        });
    });
    

    //inject and return 
    sliderComponent
    .insertAfter(jQuery(this).eq(this.length-1))
    .slider(options.sliderOptions)
    .attr('id','slider_'+sliderinput)
    .css({'width': '123px', 'height': '5px', 'margin': '25px 0 0'})
    .find('.ui-slider-label')
    .each(function(){
        jQuery(this).css('marginLeft', -jQuery(this).width()/2);
    });
    
    //update tooltip arrow inner color
    sliderComponent.find('.ui-tooltip-pointer-down-inner').each(function(){
                var bWidth = jQuery('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
                var bColor = jQuery(this).parents('.ui-slider-tooltip').css('backgroundColor')
                jQuery(this).css('border-top', bWidth+' solid '+bColor);
    });
    
    var values = sliderComponent.slider('values');
	
    if(isArray(values)){ 
        jQuery(values).each(function(i){
            sliderComponent.find('.ui-slider-tooltip .ttContent').eq(i).text( this );
        });
    }
    else {
        sliderComponent.find('.ui-slider-tooltip .ttContent').eq(0).text( values );
    }
    
    return this;
}