window.addEvent('domready', function(){
	
	var main = $('submain').getStyle('width').toInt(); // Breite des Hauptfensters
	var marg = $('thumbs'); // Randabstand der Thumbs
	var steps = 100; // mögliche Zwischenschritte
	var dist = (marg.getStyle('width').toInt() - main) / steps;
	var offset = 0;
	
	var updateOffset = function(){
		// Sets the offset
		marg.setStyle('marginLeft', ((offset-steps)*dist));
	};
	
	// We call that function to initially set the offset 
	updateOffset();
	
	var slider = new Slider($('slider'), $('knob'), {
		steps: steps, // Possible steps
		wheel: true, // Using the mousewheel is possible too
		onChange: function(){
			// Based on the Slider values set the offset value
			offset = 100-this.step;
			// and update the output to the new value
			updateOffset();
		}
	});
	
	slider.set(steps/2);
});

function wechsel(img_akt){
	var akt = img_akt;
	var el = $('img_main');
	var myChain = new Chain();
	var InOut = new Fx.Tween(el, {duration: 300, link: 'cancel', onComplete: function() {myChain.callChain()}});
 
	myChain.chain(
		function() { InOut.start('opacity',0); },
		function() {
			var myImage = new Asset.image('images/big/'+akt, {
				onload: function() {
					el.setProperty('src', 'images/big/'+akt);
					this.callChain();
				}.bind(this)
			});
		},
		function() { InOut.start('opacity',1); }
	);
 
	myChain.callChain();
 
	var img_akt = img_akt.replace(/_/g, " ");
	var inh = img_akt.split(".");
	$('caption').set('text', inh[0]+' . '+inh[1]);
};