var ThumbSet = Class.create({
	version: '1.0',
	
	setOptions: function( options ) {
		this.options = {
			duration: 0.4,
			type: "slide",
			
			srcCircleOn: "/_res/img/elements/circ_on.png",
			srcCircleOff: "/_res/img/elements/circ_clear.png"
		}
		Object.extend( this.options, options || {} );
	},
	
	initialize: function( thumbnails, options ) {
		this.setOptions(options);
		
		this.ThumbTray = new Element( "p", { className: "ThumbTray" }).setStyle({ cursor: "pointer" });
		this.ThumbNav = new Element( "p", { className: "ThumbNav" });
		this.container = new Element( "div", { className: "ThumbSet" } ).insert(this.ThumbTray).insert(this.ThumbNav);
		if ( this.options.width ) {
			this.container.setStyle({ width: this.options.width + 'px' });
			this.ThumbTray.setStyle({ width: ( this.options.width * 2 ) + 'px' });
		}
		
		this.thumbnails = thumbnails;
		this.ThumbTray.insert( new Element( "img", { src: thumbnails[0].src, alt: thumbnails[0].text, title: thumbnails[0].text }) );
		this.ThumbTray.observe( "click", this.advance.bindAsEventListener(this) );
		
		this.curIndex = this.options.start || 0;
		this.circles = [];
		for ( var i = 0; i < thumbnails.length; i++ ) {
			this.circles[i] = new Element( "img", { src: ( i == this.curIndex ? this.options.srcCircleOn : this.options.srcCircleOff ), alt: "*", title: thumbnails[i].text } );
			this.ThumbNav.insert(this.circles[i]);
		}
		
		if ( this.options.type == "slide" )
			this.circles.invoke( "observe", "click", this.slide.bindAsEventListener(this) );
		
		// load other thumbnails once page is set
		Event.observe( window, "load", function() { for ( var i = 1; i < thumbnails.length; i++ ) { var x = new Image(); x.src = thumbnails[i].src; }} );
	},
	
	advance: function(e) {
		this.slide( e, (this.curIndex+1) < this.thumbnails.length ? this.curIndex+1 : 0 );
	},
	
	slide: function(e,indx) {
		if ( !indx )  indx = e.element().previousSiblings().size();
		
		if ( indx == this.curIndex )  return;
		
		if ( Object.isUndefined(this.options.width) ) {
			this.options.width = this.container.getWidth();
			this.container.setStyle({ width: this.options.width + 'px' });
			this.ThumbTray.setStyle({ width: ( this.options.width * 2 ) + 'px' });
		}
		
		this.ThumbTray.stopObserving("click");
		this.circles.invoke("stopObserving");
		
		var curThumb = this.ThumbTray.down("img");
		var newThumb = new Element( "img", { src: this.thumbnails[indx].src, alt: this.thumbnails[indx].text, title: this.thumbnails[indx].text } );
		
		if ( indx < this.curIndex )
			this.ThumbTray.setStyle({ left: "-" + this.options.width + "px" }).insert({ top: newThumb });
		else
			this.ThumbTray.insert( newThumb.setStyle({ left: this.options.width + "px" }) );
		
		new Effect.Move( this.ThumbTray, {
			duration: this.options.duration, 
			x: ( indx < this.curIndex ? this.options.width : this.options.width * -1 ), 
			
			afterFinish: function() {
				curThumb.remove();
				newThumb.setStyle({ left: "" });
				this.ThumbTray.setStyle({ left: 0 });
				this.ThumbTray.observe( "click", this.advance.bindAsEventListener(this) );
				this.circles.invoke( "observe", "click", this.slide.bindAsEventListener(this) );
			}.bind(this)
		});
		
		this.circles[this.curIndex].src = this.options.srcCircleOff;
		this.curIndex = indx;
		this.circles[this.curIndex].src = this.options.srcCircleOn;
	}
});