var mooGallery = new Class({
	options: {
		image_list: '',
		image_list_item: '',
		image_description: ''
	},

	initialize: function(image_container, options){
		this.setOptions(options)
    	this.image_container = $(image_container);
    	this.setEffects();
	},
	
	setNewImage: function(newimg) {
		var curr_image = this.image_container.getElement('img');

		var myeff = new Fx.Tween(curr_image, {
			duration: 500,
			transition: Fx.Transitions.Expo,
			onComplete: function(){
				curr_image.src = 'upl_images/' + newimg;
				curr_image.tween('opacity', 1);
			}
		});
		myeff.start('opacity', 0);
	},
	
	setEffects: function() {
		var width = 0;
		var cnt = 0;
		$$('.' + this.options.image_list_item).each(function(el){
			var new_image = el.getElement('img');
			var new_image2 = new Element('img', {
				'src': 'upl_images/' + new_image.get('rel')
			});
			
			if(cnt == 0) {
				this.setNewImage(new_image.getProperty('rel'));
			}
			
			el.set('tween', {duration: 200, wait:false, transition: Fx.Transitions.linear});
			el.addEvent('click', function(){
				this.setNewImage(new_image.getProperty('rel'));
			}.bind(this));

			el.addEvent('mouseenter', function(){
				el.tween('opacity', 0.7);
			});
			el.addEvent('mouseleave', function(){
				el.tween('opacity', 1);
			});
			
			width = width + el.getSize().x;
			cnt++;
		}.bind(this));
		
		var scroll = new Scroller(this.options.image_list, {
			area: 150,
			velocity: 0.2
		});
		$(this.options.image_list).addEvent('mouseenter', scroll.start.bind(scroll));
		$(this.options.image_list).addEvent('mouseleave', scroll.stop.bind(scroll));
		
		$(this.options.image_list + '_mask').setStyle('width', width + 15);		
	}
});
mooGallery.implement(new Options, new Events);