ProjectImages = Class.create({

	incomingImage: undefined,
	outgoingImage: undefined,
	
	thumbClick: function (ev) {
		var el = Event.element(ev),
			index = el.id.substr("project_thumb".length);
		this.showImage(index);
	},
	
	showImage: function (index) {
		this.outgoingImage = this.incomingImage;
		this.activeThumb = $('project_thumb'+index);
		this.incomingImage = $('project_image'+index);
		if (!this.incomingImage || this.incomingImage==this.outgoingImage) return false;
		
		this.thumbs.invoke('removeClassName','active'); 		
		this.activeThumb.addClassName('active');
		
		this.bigImages.invoke('setStyle',{zIndex:1});
		this.incomingImage.setStyle('opacity:0; z-index:2;');

		this.bigImages.each(function (el) {
			if (el!=this.incomingImage && el!=this.outgoingImage && el.visible())
				el.hide();
		},this);
		
		if (this.effect)
			this.effect.cancel();
		this.effect = new Effect.Appear(this.incomingImage,{to:1,afterFinish: this.imageAppeared.bind(this)});	
	},
	
	imageAppeared: function (o) {
		if (this.outgoingImage && this.outgoingImage!=this.incomingImage)
			this.outgoingImage.hide();
		
		this.bigImages.each(function (el) {
			if (el!=this.incomingImage && el.visible())
				el.hide();
		},this);
	},

	initialize: function () {
		this.thumbs = $$('#project_images img.thumb');
		this.bigImages = $$('#project_images img.bigImage');

		this.thumbs.each(function(thumb) {
			if (thumb.initialized) return;
			thumb.observe('mouseover',this.thumbClick.bind(this))
				.observe('click',this.thumbClick.bind(this));
			thumb.initialized = true;
		},this);
	
	}
});

document.observe('dom:loaded',function () {
	window.projectImages = new ProjectImages();
});