//Javascript | Copyright (c) 2009 Benedikt Morschheuser | BMo-design.de

window.addEvent('domready', function() {
  
	 if(Browser.Engine.webkit){//Safarihack
		if($('ReferenzenUnten')){
		 	$('ReferenzenUnten').setStyle('margin-top', '61px');
		}
	 }
	 if($('bilderScrollbereich')){
		//falls Dom Ready erst mal Scrollbar entfernen
		$('bilderScrollbereich').setStyle('overflow', 'hidden');
		$('bilderScrollbereich').setStyle('overflow-x', 'hidden');
		$('contentScrollbereich').setStyle('overflow', 'hidden');
		$('bilderScrollbereich').setStyle('overflow-x', 'hidden');
	
		//globale Variablen
		var aktuellePositionX = 0;
		var aktivesEvent = false;
		var aktivesScrollEvent = null;
		var myScrollFx = null;
		var interval = null;
		var speed = 4;
		
		//Scrolleffent auf Element bilderScrollbereich
		myScrollFx = new Fx.Scroll('bilderScrollbereich', {
			offset: {
				'x': aktuellePositionX,
				'y': 0
			} 
		});
		myScrollFx2 = new Fx.Scroll2('contentScrollbereich', {
			offset: {
				'x': 0,
				'y': 0
			} 
		});
	
		//animation
		var scrollME = function(){
			if(aktivesScrollEvent){
				if(aktivesScrollEvent.client.x>$('bilderScrollbereich').getPosition().x+aktuellePositionX+$('bilderScrollbereich').getSize().x/2+200){//rechts von Mitte des Bildschirms + nichts mach Zone 200px = 2*100px
					aktuellePositionX+=speed;
					if(aktuellePositionX>=$('bilderScrollbereich').getScrollSize().x-$('bilderScrollbereich').getSize().x){
						aktuellePositionX=$('bilderScrollbereich').getScrollSize().x-$('bilderScrollbereich').getSize().x;
					}
					myScrollFx.set(aktuellePositionX, 0);
				}
				if(aktivesScrollEvent.client.x<$('bilderScrollbereich').getPosition().x+aktuellePositionX+$('bilderScrollbereich').getSize().x/2-200){//links von Mitte des Bildschirms  - nichts mach Zone 300px = 2*100px
					aktuellePositionX-=speed;
					if(aktuellePositionX<=0){
						aktuellePositionX=0;
					}
					myScrollFx.set(aktuellePositionX, 0);
				}
				//$('text').set('html',$('bilderScrollbereich').getPosition().x+" "+aktuellePositionX+" "+$('bilderScrollbereich').getSize().x);
			}
		};
		
		//Events
		$('bilderScrollbereich').addEvent('mouseenter', function(event){ 
			event.stop(); 
			if(aktivesEvent==false){
				aktivesScrollEvent = event;
				aktivesEvent = true;
				$clear(interval);//zur Sicherheit
				interval = scrollME.periodical(5);
			}
		});
		$('bilderScrollbereich').addEvent('mousemove', function(event){ 
			event.stop(); 
			aktivesScrollEvent = event; //update
			if(aktivesEvent==false){// falls gestopt wieder starten
				aktivesEvent = true;
				$clear(interval);//zur Sicherheit
				interval = scrollME.periodical(5);
			}
		});
		$('bilderScrollbereich').addEvent('mouseleave', function(event){ 
			event.stop(); 
			$clear(interval);
			aktivesEvent = false;
			aktivesScrollEvent = null;
		});
		//alle images im Scrollbereich mit Events versehen
		var alleBilder = $('scrollInhalt').getElements('img');
		$each(alleBilder, function(imgObjekt, index){
			imgObjekt.addEvent('click', function(event){ 
				event.stop(); 
				$clear(interval);
				aktivesEvent = true;
				/*var verzoegerung = function(){
					aktivesEvent = false;
				}.delay(1500); //verzögerung, bevor scrollen wieder starten kann*/
				//bild öffnen
				var alleBilderimContent = $('contentscrollInhalt').getElements('img');
				$each(alleBilderimContent, function(imgObjektimContent, index){																
					if(this.get('src')==imgObjektimContent.get('src')){
						//alert(imgObjektimContent.get("src"));
						myScrollFx2.toElement(imgObjektimContent); // scrollt zu Bild im content
					}
				}.bind(this));
			});
			imgObjekt.addEvent('mouseleave', function(event){ 
		 		event.stop();
				aktivesEvent = false;  
		    });
			if(index==0){//zum erstn Bild hinscrollen, damit man richtig starten kann
				myScrollFx2.toElement($('contentscrollInhalt').getElement('img'));
			}
		});
	 }
	 
/* vertikale Scrollbar für Texte erzeugen mit*/
	if($('content')){
		$('content').setStyle('overflow', 'hidden');
		$('contentBack').setStyle('overflow', 'hidden');
		$('content').setStyle('width', $('contentBack').getStyle('width').toString());
		$('content').setStyle('height',  $('contentBack').getStyle('height').toString());
		var myscrollbar = new ScrollBar('contentBack', 'content', {
			'arrows': true,
			'hScroll': false
		});
	}	
});

/**************************************/
//by http://greghoustondesign.com/examples/mootools/scrollbars/ | Autor unbekannt | © 2008 Greg Houston

var ScrollBar = new Class({
		Implements: [Events, Options],
		options: {
			maxThumbSize: 15,
			wheel: 8,
			arrows: true,
			hScroll: true // horizontal scrollbars
		},
		initialize: function(main, content, options){
			this.setOptions(options);
			
			this.main = $(main);
			this.content = $(content);
			
			if (this.options.arrows == true){
				this.arrowOffset = 30;
			} else {
				this.arrowOffset = 0;
			}
			
			if (this.options.hScroll == true){
				this.hScrollOffset = 15;
			} else {
				this.hScrollOffset = 0;
			}				

			this.vScrollbar = new Element('div', {
    				'class': 'vScrollbar'
				}).injectAfter(this.content);				

			if (this.options.arrows == true){				
				this.arrowUp = new Element('div', {
    					'class': 'arrowUp'
					}).injectInside(this.vScrollbar);
			}	

			this.vTrack = new Element('div', {
    				'class': 'vTrack'
				}).injectInside(this.vScrollbar);
				
			this.vThumb = new Element('div', {
    				'class': 'vThumb'
				}).injectInside(this.vTrack);

			if (this.options.arrows == true){				
				this.arrowDown = new Element('div', {
    					'class': 'arrowDown'
					}).injectInside(this.vScrollbar);
			}		
			
			this.hScrollbar = new Element('div', {
    				'class': 'hScrollbar'
				}).injectAfter(this.vScrollbar);

			if (this.options.arrows == true){							
				this.arrowLeft = new Element('div', {
    					'class': 'arrowLeft'
					}).injectInside(this.hScrollbar);
			}		

			this.hTrack = new Element('div', {
    				'class': 'hTrack'
				}).injectInside(this.hScrollbar);
				
			this.hThumb = new Element('div', {
    				'class': 'hThumb'
				}).injectInside(this.hTrack);							
	
			if (this.options.arrows == true){
				this.arrowRight = new Element('div', {
    					'class': 'arrowRight'
					}).injectInside(this.hScrollbar);
			}											

			this.corner = new Element('div', {
    				'class': 'corner'
				}).injectAfter(this.hScrollbar);
			
			this.bound = {
				'vStart': this.vStart.bind(this),
				'hStart': this.hStart.bind(this),				
				'end': this.end.bind(this),
				'vDrag': this.vDrag.bind(this),
				'hDrag': this.hDrag.bind(this),				
				'wheel': this.wheel.bind(this),
				'vPage': this.vPage.bind(this),
				'hPage': this.hPage.bind(this)				
			};

			this.vPosition = {};
			this.hPosition = {};			
			this.vMouse = {};
			this.hMouse = {};			
			this.update();
			this.attach();
		},

		update: function(){
			
			this.main.setStyle('height', this.content.offsetHeight + this.hScrollOffset);
			this.vTrack.setStyle('height', this.content.offsetHeight - this.arrowOffset);
						
			this.main.setStyle('width', this.content.offsetWidth + 15);
			this.hTrack.setStyle('width', this.content.offsetWidth - this.arrowOffset);
			
			// Remove and replace vertical scrollbar			
			if (this.content.scrollHeight <= this.main.offsetHeight) {
				this.vScrollbar.setStyle('display', 'none');
				if (this.options.hScroll == true){				
					this.hTrack.setStyle('width', this.hTrack.offsetWidth + 15);
				}	
				this.content.setStyle('width', this.content.offsetWidth + 15);	
			} else {
				this.vScrollbar.setStyle('display', 'block');			
			}
			if (this.options.hScroll == true){			
				// Remove and replace horizontal scrollbar
				if (this.content.scrollWidth <= this.main.offsetWidth) {
					this.hScrollbar.setStyle('display', 'none');
					this.vTrack.setStyle('height', this.vTrack.offsetHeight + this.hScrollOffset);				
					this.content.setStyle('height', this.content.offsetHeight + this.hScrollOffset);	
				} else {
					this.hScrollbar.setStyle('display', 'block');			
				}
				// Remove and replace bottom right corner spacer			
				if (this.content.scrollHeight <= this.main.offsetHeight || this.content.scrollWidth <= this.main.offsetWidth) {
					this.corner.setStyle('display', 'none');				
				} else {
					this.corner.setStyle('display', 'block');			
				}		
				// Horizontal
				this.hContentSize = this.content.offsetWidth;
				this.hContentScrollSize = this.content.scrollWidth;
				this.hTrackSize = this.hTrack.offsetWidth;
				this.hContentRatio = this.hContentSize / this.hContentScrollSize;
				this.hThumbSize = (this.hTrackSize * this.hContentRatio).limit(this.options.maxThumbSize, this.hTrackSize);
				this.hScrollRatio = this.hContentScrollSize / this.hTrackSize;
				this.hThumb.setStyle('width', this.hThumbSize);
				this.hUpdateThumbFromContentScroll();
				this.hUpdateContentFromThumbPosition();			
			} else {
					this.hScrollbar.setStyle('display', 'none');
					this.corner.setStyle('display', 'none');										
			}
			// Vertical
			this.vContentSize = this.content.offsetHeight;
			this.vContentScrollSize = this.content.scrollHeight;
			this.vTrackSize = this.vTrack.offsetHeight;
			this.vContentRatio = this.vContentSize / this.vContentScrollSize;
			this.vThumbSize = (this.vTrackSize * this.vContentRatio).limit(this.options.maxThumbSize, this.vTrackSize);
			this.vScrollRatio = this.vContentScrollSize / this.vTrackSize;
			this.vThumb.setStyle('height', this.vThumbSize);
			this.vUpdateThumbFromContentScroll();
			this.vUpdateContentFromThumbPosition();
		},
		vUpdateContentFromThumbPosition: function(){
			this.content.scrollTop = this.vPosition.now * this.vScrollRatio;
		},
		hUpdateContentFromThumbPosition: function(){
			this.content.scrollLeft = this.hPosition.now * this.hScrollRatio;
		},		
		vUpdateThumbFromContentScroll: function(){
			this.vPosition.now = (this.content.scrollTop / this.vScrollRatio).limit(0, (this.vTrackSize - this.vThumbSize));
			this.vThumb.setStyle('top', this.vPosition.now);
		},
		hUpdateThumbFromContentScroll: function(){
			this.hPosition.now = (this.content.scrollLeft / this.hScrollRatio).limit(0, (this.hTrackSize - this.hThumbSize));
			this.hThumb.setStyle('left', this.hPosition.now);
		},		
		attach: function(){
			this.vThumb.addEvent('mousedown', this.bound.vStart);
			if (this.options.wheel) this.content.addEvent('mousewheel', this.bound.wheel);
			this.vTrack.addEvent('mouseup', this.bound.vPage);
			this.hThumb.addEvent('mousedown', this.bound.hStart);
			this.hTrack.addEvent('mouseup', this.bound.hPage);			
			if (this.options.arrows == true){
				this.arrowUp.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollTop -= this.options.wheel;
						this.vUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
				this.arrowUp.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
				this.arrowUp.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
				this.arrowDown.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollTop += this.options.wheel;
						this.vUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
				this.arrowDown.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
				this.arrowDown.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
				this.arrowLeft.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollLeft -= this.options.wheel;
						this.hUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
				this.arrowLeft.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
				this.arrowLeft.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
				this.arrowRight.addEvent('mousedown', function(event){
						this.interval = (function(event){
						this.content.scrollLeft += this.options.wheel;
						this.hUpdateThumbFromContentScroll();
					}.bind(this).periodical(40))
				}.bind(this));
				this.arrowRight.addEvent('mouseup', function(event){
					$clear(this.interval);
				}.bind(this));
				this.arrowRight.addEvent('mouseout', function(event){
					$clear(this.interval);
				}.bind(this));
			}			
		},
		wheel: function(event){
			this.content.scrollTop -= event.wheel * this.options.wheel;
			this.vUpdateThumbFromContentScroll();
			event.stop();
		},
		vPage: function(event){
			if (event.page.y > this.vThumb.getPosition().y) this.content.scrollTop += this.content.offsetHeight;
			else this.content.scrollTop -= this.content.offsetHeight;
			this.vUpdateThumbFromContentScroll();
			event.stop();
		},
		hPage: function(event){
			if (event.page.x > this.hThumb.getPosition().x) this.content.scrollLeft += this.content.offsetWidth;
			else this.content.scrollLeft -= this.content.offsetWidth;
			this.hUpdateThumbFromContentScroll();
			event.stop();
		},		
		vStart: function(event){
			this.vMouse.start = event.page.y;
			this.vPosition.start = this.vThumb.getStyle('top').toInt();
			document.addEvent('mousemove', this.bound.vDrag);
			document.addEvent('mouseup', this.bound.end);
			this.vThumb.addEvent('mouseup', this.bound.end);
			event.stop();
		},
		hStart: function(event){
			this.hMouse.start = event.page.x;		
			this.hPosition.start = this.hThumb.getStyle('left').toInt();
			document.addEvent('mousemove', this.bound.hDrag);
			document.addEvent('mouseup', this.bound.end);
			this.hThumb.addEvent('mouseup', this.bound.end);
			event.stop();
		},		
		end: function(event){
			document.removeEvent('mousemove', this.bound.vDrag);
			document.removeEvent('mousemove', this.bound.hDrag);			
			document.removeEvent('mouseup', this.bound.end);
			this.vThumb.removeEvent('mouseup', this.bound.end);
			this.hThumb.removeEvent('mouseup', this.bound.end);			
			event.stop();
		},
		vDrag: function(event){
			this.vMouse.now = event.page.y;
			this.vPosition.now = (this.vPosition.start + (this.vMouse.now - this.vMouse.start)).limit(0, (this.vTrackSize - this.vThumbSize));
			this.vUpdateContentFromThumbPosition();
			this.vUpdateThumbFromContentScroll();
			event.stop();
		},
		hDrag: function(event){
			this.hMouse.now = event.page.x;
			this.hPosition.now = (this.hPosition.start + (this.hMouse.now - this.hMouse.start)).limit(0, (this.hTrackSize - this.hThumbSize));
			this.hUpdateContentFromThumbPosition();
			this.hUpdateThumbFromContentScroll();
			event.stop();
		}		
});