function makeScrollbar(content,startScrollbar,startHandle,horizontal,ignoreMouse){

			    startHandle.erase('style');
                
			    var backNnextSize = 12;
			    // ************************** remake the html **********************************
			    startScrollbar.setStyle('position', 'absolute');

			    var handleHtml = startHandle.getParent().get('html');
			    var handleTag = startHandle.get('tag');
			    startHandle.getParent().erase('html');
			    
			    var scrollbarWidth = new Array();
			    scrollbarWidth = startScrollbar.getStyle('width');
			    var scrollbarHeight = new Array();
			    scrollbarHeight = startScrollbar.getStyle('height');

			    startScrollbar.set('html', '<div class="back_content"></div><div class="knob_content">' + handleHtml + '</div><div class="next_content"></div>');
			    
			    startScrollbar.getElement('.back_content').setStyle('position', 'absolute');
			    startScrollbar.getElement('.next_content').setStyle('position', 'absolute');
			    startScrollbar.getElement('.knob_content').setStyle('position', 'absolute');
			    if (horizontal == 'horizontal') {
			        startScrollbar.getElement('.back_content').setStyle('width', backNnextSize);
			        startScrollbar.getElement('.next_content').setStyle('width', backNnextSize);
			        startScrollbar.getElement('.back_content').setStyle('height', scrollbarHeight);
			        startScrollbar.getElement('.next_content').setStyle('height', scrollbarHeight);
			        
			        startScrollbar.getElement('.next_content').setStyle('right', '0');
			        startScrollbar.getElement('.next_content').setStyle('top', '0');

			        startScrollbar.getElement('.knob_content').setStyle('top', '0');
			        startScrollbar.getElement('.knob_content').setStyle('right', backNnextSize);
			        startScrollbar.getElement('.knob_content').setStyle('left', backNnextSize);
			        startScrollbar.getElement('.knob_content').setStyle('width', scrollbarWidth.replace('px', '') - (backNnextSize * 2));
			        startScrollbar.getElement('.knob_content').getElements(handleTag).setStyle('background-position', (-1) * backNnextSize);
			        
			        var knobWidth = new Array();
			        knobWidth = startScrollbar.getElement('.knob_content').getElement(handleTag).getStyle('width');
			        var newKnobWidth = knobWidth.replace('px', '') - (2 * backNnextSize);
			        startScrollbar.getElement('.knob_content').getElements(handleTag).setStyle('width', newKnobWidth);
			    } else {
			        startScrollbar.getElement('.back_content').setStyle('width', scrollbarWidth);
			        startScrollbar.getElement('.next_content').setStyle('width', scrollbarWidth);
			        startScrollbar.getElement('.back_content').setStyle('height', backNnextSize);
			        startScrollbar.getElement('.next_content').setStyle('height', backNnextSize);

			        startScrollbar.getElement('.next_content').setStyle('left', '0');
			        startScrollbar.getElement('.next_content').setStyle('bottom', '0');
			        

			        startScrollbar.getElement('.knob_content').setStyle('left', '0');
			        startScrollbar.getElement('.knob_content').setStyle('top', backNnextSize);
			        startScrollbar.getElement('.knob_content').setStyle('bottom', backNnextSize);
			        startScrollbar.getElement('.knob_content').setStyle('height', scrollbarHeight.replace('px', '') - (backNnextSize * 2));

			        startScrollbar.getElement('.knob_content').getElements(handleTag).setStyle('background-position', '50% -' + backNnextSize + 'px');
			        
			        var knobWidth = new Array();
			        knobWidth = startScrollbar.getElement('.knob_content').getElement(handleTag).getStyle('height');
			        var newKnobWidth = knobWidth.replace('px', '') - (2 * backNnextSize);
			        startScrollbar.getElement('.knob_content').getElements(handleTag).setStyle('height', newKnobWidth);
			    };
			    startScrollbar.getElement('.back_content').setStyle('left', '0');
			    startScrollbar.getElement('.back_content').setStyle('top', '0');
			        
			    startScrollbar.getElement('.back_content').setStyle('cursor', 'pointer');
			    startScrollbar.getElement('.next_content').setStyle('cursor', 'pointer');

			    
			    
			    
			    startScrollbar.getElement('.knob_content').getElements(handleTag).setStyle('cursor', 'pointer');

			    var scrollbar = startScrollbar.getElement('.knob_content');
			    var handle = startScrollbar.getElement('.knob_content').getElement(handleTag);
			    // *************************************************************
			    
			    var steps = (horizontal ? (content.getScrollSize().x - content.getSize().x) : (content.getScrollSize().y - content.getSize().y))
			    var slider = new Slider(scrollbar, handle, {
			        steps: steps,
			        //mode: (horizontal?'horizontal':'vertical'),
			        mode: (horizontal ? 'horizontal' : 'vertical'),
			        onChange: function(step) {
			            // Scrolls the content element in x or y direction.
			            var x = (horizontal ? step : 0);
			            var y = (horizontal ? 0 : step);
			            content.scrollTo(x, y);
			        }
			    }).set(0);
				if( !(ignoreMouse) ){
					// Scroll the content element when the mousewheel is used within the 
					// content or the scrollbar element.
				    $$(content, scrollbar).addEvent('mousewheel', function(e) {
				        e = new Event(e).stop();
				        var step = slider.step - e.wheel * 30;
				        slider.set(step);
				    });
				}

				startScrollbar.getElement('.back_content').addEvent('mousedown', function(e) {
				    this.pressBt = function() {
				        var step = slider.step - 5;
				        slider.set(step);
				    };
				    var myTimer = this.pressBt.periodical(1);
				    this.addEvent('mouseup', function(e) {
				        myTimer = $clear(myTimer);
				    });
				    this.addEvent('mouseleave', function(e) {
				        myTimer = $clear(myTimer);
				    });
				});

				startScrollbar.getElement('.next_content').addEvent('mousedown', function(e) {
				    this.pressBt = function() {
				        var step = slider.step + 5;
				        slider.set(step);
				    };
				    var myTimer = this.pressBt.periodical(1);
				    this.addEvent('mouseup', function(e) {
				        myTimer = $clear(myTimer);
				    });
				    this.addEvent('mouseleave', function(e) {
				        myTimer = $clear(myTimer);
				    });
				});
				
				// Stops the handle dragging process when the mouse leaves the document body.
				$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
			}