var Galerie = new Class({
	initialize:function(param){
		
		// Throw Warnings
		if(!param.id) this.throwError('ERROR: ID missing!');
		if(!param.pathImages) this.throwError('ERROR: Image Path missing!');
		if(!param.pathInc) this.throwError('ERROR: Inc Path missing!');
		if(!$(param.id)) this.throwError('ERROR: Galerie Element missing!');
		if(!param.images) this.throwError('ERROR: Image Array missing!');
		
		// Collect Elements
		this.id = param.id;
		this.pathImages = param.pathImages;
		this.pathInc    = param.pathInc;
		this.elImages   = param.images;
		this.elGalerie  = $(this.id);
		this.elImage    = this.elGalerie.getElement('img');
		this.width		= this.elGalerie.getWidth();
		this.height		= this.elGalerie.getHeight();
		this.widthMax   = this.width * this.elImages.length;
		this.posX		= 0;
		this.poxXMax    = -(this.width*this.elImages.length);
		this.slidetime  = 1000;
		// Lets Go
		this.preloadImages();
		this.addElements();
		this.addEffects();
		this.addEvents();
		this.startAutoSlide();
	},
	addElements:function(){
		var $this = this;
		
		// Add Wrapper
		this.elWrapper = new Element('div',{
			'class':this.id+'-wrapper',
			'styles':{
				'width':this.widthMax	
			}
		});
		this.elWrapper.wraps(this.elImage);

		// Add Images
		this.elImages.each(function(item,index){
			if (index==0) return; // first is still there
			var image = new Element('img',{
				'class':$this.id+'-image',
				'src':$this.pathImages+item
			});
			image.inject($this.elWrapper);
		});
		
		// Add Inner Container
		this.elInnerContainer = new Element('div',{
			'class':this.id+'-container'
		});
		this.elInnerContainer.wraps(this.elWrapper);
		
		// Add Left Handle
		this.elHandleLeftSrc = this.pathInc+this.id+'-handle-left.png';
		this.elHandleLeftSrcHover  = this.pathInc+this.id+'-handle-left-hover.png';
		this.elHandleLeft = new Element('img',{
			'src': this.elHandleLeftSrc,
			'alt': 'Vorheriges Bild',
			'class': this.id+'-handle '+this.id+'-handle-left',
			'styles': {
				'opacity':0
			},
			'events':{
				'click':function(){
					$this.doSlide(0);	
				},
				'mouseover':function(){
					this.src=$this.elHandleLeftSrcHover;
				},
				'mouseout':function(){
					this.src=$this.elHandleLeftSrc;
				}
			}
		});
		this.elHandleLeft.inject(this.elGalerie);
		
		// Add Right Handle
		this.elHandleRightSrc = this.pathInc+this.id+'-handle-right.png';
		this.elHandleRightSrcHover  = this.pathInc+this.id+'-handle-right-hover.png';
		this.elHandleRight = new Element('img',{
			'src': this.elHandleRightSrc,
			'alt': 'Nächstes Bild',
			'class': this.id+'-handle '+this.id+'-handle-right',
			'styles': {
				'opacity':0
			},
			'events':{
				'click':function(){
					$this.doSlide(1);	
				},
				'mouseover':function(){
					this.src=$this.elHandleRightSrcHover;
				},
				'mouseout':function(){
					this.src=$this.elHandleRightSrc;
				}
			}
		});
		this.elHandleRight.inject(this.elGalerie);
	},
	addEffects:function(){
		var $this = this;
		this.elGalerieFx = new Fx.Tween(this.elWrapper, {
			'link':'ignore',
			'onComplete':function(){
				$this.posX = $this.posXnew; 
			}
		}).set('left',0);
	},
	addEvents:function(){
		var $this = this;
		this.elGalerie.set({
			'events':{
				'mouseenter':function(){
					$this.fadeHandles(1);
				},
				'mouseleave':function(){
					$this.fadeHandles(0);
				}
			}
		});
	},
	fadeHandles:function(dir){
		this.elHandleLeft.fade(dir);
		this.elHandleRight.fade(dir);
		if(dir) this.stopAutoSlide();
		else this.startAutoSlide();
	},
	doSlide:function(dir){
		var $this = this;
		var posXnew = (dir) ? this.posX-this.width : this.posX+this.width;
		// limit it
		if(dir && posXnew-this.width < -this.widthMax) {
			posXnew = 0;	
		} else if(posXnew > 0) {
			posXnew = -(this.widthMax-this.width);
		}
		this.posXnew = posXnew;
		this.elGalerieFx.start('left',this.posX,this.posXnew );
	},
	autoSlider: function($this){
		$this.doSlide(1);
	},
	startAutoSlide:function(){
		if(!this.slidetime) return;
		this.autoSlide = this.autoSlider.periodical(10000, null,this); 
	},
	stopAutoSlide:function(){
		if(!this.autoSlide) return;
		$clear(this.autoSlide);
	},
	preloadImages:function(){
		this.elPreloads = new Asset.images(this.elImages,{
			'onComplete':function(){
				//alert('loaded!');	
			}
		});
	},
	throwError:function(message){
		return confirm(message+'\nContinue?');
	}
});