/**
 * The GalleryScroll class
 * 
 * @author Karl Shea	kshea@matharts.com
 */
var GalleryScroll = new Class({
	
	/**
	 * Initializes the GalleryScroll object
	 * 
	 * @constructor
	 */
	initialize: function(transition) {
		// Get the viewport (the container to scroll)
		this._viewport = $('viewport');
		
		// Set up the scrolling function
		this._scrollFun = new Fx.Scroll(this._viewport, {
			transition: transition,
			wait: false
		});
		
		// Get the caption and set the template text
		this._caption = $('scroll-caption');
		this._caption_tmpl = this._caption.getText();
		
		// Find the array of images
		this._images = $$('#viewport .scroll-image');

		// Set the initial index
		this._currentIndex = 0;
		
		// Set the initial caption
		this._setCaption();
		
		// Make sure the viewport is pointing at the current index
		this._moveTo(this._currentIndex);
	},
	
	/**
	 * Injects a link that calls the given JavaScript function when clicked, 
	 * using the item's text as the link text
	 * 
	 * @param {Element} el		The element to inject the link into
	 * @param {Function} fun	The function the link should call when clicked
	 */
	injectLink: function(el, fun) {
		// Get the inner html and empty the element
		var html = el.innerHTML;
		el.empty();
		
		// Construct the link
		var link = new Element('a', {
			'href': 'javascript:void(0)',
			'events': {
				'click': fun
			}
		});
		
		// Set the link's HTML to the old element HTML
		link.setHTML(html);
		
		// Inject the link into the element
		link.injectInside(el);
	},
	
	/**
	 * Rolls the image the specified number of steps, forwards or backwards
	 * 
	 * @param {int} steps	The number of steps to roll. Can be a positive or negative number
	 */
	roll: function(steps) {
		var newIndex = this._currentIndex + steps;
		
		// Bounds check
		if(newIndex < 0 || newIndex >= this._images.length) {
			return;
		}
		
		// Set the new index
		this._currentIndex = newIndex;
		
		// Move the viewport to point to the new image by index
		this._moveTo(this._currentIndex);
		
		// Set the caption
		this._setCaption();
		
		// Set visibility
		this._setVisibility();
	},
	
	/**
	 * Sets the caption of the scroller
	 */
	_setCaption: function() {
		this._caption.setText(
			this._caption_tmpl.
				replace(/{current}/, this._currentIndex + 1).
				replace(/{total}/, this._images.length)
		);
	},
	
	/**
	 * Sets the visibility of the arrows
	 */
	 
	_setVisibility: function() {
		if (this._currentIndex == 0) {
			$('scroll-prev').className = 'hidden';
		} else {
			$('scroll-prev').className = 'visible';
		}

		if (this._currentIndex == this._images.length - 1) {
			$('scroll-next').className = 'hidden';
		} else {
			$('scroll-next').className = 'visible';
		}
	},


	/**
	 * Moves the viewport to point at the given index
	 * @param {Object} index
	 */
	_moveTo: function(index) {
		// Stop any currently running transition
		this._scrollFun.stop();
		
		// Point the viewport to the new image
		this._scrollFun.toElement(this._images[index]);
	}
});

/**
 * Adds the event to the window onLoad function
 */
$(window).addEvent('domready', function() {
	var gs = new GalleryScroll(Fx.Transitions.Circ.easeOut);
	
	// Next link
	gs.injectLink($('scroll-next'), function(){
		gs.roll(1);
	});
	
	// Previous link
	gs.injectLink($('scroll-prev'), function(){
		gs.roll(-1);
	});
	
	if (gs._currentIndex == 0) {	
		$('scroll-prev').className = 'hidden';
	}
	
	if (gs._images.length < 2) {
		$('scroll-next').className = 'hidden';
	}
});