/* protoreel.js v0.1 by shamus at floogy.com 

Overview:
Protoreel is useful for any kind of interface navigation which requires children to be hidden and 
switched through on the fly using prev/next links. Originally written to scroll images as a reel 
of film, it may be used without modification to smartly handle any group of page elements.

Parameters:
1.	The value of your parent container's id="" property.
2.	A CSS property to define your children. Only elements within the parent container are examined.
	Example: 'span' or 'fieldset' or even '.classNameHere'
3.	Offset which child loads first in the reel. For no offset use 0 (zero), which is also the 
	default offset.
4.	Limit the amount of children visible at a time. This defines the width or length of your reel.
	1 (one) is the default limit.

Example:
--- START CODE SNIPPET ---
<script type="text/javascript" src="/path/to/protoreel.js"></script>
<div id="myContainer">
	<span>hello</span>
	<span>world</span>
</div>
<p>
	<a href="#" onclick="return Protoreel.next()">Next</a>
	<a href="#" onclick="return Protoreel.prev()">Previous</a>
</p>
<script type="text/javascript">
	var myReel = new Protoreel('myContainer', 'span', 0, 1);
</script>
--- END CODE SNIPPET --
*/

var Protoreel = Class.create({
	initialize: function(containerId, childCSS, offset, limit) {
		this.containerId = containerId;
		this.childCSS = childCSS;
		this.offset = (typeof(offset)!='undefined')? offset: 0;
		this.limit = (typeof(limit)!='undefined')? limit: 1;
		this.loadAt(this.offset);
	},
	loadAt: function(offset) {
		var limitBuffer = (offset + this.limit);
		var i = 0;
		$$('#'+this.containerId+' '+this.childCSS).each( function(el) {
			el.hide();
			if (i>=offset && i<limitBuffer)
				el.show();
			i = (i+1);
		});
	},
	next: function() {
		var numChildren=0;
		$$('#'+this.containerId+' '+this.childCSS).each( function(el) {
			numChildren++;
		});
		if (this.offset<(numChildren-this.limit))
			this.offset++;
		else
			this.offset=0;
		this.loadAt(this.offset);
		return false;
	},
	prev: function() {
		if (this.offset>0)
			this.offset--;
		this.loadAt(this.offset);
		return false;
	}
});