// SlideDDShow Version 0.93
// FISolution
// 8. Juli 2008 19:24:04
// Uses mootools-beta-1.2b1-compatible.js
		
var SlideDDShow = new Class({
	Implements : [Options],
	options : {
		cssPrefix: 'sdd',
		bgColor: 'black',
		bgOpacity: 0.6,
		speed: 1000,
		transition:Fx.Transitions.Sine.easeInOut,
		imgCriteria: 'img',
		initSize: {
			x: 300,
			y: 250
		},
		interval: 4000,
		imageClick: true,
		arrowOpacity: 0.01,
		margin: 20,
		glow: false, 
		glowSize: 40,
		largeUrl: function(image) {
			return image.getParent().href;
		},
		createTitleBar: false,
		createTitleDisplay: false,
		displayOneImage: false
	},
	
	container: null,
	main: null,
	images: null,
	currentImage: null,
	currentTitle: "",
	titlebar: null,
	
	totalWidth: 0,
	totalHeight: 0,
	
	slideshow: false,
	slideshowInterval: null,
	titlediv: false,
	
	initialize: function(container, options) {
		this.container = container;
		this.setOptions(options);
		
		window.addEvent('domready', function() {
			this.container = $(this.container);
			this.images = this.container.getElements(this.options.imgCriteria);
			if(this.images.length <= 1) {
				this.options.displayOneImage = true;
			}
			this.images.each(function(image) {
				if(image.getParent().getTag() == 'a') {
					image.bigSrc = this.options.largeUrl(image);
					image.addEvent('click', function(e) {
						new Event(e).stop();
						this.loadImage(image);						
					}.bind(this));
				}
			}.bind(this));
		}.bind(this));
	},
	
	startSlideshow: function() {
		this.slideshow = true;
		this.loadNextImage();		
	},
	
	stopSlideshow: function() {
		window.clearInterval(this.slideshowInterval);
		this.slideshowInterval = null;
		this.slideshow = false;
		if(this.options.createTitleBar) {
			this.titlebar.setHTML('');
			this.options.createTitleBar(this);
		}
	},
	
	loadNextImage: function() {
		window.clearInterval(this.slideshowInterval);
		this.loadImage(this.getNextImage());
	},
	
	getNextImage: function() {
		if(this.images.length == 0) {
			return;
		}
		var found = false;
		var next = null;
		if(this.currentImage) {
			this.images.each(function(image) {
				if(found && !next) {
					next = image;
				}
				if(image.bigSrc == this.currentImage.src) {
					found = true;
				}
			}.bind(this));
		}
		if(!next) {
			next = this.images[0];
		}
		return next;		
	},
	
	getPrevImage: function() {
		if(this.images.length == 0) {
			return;
		}
		var found = false;
		var prev = null;
		if(this.currentImage) {
			this.images.each(function(image) {
				if(image.bigSrc == this.currentImage.src) {
					found = true;
				}
				if(!found) {
					prev = image;
				}
			}.bind(this));
		}
		if(!prev) {
			prev = this.images[this.images.length - 1];
		}
		return prev;		
	},
	
	loadPrevImage: function() {
		window.clearInterval(this.slideshowInterval);
		this.loadImage(this.getPrevImage());
	},
	
	loadImage: function(image) {
		window.clearInterval(this.slideshowInterval);
		if(!this.currentImage) this.draw();
		
		if(this.nextArrow) {
			this.nextArrow.fx.start({
				opacity: 0.001
			})
			this.prevArrow.fx.start({
				opacity: 0.001
			})
		}
		
		this.showLoadingImage();
		var img = new Asset.image(image.bigSrc, { 
			title: !this.options.createTitleDisplay ? image.title : "", 
			alt: image.alt,
			'class': this.options.cssPrefix + '_image',
			onload: function() {
				if(this.slideshow) {
					this.slideshowInterval = window.setInterval(this.loadNextImage.bind(this), this.options.interval);					
				}
				if(this.options.imageClick) {
					img.addEvent('click', function(e) {
						this.imageclick(img, e);
					}.bind(this));
				}
				
				img.oW = img.getSize().size.x;
				img.oH = img.getSize().size.y;
				
				var show = function() {
					this.currentTitle = image.title;
					this.currentImage = img;
					this.main.moveToCenter(function() {
						img.setStyles({
							position: 'relative',
							width: '100%',
							height: '100%'
						});
						this.hideLoadingImage(function() {
							img.fx.start({
								opacity: 1
							});	
						});
						
						this.showTitle();
						
						// preload Next
						var preload1 = this.getNextImage();
						if(preload1) new Asset.image(preload1.bigSrc);
						
						// preload Last
						var preload2 = this.getPrevImage();
						if(preload2) new Asset.image(preload2.bigSrc);
						
					}.bind(this));
					
				}.bind(this);
				
				if(this.currentImage) {
					this.currentImage.fadeOut(show);
				}
				else {
					this.currentImage = img;
					show();
				}
				
			}.bind(this)
		});
		img.fx = new Fx.Styles(img, {	
			wait:false, 
			transition: this.options.transition, 
			duration: this.options.speed * 0.4
		});
		img.fadeOut = function(oc) {
			img.fx.onComplete = function() {
				img.remove();
				if(oc) oc();
			};
			img.fx.start({
				opacity: 0.001
			});
		};
		
		img.setStyles({
			opacity: 0.001,
			position: 'absolute',
		});
		if(this.nextArrow) {
			img.setStyles({
				cursor: 'pointer',
			});
		}
		img.inject(this.mainImages);
	},
	
	imageclick: function(img, e) {
		if(this.nextArrow) {
			var middle = img.getPosition().x + img.getSize().size.x / 2;
			if(e.page.x > middle) {
				this.loadNextImage();
			}
			else {
				this.loadPrevImage();
			}
		}
	},
	
	showLoadingImage: function() {
		this.hideTitle();
		this.loadingImg.fx.set({
			display: null
		});
		this.loadingImg.fx.onComplete = function() {};
		this.loadingImg.fx.start({
			opacity: 1
		});
	},
	
	hideLoadingImage: function(oC) {
		this.loadingImg.fx.onComplete = function() {
			this.loadingImg.fx.set({
				display: 'none'
			});
			oC();
		}.bind(this);
		this.loadingImg.fx.start({
			opacity: 0.001
		});
	},
	
	close: function() {
		this.stopSlideshow();
		
		window.removeEvent('scroll', this.main.moveToCenter.bind(this));
		window.removeEvent('resize', this.main.moveToCenter.bind(this));
		
		this.currentImage = null;
		this.bodyOpacityDiv.fx.onComplete = function() {
			this.bodyOpacityDiv.remove();
			this.loadingImg.remove();
		}.bind(this);
		this.bodyOpacityDiv.fx.start({
			'opacity': 0.001
		});
		this.main.fx.onComplete = function() {
			this.main.remove();
		}.bind(this);
		this.main.fx.start({
			'opacity': 0.001
		});
		this.bodyOpacityDiv.fx.start({
			'opacity': 0.001
		});		
	},
	
	draw: function() {
		var scrollsizeX = document.getScrollSize().x;
		var scrollsizeY = document.getScrollSize().y;
		
		this.bodyOpacityDiv = new Element('div', {
			styles: {
				position: 'absolute',
				top: 0, 
				left: 0,
				width: window.getSize().size.x,
				height: window.getSize().size.y,
				backgroundColor: this.options.bgColor,
				opacity: 0.0001
			}
		}).inject(document.body);
		this.bodyOpacityDiv.fx = new Fx.Styles(this.bodyOpacityDiv, {	
			wait:false, 
			transition: this.options.transition, 
			duration: this.options.speed / 2
		}).start({
			'opacity': this.options.bgOpacity
		});
		this.bodyOpacityDiv.addEvent('click', this.close.bind(this));
		
		this.main = new Element('div', {
			'class': this.options.cssPrefix,
			styles: {
				position: 'absolute',
				opacity: 0.0001
			}
		}).inject(document.body);
		
		this.content = new Element('div', {
			'class': this.options.cssPrefix + "_content"			
		});
		
		this.drawGlow();
		
		if(this.options.createTitleBar) {
			this.titlebar = new Element('div', {
				'class': this.options.cssPrefix + '_titlebar'
			}).inject(this.content);
		}
		
		this.mainImages = new Element('div', {
			'class': this.options.cssPrefix + "_images",
			styles: {
				position: 'relative',
				overflow: 'hidden',
				cursor: this.options.imageClick && !this.options.displayOneImage ? 'pointer' : null,
				left:0,
				top:0
			}
		}).inject(this.content);
		this.mainImages.fx = new Fx.Styles(this.mainImages, {	
			wait:false, 
			transition: this.options.transition, 
			duration: this.options.speed * 0.2
		});
		
		this.drawArrows();
		
		this.drawLoadingImage();
			
		this.bodyOpacityDiv.addEvent('mouseover', function() {
			this.prevArrow.fx.start({
				'opacity': 0.001
			});
			this.nextArrow.fx.start({
				'opacity': 0.001
			});
		}.bind(this));
		this.mainImages.addEvent('mouseover', function(e) {
			if(e.target.getTag() != 'img') return;
			this.prevArrow.fx.start({
				'opacity': this.options.arrowOpacity
			});
			this.nextArrow.fx.start({
				'opacity': this.options.arrowOpacity
			});
		}.bind(this));
		
		this.main.moveToCenter = function(oc) {
			
			this.bodyOpacityDiv.setStyles({
				width: window.getSize().size.x,
				height: window.getSize().size.y,
				top: document.getScroll().y,
				left: document.getScroll().x
			});
			
			this.main.fx = new Fx.Styles(this.main, {	
				wait:false, 
				transition: this.options.transition, 
				duration: this.options.speed * 0.2,
				onComplete: oc ? oc : null
			});
			
			var width, height;
			var subX = this.main.getSize().size.x - this.mainImages.getSize().size.x;
			var subY = this.main.getSize().size.y - this.mainImages.getSize().size.y;
			var scrollsizeX = Math.min(document.getScrollSize().x, window.getSize().size.x);
			var scrollsizeY = Math.min(document.getScrollSize().y, window.getSize().size.y);
			var borderX = parseInt(this.mainImages.getStyle('borderLeft')) + parseInt(this.mainImages.getStyle('borderRight'));
			var borderY = parseInt(this.mainImages.getStyle('borderTop')) + parseInt(this.mainImages.getStyle('borderBottom'));
			
			if(this.currentImage) {
				width = this.currentImage.oW
				height = this.currentImage.oH;
				
				maxWidth = window.getSize().size.x - 2 * this.options.margin - subX;
				maxHeight = window.getSize().size.y - 2 * this.options.margin - subY;
				
				// Bild zu groß
				if(width > maxWidth) {
					var old = width;
					width = maxWidth;
					height = width / old * height;
				}
				if(height > maxHeight) {
					var old = height;
					height = maxHeight;
					width = height / old * width;
				}
				
				this.main.fx.start({
					left: (scrollsizeX  - width - subX) / 2 + document.getScroll().x,
					top: (scrollsizeY - height - subY) / 2 + document.getScroll().y,
					opacity: 1
				});
				this.mainImages.fx.start({
					width: width - borderX,
					height: height - borderY
				});
				
				// Position loading:
				var x = document.getScroll().x + (window.getSize().size.x - this.loadingImg.sizeX) / 2;
				this.loadingImg.setStyle('left', x);	
				var y = document.getScroll().y + (window.getSize().size.y - this.loadingImg.sizeY) / 2;
				this.loadingImg.setStyle('top', y);	
				
				
			}
			else {
				width = this.options.initSize.x;
				height = this.options.initSize.y;
				this.mainImages.fx.start({
					opacity: 1					
				});
			}
			
			if(this.options.createTitleBar && this.currentImage != null) {
				this.titlebar.setHTML('');
				this.options.createTitleBar(this);
			}
		}.bind(this);
		
		this.main.setToCenter = function() {
			var scrollsizeX = Math.min(document.getScrollSize().x, window.getSize().size.x);
			var scrollsizeY = Math.min(document.getScrollSize().y, window.getSize().size.y);
			this.main.setStyles({
				left: scrollsizeX / 2- this.main.getSize().size.x / 2,
				top: scrollsizeY / 2 - this.main.getSize().size.y / 2				
			});
		}.bind(this);
		
		this.main.setToCenter();
		this.main.moveToCenter();
		
		window.addEvent('scroll', this.main.moveToCenter.bind(this));
		window.addEvent('resize', this.main.moveToCenter.bind(this));
	},
	
	drawArrows: function() {
		if(this.options.displayOneImage) {
			return;
		}
		this.nextArrow = new Element('div', {
			'class': this.options.cssPrefix + "_nextArrow",
			styles: {
				position: 'absolute',
				opacity: 0.0001,
				right: 0
			}
		}).inject(this.mainImages);
		this.nextArrow.fx = new Fx.Styles(this.nextArrow, {	
			wait:false,
			transition: this.options.transition, 
			duration: this.options.speed * 0.2
		});
		this.nextArrow.addEvent('mouseover', function() {
			this.nextArrow.fx.start({
				'opacity': 1
			});
		}.bind(this));
		this.nextArrow.addEvent('mouseout', function() {
			this.nextArrow.fx.start({
				'opacity': this.options.arrowOpacity
			});
		}.bind(this));
		
		this.prevArrow = new Element('div', {
			'class': this.options.cssPrefix + "_prevArrow",
			styles: {
				position: 'absolute',
				opacity: 0.0001,
				left: 0
			}
		}).inject(this.mainImages);
		this.prevArrow.fx = new Fx.Styles(this.prevArrow, {	
			wait:false,
			transition: this.options.transition, 
			duration: this.options.speed * 0.2
		});
		this.prevArrow.addEvent('mouseover', function() {
			this.prevArrow.fx.start({
				'opacity': 1
			});
		}.bind(this));
		this.prevArrow.addEvent('mouseout', function() {
			this.prevArrow.fx.start({
				'opacity': this.options.arrowOpacity
			});
		}.bind(this));
		
		this.nextArrow.addEvent('click', function() {
			this.loadNextImage();
		}.bind(this));
		this.prevArrow.addEvent('click', function() {
			this.slideshow = false;
			this.loadPrevImage();
		}.bind(this));
	},
	
	drawLoadingImage: function() {
		this.loadingImg = new Element('div', {
			'class': this.options.cssPrefix + "_loading",
			styles: {
				position: 'absolute',
				opacity: 0.0001,
				left: '50%',
				top: '50%'
			}
		}).inject(document.body);
		this.loadingImg.sizeX = this.loadingImg.getSize().size.x;
		this.loadingImg.sizeY = this.loadingImg.getSize().size.y;
		this.loadingImg.fx = new Fx.Styles(this.loadingImg, {	
			wait:false,
			transition: this.options.transition, 
			duration: this.options.speed * 0.2
		});		
	},
	
	drawGlow: function() {
		if(this.options.glow && (!navigator.appName.match(/xplorer/) || navigator.appVersion.match(/\s+\d\.\d/) > 6)) {
			var glowtable = new Element('table', {
				styles: {
					borderCollapse: 'collapse'
				}
			});
			var glowtablebody = new Element('tbody').inject(glowtable);
			
			var tr = new Element('tr').inject(glowtablebody);
			
			new Element('td', { 
				'class': this.options.cssPrefix + "_glow_nw",
				styles: { 
					padding:0,
					width: this.options.glowSize,
					height: this.options.glowSize
				} 
			}).inject(tr);
			new Element('td', { 
				'class': this.options.cssPrefix + "_glow_n",
				styles: { 
					padding:0
				}
			}).inject(tr);
			new Element('td', { 
				'class': this.options.cssPrefix + "_glow_ne",
				styles: { 
					padding:0,
					width: this.options.glowSize,
					height: this.options.glowSize
				} 
			}).inject(tr);
			
			var tr = new Element('tr').inject(glowtablebody);
			
			new Element('td', { 
				'class': this.options.cssPrefix + "_glow_w",
				styles: { 
					padding:0,
					width: this.options.glowSize
				} 
			}).inject(tr);
			
			var c = new Element('td', {
				styles: {
					padding:0
				}
			}).inject(tr);
			this.content.inject(c);
			
			new Element('td', { 
				'class': this.options.cssPrefix + "_glow_e",
				styles: { 
					padding:0,
					width: this.options.glowSize
				} 
			}).inject(tr);
			
			var tr = new Element('tr').inject(glowtablebody);
			
			new Element('td', { 
				'class': this.options.cssPrefix + "_glow_sw",
				styles: { 
					padding:0,
					width: this.options.glowSize,
					height: this.options.glowSize
				} 
			}).inject(tr);
			new Element('td', { 
				'class': this.options.cssPrefix + "_glow_s",
				styles: { 
					padding:0,
					width: this.options.glowSize
				} 
			}).inject(tr);
			new Element('td', { 
				'class': this.options.cssPrefix + "_glow_se",
				styles: { 
					padding:0,
					width: this.options.glowSize,
					height: this.options.glowSize
				} 
			}).inject(tr);
			
			
			glowtable.inject(this.main);
		
		}
		else {
			this.content.inject(this.main);
		}
	},
	
	hideTitle: function() {
		if(!this.options.createTitleDisplay || !this.titlediv) {
			return;
		}
		if(this.titlediv != false) {
			this.titlediv.fx.onComplete = function() {
				this.titlediv.remove();
			}.bind(this);
			this.titlediv.fx.start({
				opacity: 0
			});
		}
	},
	
	showTitle: function() {
		if(!this.options.createTitleDisplay) {
			return;
		}
		
		var title = this.currentTitle; 
		if(title.trim() == "") return;
		
		this.titlediv = new Element('div', {
			'class': this.options.cssPrefix + "_title",
			styles: {
				opacity: 0.0001
			}
		}).inject(this.mainImages);
		
		this.options.createTitleDisplay(this);
		
		this.titlediv.fx = new Fx.Styles(this.titlediv, {	
			wait:false, 
			transition: this.options.transition, 
			duration: this.options.speed * 0.2
		});
		this.titlediv.fx.start({
			opacity: 1
		});
		
		
	}
	
});