var scrollclass = new Class({
	Implements:Options, 	
	
	options:{
		container: 'container_left_content',
		slider: 'container_left_contentholder',
		scrollup:'readless',
		scrolldown:'readmore',
		hovertext:'navtext',
		scrollfactor:0.65,
		scrolltime:900
	},
	
	initialize: function (options){

		this.setOptions(options);
		
		this.maindiv = $(this.options.container);
		this.subdiv = $(this.options.slider);
		this.scrollupButton = $(this.options.scrollup);
		this.scrolldownButton = $(this.options.scrolldown);
		this.hovertext = $(this.options.hovertext);
		
		
		var downimage = this.scrolldownButton.getParent();
		var upimage = this.scrollupButton.getParent();
		
		var subdivheight = this.subdiv.getStyle('height').toInt();
		var maindivheight = this.maindiv.getStyle('height').toInt();
		
		var scrollfactor = this.options.scrollfactor.toFloat();
		var scrollheight = maindivheight*scrollfactor
		
		var totalscrolls = Math.ceil(subdivheight/scrollheight);
		var scrollcounter = 1;
		var scrolltime = this.options.scrolltime;

                var effectbusy = false;
		
		if (subdivheight < maindivheight){
			downimage.getParent().setStyle('display', 'none');
		}else{
			downimage.setStyle('display', 'block');
			upimage.setStyle('display', 'none');
		}
		
					
		var myFx = new Fx.Tween(this.subdiv, {duration:scrolltime, transition:Fx.Transitions.Cubic.easeOut,
			onComplete:function(){
				if (scrollcounter > 1){
					upimage.setStyle('display', 'block');	
				}
				
				if (scrollcounter < totalscrolls){
					downimage.setStyle('display', 'block');	
				}

                                effectbusy=false;
				
			}.bind(this)
		});
		
		
		this.scrolldownButton.addEvent("click", function(e){
                    if (effectbusy == false){
                        e.stop();
			scrollcounter ++;
                        
			if (scrollcounter == totalscrolls){
				downimage.setStyle('display', 'none');
			}
			
			myFx.start('top', this.subdiv.getStyle('top'), this.subdiv.getStyle('top').toInt()-scrollheight);
                        effectbusy = true;
                    }
		}.bind(this));
		
		
		this.scrollupButton.addEvent("click", function(e){
                    if (effectbusy == false){
			e.stop();
			scrollcounter --;
			
                        if (scrollcounter == 1){
				upimage.setStyle('display', 'none');
			}
			
			myFx.start('top', this.subdiv.getStyle('top'), this.subdiv.getStyle('top').toInt()+scrollheight);
                        effectbusy = true;
                    }
		}.bind(this));
		
		
		
		document.getElementById("readmore").addEvent("mouseover", function(e){
			e.stop();
			document.getElementById("navtext").innerHTML = 'lees meer'
		}.bind(this));
		
		document.getElementById("readmore").addEvent("mouseout", function(e){
			e.stop();
			document.getElementById("navtext").innerHTML = ''
		}.bind(this));
		
		document.getElementById("readless").addEvent("mouseover", function(e){
			e.stop();
			document.getElementById("navtext").innerHTML='lees minder'
		}.bind(this));
		
		document.getElementById("readless").addEvent("mouseout", function(e){
			e.stop();
			document.getElementById("navtext").innerHTML = ''
		}.bind(this));
	
		
	}
});