// JScript File

function InitDemoSlider(sender, eventArgs)
{
    var sliderId = sender.get_id();
    eval("initialValue_" + sliderId + " = sender.get_minimumValue() + 10;");
	
    HandleClientValueChange(sender, null);
}

function HandleClientValueChange(sender, eventArgs)
{
    var sliderId = sender.get_id();
	
//    var wrapper = document.getElementById(sliderId + "_wrapper");
//    var content = document.getElementById(sliderId + "_content");
    var wrapper = document.getElementById("slider_wrapper");
    var content = document.getElementById("slider_content");

    var oldValue = (eventArgs) ? eventArgs.get_oldValue() : (sender.get_minimumValue() + 10);
    var change = sender.get_value() - oldValue;
    
    var contentWidth = content.scrollWidth - wrapper.offsetWidth;
    var calculatedChangeStep = contentWidth / (((sender.get_maximumValue() - 10) - (sender.get_minimumValue() + 10)) / sender.get_slideStep());

    eval("initialValue_" + sliderId + " = initialValue_" + sliderId + " - change * calculatedChangeStep;");

    eval("content.style.left = initialValue_" + sliderId + " + 'px';");
	
    if (sender.get_value() == (sender.get_minimumValue() + 10))
    {
        eval("content.style.left = 0;");
    }
}

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