/** Klasse für einfache Gallerien */
var GalleryBox = new Class({
	Implements: Options,

	options: { //default-Werte
		navigationInterval: 2, //Anzahl der Items, die bei den weiterblättern Buttons weitergeblättert werden
		maxDisplayedMenuItems: 10, //Anzahl der maximal angezeigten Menüelemente
		turnTimerInterval: 15, //Sekunden bis zum nächsten automatischen umblättern, 0 deaktiviert das automatische umblättern
		initialPosition: 0, //am Anfang angezeigtes item
		uniqueContainerId: null, //Id Galerieelement
		imagePrefix: '',
		imageSuffix: '.jpg',
		thumbPrefix: '',
		thumbSuffix: '.jpg',
		items: [] //Anzeigeelemente
	},

	//membervariablen
	currentMenuPosition: 0, //aktuelle Scrollposition im Menü
	currentDisplayedItem: null, //aktuell angezeigtes Element
	fxScroll: null, //hilfsobjekt für die Scrollfunktion im Menü
	elNavigationContainerWindow: null, //Navigationsbereich
	elNavigationContainerInner: null, //kompletter, teilweise verdeckter Navigationsbereich für Scrolleffekt
	arrElNavigationItems: null, //HTML Elemente aller Menüitems
	turnTimer: null, //delay zum automatischen umblättern
	uniqueContainer: null, //Galerieelement

	/** Initialisieren, Objekte finden und Scroller binden */
	initialize: function(options) {
		//options übernehmen
		this.setOptions(options);

		this.uniqueContainer = $(this.options.uniqueContainerId);
		if(this.uniqueContainer==null) { return; } //hauptcontainer muss übergeben sein
		if(this.options.items.length==0) { this.uniqueContainer.hide(); return; } //Wenn keine Inhalte vorhanden sind, wird die Gallerie nicht angezeigt

		//Jeweils an das erste passende Element binden. Wenn die entsprechenden Elemente nicht gefunden werden, wird die Gallerie nicht angezeigt
		this.elGalleryImage = this.uniqueContainer.getElements('.gallery-image')[0];
		if(this.uniqueContainer==null) { this.uniqueContainer.hide(); return; }
		this.elNavigationContainerWindow = this.uniqueContainer.getElements('.navigation-container-window')[0];
		if(this.elNavigationContainerWindow==null) { this.uniqueContainer.hide(); return; }
		this.elNavigationContainerInner = this.elNavigationContainerWindow.getElements('.navigation-container-inner')[0];
		if(this.elNavigationContainerInner==null) { this.uniqueContainer.hide(); return; }

		this.injectItems(); //Menüelemente laden

		//Scroller initialisieren
		this.fxScroll = new Fx.Scroll(this.elNavigationContainerWindow, {
			offset: {
				'x': 0,
				'y': 0
			}
		})

		this.bindEvents(); //events an Elemente binden

		this.navigate(this.options.initialPosition); //zur Startposition scrollen
		this.displayItem(this.options.initialPosition); //Startposition item anzeigen

		//automatisches umblättern starten
		if(this.options.turnTimerInterval>0) { this.turnTimer = this.turnOver.delay((this.options.turnTimerInterval*1000), this); }
	},

	/** fügt die thumbs der navigation hinzu */
	injectItems: function() {
		this.elNavigationContainerInner.empty(); //html container leeren
		this.arrElNavigationItems = []; //liste der navigationselemente leeren (für scroller)

		this.options.items.each(function(item, itemKey) { //alle elemente durchlaufen
			//für jedes Element ein Thumbnail einfügen und merken
			var elItem = new Element('img', {
				'src': this.options.thumbPrefix + item.id + this.options.thumbSuffix,
				'events': { 'click': function() { this.displayItem(itemKey); }.bind(this) }
			})
			this.elNavigationContainerInner.grab(elItem);
			this.arrElNavigationItems.include(elItem);
		}.bind(this));
	},

	/** zeigt das übergebene item in groß an */
	displayItem: function(itemKey) {
		this.currentDisplayedItem = itemKey;
		this.elGalleryImage.fade('out'); //bild sanft ausblenden
		this.elGalleryImage.set({'src': this.options.imagePrefix + this.options.items[itemKey]['id'] + this.options.imageSuffix}); //neues bild laden

		//das angezeigte Item im Menü hervorheben
		this.arrElNavigationItems.each(function(el) { el.removeClass('active'); });
		this.arrElNavigationItems[itemKey].addClass('active');
	},

	/** blättert weiter auf das nächste Element */
	turnOver: function() {
		var nextItemKey = (this.currentDisplayedItem+1)%this.options.items.length

		this.displayItem(nextItemKey);
		
		//TODO: prüfen, ob gebättert werden muss um das aktuelle element im menü zu sehen
		if(nextItemKey > (this.currentMenuPosition+(this.options.maxDisplayedMenuItems-1)) || nextItemKey < this.currentMenuPosition) {
			this.navigate(nextItemKey);
		}

		if(this.options.turnTimerInterval>0) { this.turnTimer = this.turnOver.delay((this.options.turnTimerInterval*1000), this); }
	},

	/** GUI Events binden */
	bindEvents: function() {
		window.addEvent('domready', function() {
			//menü zurückblättern
			this.uniqueContainer.getElements('.btn-prev').each(function(el) {
				el.fade('hide'); //wird anfangs nicht angezeigt
				el.addEvent('click', function() {
					this.navigatePrev();
				}.bind(this))
			}.bind(this))

			//menü vorblättern
			this.uniqueContainer.getElements('.btn-next').each(function(el) {
				el.fade('hide'); //wird anfangs nicht angezeigt
				el.addEvent('click', function() {
					this.navigateNext();
				}.bind(this))
			}.bind(this))

			//gallerie mit der maus überfahren > automatisches umblättern beenden
			this.uniqueContainer.addEvent('mouseenter', function() {
				if(this.turnTimer != null) { clearTimeout(this.turnTimer); this.turnTimer = null; }
			}.bind(this))
			
			//gallerie mit der maus verlassen > automatisches umblättern starten
			this.uniqueContainer.addEvent('mouseleave', function() { 
				if(this.turnTimer == null && this.options.turnTimerInterval>0) { this.turnTimer = this.turnOver.delay((this.options.turnTimerInterval*1000), this); }
			}.bind(this))

			//großes bild wird sanft eingeblendet, sobald es (neu) geladen ist
			this.elGalleryImage.addEvent('load', function() {
				this.elGalleryImage.fade('in');
			}.bind(this))

		}.bind(this));
	},

	/** feste anzahl vor blättern */
	navigateNext: function() { this.navigate((this.currentMenuPosition+this.options.navigationInterval)); },

	/** feste anzahl zurück blättern */
	navigatePrev: function() { this.navigate((this.currentMenuPosition-this.options.navigationInterval)); },

	/** Scrollen zu einem bestimmten Element */
	navigate: function(item) {
		if(item > (this.arrElNavigationItems.length-this.options.navigationInterval)) { item=(this.arrElNavigationItems.length-this.options.navigationInterval); }
		if(item < 0) { item=0; }

		//buttons ein/ausblenden
		this.uniqueContainer.getElements('.btn-prev').each(function(el) { el.fade(((item <= 0) ? 'out' : 'in')); });
		this.uniqueContainer.getElements('.btn-next').each(function(el) { el.fade(((item >= (this.arrElNavigationItems.length-this.options.navigationInterval)) ? 'out' : 'in')); }.bind(this));

		//an die gewünschte Position scrollen
		this.fxScroll.toElement(this.arrElNavigationItems[item]);

		this.currentMenuPosition = item;
	}

});


/** Erweiterung der Klasse für PWO */
var PferdewettenGalleryBox = new Class({
	Extends: GalleryBox,

	elInfoCaption: null,
	elInfoText: null,
	elInfoTarget: null,
	arrElButtons: null,

	initialize: function(options) {
		this.parent(options);
		
	},

	/** zeigt das übergebene item in groß an */
	displayItem: function(itemKey) {
		this.parent(itemKey); //normale Verarbeitung wie in Elternklasse

		if(this.elInfoCaption == null) { this.elInfoCaption = this.uniqueContainer.getElements('.info-stripe')[0].getElements('h3'); }
		if(this.elInfoText == null) { this.elInfoText = this.uniqueContainer.getElements('.info-stripe')[0].getElements('p'); }
		if(this.elInfoTarget == null) { this.elInfoTarget = this.uniqueContainer.getElements('.info-stripe')[0].getElements('a'); }
		if(this.arrElButtons == null) { this.arrElButtons = this.uniqueContainer.getElements('.info-stripe')[0].getElements('li'); }

		//Text austauschen
		this.elInfoCaption.set('text', this.options.items[itemKey]['caption']);
		this.elInfoText.set('text', this.options.items[itemKey]['text']);
		this.elInfoTarget.set('href', this.options.items[itemKey]['target']);
		
		//links austauschen
		for(var i=0; i<this.arrElButtons.length; i++) {
			this.arrElButtons[i].empty();

			if(this.options.items[itemKey]['buttons'][i] != undefined) {
				this.arrElButtons[i].grab(new Element('a', {
					text: this.options.items[itemKey]['buttons'][i]['text'],
					href: this.options.items[itemKey]['buttons'][i]['link']
				}));
			}
		}
		this.elInfoTarget.set('href', this.options.items[itemKey]['target']);
		
		//Button 1-3 verarbeiten
		for(var i=0; i<this.arrElButtons.length; i++) {
			this.arrElButtons[i].empty();

			if(this.options.items[itemKey]['buttons'][i] != undefined) {
				this.arrElButtons[i].grab(new Element('a', {
					text: this.options.items[itemKey]['buttons'][i]['text'],
					href: this.options.items[itemKey]['buttons'][i]['link']
				}));
			}
		}

	}

});