window.addEvent('domready', function() {


var myVideoPreview = new Videopreviewer($('videopreviewwrapper'))
});

var Videopreviewer = new Class ({
	options: {
			animationPeriod: '5000',
			itemWidth: 300,
			leftbutton: 'videopreviewwindow-left',
			rightbutton: 'videopreviewwindow-right',
			innerCarousel: 'videopreviewinnercarousel',
			counterElement: 'videopreviewcounter',
		},
	initialize: function(element,options){
		this.myMyVPItem = $(element); if (!this.myMyVPItem) return;
		this.currentPosition = 1;	
		this.CarouselLeft = 0;
		this.setOptions(options);
		this.myVideoArray = element.getElements('div.videopreviewitem');
		var i=0;
		this.myVideoArray.each(function(item, index){
			i++;
			var myClickImage = item.getElement('div.videopreviewimage img');
			var myVideoFile = '/uploads/tx_rgmediaimages/'+item.getElement('div.videopreviewlocation').getProperty('text');
			myClickImage.addEvent('click',function(){
				this.videoDiv.setStyles({'width':myClickImage.getStyle('width'),'height':myClickImage.getStyle('height'),'display':'block'});
				var params = {};
				params.wmode = 'transparent';
				var flashvars = {autostart:'true',file:myVideoFile}; 
				this.mySwiff = new Swiff('/fileadmin/javascript/videoplayer/player.swf',{
					'id':'videoplayerdiv',
					'width': myClickImage.getProperty('width'),
					'height': myClickImage.getProperty('height'),
					'params':{'wmode': 'opaque'},
					'vars':{autostart:'true',file:myVideoFile,image:myClickImage.getProperty('src')}
					}).inject(this.videoDiv);
				$clear(this.myAnimation);
				}.bind(this));
		}.bind(this));
		this.NumItems = i;
		this.tweener = new Fx.Tween($(this.options.innerCarousel), {property:'left', duration:500});
		$(this.options.leftbutton).addEvent('click',function(){ this.moveNext();}.bind(this));
		$(this.options.rightbutton).addEvent('click',function(){ this.movePrevious();}.bind(this));
		this.changeCounter();
		this.animationDirection = "forward";
		this.Animation = function(){ 
			if (this.animationDirection == "forward"){this.moveNext();}else{this.movePrevious();}
		}.bind(this);
		this.myAnimation = this.Animation.periodical(this.options.animationPeriod); 
		this.videoDiv = new Element('div',{'id': 'videoplayerdiv','styles':{'position':'absolute','display':'none'}}).inject($('videopreviewcarousel'));
	},	
	moveNext: function(){
		if (this.currentPosition+1 <= this.NumItems){
			
			this.tweener.start(this.CarouselLeft,this.CarouselLeft-this.options.itemWidth);
			this.CarouselLeft = this.CarouselLeft-this.options.itemWidth;
			this.currentPosition++;
			this.changeCounter();
			this.videoDiv.empty();
			this.videoDiv.setStyle('display','none');
		}
		else {
			this.animationDirection = "backward";
		}
	},
	movePrevious: function(){
		if (this.currentPosition-1 > 0){
			this.tweener.start(this.CarouselLeft,this.CarouselLeft+this.options.itemWidth);
			this.CarouselLeft = this.CarouselLeft+this.options.itemWidth;
			this.currentPosition--;
			this.changeCounter();
			this.videoDiv.empty();
			this.videoDiv.setStyle('display','none');
		}
		else {
			this.animationDirection = "forward";
		}
	
	},	
	changeCounter: function(){
		$(this.options.counterElement).setProperty('text', this.currentPosition+' von '+this.NumItems);
	}

});
Videopreviewer.implement(new Options);
Videopreviewer.implement(new Events);