showcase = new Class({

	initialize: function () {

		// selected element
		this.current = 0;

		// prepare html elements
		this.parent = $('projects');
		this.map = $('project');
		this.logos = $('logos').getChildren();
		this.names = $('names').getChildren();			
		this.elements = this.parent.getChildren();
		this.count = this.elements.length;
		this.width = this.count * 391;
		this.parent.setStyle('width', this.width);
		this.prepareAnimation();
		this.prepareLogoAnimation();
		
		this.setMapHref(this.elements[0].getElement('a').get('href'));
	},
		
	// show next element
	next: function () {
		this.show((this.current + 1 < this.count) ? this.current + 1 : 0);
	},

	// show previous element		
	previous: function () {
		this.show((this.current > 0) ? this.current - 1 : this.count - 1);
	},
		
	// show element with chosen index
	show: function (index) {

		if (this.is_animating === true) {
			return;
		}
			
		this.logos[this.current].fade('out');
		this.names[this.current].fade('out');			
		this.current = index;
		this.setMapHref(this.elements[index].getElement('a').get('href'));
		this.animation.start(-(index * 391));
		(function () { this.logos[this.current].fade('in'); }).bind(this).delay(325);			
		(function () { this.names[this.current].fade('in'); }).bind(this).delay(325);						

	},
		
	// set href property for map for new element
	setMapHref: function (url) {
		this.map.getChildren().each(function (el) {
			el.set('href', url);
		});			
	},
		
	// animation definition
	prepareAnimation: function () {
		this.is_animating = false;
		this.animation = new Fx.Tween(this.parent, {
			duration: 750,
			transition: 'sine:inOut',
			property: 'left',
			
			onStart: function () {
				show.is_animating = true;
			},
				
			onComplete: function () {
				show.is_animating = false;
			}
		});		
	},
		
	// fade duration for logos
	prepareLogoAnimation: function () {
		this.logos.each(function (logo) {
			logo.setStyle('opacity', 0);
			logo.set('tween', {duration: 325});
		});
	}
		
});