var bildstrecke = new Class({
	Implements: [Options,Events],
	options: {
		type: "default",
		offset: 220
	},
	index: 0,
	animating: false,
	direction: null,

	initialize: function(element,options) {
		if( !element ) {
			return;
		}
		
		this.element = element;
		this.setOptions(options);
		this.type = this.options.type;
		
		this.index = 0;		
		if( this.options.type == "default" ) {
			var self = this;
			this.list = this.element.getElements('span.img');
			
			var count = this.list.length;
			
			var margins = count * 19;
			var imgsize = count * 220;
			var width = margins + imgsize + 220;
			this.element.setStyles({
				'width' : width,
				'height':'124px',
				'position':'absolute'
			});
			
			this.buttons = this.element.getParent().getParent().getElements('a.icon');			
			$each(this.buttons, function(btn){
				if( btn.hasClass('back') ) {
					btn.addEvent('click', function(){
						self.go('fwd');
					});
				}
				else {
					btn.addEvent('click', function(){
						self.go('back');
					});
				}
			});
			this.element.getParent().setStyles({'height':130, 'position':'relative','overflow':'hidden','display':'block'});
			this.element.getParent().getParent().setStyles({'overflow':''});
		}
		else {
			this.list = this.element.getElements('.picline');
			if(!this.list.length>0)
				this.list = this.element.getElements('img');
			var count = this.list.length;
			var self = this;
			
			if( this.options.type == "big" ) {
				var imgsize = count * 700;
				var width = imgsize + 700;
				this.element.setStyles({
					'width' : width,
					'height':'394px',
					'position':'absolute'
				});
			}
			else {
				var imgsize = count * 460;
				var width = imgsize + 460;
				this.element.setStyles({
					'width' : width,
					'height':'258px',
					'position':'absolute'
				});
			}
			
			this.buttons = this.element.getParent().getParent().getElements('.icon');
			
			$each(this.buttons, function(btn){
				if( btn.hasClass('back') ) {
					btn.addEvent('click', function(){
						self.go('fwd');
					});
				}
				else {
					btn.addEvent('click', function(){
						self.go('back');
					});
				}
			});
			
			if( this.options.type == "big" ) {
				this.element.getParent().setStyles({'height':394, 'width':700, 'position':'relative','overflow':'hidden'});
			}
			else {
				this.element.getParent().setStyles({'height':258, 'width':460, 'position':'relative','overflow':'hidden'});
			}
		}
		
		this.fx = new Fx.Morph(this.element,{
			duration:500,
			transition: Fx.Transitions.Circ.easeOut,
			onStart: function() {
				self.animating = true;
				if( self.options.type == "default" ) {
					$each(self.list, function(li){
						li.removeClass('last');
					});
				}
			},
			onComplete: function() {
				self.animating = false;
				
				if( self.direction == "back" ) {
					var first = self.element.getFirst();
					
					self.element.removeChild(first);
					var data  = new Array();
					for(i = 1; i < self.list.length; i++) {
						data.push(self.list[i]);
					}
					
					var last = data[data.length-1];
					
					data.push(first);
					self.list = data;
					first.injectAfter(self.element.getLast());//self.element.getLast());
					
					if( self.options.type == "topteaser" ) {
						left = 30;
					}
					else {
						left = 0;
					}
					
					self.element.setStyles({
						'position':'absolute',
						'left':left
					});
					
					if( self.options.type == "default" ) {
						self.list[2].addClass('last');
					}
				}
				
				if( self.options.type == "middle" || self.type == "big" ) {
					var caption_element = self.element.getParent().getParent().getParent().getElement('span.caption');
					if( caption_element ) {
						var img = self.list[0].getElement('img');
						if( img ) {
							caption_element.set('html', img.title);
						}
					}
				}				
			}
		});
		
		this.fx.set({
			'position':'absolute',
			'left':0
		});
	},
	
	go: function(direction) {
		if( this.animating == true ) {
			return;
		}
		
		this.direction = direction;
		
		var x = this.options.offset;
		if( this.options.type == "default" )
			x+= 19; // add margin
		
		if( this.direction == "back" ) {
			this.fx.start({
				'position':'absolute',
				'left': -x
			});
		}
		else {
			var self = this;
			var last = this.element.getLast();
			
			this.element.removeChild(last);
			last.injectBefore(self.element.getFirst());
			
			var data  = new Array();
			data.push(last);
			
			for(i = 0; i < this.list.length-1; i++) {
				data.push(this.list[i]);
			}					
			
			this.list = data;
			
			var x = this.options.offset;
			this.element.setStyles({
				'position':'absolute',
				'left': (-x)+"px"
			});
			
			left = 0;
			this.fx.start({
				'position':'absolute',
				'left': left
			});
		}
	}
});