var kellery=new Class({
	slides:[],
	positions:{thumbs:0,gallery:0},
	periodical:false,
	prepreloader:false,
	preloader:false,
	preloadimages:[],
	launch:function(){
		var i;
		for(i=0;i<this.gallery.length;i++){
			// this.preloadimages.push(this.gallery[i].bigO.get('src'),this.gallery[i].thumbO.get('src'));
			this.preloadimages.push(this.gallery[i].thumbO.get('src'));
			this.gallery[i].thumbO.setStyles({'border-color':this.colors.std});

			if(i==0) this.gallery[i].bigO.addClass('first');
			if(i==1) this.gallery[i].bigO.addClass('second');
		}

		this.gallery[0].thumbO.setStyles({'border-color':this.colors.em});
		this.move();

		this.prepreloader=new Asset.image(root+this.preloadimage,{
			onLoad:function(){
				this.dOs.loading.inject(this.container);

				this.preload=function(){
					var a=function(){
						this.gallery[0].bigO.inject(this.dOs.object);
						this.dOs.object.inject(this.container);
						this.dOs.loading.dispose();
						this.control({mode:'play'});
					};
					a.delay(500,this);
				};

				this.preloader=new Asset.images(this.preloadimages,{
					onComplete:function(){
						this.preload();
					}.bind(this)
				});
			}.bind(this),
			onError:function(){
			}
		});
	},
	overview:function(params){
		switch(params.mode){
			case true:
				this.dOs.ol.morph({right:0});
				if(this.pphover) this.control({mode:'pause'});
				break;
			case false:
			default:
				var w=0;
				w+=parseInt(this.dOs.ol.getStyle('margin-left'));
				w+=parseInt(this.dOs.ol.getStyle('border-left-width'));
				w+=parseInt(this.dOs.ol.getStyle('padding-left'));
				w+=parseInt(this.dOs.ol.getStyle('width'));
				w+=parseInt(this.dOs.ol.getStyle('padding-right'));
				w+=parseInt(this.dOs.ol.getStyle('border-right-width'));
				w+=parseInt(this.dOs.ol.getStyle('margin-right'));
				this.dOs.ol.morph({right:-w});
				if(this.pphover) this.control({mode:'play'});
				break;
		}
	},
	move:function(params){
		if(!params) params={};
		if(params.slide) this.positions.thumbs=params.slide;
		if(params.move) this.positions.thumbs+=params.move;

		if(this.positions.thumbs>this.gallery.length-4) this.positions.thumbs=this.gallery.length-4;
		if(this.positions.thumbs<0) this.positions.thumbs=0;

		var i;
		var h=0;
		for(i=0;i<this.gallery.length&&i<this.positions.thumbs;i++){
			var img=this.gallery[i];
			h+=parseInt(img.thumbO.getStyle('margin-top'));
			h+=parseInt(img.thumbO.getStyle('border-top-width'));
			h+=parseInt(img.thumbO.getStyle('padding-top'));
			h+=parseInt(img.thumbO.getStyle('height'));
			h+=parseInt(img.thumbO.getStyle('padding-bottom'));
			h+=parseInt(img.thumbO.getStyle('border-bottom-width'));
			h+=parseInt(img.thumbO.getStyle('margin-bottom'));
		}

		this.dOs.slider.morph({top:-h});

		var dh=parseInt(this.dOs.container.getStyle('height'))-parseInt(this.dOs.slider.getStyle('height'))+h;

		if(this.positions.thumbs<=0) this.dOs.sliderUp.addClass('inactive');
		else this.dOs.sliderUp.removeClass('inactive');

		if(this.positions.thumbs>=this.gallery.length-5) this.dOs.sliderDown.addClass('inactive');
		else this.dOs.sliderDown.removeClass('inactive');
	},
	control:function(params){
		if(!params) params={};
		var mode;
		switch(params.mode){
			case 'play':
			case 'pause':
				mode=params.mode;
				break;
			default:
				mode=this.dOs.control.hasClass('play')?'pause':'play';
				break;
		}
		switch(mode){
			case 'play':
				if(this.periodical) this.periodical=$clear(this.periodical);
				this.periodical=this.show.periodical(this.times.sliding,this);
				this.dOs.control.addClass('play');
				this.dOs.controldescriptor.set('html','<h1>Die Dia-Show wird abgespielt</h1><p>Klicken Sie hier, um die automatische Dia-Show zu <b>unterbrechen!</b></p>');
				break;
			case 'pause':
				this.periodical=$clear(this.periodical);
				this.dOs.control.removeClass('play');
				this.dOs.controldescriptor.set('html','<h1>Die Dia-Show ist unterbrochen</h1><p>Klicken Sie hier, um die automatische Dia-Show zu <b>starten!</b></p>');
				break;
		}
	},
	show:function(params){
		if(!params) params={};
		var newSlide;
		var oldSlide=this.positions.gallery;

		if(isFinite(params.slide)){
			newSlide=params.slide;
			if(!this.pphover) this.control({mode:this.thumbnailclick});
		}else{
			newSlide=this.positions.gallery+1;
		}

		if(newSlide>=this.gallery.length) newSlide=0;
		if(oldSlide==newSlide) return;

		for(i=0;i<this.gallery.length;i++){
			var img=this.gallery[i];
			img.bigO.removeClass('first');
			img.bigO.removeClass('second');

			switch(i){
				case oldSlide:
					img.bigO.addClass('second');
					img.bigO.setStyles({opacity:1});
					img.thumbO.setStyles({'border-color':this.colors.em});
					img.thumbO.morph({'border-color':this.colors.std});
					break;
				case newSlide:
					new Asset.image(img.bigO.get('src'),{
						onLoad:function(){
							this.gallery[this.positions.gallery].bigO.morph({opacity:1});
							this.dOs.loading.dispose();
						}.bind(this),
						onError:function(){
						}
					});
					this.dOs.loading.inject(this.container);

					img.bigO.inject(this.dOs.object);
					img.bigO.addClass('first');
					img.bigO.setStyles({opacity:0});
					img.thumbO.setStyles({'border-color':this.colors.std});
					img.thumbO.morph({'border-color':this.colors.em});
					break;
				default:
					img.bigO.dispose();
					img.bigO.setStyles({opacity:0});
					img.thumbO.setStyles({'border-color':this.colors.std});
					break;
			}
		}

		this.positions.gallery=newSlide;
	},
	initialize:function(params){
		this.gallery=params.gallery;
		this.container=params.container;
		this.times={blend:params.blend?params.blend:2000,sliding:params.sliding?params.sliding:5000};
		this.colors={std:params.thumbsstd?params.thumbsstd:'#ffffff',em:params.thumbsem?params.thumbsem:'#000000'};

		this.pphover=params.pphover?params.pphover:false;
		this.thumbnailclick=params.thumbnailclick?params.thumbnailclick:'pause';

		this.preloadimage='/layout/loading.gif';

		this.dOs={};
		this.dOs.loading=new Element('div',{'class':'kellery-loading'});
			(new Element('img',{src:root+this.preloadimage})).inject(this.dOs.loading);
		this.dOs.object=new Element('div',{'class':'kellery-object',events:{mouseenter:this.overview.bind(this,{mode:true}),mouseleave:this.overview.bind(this)}});
			this.dOs.ol=(new Element('div',{'class':'kellery-ol'})).inject(this.dOs.object);
				this.dOs.sliderUp=(new Element('div',{'class':'kellery-slider-up',events:{click:this.move.bind(this,{move:-1})}})).inject(this.dOs.ol);
				this.dOs.container=(new Element('div',{'class':'kellery-container'})).inject(this.dOs.ol);
					this.dOs.slider=(new Element('div',{'class':'kellery-slider',morph:{duration:this.times.blend,transition:Fx.Transitions.Sine.easeOut,link:'cancel'}})).inject(this.dOs.container);
				this.dOs.sliderDown=(new Element('div',{'class':'kellery-slider-down',events:{click:this.move.bind(this,{move:1})}})).inject(this.dOs.ol);
				this.dOs.sliderdescriptor=(new Element('div',{'class':'kellery-slider-descriptor'})).inject(this.dOs.ol);
				this.dOs.control=(new Element('div',{'class':'kellery-control',events:{click:this.control.bind(this)}})).inject(this.dOs.ol);
					this.dOs.controldescriptor=(new Element('div',{'class':'kellery-control-descriptor'})).inject(this.dOs.control);

		this.dOs.sliderdescriptor.set('html','<h1>Dia-Show</h1><p>Mit der Dia-Show möchten wir Ihnen einen ersten Eindruck über unsere Arbeit und unsere wunderschöne Umgebung machen.<br>Für eine bessere Übersicht können Sie Die-Show selbst steuern:</p><h2>Pfeile</h2><p>Wir haben viel zu zeigen und diese Übersicht enthält noch mehr Bilder, die Sie durch einen Mausklick auf die Rauf-/Runter-Pfeile über und unter dieser Übersicht erreichen!</p><h2>Auf ein Bild klicken</h2><p>Um ein Bild näher zu betrachten, klicken Sie es einfach an!</p>');

		var i;

		for(i=0;i<this.gallery.length;i++){
			var img=this.gallery[i];
			img.bigO=new Element('img',{
				src:root+img.path+img.fname,
				alt:'',
				morph:{duration:this.times.blend,transition:Fx.Transitions.Sine.easeOut}
			});

			img.thumbO=(new Element('img',{
				src:root+img.path+'thumbs/'+img.fname,
				alt:'',
				events:{click:this.show.bind(this,{slide:i})},
				morph:{duration:this.times.blend,transition:Fx.Transitions.Sine.easeOut}
			})).inject(this.dOs.slider);
		}

		this.launch();
	}
});