function animateProducts(e, targetCol) {
	
	this.e = e;
	this.items = $(this.e).find('.product-item');
	this.zIndex = 0;
	this.nextIndex = -1;
	this.klickIndex = 0;
	this.currentIndex = 0;
	var instance = this;
	
	// create as many boempels as there are images loaded and append them to artefacts controller
	for (var i=this.items.length-1; i>=0; i--) {
		$(this.items[i]).css({
				'z-index': this.zIndex
			});
		this.zIndex++;
		
		var boempel = new Image();
		$(boempel).attr({
			'class': 'artefacts-boempel',
			'src': 'fileadmin/templates/images/boempel-inactive.gif'
		});
		$(e).find('.artefacts-controller').append(boempel);
	}	
	
	$(e).find('.artefacts-boempel').click(function() {

		stopAnimations();
		instance.nextIndex = $(this).index()-1;
		
		if ($(this).index() == 0) {
			instance.nextIndex = 1;
		}

		setActiveBoempel($(e), $(this).index()-1);
	
		$(instance.items[instance.nextIndex]).css({
			'display': 'block'			
		});
		$(instance.items[instance.currentIndex]).css('display','block');
		
		// fade out foreground image and disable it!
		$(instance.items[instance.currentIndex]).animate({
			'opacity': 0			
		}, 1000, '', function(){
			$(this).css('display', 'none');
		});
	
		// fade in background image
		$(instance.items[instance.nextIndex]).css({'z-index': '50', 'opacity': 0}).animate({
			'opacity': 1
		}, 1000, '', function(){
			instance.currentIndex = instance.nextIndex;
			setNextIndex();		
		});		
		
	})
			
	
	// set first boempel active
	$(e).find('.artefacts-boempel:eq(0)').attr('src', 'fileadmin/templates/images/boempel.gif');
	$(this.items[0]).show();

	// create next button
	var next = new Image();
	$(next).attr({
		'class': 'boempel-next',
		'src': 'fileadmin/templates/images/boempel-next.gif'
	}).click(function(){
		
		stopAnimations();
		instance.nextIndex = instance.currentIndex+1
		if (instance.nextIndex == instance.items.length) {
			instance.nextIndex = 0;
		}
		
		setActiveBoempel($(e), instance.nextIndex);
		
		$(instance.items[instance.nextIndex]).css('display','block');
		$(instance.items[instance.currentIndex]).css('display','block');
			
		// fade out foreground image and disable it!
		$(instance.items[instance.currentIndex]).animate({
			'opacity': 0			
		}, 1000, '', function(){
			$(this).css('display', 'none');
		});
	
		// fade in background image
		$(instance.items[instance.nextIndex]).css({'z-index': '50', 'opacity': 0}).animate({
			'opacity': 1			
		}, 1000, '', function(){
			$(this).css('display', 'block');
			instance.currentIndex = instance.nextIndex;
			//setNextIndex();		
		});		
		
	});
	$(e).find('.artefacts-controller').append(next);	
		
	// create previous button
	var previous = new Image();
	$(previous).attr({
		'class': 'boempel-previous',
		'src': 'fileadmin/templates/images/boempel-previous.gif'
	}).click(function(){
		stopAnimations();
		instance.nextIndex = instance.currentIndex - 1
		if (instance.currentIndex == 0) {
			instance.nextIndex = instance.items.length - 1
		}
		
		setActiveBoempel($(e), instance.nextIndex);
	
		$(instance.items[instance.nextIndex]).css('display','block');
		$(instance.items[instance.currentIndex]).css('display','block');
			
		// fade out foreground image and disable it!
		$(instance.items[instance.currentIndex]).animate({
			'opacity': 0			
		}, 1000, '', function(){
			$(this).css('display', 'none');
		});
	
		// fade in background image
		$(instance.items[instance.nextIndex]).css({'z-index': '50', 'opacity': 0}).animate({
			'opacity': 1			
		}, 1000, '', function(){
			instance.currentIndex = instance.nextIndex
			//setNextIndex();		
		});		
	});	
	$(e).find('.artefacts-controller').prepend(previous);
		
	// execute image change animation every five seconds
	if (this.items.length > 1 && $('.colSidebar').html() == null) 
	{
		$(e).everyTime(5000, 'controlled', function(){
		instance.nextIndex = instance.currentIndex+1
		if (instance.nextIndex == instance.items.length) {
			instance.nextIndex = 0;
		}
		
		setActiveBoempel($(e), instance.nextIndex);
		
		$(instance.items[instance.nextIndex]).css('display','block');
		$(instance.items[instance.currentIndex]).css('display','block');
			
		// fade out foreground image and disable it!
		$(instance.items[instance.currentIndex]).animate({
			'opacity': 0			
		}, 1000, '', function(){
			$(this).css('display', 'none');
		});
	
		// fade in background image
		$(instance.items[instance.nextIndex]).animate({
			'opacity': 1			
		}, 1000, '', function(){
			$(this).css('display', 'block');
			instance.currentIndex = instance.nextIndex;
			setNextIndex();		
		});		
		
		});
	}

	
	// set active boempel
	setActiveBoempel = function (element, index) {
		$(element).find('.artefacts-boempel').attr('src', 'fileadmin/templates/images/boempel-inactive.gif');		
		$(element).find('.artefacts-boempel:eq('+index+')').attr('src', 'fileadmin/templates/images/boempel.gif');					
	}
	
	// adjust current index
	setCurrentIndex = function () {

		if (instance.currentIndex < instance.items.length-1) {
			instance.currentIndex++;
		} else {
			instance.currentIndex = 0;
		}	
	}
	
	// set next index
	setNextIndex = function () {
		instance.nextIndex = instance.currentIndex+1
		if (instance.nextIndex == instance.items.length) {
			instance.nextIndex = 0;
		}
		//console.log('instance.nextIndex ' + instance.nextIndex);
	}
	
	// stop all current animations
	stopAnimations = function() {
		$(e).stopTime();
		// stop current animations
		if($('div:animated').length > 0) {
			$(instance.items[instance.nextIndex]).stop(true, true);
			$(instance.items[instance.currentIndex]).stop(true, true);
		}
	}
}




$(document).ready(function() {
		
	var targetCol = $('.colOne');
	
	//Activate product slider to sidebar
	if($('.colSidebar').html())
		targetCol = $('.colSidebar');
	
	// create artefacts controller container and set position
	if($('.product-item').html()) {
		targetCol.each(function(e_index, e){
		//ckeck if we have more than one image
			if ($(e).find('.product-item', this).length > 1) {
				$(e).append('<div class="artefacts-controller"></div>');
				$('.artefacts-controller', this).css('top', $('.product-image', this).outerHeight(true) + 'px');
			}
			$('.product-download-title', this).css({
				'top': $('.product-image', this).outerHeight(true) + 'px',
				'width': $('.product-image', this).outerWidth(false) - 10 + 'px'
			});
			
			obj = 'obj_' + e_index;
			var obj = new animateProducts(e);
		})	
	}
})