var Slider = new Class({
	Implements:Options,
	options: {
		panelHolder: null,
		panels: [],
		container: [],
		buttons: []
	},
	
	initialize: function(options) {
        this.setOptions(options);
		this.maxHeight = 0;
		this.totalWidth = 0;
		this.panelWidth = this.options.panelHolder.getSize().x;
		this.selected = this.options.buttons[0];
		
		var scope = this;
		this.options.panels.each(function(panel) {
			var thisHeight = panel.getSize().y;
			if (thisHeight > scope.maxHeight) {
				scope.maxHeight = thisHeight;
			}
			scope.totalWidth = scope.totalWidth + scope.panelWidth;
		});
		
		this.options.panelHolder.setStyle('width', this.totalWidth);
		this.options.container.setStyle('height', this.maxHeight);
		this.options.panelHolder.tween('left', 0);
		
		this.options.buttons.each(function(btn, i, a) {
			btn.store('idx', i);
			btn.addEvent('click', function(e) {
				scope.selected.toggleClass('selected');
				btn.toggleClass('selected');
				scope.selected = btn;
				var bf = scope.movePanels.pass(btn.retrieve('idx'), scope);
				bf();
				e.stop();
			});
			if (btn.hasClass('selected')) {
				scope.selected = btn;
			}
		});
		this.movePanels(this.selected.retrieve('idx'));
    },
	// internal variables
	maxHeight: 0,
	totalWidth: 0,
	panelWidth: 0,
	selected: null,
	// does the moving of the panels
	movePanels: function(i) {
		this.options.panelHolder.tween('left', -(i * this.panelWidth));
	},
	showNext: function() {
		var nxt = this.selected.retrieve('idx');
		nxt = (nxt == this.options.panels.length - 1) ? 0 : nxt + 1;
		this.doShow(nxt);
	},
	showPrev: function() {
		var nxt = this.selected.retrieve('idx');
		nxt = (nxt == 0) ? this.options.panels.length - 1 : nxt - 1;
		this.doShow(nxt);
	},
	doShow: function (i) {
		this.selected.toggleClass('selected');
		this.selected = this.options.buttons[i];
		this.selected.toggleClass('selected');
		this.movePanels(i);
	}
});