IndexSlider = Class.create({
	currentPanel:null,
	animating:false,
	repeater: null,
	
	initialize: function() {
		this.currentPanel = $$('#slider_under>div').first();
		this.resetTimer();
	},
	
	resetTimer: function () {
		var self = this;
		if (this.repeater) this.repeater.stop();
		this.repeater = new PeriodicalExecuter(function (pe) {
			var next = self.currentPanel.next();
			if (!next) next = self.currentPanel.up().childElements().first();
			self.changePanel(next, 'slide-left');			
		}, 5);
	},
	
	changePanel: function (newPanel, transition) {
		var self = this;
		var d = $('slider_under').getDimensions();
		var w = d.width;
		var h = d.height;
		var oldPanel = self.currentPanel;
		
		if (self.animating || newPanel == oldPanel) return; //skip the change request if we're currently animating, or the user clicked the same button
		
		var old_panel_id = oldPanel.getAttribute('data-panel');
		var new_panel_id = newPanel.getAttribute('data-panel');

		var effectList;
		var effectOptions = {
			duration: 0.5,
			transition: Effect.Transitions.easeOutQuad,
			beforeStart: function () {self.animating = true;},
			afterFinish: function () {
				oldPanel.hide();
				self.animating = false;
				$$('#slider_marks .'+new_panel_id).invoke('addClassName', 'c');
				$$('#slider_links .'+new_panel_id).invoke('show');
			}
		};
		
		switch (transition) {
		case 'slide-left':
			newPanel.show().setStyle({left:w+'px', top:0});
			effectList = [
				new Effect.Move(oldPanel, { sync: true, x:-w, mode: 'absolute' }),
				new Effect.Move(newPanel, { sync: true, x:0, mode: 'absolute' }),
			];
			break;
		case 'slide-right':
			newPanel.show().setStyle({left:-w+'px', top:0});
			effectList = [
				new Effect.Move(oldPanel, { sync: true, x:w, mode: 'absolute' }),
				new Effect.Move(newPanel, { sync: true, x:0, mode: 'absolute' }),
			];
			break;
		case 'slide-up':
			newPanel.show().setStyle({left:0, top:h+'px'});
			effectList = [
				new Effect.Move(oldPanel, { sync: true, y:-h, mode: 'absolute' }),
				new Effect.Move(newPanel, { sync: true, y:0, mode: 'absolute' }),
			];
			break;
		case 'slide-down':
			newPanel.show().setStyle({left:0, top:-h+'px'});
			effectList = [
				new Effect.Move(oldPanel, { sync: true, y:h, mode: 'absolute' }),
				new Effect.Move(newPanel, { sync: true, y:0, mode: 'absolute' }),
			];
			break;
		case 'fade':
			newPanel.setStyle({left:0});
			effectList = [
				new Effect.Fade(oldPanel, { sync: true }),
				new Effect.Appear(newPanel, { sync: true }),
			];
			break;
		}
		
		new Effect.Parallel(effectList, effectOptions);
		$$('#slider_marks .'+old_panel_id).invoke('removeClassName', 'c');
		$$('#slider_links .'+old_panel_id).invoke('hide');
				
		self.currentPanel = newPanel;
		
		
	}
});

Event.observe(document,'dom:loaded', function() {
	if (!$('slider')) return; //slider doesn't exist, skip autosetup
	var slider = new IndexSlider();
	
	$('slider_marks').observe('click', function (event) {
		var el = event.element();
		if (el.match('a')) {
			var panel_id = el.getAttribute('data-panel');
			var panel = $$('#slider_under .'+panel_id).first();
			if (panel) slider.changePanel(panel, 'slide-up');
			slider.resetTimer();
		}
	});
	$('slider_left').observe('click', function () {
		var next = slider.currentPanel.previous();
		if (!next) next = slider.currentPanel.up().childElements().last();
		slider.changePanel(next, 'slide-right');
		slider.resetTimer();
	});
	$('slider_right').observe('click', function () {
		var next = slider.currentPanel.next();
		if (!next) next = slider.currentPanel.up().childElements().first();
		slider.changePanel(next, 'slide-left');
		slider.resetTimer();
	});
});