window.addEvent
(
 	'domready', function()
	{
		if( document.getElementById('ref-container') )var hl = new highlight('ref-container');
	}
);

var highlight = new Class
({
 	Implements: Options,
 
 	options:
	{
	},
 	
	initialize: function(el, options)
	{
		this.setOptions(options);
		
		this.container = $(el);
		
		this.refContainer = $('refs-list');
		
		this.refs = this.container.getElements('li');
		
		this.tabs = new Element('ul').addClass('tabs').injectTop(this.container);
		
		this.ref_Fx = new Fx.Scroll
		(
			this.refContainer,
			{
				duration: 700,
				wait: false,
				transition: Fx.Transitions.Expo.easeInOut
			}
		);
		
		this.refs.each
		(
			function(elem,i)
			{
				this.nav(i);
				
				this.tab.addEvent
				(
					'click', function()
					{
						this.selector(i);
						this.goto(i);
					}.
					bind(this)
				);
				
			},
			this
		);
		
		this.container.addEvent
		(
			'mouseenter', function()
			{
				$clear(this.timer);
			}.
			bind(this)
		);
		
		this.container.addEvent
		(
			'mouseleave', function()
			{
				this.autogo(0);
			}.
			bind(this)
		);
		
		this.tabCollection = this.tabs.getElements('li');
		
		this.ptab = this.tabCollection[0];
		
		this.selector(0);
		
		this.timer;
		
		this.autogo();
	},
	
	nav: function(i)
	{
		i = i+1;
		this.tab = new Element('li').set('html', i).addClass('tab-'+i).injectInside(this.tabs);
	},
	
	selector: function(i)
	{
		var tab = this.tabCollection[i];
		this.ptab.removeClass('selected');
		tab.addClass('selected');
		this.ptab = tab;
	},
	
	goto: function(i)
	{
		this.ref_Fx.start( 580 * i );
		this.selector(i);
		
	},
	
	autogo: function(i)
	{
		
		this.tabCollection.getElement('selected');
		
		this.timer =
		(
			function()
			{
				var next = this.tabCollection.indexOf( $$('li.selected')[0].getNext() );
				
				if( next == '-1' )
				{
					next = 0;
				}
				
				this.goto(next);
			}
		).periodical(3000,this);
	
	}
});