var Scroller = new Class({
	Implements: [Options],

	options: {
		delay: 3000,
		duration: 500,
		sliceSize: 20,
		activeSlicePercentage: 0.75,
		url: '/storage-sheds-and-barns.json',
		headingSelector: '#details h1',
		captionSelector: '#details p',
		anchorSelector: '#display a',
		anchorPrefix: '/',
		imageIsAnchor: true
	},
	
	initialize: function(imageElement, options)
	{
		this.setOptions(options);
		this.imageElement = $(imageElement);

		this.heading = document.getElement(this.options.headingSelector);
		this.caption = document.getElement(this.options.captionSelector);
		this.anchor  = document.getElement(this.options.anchorSelector);

		this.images = [];
		this.details = [{
			title: this.heading.get('text'),
			caption: this.caption.get('text'),
			slug: this.anchor.get('href').split('/')[3],
			category: {slug: this.anchor.get('href').split('/')[2]}
		}];

		$('details').addClass('fixed');

		this.transitionHeading = this.heading.cloneNode(false)
			.inject(this.heading, 'after')
			.position({relativeTo: this.heading, position: 'topLeft'})
			.setStyle('opacity', '0');
		this.transitionCaption = this.caption.cloneNode(false)
			.inject(this.caption, 'after')
			.position({relativeTo: this.caption, position: 'topLeft'})
			.setStyle('opacity', '0');
		
		new Request.JSON({
			url: this.options.url,
			onSuccess: this._receiveResponse.bind(this),
			onFailure: function() { if(console) console.warn("Could not start Scroller"); }
		}).get();
	},
	
	_receiveResponse: function(response)
	{
		
		response.each(function(p) {
			if(p.product.image) {
				this.images.push(p.product.image.relative_path_with_size);
				this.details.push(p.product);
			}
		}, this);
		
		this.wf = new Waterfall(this.imageElement, this.images, {
			delay: this.options.delay,
			duration: this.options.duration,
			sliceSize: this.options.sliceSize,
			activeSlicePercentage: this.options.activeSlicePercentage
		});
		this.wf.addEvent('transition', this.transition.bind(this));
	},
	
	transition: function(i)
	{
		var p = this.details[i],
		    fullHREF = this.options.anchorPrefix + p.category.slug + '/' + p.slug;
		
		this.transitionHeading.set('text', p.title);
		this.transitionCaption.set('text', p.caption);
		this.anchor.set('href', fullHREF);
		if(this.options.imageIsAnchor)
		  this.imageElement.parentNode.set('href', fullHREF);


		var members = [
			this.transitionHeading,
			this.transitionCaption,
			this.heading,
			this.caption ];

		new Fx.Elements(members, {
			duration: this.options.duration,
			onComplete: function() {
				// IE Sucks. Sucks sucks sucks.
				this.heading.set('text', this.transitionHeading.get('text')).setStyle('opacity', '1');
				this.caption.set('text', this.transitionCaption.get('text')).setStyle('opacity', '1');
				this.transitionHeading.setStyle('opacity', '0');
				this.transitionCaption.setStyle('opacity', '0');
			}.bind(this)
		}).start({
			'0': {opacity: 1},
			'1': {opacity: 1},
			'2': {opacity: 0},
			'3': {opacity: 0}
		});
	}
});