var counter = 0;

function verticale_scroller(top_button, container, bottom_button)
{
    this.scrollingBezig = false;
    this.isAtBottom = false;
    this.container = container;
	
	
    
    this.scrollToTop = function() {
        if(this.scrollingBezig) return;//niet teveel scrollen he!
        this.scrollingBezig = true;
        
        var self = this;
        var heightWindow = $(this.container).parentNode.clientHeight;
        
        if(isNaN($(this.container).style.top))
        {
            var top = parseInt($(this.container).style.top);
        }
        else
        {
            var top = $(this.container).style.top;
        }
		
		heightWindow = "300";
        
        if((top + heightWindow) > 0)
        {
            new Effect.Move($(this.container), { duration: 1.5,y: 0, mode: 'absolute', afterFinish: function(){
                self.scrollingBezig = false;
            }});
        }
        else
        {
            new Effect.Move($(this.container), { duration: 1.5,y: +heightWindow, mode: 'relative', afterFinish: function(){
                self.scrollingBezig = false;
            }});
			
			counter--;
        }
        
        this.isAtBottom = false;
    }
    
    this.scrollToBottom = function() {
        if(this.scrollingBezig) return;//niet teveel scrollen he!
        this.scrollingBezig = true;
        
        var container = $(this.container);
        var self = this;
        var heightWindow = container.parentNode.clientHeight;
        
        if(isNaN(container.style.top))
        {
            var top = parseInt(container.style.top);
        }
        else
        {
            var top = container.style.top;
        }
        
		heightWindow = "300";

		var totalTop = top - heightWindow;
        var maxHeight = container.getHeight()-heightWindow;
	   
	   if(Math.abs(totalTop) >= maxHeight)
        {
            this.isAtBottom = true;
            new Effect.Move($(this.container), { duration: 1.5,y: -maxHeight, mode: 'absolute', afterFinish: function(){
                self.scrollingBezig = false;
            }});
        }
        else if(!this.isAtBottom)
        {
            new Effect.Move($(this.container), { duration: 1.5,y: -heightWindow, mode: 'relative', afterFinish: function(){
                self.scrollingBezig = false;
            }});
			
			counter++;
        }
    }
	
	this.startFrom = function(number) {
		if(!number) var number = 0;
		counter = parseInt(number);
		
		var height = $(this.container).parentNode.clientHeight * number;
		
		$(this.container).style.position = 'relative';
		$(this.container).style.top = - height + "px"; 
	}
	
	this.countScrollsOnLink = function()
	{
		$('countingField').value = counter;
	}
    
    //constructor
    var self = this;
    $(top_button).observe('click', function(){
        self.scrollToTop();  
		self.countScrollsOnLink();  
		
    });
    
    $(bottom_button).observe('click', function(){
        self.scrollToBottom();   
		self.countScrollsOnLink(); 
    });
    
    return this;
}

Event.observe(window, 'load', function(){
	$$('#left_content_titel_script a').invoke('observe', 'click', function(){
		//this.href += 'stap/' + parseInt($F('countingField'));
		this.href += 'stap/' + parseInt(counter);
	});
});