var ImageFlow = new Class({
	
	Implements: [Events, Options],
	
	options: {
		fadeAmount: 0.4
	},
	
	currentIndex: 0,
	
	offsets: [],
	
	initialize: function(options){
		
		this.setOptions(options);
		
		this.imageFlowEl = $('image-flow');
		
		if (!this.imageFlowEl) return false;
		
		this.cont = this.imageFlowEl.getElement('ul');
		this.slides = this.imageFlowEl.getElements('li');
		this.nav = $$('a.ifNav');
		this.caption = this.imageFlowEl.getElement('.ifCaption');
		
		this.preloadSlides();
		
	},
	
	preloadSlides: function(){
		new Asset.images(this.slides.getElement('img').get('src'), {
			onComplete: this.start.bind(this)
		});
	},
	
	getSmallWidth: function(size){
		return (((size.y - 50) / size.y) * size.x).toInt();
	},
	
	getFullWidth: function(size){
		return (((size.y + 50) / size.y) * size.x).toInt();
	},
	
	setDefaults: function(){
		
		this.slides[this.currentIndex].removeClass('active');
		
		this.slides.getElement('img').set('styles', {
			'opacity': this.options.fadeAmount,
			'z-index': 10
		});
		
		var fullWidth = 0;
		
		this.slides.each(function(slide){
			fullWidth += (slide.getSize().x + 50);
		});
		
		this.cont.set('styles', {
			'width': fullWidth
		});
		
		this.imageFlowEl.set('styles', {
			'visibility': 'visible',
			'opacity': 0
		}).fade('in');		
	},
	
	start: function(){
		var combined = 0;
		
		var activeIndex = this.slides.hasClass('active').indexOf(true);
		activeIndex = activeIndex >= 0 ? activeIndex : 0;
		
		this.nav.each(function(navItem){
			navItem.addEvents({
				click: function(e){
					
					if (e) e.stop();

					// fade out other slides
					this.slides.getElement('img').each(function(slide){
						
						// morph only the highlighted element
						if(slide.hasClass('selected')){
							slide.morph({
								'height': 150,
								'opacity': this.options.fadeAmount,
								'top': 25
							}).setStyle('z-index', 10).removeClass('selected');
						}
					}, this);
					
					// increase/decrease the counter
					if (navItem.get('href').indexOf('previous') >= 0){
						if (this.currentIndex !== 0){
							this.offsets.pop();
							--this.currentIndex;
						}
					} else {
						if (this.currentIndex < (this.slides.length - 1)){
							this.offsets.push(this.getSmallWidth(this.slides[this.currentIndex].getSize()));
							++this.currentIndex;
						}
					}
					
					var currentSlideWidth = this.getFullWidth(this.slides[this.currentIndex].getSize());
					
					this.scrollContainer(currentSlideWidth);
					
					// set styles for the active slide
					this.slides[this.currentIndex].getElement('img').morph({
						'height': 200,
						'opacity': 1,
						'top': 0
					}).setStyle('z-index', 50).addClass('selected');
					
					this.caption.set('html', this.slides[this.currentIndex].getElement('img').get('alt'));
				}.bind(this)
			});
		}, this);
		
		this.setDefaults();
		
		this.slides[activeIndex].getElement('img').set('styles', {
			'height': 200,
			'opacity': 1,
			'z-index': 50,
			'top': 0
		});
		
		for(var idx = 0; idx < activeIndex; ++idx){
			this.offsets.push(this.slides[idx].getSize().x);
		}
		
		this.scrollContainer(this.slides[activeIndex].getSize().x, activeIndex);
	},
	
	scrollContainer: function(slideWidth, activeIndex){
		// Initial maths based on which one is active
		var totalOffset = this.offsets.sum();
		
		// Now add/subtract enough to make it go into the middle
		totalOffset -= (this.cont.getParent().getSize().x / 2) - (slideWidth / 2);
		
		this.currentIndex = $pick(activeIndex, this.currentIndex);
		
		this.caption.set('html', this.slides[this.currentIndex].getElement('img').get('alt'));
		
		// move the container
		this.cont.tween('left', -totalOffset);
	}
	
});

window.addEvents({
	domready: function(){
		new ImageFlow();
	}
});