var HomePageFeatureSlider = new Class({
	
	
	initialize: function()
	{		
		/* Define elements */
		this.el = $('feature');
		this.slider = this.el.getElement('.container');
		this.container = this.el.getElement('.items');
		this.items = this.container.getElements('.item');
		this.nav = this.el.getElement('ul.ticks');
	
		/* Set container width for overflow */
		this.item_width = 960;
		this.item_height = 340;
		this.container.setStyle('width', this.items.length * this.item_width);
		
		/* Setup slide fx */
		this.slide = new Fx.Scroll(this.slider, {duration: 800, transition: Fx.Transitions.Cubic.easeOut});
		
		/* Ticks */
		this.items.each(function(el, key){
			var li = new Element('li', {'html': '<a href="#">&nbsp;</a>'}).inject(this.nav);
			li.getElement('a').addEvent('click', function(e){
				e.stop()
				this.go_to(key);
			}.bind(this));
		}.bind(this));
		this.ticks = this.nav.getElements('li');
		
		
		/* Start the interval */
		this.current = -1;
		this.timeout = false;
		this.next();		
	},
	
	next: function()
	{
		key = this.current + 1;
		if(key >= this.items.length) key = 0;
		this.go_to(key);
	},
	
	go_to: function(key)
	{
		this.current = key;
		this.slide.toElement(this.items[this.current]);
		
		if(this.timeout) clearTimeout(this.timeout);
		this.timeout = this.next.delay(7000, this);
		
		/* Select the tick */
		this.nav.getElements('.selected').removeClass('selected');
		this.ticks[this.current].addClass('selected');
	},
	
	pause: function()
	{
		if(this.timeout) clearTimeout(this.timeout);
	}

});