/**
 * horizontales Scrolling
 * Grundfunktion von: http://elia.wordpress.com/2007/01/18/overflow-smooth-scroll-with-scriptaculous/
 */

Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
	initialize: function(element) {
	this.element = $(element);
	var options = Object.extend({
		x: 0,
		y: 0,
		mode: 'absolute'
	} , arguments[1] || {} );
	this.start(options);
	},
	
	setup: function() {
		if (this.options.continuous && !this.element._ext ) {
			this.element.cleanWhitespace();
			this.element._ext=true;
			this.element.appendChild(this.element.firstChild);
		}

		this.originalLeft=this.element.scrollLeft;
		this.originalTop=this.element.scrollTop;

		if(this.options.mode == 'absolute') {
			this.options.x -= this.originalLeft;
			this.options.y -= this.originalTop;
		}
	},
	update: function(position) {
		this.element.scrollLeft = this.options.x * position + this.originalLeft;
		this.element.scrollTop = this.options.y * position + this.originalTop;
	}
});

/**
 * Scrollelemente suchen und initalisieren
 */
 
	var bhScrollControlClass = Class.create();
	
	bhScrollControlClass.prototype = {
		initialize: function(params) {
		
			this.scrollDuration = 1;	// Scrolldauer
			this.rewindDuration = 1;	// Rückspuldauer

			this.elementsCumulativePosition = 0;	// Summe aller Breiten der Inhaltscontainer
		
			this.scrollContainerId = params.scrollContainerId;	// ID des Containers mit den Inhaltscontainern darin
			this.loadingContainerId = params.loadingContainerId // ID des übergeordneten Containers mit der Ladegrafik

			this.currentElementNr = 0;	// Zähler, Nummer des aktuell gezeigten Inhaltscontainers
			
			this.teaserDuration = params.teaserDuration;	// Anzeigedauer pro Teaser in Sekunden
			
			this.scrollElementSelector = params.scrollElementSelector;	// CSS-Selektor der Scrollelemente
			
			this.linkContainerId = params.linkContainerId;	// ID des Linkcontainers
			this.linkElementSelector = params.linkElementSelector	// CSS-Selektor der Links
			
//			Event.observe(window, 'load', this.setupScroller.bind(this));
			Event.observe(window, 'load', this.setupScroller.bind(this));
		},
			
		setupScroller: function() {
			
			// Inhaltscontainer ermitteln und positionieren
			this.scrollElements = $(this.scrollContainerId).select('.'+this.scrollElementSelector);
			this.scrollElementsWidths = new Array();	// Array mit den Breiten der Inhaltscontainern
			this.scrollElementsPositions = new Array();	// Array enthält die X-Position jedes Inhaltscontainers


			this.totalElements = this.scrollElements.length;	// Anzahl Inhaltscontainer
			
			for (i = 0; i < this.scrollElements.length; i++) {
				this.scrollElements[i].setStyle({left: this.elementsCumulativePosition+'px', display: 'block'});	// falls ausgeblendet, wiedereinblenden
				this.scrollElementsWidths[i] = this.scrollElements[i].getWidth();
				this.scrollElementsPositions[i] = this.elementsCumulativePosition;

				this.elementsCumulativePosition += this.scrollElementsWidths[i];

			}
			
			// Links ermitteln
//			this.linkContainerId = params.linkContainerId;
			this.links = $(this.linkContainerId).select('.'+this.linkElementSelector);
			this.links[this.currentElementNr].addClassName('teaserLinkSelected');
			
			// Ladegrafik entfernen
			$(this.loadingContainerId).setStyle({backgroundImage: 'none'});
			
			// Scrollobjekte einblenden
//			for (i = 0; i < this.scrollElements.length; i++) {
//				this.scrollElements[i].setStyle({display: 'block'});
//			}
			// Link-Morphing
			this.initLinkMorphing();
			
			// Scrolling beginnen
			this.startScrolling()
		},
		
		startScrolling: function() {
			this.scrollingExecuter = new PeriodicalExecuter(this.nextElement.bind(this), this.teaserDuration);
			this.startLinkMorphing()
		},
		
		nextElement: function() {

			this.scrollingExecuter.stop();

			// alten Link zurücksetzen
			this.links[this.currentElementNr].removeClassName('teaserLinkSelected');
			this.currentElementNr += 1;

			if (this.currentElementNr >= this.totalElements) { 
				this.rewind(); 
			} else {
				this.moveTo(this.scrollElements[this.currentElementNr], $(this.scrollContainerId)); 
				this.links[this.currentElementNr].addClassName('teaserLinkSelected');
				//this.startLinkMorphing();
			}
		},

		moveTo: function(element, container) {

			Position.prepare();
			var containerOffset = Position.cumulativeOffset(container),
			elementOffset = Position.cumulativeOffset($(element));

			this.scrolling = new Effect.SmoothScroll(container,
			{duration: this.scrollDuration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1]), afterFinish: this.startScrolling.bind(this)});
			return false;
		},
		
		rewind: function() {
			this.currentElementNr = 0;
			this.links[this.currentElementNr].addClassName('teaserLinkSelected');
			container = $(this.scrollContainerId);
			element = this.scrollElements[this.currentElementNr]
			
			Position.prepare();
			var containerOffset = Position.cumulativeOffset(container),
			elementOffset = Position.cumulativeOffset($(element));

			// Zurückspulen
			this.scrolling = new Effect.SmoothScroll(container,
			{duration: this.rewindDuration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1]), afterFinish: this.startScrolling.bind(this)});
			
			// Link-Morphing zurücksetzen
			for (i = 0; i < this.links.length; i++) {
				//this.links[i].setStyle({color: this.linkInitStyle});
				this.links[i].setStyle({color: ''});
			}
			return false;
		},

		initLinkMorphing: function() {
			this.linkInitStyle = this.links[0].getStyle('color');
		},
		
		startLinkMorphing: function() {
			new Effect.Morph(this.links[this.currentElementNr], {
												style: {
														color: '#a0a0a0'
														}, // CSS Properties
												duration: this.teaserDuration // Core Effect properties
											});		
		}
/*
		moveForward: function(pE) {

			var cP = parseInt($(this.scrollContainerId).getStyle('left'));
			cP -= (this.scrollElementsPositions[this.currentElementNr] + cP) * 0.01;
			$(this.scrollContainerId).setStyle({left: cP+'px'});

			if (0-cP >= this.scrollElementsPositions[this.currentElementNr]) {
				this.scrollingExecuter.stop();
				this.startScrolling();
			}
		},
	
		rewindElements: function(pE) {
			var cP = parseInt($(this.scrollContainerId).getStyle('left'));
			cP += 10;
			$(this.scrollContainerId).setStyle({left: cP+'px'});

			if (cP >= 0) {
				$(this.scrollContainerId).setStyle({left: '0px'});
				this.scrollingExecuter.stop();
				this.startScrolling();
			}
		}
*/	
	}
	
	// Initialisieren
	//Event.observe(window, 'load', function() {
		bhScrollControl = new bhScrollControlClass ({
													loadingContainerId: 'teaserScrollContainer',
													scrollContainerId: 'teaserScrollContainer',
													scrollElementSelector: 'teaserScrollElement',
													linkContainerId: 'teaserLinkContainer',
													linkElementSelector: 'teaserLink',
													teaserDuration: 7
													})
	//});