gistfile1.js

var readout = 'counter';
Glider.addMethods({
	initialize: function(wrapper, options){
		this.scrolling = false;
		this.wrapper = $(wrapper);
		this.scroller = this.wrapper;
		this.sections = this.wrapper.select('div.section');
		this.options = Object.extend({ controlsEvent:'click', duration: 1.0, frequency: 3 }, options || {});
		this.sections.each( function(section, index) {
			section._index = index;
		});
		this.events = {
			click: this.click.bind(this)
		};
		this.addObservers();
		if(this.options.initialSection) {
			this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load
			mark = this.options.initialSection;
		}else{
			mark = this.wrapper.down('div.scroller').firstDescendant().id;
		}
		if(this.options.autoGlide) this.start();
		this.controls.each(function(control){
			if (control.href.split('#')[1] == mark) {
				if(control.down('img')){
					control.down('img').addClassName("active");
				}else{
					control.addClassName('active');
				}
			}else{
				if(control.down('img')){
					control.down('img').removeClassName("active");
				}else{
					control.removeClassName('active');
				}
			}
		});
		if($(readout))
			$(readout).down('p').update(($(mark).previousSiblings().length + 1).toString() + '/' + this.sections.length.toString());
	},
	moveTo: function(element, container, options){
		this.current = $(element);
		Position.prepare();
		var containerOffset = Position.cumulativeOffset(container),
			elementOffset = Position.cumulativeOffset($(element));
		this.scrolling = new Effect.SmoothScroll(container,{
			duration:options.duration, 
			x:(elementOffset[0]-containerOffset[0]), 
			y:(elementOffset[1]-containerOffset[1])
		});
		this.controls.each(function(control){
			if (control.href.split('#')[1] == element.id) {
				if(control.down('img')){
					control.down('img').addClassName("active");
				}else{
					control.addClassName('active');
				}
			}else{
				if(control.down('img')){
					control.down('img').removeClassName("active");
				}else{
					control.removeClassName('active');
				}
			}
		});
		if($(readout))
			$(readout).down('p').update((element.previousSiblings().length + 1).toString() + '/' + container.select('.section').length.toString());
		return false;
	}
});