/*
	Slideshow-Klasse
*/

var SlideShow = new Class({
	
	'initialize': function(args) {
		this.Id 				= args.id;
		this.Container			= $(this.Id);
		this.Width 				= args.width;
		this.Height 			= args.height;
		this.AutoStart 			= args.autoStart;
		this.Folder 			= args.folder;
		this.Images 			= args.images;
		this.LoadedImages		= new Array();	
		this.Captions 			= array_map(trim, decodeURIComponent(args.captions).split("\n"));
		this.Mode 				= args.mode;
		this.Size 				= '['+args.width+','+args.height+']';
		this.Interval 			= args.interval * 1000;
		this.ShowControls		= args.showControls;
		this.FadeDuration		= args.fadeDuration;
		
		this.IsPlaying			= this.AutoStart;
		this.Index				= 0;
		this.LastIndex			= this.Images.length -1;
		this.Direction			= 1;
		this.DisplayFrontImage 	= true;

		this.CreateHtml();
		this.PreloadImages();
	}, 
	
	/*
	 * Erzeugt die HTML-Elemente
	 * innerhalb des Slideshow-DIVs
	 */
	'CreateHtml': function() {
		this.ImageContainer = new Element('div', { 'class': 'imagecontainer'}).inject(this.Container);
		this.BackImage = new Element('img', { 'name':'Backimage', 'src': '../../core/img/default/blind.gif', 'styles': { 'height': this.Height,	'width': this.Width	}}).inject(this.ImageContainer);
		this.FrontImage = new Element('img', { 'name':'Frontimage', 'styles': { 'margin-top': -this.Height }}).inject(this.ImageContainer);
		this.FrontImage.fade('hide');
		this.FrontImage.set('tween', {
			'duration': this.FadeDuration, 
			'onStart': function() {
				this.CaptionContainer.set('html', this.NextCaption);
			}.bind(this),
			'onComplete': function() {
				if (this.DisplayFrontImage) {
					this.BackImage.set('src', this.NextImage);
				}
				else {
					this.FrontImage.set('src', this.NextImage)
				} 
				this.DisplayFrontImage = !this.DisplayFrontImage;
				
			}.bind(this)
		});
		// buttons
		this.Controller = new Element('div', { 'class': 'controller'}).inject(this.Container);
		if(!this.ShowControls)
			this.Controller.setStyle('display', 'none');
		this.SkipPrev = new Element('a', { 
			'html': '', 
			'href': 'javascript:;', 
			'class': 'skipprev'
		}).inject(this.Controller);
		this.PlayPause = new Element('a', { 
			'html': '', 
			'href': 'javascript:;', 
			'class': 'play',
		}).inject(this.Controller);
		this.SkipNext = new Element('a', { 
			'html': '', 
			'href': 'javascript:;', 
			'class': 'skipnext',
		}).inject(this.Controller);
		
		this.SkipNext.addEvent('click', function() {
			this.Stop();
			this.MakeUTurn(1);
			this.Run();
		}.bind(this));

		this.SkipPrev.addEvent('click', function() {
			this.Stop();
			this.MakeUTurn(-1);
			this.Run();
		}.bind(this));
		
		this.PlayPause.addEvent('click', function() {
			this.MakeUTurn(1);
			if(this.IsRunning)
				this.Stop();
			else
				this.Play();
		}.bind(this));
		

		
		// legende
		this.CaptionContainer = new Element('div', { 'class': 'captioncontainer'}).inject(this.Container);
	},
	
	/*
	 * Kehrt die Anzeigerichtung um
	 * und wechselt ggf. Bilder aus
	 */
	'MakeUTurn': function(dir) {
		if(this.Direction != dir) {
			this.Direction = dir;
			this.Index = this.NextIndex();
			this.Index = this.NextIndex();
			/* wenn das vordere Bild sichtbar ist,
			 * hinteres Bild austauschen
			 */
			if(this.DisplayFrontImage)
			{
				this.FrontImage.set('src', this.Images[this.Index]);
			}
			else
			{
				this.BackImage.set('src', this.Images[this.Index]);
			}
		}
	},
	
	
	/*
	 * Berechnet den nächsten oder vorher-
	 * gehenden Index für die Bilderliste
	 */
	'NextIndex': function() {
		var i = this.Index + this.Direction;
		if(i < 0)
			i = this.LastIndex;
		if(i > this.LastIndex)
			i = 0;
		return i;
	},
	
	'LoadImage': function() {
		this.FrontImage.src = this.Images[0];
		this.Run();
		if(this.AutoStart)
			this.Play();
	}, 
	
	'Run': function() {
		this.NextCaption = this.GetCaption(this.Index);
		this.Index = this.NextIndex(this.Direction);
		this.NextImage = this.Images[this.Index];
		this.FrontImage.fade('toggle');
	},
	
	'GetCaption': function(i) {
		var caption = null;
		try {
			if(caption = this.Captions[i])
				throw 'OK';
			else
				throw 'ERROR';
		}
		catch(e) {
			if(e == 'OK')
				return caption;
			else
				return '';
		}
	},
	
	'Play': function() {
		this.PlayPause.addClass('pause');
		this.IsRunning = true;
		var running = function() {
			this.Run();
		}.bind(this);
		this.Loop = running.periodical(this.Interval);
	},
	
	'Stop': function() {
		this.PlayPause.removeClass('pause');
		this.IsRunning = false;
		$clear(this.Loop);
	}, 
	
	'PreloadImages': function() {
		$each(this.Images, function(im, i) {
			this.Images[i] = '../../project/inc/imgpreview.php?url='+this.Folder+'/'+im+'&s='+this.Size+'&m='+this.Mode;
		}.bind(this));
		
		this.LoadedImages = new Asset.images(this.Images, {
			'onProgress': function(counter, index) {
				if (counter == 1) {
					this.LoadImage();
				}
			}.bind(this)
		});
	}
});