var SmoothGallerySlider = new Class({
	
	initialize: function(options){
		this.options = $extend({
			itemsVisible:5,
			currentElement: 0,
			listElement: 0,
			sliderContainer: 'slider',
			category: ''
			
		},options || {});	

		//load and store style of given elements
		this.styles = new Array();

		for(var i = 0; i < this.options.itemsVisible+2; i++) {
			this.styles[i] = new Array();
			this.styles[i]['element']	= $('sliderElement'+i).getStyles('height', 'width', 'left', 'top', 'z-index', 'opacity', 'display', 'background-color');
			this.styles[i]['image']		= $('sliderImage'+i).getStyles('height', 'width', 'left', 'top', 'z-index', 'opacity', 'display', 'max-height', 'max-width');
			this.styles[i]['title']		= $('sliderTitle'+i).getStyles('height', 'width', 'left', 'top', 'z-index', 'opacity', 'display', 'background-color', 'color', 'font-weight', 'font-size', 'padding');
			this.styles[i]['content']	= $('sliderContent'+i).getStyles('height', 'width', 'left', 'top', 'z-index', 'opacity', 'display', 'background-color');
			this.styles[i]['footer']	= $('sliderFooter'+i).getStyles('height', 'width', 'left', 'top', 'z-index', 'opacity', 'display', 'background-color');
			this.styles[i]['winner']	= $('sliderWinner'+i).getStyles('display');

			//workaround for Opera and IE
			this.styles[i]['content']['width'] = '150px';
		}

		
		//workaround for mootools bug
		this.styles[1]['element']['opacity'] = '0.4';
		this.styles[5]['element']['opacity'] = '0.4';
		//this.styles[2]['element']['opacity'] = '0.9';
		//this.styles[4]['element']['opacity'] = '0.9';
		
		
		this.invisibleElementStyle = {
			'display': 'none'
		};
		this.visibleElementStyle = {
			'display': 'block'
		};

		var newData = this.getData();
		
		//for(var i = 0; i < 7; i++) {
		//	$(this.getSliderTitle(i)).set('html', newData[i]['title']);
		//	$(this.getSliderContent(i)).set('html', newData[i]['content']);
		//}

		//initial load all pictures for first display
		this.imageAsset = new Asset.images(dataSetImages, { 
			onProgress: function(i) {
			
				for(var i = 0; i < dataSet.length; i++) {
					
					if (dataSet[i]['imgsrc'] == this.src) {
						dataSet[i]['img'] = this;
						break;
					}
				}
			},
			onComplete: function() {
				$('sliderLoadingIndicator').setStyle('display', 'none');	
				$('sliderBtnBackward').setStyle('display', 'block');
				$('sliderBtnForward').setStyle('display', 'block');
			}
		});
		
		this.options.listElement = 3;
		
		
	},

	getSliderElement: function(nr){
		return 'sliderElement'+(((this.options.currentElement + nr) % 7));
	},
	
	getSliderImage: function(nr){
		return 'sliderImage'+(((this.options.currentElement + nr) % 7));
	},

	getSliderWinner: function(nr){
		return 'sliderWinner'+(((this.options.currentElement + nr) % 7));
	},
	
	getSliderTitle: function(nr){		
		return 'sliderTitle'+(((this.options.currentElement + nr) % 7));
	},

	getSliderContent: function(nr){		
		return 'sliderContent'+(((this.options.currentElement + nr) % 7));
	},

	getSliderFooter: function(nr){		
		return 'sliderFooter'+(((this.options.currentElement + nr) % 7));
	},

	getData: function(){		

		if (this.options.category == '') return dataSet;
		
		var result = new Array();
		var counter = 0;

		while(result.length < 7) {
			for(var i = 0; i < dataSet.length; i++) {
				if (dataSet[i]['category'] == this.options.category) {
					result[counter++] = dataSet[i];
				}
			}
		}	

		return result;
	},

	setCategory: function(category){

		if (this.isMoving) return;

		this.isMoving = true;
		
		$('sliderCat_'+this.options.category).removeClass('active');
		this.options.category = category;

		this.options.listElement = 3;
		
		var myEffect_Container = new Fx.Morph('slider', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
		myEffect_Container.addEvent('complete', function(){
			
			var newData = this.getData();

			for(var i = 0; i < 7; i++) {
				$(this.getSliderTitle(i)).set('html', newData[i]['title']);
				$(this.getSliderContent(i)).set('html', newData[i]['content']);
				$(this.getSliderFooter(i)).set('html', newData[i]['footer']);

				$(this.getSliderImage(i)).dispose();
				
				var img = newData[i]['img'].clone();
				img.set('id', this.getSliderImage(i));                  		
				img.removeProperty('width');
				img.removeProperty('height');
				img.setStyles(this.styles[i]['image']);
				img.setStyle('width', 'auto');
				img.setStyle('height', 'auto');

				img.inject($(this.getSliderElement(i)));
						
			}
			
			var myEffect2_Container = new Fx.Morph('slider', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
			myEffect2_Container.addEvent('complete', function(){
				this.isMoving = false;
			}.bind(this) );
			myEffect2_Container.start({ 'opacity' : 1.0 });
			
			
		}.bind(this) );
		
		myEffect_Container.start({ 'opacity' : 0.0 });

		$('sliderCat_'+this.options.category).addClass('active');
	},

	forward: function(){

		if (this.isMoving) return;

		this.isMoving = true;
		
		$(this.getSliderElement(4)).setStyle('z-index', '7');
		$(this.getSliderContent(3)).setStyles(this.invisibleElementStyle);
		$(this.getSliderFooter(3)).setStyles(this.invisibleElementStyle);
		$(this.getSliderWinner(3)).setStyles(this.invisibleElementStyle);

		// leftOuterElement  leftOuterElement
		var myEffect_leftInvisibleElement = new Fx.Morph(this.getSliderElement(1), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
		myEffect_leftInvisibleElement.start(this.invisibleElementStyle);
		
		for(var i = 2; i < this.options.itemsVisible+2; i++)
		{
			//alert(i);
			//special function for centered box
			if (i == 4)
			{
				var myEffect_Element = new Fx.Morph(this.getSliderElement(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
				myEffect_Element.addEvent('complete', function(e){
					$(this.getSliderContent(3)).setStyles(this.visibleElementStyle);
					$(this.getSliderFooter(3)).setStyles(this.visibleElementStyle);
					$(this.getSliderWinner(3)).setStyles(this.visibleElementStyle);
					this.isMoving = false;
				}.bind(this) );
				myEffect_Element.start(this.styles[i-1]['element']);
				
			}
			else
			{
				var myEffect_Element = new Fx.Morph(this.getSliderElement(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
				myEffect_Element.start(this.styles[i-1]['element']);
				
				var myEffect_Element_content = new Fx.Morph(this.getSliderContent(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
				myEffect_Element_content.start(this.styles[i-1]['content']);
			}
			
			var myEffect_Element_img = new Fx.Morph(this.getSliderImage(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
			myEffect_Element_img.start(this.styles[i-1]['image']);

			var myEffect_Element_title = new Fx.Morph(this.getSliderTitle(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
			myEffect_Element_title.start(this.styles[i-1]['title']);
		}
		
		$(this.getSliderElement(0)).setStyles(this.styles[6]['element']);

		//load new picture in invisible field on the right		
		this.options.listElement++;

		var newData = this.getData();
		
		if (this.options.listElement > newData.length -1) {
			this.options.listElement = 0;
		} 
		
		this.options.listElementNew = ((this.options.listElement+3)%newData.length);
				
		$(this.getSliderTitle(0)).set('html', newData[this.options.listElementNew]['title']);
		$(this.getSliderContent(0)).set('html', newData[this.options.listElementNew]['content']);
		$(this.getSliderFooter(0)).set('html', newData[this.options.listElementNew]['footer']);

		$(this.getSliderImage(0)).dispose();
		
		var img = newData[this.options.listElementNew]['img'].clone();
		img.set('id', this.getSliderImage(0));                  		
		img.removeProperty('width');
		img.removeProperty('height');
		img.setStyles(this.styles[6]['image']);
		img.setStyle('width', 'auto');
		img.setStyle('height', 'auto');

		img.inject($(this.getSliderElement(0)));

		$(this.getSliderContent(0)).setStyles(this.styles[6]['content']);
		
		this.options.currentElement++;
	},
	
	backward: function(){
		
		if (this.isMoving) return;

		this.isMoving = true;
		
		$(this.getSliderElement(2)).setStyle('z-index', '7');
		$(this.getSliderContent(3)).setStyles(this.invisibleElementStyle);
		$(this.getSliderFooter(3)).setStyles(this.invisibleElementStyle);
		$(this.getSliderWinner(3)).setStyles(this.invisibleElementStyle);

		// leftOuterElement  leftOuterElement
		var myEffect_leftInvisibleElement = new Fx.Morph(this.getSliderElement(5), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
		myEffect_leftInvisibleElement.start(this.invisibleElementStyle);
		
		for(var i = 0; i < this.options.itemsVisible; i++)
		{
			//alert(i);
			//special function for centered box
			if (i == 2)
			{
				var myEffect_Element = new Fx.Morph(this.getSliderElement(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
				myEffect_Element.addEvent('complete', function(e){
					$(this.getSliderContent(3)).setStyles(this.visibleElementStyle);
					$(this.getSliderFooter(3)).setStyles(this.visibleElementStyle);
					$(this.getSliderWinner(3)).setStyles(this.visibleElementStyle);
					this.isMoving = false;
				}.bind(this) );
				myEffect_Element.start(this.styles[i+1]['element']);
				
			}
			else
			{
				var myEffect_Element = new Fx.Morph(this.getSliderElement(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
				myEffect_Element.start(this.styles[i+1]['element']);
				
				var myEffect_Element_content = new Fx.Morph(this.getSliderContent(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
				myEffect_Element_content.start(this.styles[i+1]['content']);
			}
			
			var myEffect_Element_img = new Fx.Morph(this.getSliderImage(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
			myEffect_Element_img.start(this.styles[i+1]['image']);

			var myEffect_Element_title = new Fx.Morph(this.getSliderTitle(i), {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
			myEffect_Element_title.start(this.styles[i+1]['title']);
		}
		
		$(this.getSliderElement(6)).setStyles(this.styles[0]['element']);

		//load new picture in invisible field on the right		
		this.options.listElement--;

		var newData = this.getData();
		
		if (this.options.listElement < 0) {
			this.options.listElement = newData.length -1;
		} 

		this.options.listElementNew = ((this.options.listElement-3)%newData.length);
		
		if (this.options.listElementNew < 0) {
			this.options.listElementNew = newData.length + this.options.listElementNew;
		}
		
		
		$(this.getSliderTitle(6)).set('html', newData[this.options.listElementNew]['title']);
		$(this.getSliderContent(6)).set('html', newData[this.options.listElementNew]['content']);
		$(this.getSliderFooter(6)).set('html', newData[this.options.listElementNew]['footer']);

		$(this.getSliderImage(6)).dispose();
		
		var img = newData[this.options.listElementNew]['img'].clone();
		img.set('id', this.getSliderImage(6));                  		
		img.removeProperty('width');
		img.removeProperty('height');
		img.setStyles(this.styles[0]['image']);
		img.setStyle('width', 'auto');
		img.setStyle('height', 'auto');

		img.inject($(this.getSliderElement(6)));

		$(this.getSliderContent(6)).setStyles(this.styles[0]['content']);
		
		this.options.currentElement--;
		
		if (this.options.currentElement < 0) {
			this.options.currentElement = 6;
		} 
		
	}
});