var scrollclass = new Class({
	Implements:Options, 	
	
	options:{
		main: 'contentleft',
		sub: 'movingdiv',
		scrollup: 'scrollup',
		scrolldown:'scrolldown',
		hovertext:'hovertext',
		scrollheight:85
	},
	
	initialize: function (options){

		this.setOptions(options);
		
		this.maindiv = $(this.options.main);
		this.subdiv = $(this.options.sub);
		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();
		
		
		if (this.subdiv.getStyle('height').toInt() < this.maindiv.getStyle('height').toInt()){
			downimage.getParent().setStyle('display', 'none');
		}else{
			downimage.setStyle('display', 'block')
			upimage.setStyle('display', 'none');
		}
		
			
		var myFx = new Fx.Tween(this.subdiv, {
			onComplete:function(){
				if (this.subdiv.getStyle('top').toInt() + (this.subdiv.getStyle('height').toInt() - (this.maindiv.getStyle('height').toInt()-this.maindiv.getStyle('top').toInt())) < 85){
					downimage.setStyle('display', 'none');
					console.log();
				}else{
					downimage.setStyle('display', 'block')					
				}
				if (this.subdiv.getStyle('top').toInt() == 0){
					upimage.setStyle('display', 'none');
					downimage.setStyle('display', 'block');
				}else{
					upimage.setStyle('display', 'block');
				}

			}.bind(this)
		});
		
		
	
		/*this.maindiv.setStyles({top: 50, position: 'absolute'});*/
		this.subdiv.setStyles({top:0, position:'absolute'});
		
		this.scrolldownButton.addEvent("click", function(e){
			e.stop();
			if (this.maindiv.getStyle('height').toInt() < this.subdiv.getStyle('height').toInt()+this.subdiv.getStyle('top').toInt()){
				myFx.start('top', this.subdiv.getStyle('top'), this.subdiv.getStyle('top').toInt()-this.options.scrollheight);
				upimage.setStyle('display', 'block')
			}	
		}.bind(this));
		
		document.getElementById("scrolldown").addEvent("mouseover", function(e){
			e.stop();
			document.getElementById("hovertext").innerHTML = 'Lees meer'
		}.bind(this));
		
		document.getElementById("scrolldown").addEvent("mouseout", function(e){
			e.stop();
			document.getElementById("hovertext").innerHTML = ''
		}.bind(this));
		
		document.getElementById("scrollup").addEvent("mouseover", function(e){
			e.stop();
			document.getElementById("hovertext").innerHTML='Lees minder'
		}.bind(this));
		
		document.getElementById("scrollup").addEvent("mouseout", function(e){
			e.stop();
			document.getElementById("hovertext").innerHTML = ''
		}.bind(this));
	
		this.scrollupButton.addEvent("click", function(e){
			e.stop();
			if (this.subdiv.getStyle('top').toInt()<0){
				myFx.start('top', this.subdiv.getStyle('top'), this.subdiv.getStyle('top').toInt()+this.options.scrollheight);
			}
		}.bind(this));
	}
});