var scroller = new Class({

	Implements: [Options, Events],
	
	options: {
		slider_height: 5,
		slider_width: 100,
		slider_color: '#558bb9',
		slider_duration: 500,
		slider_fps: 77,
		autoscroll_interval: 10000,
		slider_transition: 'quad:out'
	},
	
	initialize: function(frame, item_container, link_container, pane_count, options) {
	
		this.setOptions(options);
		this.pane_count = pane_count;
		this.frame = document.id(frame);
		this.item_container = document.id(item_container);
		this.link_container = document.id(link_container);
		this.links = this.link_container.getElements('a');
		
		this.on_panes = false;
		
		this.current_id = undefined;
		
		if(this.frame != undefined) {
			this.cursor_tracking();
		}
		
		if(this.item_container != undefined) {
			this.ignition();
		}
			
	},
	
	cursor_tracking: function() {
	
		this.frame.addEvents({
		
			'mouseenter': function() {
			
				this.on_panes = true;
				$clear(this.autoscroller);
				
			}.bind(this),
			
			'mouseleave': function() {
			
				this.on_panes = false;
				this.autoscroller = this.stepper.periodical(this.options.autoscroll_interval, this);
			
			}.bind(this)
		
		});
	
		$each(this.links, function(link) {
		
			var id = link.getProperty('id').substring(1).toInt();
		
			link.addEvents({
			
				'mouseenter': function(event) {
					event.stop();
					this.change_pane(id);
				}.bind(this)
			
			});
		
		}.bind(this));
	
	},
	
	ignition: function() {
	
		var starter_pane = this.item_container.getFirst('div'); // fade out everything except first pane
		starter_pane.getAllNext('div').fade('hide');
	
		this.current_id = 1;
		
		var starter_coordinates = this.link_container.getElementById('t' + this.current_id.toString()).getCoordinates();
				
		this.slider_bar = new Element('div', {
			'id': 'slider_bar',
			'html': '',
			'styles': {
				'position': 'absolute',
				'background': this.options.slider_color,
				'height': this.options.slider_height,
				'width': this.options.slider_width,
				'top': starter_coordinates.bottom + 10,
				'left': (((starter_coordinates.right - starter_coordinates.left) - this.options.slider_width) / 2) + starter_coordinates.left,
				'z-index': 90
			}
		}).inject(document.body, 'bottom');
		
		this.slider = new Fx.Tween(this.slider_bar, {
			duration: this.options.slider_duration,
			link: 'cancel',
			fps: this.options.slider_fps,
			transition: this.options.slider_transition
		});
		
		this.autoscroller = this.stepper.periodical(this.options.autoscroll_interval, this);
	
	},
	
	change_pane: function(id) { // takes int id of new pane

		var current_pane_dom = this.item_container.getElementById(this.link_container.getElementById('t' + this.current_id.toString()).getProperty('class'));
		var new_pane_dom = this.item_container.getElementById(this.link_container.getElementById('t' + id.toString()).getProperty('class'));
		var new_coordinates = this.link_container.getElementById('t' + id.toString()).getCoordinates();
		
		current_pane_dom.fade('out');
		new_pane_dom.fade('in');
		this.slider.cancel().start('left', (((new_coordinates.right - new_coordinates.left) - this.options.slider_width) / 2) + new_coordinates.left);
		
		this.current_id = id;
	
	},
	
	stepper: function() {
	
		if(this.current_id < 5) {
			var new_id = this.current_id + 1;
		}
		
		else if(this.current_id == 5) {
			var new_id = 1
		}
	
		this.change_pane(new_id);
	
	}
		
});

window.addEvent('domready', function() {

	this.scroll = new scroller('themes', 'items', 'links', 5);

});