var ProductDetailSlider = Class.create({
	// Constructor
	initialize: function(prefix){
		this.prefix = prefix;
		this.initHandlers();
		
		$$('#' + this.prefix + 'Content li').invoke('hide');
		$$('#' + this.prefix + 'Tabs li').invoke('show');
		
		$$('#' + this.prefix + 'Content li').first().show();
		
		// Laat controls zien
		$(this.prefix + 'Tabs').setStyle({
			'display': 'block'
		});
	},
	
	// Init alle buttons
	initHandlers: function(){		
		$$('#' + this.prefix + 'Tabs li').each(function(li){
			li.observe('mouseover', this.showImageOnHover.bind(this, li));
		}.bind(this));		
	},
	
	// Toon de volgende afbeelding
	nextImage: function(){
		
	},
		
	// Laat een afbeelding zien wanneer er over het cijfer wordt gehoverd
	showImageOnHover: function(li){
		this.deactivateAll();
		this.setActive(li);
		
		var offset = this.getOffset(li);
		this.showImageAt(offset);
	},
	
	// Laat een bepaalde afbeelding zien
	showImageAt: function(pos){
		var elements = $$('#' + this.prefix + 'Content li');
		elements[pos].addClassName('active');
		elements[pos].show();
	},
	
	// Bepaald de offset van het element
	getOffset: function(li){
		var elements = $$('#' + this.prefix + 'Tabs li');
		
		for(var i = 0; i < elements.length; i++) {
			if(elements[i] == li)
				return i;
		}
				
		return 0;
	},
	
	// Verberg alle elementen
	deactivateAll: function(){
		$$('#' + this.prefix + 'Content li').invoke('hide');
		$$('#' + this.prefix + 'Content li').invoke('removeClassName', 'active');
		$$('#' + this.prefix + 'Tabs li').invoke('removeClassName', 'active');
	},
	
	// Activeer een cijfer
	setActive: function(li) {
		li.addClassName('active');
	}	
});