var SmartGalery = new Class({
    initialize: function(galeryLinksCssSelector, imageid, captionid) {
    	this.image = $(imageid);
    	this.caption = $(captionid);
        this.preload = null;
        //this.runningEffect = undefined;
        $$(galeryLinksCssSelector).each(function(a) {
			a.addEvent('click', this.loadImage.bind(this));
        }.bind(this));
        //Select the first image of the galery, and simulate a click
		$($$(galeryLinksCssSelector)[0].parentNode).addClass('active');
		//Once the img tag has been loaded, use the properties for bcg image of the div
		$('seq').addEvent('load', function() {
	   		this.image.style.backgroundImage = 'url(' + $('seq').src + ')';
			this.image.style.height = $('seq').height + 'px';
			this.image.style.width = $('seq').width + 'px';
			this.image.style.marginTop = ((this.image.parentNode.clientHeight - $('seq').height) / 2) + 'px';
			//Remove img tag from DOM
			$('seq').parentNode.removeChild($('seq'));
		}.bind(this));
	},
	loadImage: function(e) {
		//if (this.runningEffect !== undefined) this.runningEffect.stop();
		var event = new Event(e);
		event.preventDefault();
		this.preload = new Image();
		this.preload.onload = this.changeImage.bind(this);
		//Strangely, event.target refers to the image, not the link...
		this.preload.title = event.target.parentNode.title;
		this.preload.src = event.target.parentNode.href;
   		this.image.style.background = 'url(img/ajax/activity2.gif) no-repeat #fff center';
		//this.runningEffect = new Fx.Style(this.image, 'opacity').start(1, 0);
	},
	changeImage: function() {
		//if (this.runningEffect !== undefined) this.runningEffect.stop();
		this.image.style.backgroundImage = 'url(' + this.preload.src + ')';
		this.image.style.height = this.preload.height + 'px';
		this.image.style.width = this.preload.width + 'px';
		this.image.style.marginTop = ((this.image.parentNode.clientHeight - this.preload.height) / 2) + 'px';
		this.preload.onload = Class.empty;
		//this.runningEffect = new Fx.Style(this.image, 'opacity').start(0, 1);
		this.caption.setHTML(this.preload.title);
	}
});

window.addEvent('domready', function() {
	//Creating the smartgallery object for sequences
	new SmartGalery('table#sequences tr td a', 'image', 'caption');
	//Adding events to the fields for sequences table
	$$('table#sequences tr td a').each(function(a) {
		a.onmouseover = function(e) {
			var target = new Event(e).target;
			$(target.parentNode.parentNode).addClass('mouseover');
		};
		a.onmouseout = function(e) {
			var target = new Event(e).target;
			$(target.parentNode.parentNode).removeClass('mouseover');
		};
		//Use of addEvent to make sure we dont overwrite any existing event (created by SmartGalery).
		$(a).addEvent('click', function(e) {
			var target = new Event(e).target;
			$$('table#sequences tr td.active').each(function(td) {
				td.removeClass('active');
			});
			$(target.parentNode.parentNode).addClass('active');
		});
	});
});