/*jslint onevar: true, undef: true, nomen: true, browser: true, maxerr: 50, indent: 4 */

var HoverFade = function (el, alt) {
	var par = el.wrap({tag: 'span', style: 'display: inline-block;'});
	var img = alt || el.dom.alt;
	if( img ) {
		par.setStyle({'background-image': 'url(' + img + ')'});
	}
	el.setStyle({display: 'block'});
	el.on('mouseenter',  function(ev, t) { Ext.fly(t).stopFx().fadeOut({endOpacity: 0.01, duration: 0.5}); });
	el.on('mouseleave',  function(ev, t) { Ext.fly(t).stopFx().fadeIn({duration: 0.5}); });
	return par;
};

var Carouse = function (config) {
	Ext.apply(this, config);
	this.el = Ext.get(this.el);

	this.slideSize = this.width + 2 * this.slideGap;
	// create a wrapper for the list
	this.wrap = this.el.wrap({ tag: 'div', cls: 'carouse' });
	// create the inner 'stage'
	this.stage = this.el.wrap({tag: 'div', cls: 'carouse-stage' });
	this.stage.setStyle({
		width: this.slideSize + 'px',
		height: this.height ? this.height + 'px' : 'auto'
	});
	// get a handle on the slides
	this.slides = this.el.select('> li');
	// set the parent big enough to hold them all
	this.numSlides = this.slides.getCount();
	this.lastSlide = this.numSlides - 1;
	this.el.addClass('carouse-slides');
	this.el.setStyle({
		width: (this.slideSize * this.numSlides) + 'px',
		height: this.height ? this.height + 'px' : 'auto'
	});
	// set each slide to the right size
	this.slides.addClass('slide').setStyle({
		width: this.width + 'px',
		height: this.height ? this.height + 'px' : 'auto',
		marginLeft: this.slideGap + 'px',
		marginRight: this.slideGap + 'px'
	});
	this.slides.each(function (el, self, idx) {
		el.setLeft(this.slideSize * idx);
		el.addClass('carouse-slide-' + idx);
	}, this);
	// Add the next/prev links
	this.prev = this.wrap.insertFirst({ tag: 'img', src: this.prevImage });
	if (this.prevImageHover) { this.prev = HoverFade(this.prev, this.prevImageHover); }
	this.prev.addClass('carouse-prev');
	this.next = this.wrap.insertFirst({ tag: 'img', src: this.nextImage });
	if( this.nextImageHover) { this.next = HoverFade(this.next, this.nextImageHover); }
	this.next.addClass('carouse-next');
	// index?
	if (this.showIndex) {
		this.index = this.wrap.insertFirst({ tag: 'ul', cls: 'carouse-index' });
		this.slides.each(function (el, self, idx) {
			this.index.createChild({
				tag: 'li',
				html: (idx + 1).toString(),
				cls: 'carouse-index-' + idx
			}).on('click', this.updateSlide.createDelegate(this, [idx]), this);
		}, this);
	}
	// Move when needed
	this.prev.on('click', this.prevSlide, this);
	this.next.on('click', this.nextSlide, this);
	// Check if the anchor is a child of ours
	this.currentSlide = 0;
	if(document.location.hash) {
		var current = this.el.down(document.location.hash);
		if( current ) {
			for( var i=0; i < this.numSlides; i++ ) {
				if( current.hasClass('carouse-slide-' + i) ) {
					this.currentSlide = i;
					break;
				}
			}
		}
	}
	this.updateSlide(this.currentSlide);
};

Ext.extend(Carouse, Ext.util.Observable, {
	slideGap: 10,
	prevImage: '',
	prevImageHover: '',
	nextImage: '',
	nextImageHover: '',
	updateSlide: function (pos) {
		this.currentSlide = pos;
		var actions = {
			marginLeft: { 'to': -(this.slideSize * this.currentSlide), unit: 'px' }
		};
		if( !this.height ) {
			actions.height = { 'to': this.el.select('.slide').item(pos).getHeight() };
		}
		this.el.stopFx().animate(
			actions,
			1, // duration
			null, // callback
			'easeBothStrong', // easing method
			'run'
		);
		if (this.showIndex) {
			this.index.down('.carouse-index-' + pos).radioClass('carouse-index-selected');
		}
	},
	prevSlide: function () {
		if (this.currentSlide === 0) { return; }
		this.updateSlide(this.currentSlide - 1);
	},
	nextSlide: function () {
		if (this.currentSlide === this.lastSlide) { return; }
		this.updateSlide(this.currentSlide + 1);
	}
});