<!-- tpl(js.bottom) { -->
<script type="text/javascript">
<!--
// ~ ~ ~ ~ ~ ~
// images.class
// ~ ~ ~ ~ ~ ~
// images is a 'database' of images
// each image is an object with statically defined name and title
// each image.src is ini ./lg/name.jpg,
// each image.thm is in ./sm/name.jpg
// img, ndx, src & thm are iniialized by images.preload()
//
// designed for <img id="thm-1,2,...
// ~ ~ ~ ~ ~ ~
// aruna-pradakshina-twice
// dennis-intro
// devotees-sitting
// devotees-watching-video
// puja
// singer-1
// singer-2
var images = {
 db : {
	'devotees-sitting' : {title : 'devotees sitting',
		img: null,
		ndx: 1,
		src: '',
		thm: ''},
	'dennis-intro' : { title : 'Dennis welcomes friends' },
	'singer-1' : { title : 'singer 1' },
	'singer-2' : { title : 'singer 2' },
	'devotees-watching-video' : { title : 'devotees watching video' },
	'puja' : { title : 'Shrine' },
	'aruna-pradakshina-twice' : { title : 'Sri Ramana Pradakshina' }
	 },
// ~ ~ ~ ~ ~ ~ ~
 keys : [],

 url : window.location.href,

// ~ ~ ~ ~ ~ ~ ~
 length : function() {
 	return this.keys.length;
 	},

// ~ ~ ~ ~ ~ ~ ~
 key : function(ndx) {
 	return this.keys[ndx]; //  - 1];
 	},

// ~ ~ ~ ~ ~ ~ ~
 ndx : function(key) {
 	return this.key[ndx];
 	},

 preload : function() {
	i = 0;
	for (key in this.db) {
		this.keys[i] = key;
		this.db[key].img = new Image();
		this.db[key].img.src =  'lg/' + key + '.jpg';
		this.db[key].src = 'lg/' + key + '.jpg';
		this.db[key].thm = 'sm/' + key + '.jpg';
		this.db[key].ndx = i;
		i += 1;
		}
	image.set(0);
//	alert('images.preloaded(' + i + ')');
	}, // images.preload()

// ~ ~ ~ ~ ~ ~ ~
 src : function(ndx) {
 	return this.db[this.key(ndx)].src;
	}, // images.src()

// ~ ~ ~ ~ ~ ~ ~
 title : function(ndx) {
 	return this.db[this.key(ndx)].title;
 	}, // images.title()

// ~ ~ ~ ~ ~ ~ ~
 thm : function(ndx) {
 	return this.db[this.key(ndx)].thm;
 	} // images.thm()
 }; // images.class


// ~ ~ ~ ~ ~ ~ ~
//  image.class
// ~ ~ ~ ~ ~ ~ ~
var image = {

 key : function(ndx) {
 	return images.key(ndx);
	}, // image.src()

// ~ ~ ~ ~ ~ ~ ~
 set : function(ndx) {
//	alert('this.set(' + ndx + ').src = ' + images.src(ndx));
	document.getElementById("img.curr").src = images.src(ndx);
	title = images.title(ndx);
	document.getElementById("img.curr").title = title;
	document.getElementById("img.curr").alt = title;
	document.getElementById("img.text").innerHTML = title;
	}, // image.set()

// ~ ~ ~ ~ ~ ~ ~
 src : function(ndx) {
 	return images.src(ndx);
	}, // image.src()

// ~ ~ ~ ~ ~ ~ ~
 title : function(ndx) {
 	return images.title(ndx);
 	}, // image.title()

// ~ ~ ~ ~ ~ ~ ~
 thm : function(ndx) {
 	return images.thm(ndx);
 	} // image.thm()
 }; // image.class


// ~ ~ ~ ~ ~ ~ ~
//  ribbon.class
// ~ ~ ~ ~ ~ ~ ~
// size = how many thumb images wide :
// 	6 thumbs at 60px tall fit within an 7-800 px frame
// ~ ~ ~ ~ ~ ~ ~
var ribbon = {
	size : 7,
	height : 60,
	start : 0,
	shifted : 0,

// ~ ~ ~ ~ ~ ~ ~
 info : function() {
	txt = "info[ =\n  ";
	for (key in images) {
		txt += "img." + key + " = " + images[key].title + "\n  ";
		}
	}, // ribbon.info()

// ~ ~ ~ ~ ~ ~ ~
// function set()
// ~ ~ ~ ~ ~ ~ ~
// thumb links are 1..6  - offset by ribbon.start
// and by whether and which direction the ribbon was shifted
// ~ ~ ~ ~ ~ ~ ~
 ndx : function(ndx) {
	return this.start + ndx - this.shifted;
	}, // ribbon.ndx()

// ~ ~ ~ ~ ~ ~ ~
 set : function(ndx) {
	if ( this.shift(ndx) === 0 ) { return this.ndx(ndx); }
//	var log = 'ribbon.start = ' + this.start + ",\n";
	var idx = 0;
	for ( i=0; i <= ribbon.size - 1; i++ ) {
		idx = ribbon.start + i;
		thm = 'thm-' + i;
//		log += '  images[' + ndx + '] = ' + image.key(idx) + ",\n";
		document.getElementById(thm).src = image.thm(idx);
		document.getElementById(thm).alt   = image.title(idx);
		document.getElementById(thm).title = image.title(idx);
		}
	return this.ndx(ndx);
//	alert(log);
	}, // ribbon.set()

// ~ ~ ~ ~ ~ ~ ~
// function shift()
// ~ ~ ~ ~ ~ ~ ~
// if ndx > ribbon.mid
//    if ndx + ribbon.size < images.length -  shift the ribbon left
// else (ndx <= ribbon.mid)
//    if ribbon.start > 0 - shift-right 
// ~ ~ ~ ~ ~ ~ ~
 shift: function(clicked) {
	changed = 0;
	this.shifted = 0;
//	if ( clicked > this.size / 2 ) {
//		document.getElementById('imgShiftRight').src = '/images/prev-c.gif';
//		if ( this.start + this.size < images.length() ) {
//			this.start += 1;
//			changed = 1;
//			this.shifted = 1;
//			}
//		}
//	else { // click <= ribbon.mid
//		if ( this.start > 0 ) {
//			this.start -= 1;
//			changed = 1;
//			this.shifted = -1;
//			}
//	if ( this.start > 0 ) {
//		document.getElementById('imgShiftRight').src = '/images/prev-c.gif';
//		}
//	else { 
//		document.getElementById('imgShiftRight').src = '/images/pixel.gif';
//		}
//	if ( this.start + this.size < images.length() ) {
//		document.getElementById('imgShiftLeft').src = '/images/next-c.gif';
//		}
//	else {
//		document.getElementById('imgShiftLeft').src = '/images/pixel.gif';
//		}
	return changed;
	} // ribbon.shift()
 }; // ribbon.class

images.preload();
 // --></script>
<!-- } -->