// to track if the mouse button is pressed
var isMouseDown = false;

function sliderToggle(containerId)
{
  $('#'+containerId).toggle().toggleClass('visible');
  var sliderDiv = '#'+containerId.replace('_container', '');
    
  if (  !$('#'+containerId).hasClass('visible') )
  {
    // bij het dichtklappen gaan we de hidden value bijwerken en posten.
    $(sliderDiv+'_input').attr( 'value', $(sliderDiv+'_value').html() );
    ajaxUpdate();
    isMouseDown = false;
    updateHandleDown(sliderDiv);
  }
}

function createSlider( htmlObjId, values, labels, activeValue )
{
  var sliderDiv = '#'+htmlObjId;
  var widthPercentage = Math.floor(100/values.length);  
  
  for (var i=0; i<values.length; i++)
  {    
    var handleId = htmlObjId+'_'+i;
    var sliderClass = 'sliderblock';
    if ( i==0 )
      sliderClass += ' first';
    else if ( i == values.length-1 )
      sliderClass += ' last';
    
    $(sliderDiv).append('<div class="'+sliderClass+'" id="'+handleId+'" style="width:'+widthPercentage+'%;"><div class="sliderhandle"></div></div>');
		  }
  
  var teller = 0;
  $(sliderDiv+' > div.sliderblock').each(function(i) {
	
		// de activeValue gebruiken om de geselecteerde waarde uit de request te zetten.
		if ( values[i] == activeValue )
		{
			updateSliderValue(htmlObjId, $(this).attr('id'), values[i], labels[i]);
		}
	
		
    //functies voor gedrag registereren:
    $(this).mousemove( function(){
      if (isMouseDown)
      {
        //voorkomen dat we rare selectiedingen in ie krijgen
        if ($.browser.msie)
          document.selection.empty(); 
        
        var blockNr = ''+$(this).attr('id').replace(htmlObjId+'_', '');
        if ( $(sliderDiv+'_value').html != values[blockNr] )
        { 
          updateSliderValue(htmlObjId, $(this).attr('id'), values[blockNr], labels[blockNr]);
          updateHandleDown(sliderDiv);
        }
      }
    });
    
    $(this).mouseup( function(){
				if ( isMouseDown )
				{
					//klaar met selecteren: dichtklappen van de slider
					sliderToggle(sliderDiv.replace('#', '')+'_container');
				}		
        isMouseDown = false;
        updateHandleDown(sliderDiv);
    });
    
    $(this).mousedown( function(){
        var selectedValue = $(sliderDiv+'_value').html();
        var blockNr = ''+$(this).attr('id').replace(htmlObjId+'_', '');
        //als de eerste waarde geselecteerd wordt door te klikken
        //alert(sliderDiv+'_value.selectedValue: '+selectedValue);
        if ( selectedValue == '' )
        {
          isMouseDown = true;
          updateSliderValue(htmlObjId, $(this).attr('id'), values[blockNr], labels[blockNr]);
        }
        //anders: alleen beginnen te slepen vanaf het actieve blok.
        else if ( selectedValue ==  values[blockNr] )
        {
           isMouseDown = true;
           updateHandleDown(sliderDiv);
        }
        
    });
    
    teller++;
  });
  
      
}

function updateHandleDown(sliderDiv)
{
  if ( isMouseDown )
  {
    $(sliderDiv+' > div.sliderblock > div.sliderhandle').each(function(i){      
      if ( $(this).hasClass('active') )
      {
        $(this).addClass('down');
      }
      else
        $(this).removeClass('down');
    });
  }
  else
  {
    $(sliderDiv+' > div.sliderblock > div.sliderhandle').removeClass('down');
  }  
}


function updateSliderValue( htmlObjId, handleObjId, value, label)
{
  //alert('updateSliderValue( '+htmlObjId+', '+handleObjId+', '+value+', '+label+')');
  //alert( $('#'+htmlObjId+'_value').attr('value')+' != '+value+': '+( $('#'+htmlObjId+'_value').attr('value') != value ) );
  
  var sliderDiv = '#'+htmlObjId;
  //alert('update!');   
  //eerst alle andere dingen van active halen..
  $(sliderDiv+' > div.sliderblock > div.sliderhandle').each(function(i) {
    $(this).removeClass('active');
  });
       
  //active class op de handle waarop geklikt is
  $(sliderDiv+' > div#'+handleObjId+' > div.sliderhandle').addClass('active');
  
  //de waarde die wordt weergegeven updaten
  $(sliderDiv+'_label').html(label);
  //de hidden value bewaren
  $(sliderDiv+'_value').html(value);
}