
var Galery = new Class({
	options: {
		duration: 500,
		selected: 0
	},
	initialize: function(container) {
		// Set actions to links
		var actions = container.getElements('.actions a');
		this.left = actions[0];
		this.left.set('id','-1').addEvent('click', this.browse.bind(this).pass(actions[0]));
		this.right = actions[2];
		this.right.set('id', '1').addEvent('click', this.browse.bind(this).pass(actions[2]));
		
		// Background and images
		this.images = container.getElements('img');
		
		//this.view();
		this.left.fireEvent('click')	
	},
	browse: function(item){
		if( item.hasClass('block') )
			return false;

		this.right.removeClass('block');
		this.left.removeClass('block');

		var next = this.options.selected + item.get('id').toInt();		
		
		if( next < 1 || next == this.images.length -1 )
			item.addClass('block');

		this.effects( 
			this.images[this.options.selected], 
			this.images[(next < 0) ? 0 : next]
		);
		this.options.selected = ( next < 0 ) ? 0 : next;
	},
	view: function(){
		this.effects( 
			this.container.getElement('img.display'),
			this.bigImages[this.options.selected]
		);
	},
	effects: function(from, to){
		new Fx.Morph( from, { 
			onComplete: function(){
				from.removeClass('display');
				to.addClass('display');
				new Fx.Morph( to ).start({
					'opacity': [0,1]
				});
			}
		}).start({
			'opacity': [1,0]
		});
	}
});
