var initialValue;
var initialValue2;

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';
    }
}