var initialValue;
var initialValue2;

function OnClientBeforeValueChange(sender, args)
{
    // In order for the dragHandle of the slider to never leave the track, 
    // the values from -1 to -10 and from 101 and 110 are not valid values.
    var newValue = args.get_newValue();
    if(newValue < 0)
    {
        args.set_cancel(true);
        sender.set_value(0);
    }
    else if(newValue > 100)
    {
        args.set_cancel(true);
        sender.set_value(100);
    }
}

function HandleClientLoaded(sender, eventArgs)
{
    initialValue = sender.get_minimumValue();
    HandleClientValueChange(sender, null);
}

function HandleClientValueChange(sender, eventArgs)
{
    var wrapperDiv = document.getElementById('content_wrapper');
    var contentDiv = document.getElementById('content');
    
    var oldValue = (eventArgs) ? eventArgs.get_oldValue() : sender.get_minimumValue();
    var change = sender.get_value() - oldValue;  
    
    var contentDivHeight = contentDiv.scrollHeight - wrapperDiv.offsetHeight; 
    var calculatedChangeStep = contentDivHeight / ((sender.get_maximumValue() - sender.get_minimumValue()) / sender.get_slideStep());
    
    initialValue = initialValue - change * calculatedChangeStep;
    
    if (sender.get_value() == sender.get_minimumValue())
    {
	    contentDiv.style.top = 0 + 'px';
	    initialValue = sender.get_minimumValue();
    }
    else
    {
	    contentDiv.style.top = initialValue + 'px';
    }
}

function HandleClientLoaded2(sender, eventArgs)
{
    initialValue2 = sender.get_minimumValue();
    HandleClientValueChange2(sender, null);
}

function HandleClientValueChange2(sender, eventArgs)
{
    var wrapperDiv = document.getElementById('boxes_wrapper');
    var contentDiv = document.getElementById('boxes_content');
    
    var oldValue = (eventArgs) ? eventArgs.get_oldValue() : sender.get_minimumValue();
    var change = sender.get_value() - oldValue;  
    
    var contentDivWidth = contentDiv.scrollWidth - wrapperDiv.offsetWidth; 
    var calculatedChangeStep = contentDivWidth / ((sender.get_maximumValue() - sender.get_minimumValue()) / sender.get_slideStep());
    
    initialValue2 = initialValue2 - change * calculatedChangeStep;
    
    if (sender.get_value() == sender.get_minimumValue())
    {
	    contentDiv.style.left = 0 + 'px';
	    initialValue2 = sender.get_minimumValue();
    }
    else
    {
	    contentDiv.style.left = initialValue2 + 'px';
    }
}