var cInlineImage = new Class({

		Implements: [Options],
		
		options: {
			auto: true,
			autostart: 0,
			autointerval: 2000,
			autoloop: 3,
			autoimages : ['img/11.jpg','img/22.jpg','img/33.jpg'],
			elfade:500
		},
		
		/*integrieren der bilder*/
		/* id grosses bild, class thumbnail */
		initialize: function(idGrImg, classThumb, loadingGif,options){
			this.setOptions(options);
			this.idGrImg = $(idGrImg);
			this.classThumb = classThumb;
			this.loadImg = loadingGif;
		},
		
		changeImg:function(){
			var fx = this.fx();
			var fx2 = this.fx2();
			var inspector = this.idGrImg;
			var loadImg = this.loadImg;
			
			$$('.'+this.classThumb).each(function(item){ 
				item.addEvent('click', function(e) { 
					e = new Event(e).stop();
					fx2.start({ 
						'opacity' : 0													
					}).chain(function(){
						
						var largeImage = new Element('img', { 'src': item.href });
						fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	
							largeImage.inject(inspector);
							fx.start({'opacity': 1});
						});
					});
				});
			});
		},
		
		fx:function(){
			return new Fx.Morph(this.idGrImg, {duration: this.options.elfade, transition: Fx.Transitions.Sine.easeOut});
		},
		
		fx2:function(){
			return new Fx.Morph(this.idGrImg, {duration: this.options.elfade, transition: Fx.Transitions.Sine.easeInOut});
		},
		
		autoChange : function(index){
			
			var m = this.idGrImg;
			var pBackground = this.options.autoimages[index];
			var interv = this.options.autointerval;
			var fx = new Fx.Tween(m,{
				duration: interv,
				onComplete: function(){ 
						m.setStyle('background-image','url(' + pBackground + ')');
						new Fx.Tween(m,{
							duration: interv	
						}).start('opacity',0,1)
				}
			});
			fx.start('opacity',1,0);
		},
		
		progress: function(){

			var curindex = this.options.autostart;
			if( curindex + 1 < this.options.autoimages.length ){
				this.options.autostart = curindex + 1;
			}
			else{
				this.options.autostart = 0;
				this.options.autoloop--;
				if( this.options.autoloop < 1 ){
					$clear(this.timmer);
					return false;
				}
			}
			this.autoChange( (curindex + 1 < this.options.autoimages.length) ? curindex + 1 : 0);
			
		},
		
		autoImg : function(){
			if( !this.options.auto ) return false;
			var autointervalComp = this.options.autointerval*3;
   			this.timmer = this.progress.periodical(autointervalComp, this);
		}
});