/* This imaging stuff belongs in a class, I know! */

var activeElement = null;
var scroller = null;

function updatePictures() {
	var slide = $('slide');
	if (slide) {
		anchors = $('slide').getElements('a').each(function (link) {
				link.addEvent('click', changePicture)
		});
		activeElement = $('thumb0');
		scroller = new Fx.Scroll($('slide'), {
			duration: 500
		});
	}
}

	var changePicture = function(event) { 
		event.stop();
		var id = 0;
		//Change css class by morphing
		activeElement.morph('.thumb');
		child = this.getElement('img');
		child.morph('.activethumb');
		activeElement = child;

		scroller.cancel();
		id = parseInt(child.get('id').substring(5));
		newId = 0;
		if (id > 0) {
			newId = id - 1;
		}

		scroller.start(((id-1) * 111)+3, 0);
		//myFx.toElement(newId.toString());
		var myTween = new Fx.Tween($('mainpicture'), {
			property: 'opacity',
			duration: 250, 
			link: 'chain'
		});

		myTween.addEvent('onComplete', 
			function() {
				$('picture').setStyle('width',  images[id][1]);
				$('mainpicture').set('src', images[id][0].get('src'));
				$('mainpicture').set('width', images[id][1]);
				$('mainpicture').set('height', images[id][2]);
				$('picsrc').set('html', "Bron: " + images[id][3]);    
			}
		);
		myTween.start(1, 0);
		myTween.start(0, 1);
	};