/**
 * STIL-BLUETE.NET - Handarbeit & Co.
 *
 * @date Oktober 2009
 * @author Nils Hörrmann, http://www.nilshoerrmann.de
 */
 
 
/**
 * Diashow
 */
 
var Diashow = new Class({

	Implements: [Options, Events],

	options: {
		turnus: 10000,
		index: 100
	},
	
	buehne: null,
	bilder: null,
	navi: null,
	interval: null,

	initialize: function(buehne, options){
		this.setOptions(options);
		this.buehne = $(buehne);
		if(!this.buehne) return false;
		this.bilder = this.buehne.getElements('img');
		// Bilder verstecken
		this.bilder.fade('hide');
		// Bilder sortieren
		if(this.bilder.length != 0) {
			this.bilder.each(function(bild, count) {
				bild.setStyle('z-index', this.options.index - count);
			}.bind(this));	
			// Erstes Bild anzeigen
			this.bilder[0].setStyle('z-index', this.options.index + 10).fade('show').addClass('aktiv');
			// Bedienelemente einfügen
			this.bedienung();
			// Diashow starten
			this.interval = this.blende.periodical(this.options.turnus, this);
		}
	},
	
	bedienung: function() {
		// Bedienelement
		this.navi = new Element('ul', {
			'class': 'bedienung',
			'styles': {
				'z-index': this.options.index + 50
			}
		}).inject(this.buehne);
		// Wahltasten	
		this.bilder.each(function(bild, position) {
			var taste = new Element('li', {
				'text': 'Bild ' + (position.toInt() + 1)
			}).inject(this.navi);
			taste.addEvent('click', function(event) {
				var taste = event.target;
				if(taste.hasClass('aktiv') == false) {
					// Marker neu setzen
					taste.getParent('ul').getElement('li.aktiv').removeClass('aktiv');
					taste.addClass('aktiv');
					// Diashow stoppen
					$clear(this.interval);
					$('schalter').set({
						'class': 'start',
						'text': 'Start'
					});
					// gewähltes Bild einblenden
					this.blende(this.bilder[taste.getParent('ul').getElements('li').indexOf(taste)]);				
				}
			}.bind(this));
		}.bind(this));
		// Stopptaste
		var stopp = new Element('li', {
			'id': 'schalter',
			'class': 'stopp',
			'text': 'Stopp'
		}).inject(this.navi);
		stopp.addEvent('click', function(event) {
			if(event.target.hasClass('stopp')) {
				$clear(this.interval);
				event.target.set({
					'class': 'start',
					'text': 'Start'
				});					
			}
			else {
				// Dia sofort weiterschieben
				this.blende();
				// und Interval starten
				this.interval = this.blende.periodical(this.options.turnus, this);
				event.target.set({
					'class': 'stopp',
					'text': 'Stopp'
				});				
			}
		}.bind(this));
		// Marker setzen
		this.navi.getElement('li').addClass('aktiv');
	},	
	
	blende: function(neu) {
		var alt = this.buehne.getElement('img.aktiv');
		if(!neu) {
			neu = alt.getNext('img');		
		}
		if(neu == null) {
			neu = this.buehne.getElement('img');
		}
		// Bilder austauschen
		neu.setStyle('z-index', this.index + 15);
		neu.fade('in').get('tween').chain(function() {
			alt.setStyle('z-index', this.index - this.buehne.getElements('img').length).removeClass('aktiv').fade('hide');
			neu.setStyle('z-index', this.index + 10).addClass('aktiv');
			// Marker setzen
			var marker = this.navi.getElements('li').removeClass('aktiv');
			marker[this.buehne.getElements('img').indexOf(neu)].addClass('aktiv');
		}.bind(this));
	}

});


/**
 * Ein- und ausklappbare Suche
 */
 
var Suchschieber = new Class({

    Implements: [Options, Events],

    options: {},
    
    form: null,
    
    initialize: function(form, options){
		this.setOptions(options);
		this.form = $(form);
		// Ausgangsstatus bestimmen
		if(window.location.pathname.length > 1) {
			this.form.addClass('geschlossen');
		}
		else {
			this.suche.delay(5000, this);
		}
		// Ereignisse: Manuelles Auf- und Zuklappen
		this.form.getElement('label').addEvent('click', function(event) {
			event.preventDefault();
			this.suche();
		}.bind(this));
    },
    
	suche: function() {
		var sucheFX = new Fx.Tween(this.form, {
			duration: 'normal',
			transition: 'quint:in:out'
		});
		if(this.form.getStyle('width').toInt() == '0') {
			sucheFX.start('width', this.form.getElement('fieldset').getSize().x);
		}
		else {
			sucheFX.start('width', '0');
		}	
	} 
    
});


/*
 * Eingabetipps
 */
 
var Eingabetipps = new Class({

    Implements: [Options, Events],

    options: {},
    
    initialize: function(input, options){
		this.setOptions(options);
		if(!input) return false;
		// Tipps initialisieren
		input.each(function(feld) {
			var erklaerung = feld.get('value').clean();
			if(erklaerung == '') {
				erklaerung = feld.getPrevious('label').get('text');
				feld.set('value', erklaerung);
			}
			feld.set({
				'events': {
					'focus': function(event) {
						if(event.target.get('value').clean() == erklaerung) {
							event.target.set('value', '');
						}
					},
					'blur': function(event) {
						if(event.target.get('value').clean() == '') {
							event.target.set('value', erklaerung);
						}
					}
				}
			});
		});
    }

});


/*
 * Produktkarussell
 */
 
var Karussell = new Class({

    Implements: [Options, Events],

    options: {},
    
    leinwand: null,
    dias: null,
    auswahl: null,
    produktbild: null,
    
    initialize: function(leinwand, dias, auswahl, options){
		this.setOptions(options);
		this.leinwand = leinwand;
		this.dias = dias;
		this.auswahl = auswahl;
		if(!leinwand || !dias || !auswahl) return false;
		// Ereignisse
		this.dias.getElements('a')[0].addEvent('click', function(event) {
			event.preventDefault();
			event.stopPropagation();
			this.rotation(event.target, true);
		}.bind(this));
		this.auswahl.getElement('select').addEvent('change', function(event) {
			var value = event.target.get('value');
			var artikel = dias.getElement('li a img[alt=' + value + ']')[0];
			if(artikel.getParent().hasClass('aktiv') == false) {
				this.rotation(artikel, false);
			}
		}.bind(this));
    },
    
    rotation: function(artikel, select) {
    	artikel = $(artikel); // benötigt für IE-Kompatibilität
    	// Warenkorb-Informationen ausblenden
	   	var warenkorb = $('inhalt').getElement('p.warenkorb');
	   	if(warenkorb) {
			var warenkorbFX = new Fx.Morph(warenkorb, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
			warenkorbFX.start({
			    'height': 0,
		    	'opacity': 0
			});
		}    	
		// Neues Produkt auswählen
		this.dias.getElements('a')[0].removeClass('aktiv');
		artikel.getParent('a').addClass('aktiv');
		if(select) {
			this.auswahl.getElement('option[value=' + artikel.getProperty('alt') + ']').set('selected', 'selected');
			this.auswahl.highlight('#ecf7c0');
		}
		// Neues Produktbild einblenden
		var anzeige = this.leinwand.getElement('img');
		var fxBlende = new Fx.Tween(anzeige, {
			property: 'opacity',
			duration: 'short',
			link: 'chain',
			onStart: function(alt) {
				var vollbild = new URI($('buehne').getElement('img').getProperty('src'));
				var vorschau = new URI(artikel.getProperty('src'));
				var bild = new Image();
				this.produktbild = $(bild).setProperty('src','http://' + vollbild.get('host') + vollbild.get('directory') + vorschau.get('file'));
			},
			onComplete: function(alt) {
				fxBlende.removeEvents('complete');
				format = alt.getSize();
				var neu = new Element(this.produktbild, {
					width: format.x,
					height: format.y,
					'class': 'produkt'
				}).fade('hide');
				neu.replaces(alt).fade('in');
			}
		});
		fxBlende.start(0);		
	}

});


/**
 * Stil-Blüte-Aktionen
 */ 

window.addEvent('domready', function() {

	// Diashow für die Startseite
	new Diashow('diashow');

	// Seitensuche
	var suche = $('meta').getElement('form');
	new Suchschieber(suche);
	new Eingabetipps(suche.getElements('input'));
	
	// Tipps für die Newsletteranmeldung
	var newsletter = $$('#newsletter input');
	new Eingabetipps(newsletter);
	
	// Karussell für Produktpräsentation
	var leinwand = $('buehne');
	var dias = $$('ul.produkt');
	var auswahl = $$('form.auswahl');
	new Karussell(leinwand, dias, auswahl);
	
	// Kalendermonat bei Seitenaufruf ansteuern
	if($('inhalt').hasClass('termine')) {
		var datum = new Date();
		var monat = $('inhalt').getElements('li')[datum.getMonth()]
		new Fx.Scroll(window, {
		    offset: {
		        'x': 0,
		        'y': -100
		    }
		}).toElement(monat);
	}	
	
	/**
	 * Ergänzungen für den Internet Explorer 6
	 * Hover-Effekt für die Navigation
	 */
	 
	if(Browser.Engine.trident == true && Browser.Engine.version == 4) {
		var menue = $('navigation').getElements('li.bestellen, li.besuchen, li.teilnehmen');
		var background;
		menue.addEvents({
			'mouseover': function() {
				if(this.hasClass('bestellen')) background = '#a0d54e'
				else background = '#3b3f3c';
				this.setStyles({
					overflow: 'visible',
					backgroundColor: background
				});
			},
			'mouseout': function() {
				if(this.hasClass('bestellen')) background = '#a0d54e'
				else background = '#4b504d';
				this.setStyles({
					overflow: 'hidden',
					backgroundColor: background
				});
			}
		});
	}
	
});