/*
 * 
 * JAVASCRIPTKLASSE SLIDESHOW
 * 
 */

 var SlideShow = new Class({
 	
	/*
	 * Kontstruktor
	 */
	initialize: function(args){
		this.container = $(args.containerID);
		this.dimensions = args.dimensions;
		this.strings = args.strings;
		this.resizerUrl = '../../resources/php/image_preview.php?';
		this.images = args.images;
		this.captions = args.captions;
		this.interval = args.interval;
		this.autoplay = false;
		this.index = 0;
		if ($chk(args.crossfade)) 
			this.crossfade = args.crossfade;
		else 
			this.crossfade = 'long';
		this.createHtml();
	}, 
	
	
	/*
	 * Erzeugt alle benötigten Elemente
	 */
	createHtml: function() {
		// Bildbehälter einfügen
		this.imgContainer = new Element('div', {
			'class':'imgcontainer'
		}).inject(this.container);
		
		// Bildelement 1 einfügen
		this.image1 = new Element('img', {
			'class':'slimage', 
			'styles': {
				'width': $chk(this.dimensions) ? this.dimensions.width : 'auto',
				'height': $chk(this.dimensions) ? this.dimensions.height : 'auto'
			}
		}).inject(this.imgContainer);
		this.image1.set('tween', {
			duration: this.crossfade
		});


		// Bildelement 2 einfügen
		this.image2 = new Element('img', {
			'class': 'slimage',
			'styles': {
				'width': $chk(this.dimensions) ? this.dimensions.width : 'auto',
				'height': $chk(this.dimensions) ? this.dimensions.height : 'auto' 
			}
		}).inject(this.imgContainer);
		this.image2.set('tween', {
			duration: this.crossfade
		});
		
		// Unterer Bereich
		this.bottomContainer = new Element('div', {
			'class':'bottomcontainer'
		}).inject(this.container);
		
		// Navigationsbereich
		this.navContainer = new Element('div', {
			'class': 'navcontainer'
		}).inject(this.bottomContainer);
		// Zurückblättern
		new Element('a', {
			'html': this.strings.backwards,
			'href': 'javascript:;', 
			'events': {
				'click': function() {
					this.loadImage(-1);
				}.bind(this)
			}
		}).inject(this.navContainer);
		
		// Play, sofern Interval vorhanden
		if($chk(this.interval)) {
			this.playbutton = new Element('a', {
				'html': this.strings.play, 
				'href': 'javascript:;' 
			}).inject(this.navContainer);
			this.playbound = this.play.bind(this);
			this.stopbound = this.stop.bind(this);
			this.playbutton.addEvent('click', this.playbound);
		}
		
		// Weiterblättern
		new Element('a', {
			'html': this.strings.forwards,
			'href': 'javascript:;', 
			'events': {
				'click': function() {
					this.loadImage(1);
				}.bind(this)
			}
		}).inject(this.navContainer);
		
		// Legende
		this.caption = new Element('div', {
			'class': 'slcaption'
		}).inject(this.bottomContainer);
		
		// Bildzähler
		this.counter = new Element('div', {
			'class': 'slcounter'
		}).inject(this.bottomContainer);
		
		// erstes Bild laden
		this.loadAllImages();
	}, 
	
	
	/*
	 * Zeigt das aktuelle Bild an
	 */
	loadImage: function(inc) {
		this.index += inc;
		if(this.index < 0) this.index = this.images.length-1;
		if(this.index > this.images.length-1) this.index = 0;
		
		var src = this.loadedImages[this.index].getProperty('src');

		
		// falls das erste Bild ausgeblendet ist, Quelle setzen und einblenden
		if(this.image1.getStyle('opacity') == 0) {
			this.image1.setProperty('src', src);
			this.image1.fade('toggle');	
			this.image2.fade('toggle');
		} else {
			this.image2.setProperty('src', src);
			var size = this.image2.getSize();
			this.image2.setStyle('margin-top',  -size.y); 
			this.image2.fade('toggle');
			this.image1.fade('toggle');
		}
		
			
		this.caption.set('html', unescape(this.captions[this.index]));
		this.counter.set('text', this.strings.image+(this.index+1)+this.strings.of+this.images.length);
	}, 
	
		
	/*
	 * Lädt das nächste oder vorhergehende Bild in der Liste
	 */
	loadAllImages: function(inc) {
		var imageUrls = new Array();
		$each(this.images, function(im) {
			var src = $chk(this.dimensions) ? this.resizerUrl+'url=../'+im+'&w='+this.dimensions.width+'&h='+this.dimensions.height+'&m='+this.dimensions.fillmode : '../'+im;
			imageUrls.push(src);			
		});
		this.loadedImages = new Asset.images(imageUrls, {
			'onComplete': function() {
				this.image1.fade('hide');
				this.image2.fade('show');
				this.loadImage(0);
			}.bind(this)
		});
	}, 
	
	
	/*
	 * Startet die automatische Wiedergabe
	 */
	play: function() {
		this.playbutton.set('html', this.strings.stop);
		this.playbutton.removeEvent('click', this.playbound);
		this.playbutton.addEvent('click', this.stopbound);
		this.periodicalTimer = this.loadImage.periodical(this.interval*1000, this, 1);
	}, 
	
	
	/*
	 * Stopt die automatische Wiedergabe
	 */
	stop: function() {
		this.playbutton.set('html', this.strings.play);
		this.playbutton.removeEvent('click', this.stopbound);
		this.playbutton.addEvent('click', this.playbound);
		$clear(this.periodicalTimer);
	}
	
 });