// JavaScript Document for pretty vertical scrolling if div has class scrollvert
// Grasgroen Media - WJWeitering
// todo: account for & crossbrowser-test all situations with scrollbars (horz and vert) padding border margin in div

var Scroller = new Class({
	initialize: function (div) {
		this.speed = 5;
		this.timer = null;
		this.clicked = false;
		
		this.div = div;
		this.divheight = div.clientHeight;
		
		ro = div.getStyle('overflow-y');
		div.setStyle('overflow-y', 'auto');
		this.contentheight = div.scrollHeight;
		div.setStyle('overflow-y', ro);
		
		if ( (this.contentheight > this.divheight) && (div.getElements('.contentpaneopen-leveranciers') == '') ) {	
			this.stopdown = this.divheight - 19;		
				
			// set styles
			div.setStyles({
				'overflow-y': 'hidden',
				height: this.divheight - 19
			});
			
			//inject divs
			this.innerdiv = new Element('div', {id: 'innerdiv'}).adopt(div.getChildren()).inject(div);
			this.outerdiv = new Element('div', {id: 'outerdiv'}).inject(div.getParent()).adopt(div);
			
			this.outerdiv.setStyles({
				border: 'none',
				float: div.getStyle('float') ? div.getStyle('float') : 'left', //todo: float none or float not set different in IE (?)
				height: div.getStyle('height'),
				width:div.getStyle('width'), //todo: account for padding & border
				margin: 0,
				padding: 0,
			});

			this.innerdiv.setStyles({
				'position': 'relative'
			});
			
			topoverflowdefault = this.innerdiv.getPosition(this.div).y;
			this.innerdiv.setStyle('overflow-y', 'hidden');
			topoverflowhidden = this.innerdiv.getPosition(this.div).y;
			this.innerdiv.setStyle('overflow-y', 'visible');			
			
			safariSpeedDiff = topoverflowdefault - topoverflowhidden;
			this.downspeed = this.speed + safariSpeedDiff;
			this.upspeed = this.speed - safariSpeedDiff;
			
			
			//inject scrollbuttons area
			this.scrollnav = new Element('div', {id: 'scrollnav'}).inject(this.outerdiv);			
			scrollnavwidth = div.getCoordinates().width - parseInt(this.scrollnav.getStyle('padding-left')) - parseInt(this.scrollnav.getStyle('padding-right'));
			
			this.scrollnav.setStyles({
				'width': scrollnavwidth + 'px'
			});
			
			
			this.scrollnav.set('html', '<a class="down"><img id="down" src="/images/scroll-down-15px.png" /></a> <a class="up"><img id="up" src="/images/scroll-up-15px.png" /></a><div class="scrollreadmore">meer lezen</div>');
			
			this.scrollnav.getFirst('a').addEvent('mouseover', function(event){
				this.timer = this.movedown.periodical(20, this)
				this.movedown();
			}.bind(this));
			
			this.scrollnav.getLast('a').addEvent('mouseover', function(event){
				this.timer = this.moveup.periodical(20, this)
				this.moveup();
			}.bind(this));
			
			this.scrollnav.getFirst('a').addEvent('mouseleave', function(event){
				$clear(this.timer);
			}.bind(this));
			
			this.scrollnav.getLast('a').addEvent('mouseleave', function(event){
				$clear(this.timer);
			}.bind(this));
			
			this.scrollnav.getFirst('a').addEvent('click', function(event){
				event.stop();
			});
			
			this.scrollnav.getLast('a').addEvent('click', function(event){
				event.stop();
			});
		}	
	},		
	movedown: function () {
		if (this.innerdiv.getPosition(this.div).y >= (-this.innerdiv.offsetHeight + this.stopdown))
			this.innerdiv.setStyle('top', this.innerdiv.getPosition(this.div).y - this.downspeed + "px");
		else $clear(this.timer);
	},
	moveup: function () {
		if (this.innerdiv.getPosition(this.div).y <= 0) {
			if (this.innerdiv.getPosition(this.div).y + this.speed <= 0) 
				this.innerdiv.setStyle('top', this.innerdiv.getPosition(this.div).y + this.upspeed + 'px');
			else this.innerdiv.setStyle('top', '0px'); 
		} else $clear(this.timer);
	}	
});


window.addEvent('domready', function(){
	//if (/*navigator.userAgent.match(/iPad/i) == null*/ !MobileDevice ) {
		$$(".scrollvert").each(function (div, i) {
			div.scroller = new Scroller(div);
		});
	//}
});

window.addEvent('click', function(event, win){ //for mobile devices we add: stop scrolling when clicked outside scrollbuttons
		$$(".scrollvert").each(function (div, i) {
			$clear(div.scroller.timer);
		});
		
		/*if (!this.debugdiv) this.debugdiv = new Element('div', {id: 'debugdiv'}).inject($('scrollnav'));
		this.debugdiv.set({
			'text':this.debugdiv.get('text') + ' ' + (!this.timer),
		});*/
				
});