function getHeight(obj){
    var Val = 0;
	if(obj.offsetHeight)          {Val=obj.offsetHeight;}
	else if(obj.style.pixelHeight){Val=obj.style.pixelHeight;}
	return Val;
}

function getWidth(obj){
    var Val = 0;
	if(obj.offsetWidth)          {Val=obj.offsetWidth;}
	else if(obj.style.pixelWidth){Val=obj.style.pixelWidth;}
	return Val;
}


window.addEvent('domready', function(){
	// First Example
	var el = $('div_slider'),
		divint = $('div_int');
		divext = $('div_ext');
		maxoffset = 0;
		intheight = 0;
		extheight = 0;
		decal = 0;
		padtop = 0;
		
	O = document.getElementById('div_o') ;
	Oint = document.getElementById('div_int') ;
	Oext = document.getElementById('div_ext') ;
	Oslider = document.getElementById('div_slider') ;
	Osliderint = document.getElementById('div_slider_int') ;
	
	//O.style.marginRight = '0px';

	//Oslider.style.marginRight = '0px';
	//Oslider.style.width = '16px';
	
	baseintheight = getHeight(Oint) ;
	baseextheight = getHeight(Oext) ;
	if (baseintheight > baseextheight){
	    Oext.style.overflow = 'hidden';
	    Oint.style.width = (getWidth(Oext) - 16)+'px';
	    Oslider.style.visibility = 'visible';
		Osliderint.style.visibility = 'visible';
	}
		
	// Create the new slider instance
	new Slider(el, el.getElement('.knob'), {
		steps: 100,	// There are 100 steps
		range: [0,100],	// Minimum value is 0, max 100
		mode: 'vertical',
		offset: 0,
		wheel: true,
		onChange: function(value){
			// Everytime the value changes, we change the font of an element
			intheight = getHeight(Oint) ;
			extheight = getHeight(Oext) ;
			if(intheight > extheight){
				maxoffset = intheight - extheight;
				decal = - (Math.abs((maxoffset * (value / 100))));
			}
			else {
				decal = 0;
			}
			divint.setStyle('top', decal);
		}
	})
});