BlogPostScroller = new Class({
	Implements: [Options],
	options: {
		delay: 8000,
		duration: 1000,
		startFrame: 0
	},
	initialize: function(container, options) {
		this.setOptions(options);
		this.container = $(container);
		if(!this.container) return;

		this.timer = null;

		this.container.addEvents({
			mouseenter: this.mouseenter.bind(this),
			mouseleave: this.mouseleave.bind(this)
		});

		this.frames = this.container.getElements('div.scroller-frame');
		this.navframe = $(this.container.id + '-nav');
		this.navlinks = [];

		this.navframe.empty();
		if(this.frames.length > 0) {
			new Element('span', { 'class': 'navlink' })
				.set('html', '«')
				.addEvent('click', function() { this.previous(); }.bind(this))
				.inject(this.navframe);


			for(var i=0; i<this.frames.length; ++i) {
				this.navlinks[i] = new Element('span', { 'class': 'navlink' })
					.set('html', i+1)
					.store('BPScroll', this)
					.store('BPIndex', i)
					.addEvent('click', function() { this.retrieve('BPScroll').show(this.retrieve('BPIndex')); })
					.inject(this.navframe);
			}

			new Element('span', { 'class': 'navlink' })
				.set('html', '&raquo;')
				.addEvent('click', function() { this.next(); }.bind(this))
				.inject(this.navframe);

			this.navframe.getElements('.navlink').addEvents({
				mouseover: function() {
					this.addClass('hover');
				},
				mouseout: function() {
					this.removeClass('hover');
				}
			});
		}
	

		this.curFrame = this.options.startFrame;
		if(!this.frames[this.curFrame]) this.curFrame = 0;
		this.show(this.curFrame);
		
	},

	next: function() {
		++this.curFrame;
		if(!this.frames[this.curFrame]) this.curFrame = 0;
		this.show(this.curFrame);
	},

	previous: function() {
		if(--this.curFrame < 0) this.curFrame = this.frames.length - 1;
		this.show(this.curFrame);
	},

	show: function(index) {
		this.frames.setStyle('display', 'none');

		this.frames[index].setStyles({
			display: 'block',
			opacity: 0
		});
		new Fx.Tween(this.frames[index], {
			duration: this.options.duration
		}).start('opacity', 1);

		//this.navlinks.removeClass('on');

		for(var i=0; i<this.navlinks.length; ++i) this.navlinks[i].removeClass('on');

		this.navlinks[index].addClass('on');

		this.curFrame = index;


		this.setTimer();
	},
	clearTimer: function() {
		clearTimeout(this.timer);
	},
	setTimer: function() {
		if( this.options.delay ) {
			this.clearTimer();
			this.timer = setTimeout(function() {
				this.next();
			}.bind(this), this.options.delay);
		}
	},
	mouseenter: function() {
		this.clearTimer();
	},
	mouseleave: function() {
		this.setTimer();
	}

});