var Reportage = new Class({
	Implements: [ Options, Chain, Events ],

	defaultOptions: function(){
		return {
			transition: 300,
			photo: 'photo',
			scroll: 'scroll',
			slides: 2,
			offset: 475
		};
	},

	initialize: function(el, options){
		this.reportage = $(el);
		this.setOptions(this.defaultOptions(), options);
		this.photo = $(this.options.photo);	
		this.scroll = $(this.options.scroll);	

		this.pos = 0;
		this.currentslide = 1;
		
		this.items = this.scroll.getElements('a');

		this.items.each(function(el) {
			el.addEvents({
				"click": function(e) {
					e = new Event(e).stop();
					this.change(el);
				}.bind(this)
			});
		}.bind(this));
		

		this.imgScroll = new Fx.Scroll(this.options.scroll, {
   			offset: {'x': 0, 'y': 0},
   			transition: Fx.Transitions.Cubic.easeOut
		}).toLeft();

		$('moveleft').addEvents({
			"click": function(e) {
				this.moveLeft();
			}.bind(this)
		});
		$('moveright').addEvents({
			"click": function(e) {
				this.moveRight();
			}.bind(this)
		});			

		this.change($('vignette1'));
	},
	
	change: function(el) {
		el.container = this.photo;
//		el.photo = this.photo.getElement('img');
		
		el.fx = new Fx.Morph(el.container, {duration: this.options.transition, transition: Fx.Transitions.Sine.easeOut});

		el.fx.start({ 'opacity': 0 }).chain(function() {
					el.container.empty();

					var description = el.getElement('span');
					if (description)					   
						var newDescription = new Element('span').set('text', description.get('text')).inject(el.container);

					var newImage = new Element('img', { 'src': el.href }).inject(el.container);
					
					el.fx.start({ 'opacity': 1 });				
				});

	
	},
	
	moveLeft: function(direction) {
		if(this.currentslide == 1) return;
		this.currentslide--;
		this.pos += -(this.options.offset);
		this.imgScroll.start(this.pos);
	},
	
	moveRight: function(direction) {
		if(this.currentslide >= this.options.slides) return;
		this.currentslide++;
		this.pos += this.options.offset;
		this.imgScroll.start(this.pos);
	}
	
});