var MediaViewer = Class.create({
	thumbs: null,
	frames: null,
	active: null,
	container: null,
		
	initialize: function(div) {
		this.container = $(div);
		this.container.mgr = this;
		this.thumbs = $$("#" + this.container.identify() + " ul.thumbs li");
		this.frames = $$("#" + this.container.identify() + " ul.frames li");
		this.thumbs.each(function(t, i) {
			t.index = i,
			t.observe('click', function(e) { $(this).up('div').mgr.show_frame(this.index); Event.stop(e); });
		});
		this.show_frame(0);
	},
	
	show_frame: function(index) {
		if (index == this.active) { return; }
		
		this.frames[index].show();
		this.thumbs[index].addClassName('active');
		if (this.active != null) {
			this.frames[this.active].hide();
			this.thumbs[this.active].removeClassName('active');
		}
		this.active = index;
	}
});

function RolloverImage(img)
{
	var tempArr = img.src.split('.gif');
	var name = tempArr[0];
	
	if (name.indexOf('_on') == -1) {		
		// store the on and off images			
		img.rollOn = name + "_on.gif";
		img.rollOut = name + ".gif";
		
		Event.observe(img, 'mouseover', function(e) { doRollOver(); });
		Event.observe(img, 'mouseout', function(e) { doRollOut(); });

		// called on rollover
		function doRollOver() { img.src = img.rollOn; }
	
		// called on rollout
		function doRollOut() { img.src = img.rollOut; }
	}
}

Event.observe(window, 'load', function() {
	var divs = $$('.viewer');
	divs.each(function(d) { new MediaViewer(d); })
	var imgs = $$('#nav a img');
	imgs.each(function(i) { new RolloverImage(i); })
});