JavaScript - Image/video Gallery

<div id="middle4">
    <div class="videobox" style="height: 360px; overflow-y: scroll;">
	<ul>
		<li><a href="http://www.youtube.com/watch?v=iFGEHtqNZis">TRS 50X35</a></li>
		<li><a href="http://www.youtube.com/watch?v=9CaN2KBYpo8">98X104 Automobile Shredder</a></li>
		<li><a href="http://www.youtube.com/watch?v=BWHXX6u3tVk">60x60 Aluminum</a></li>
		<li><a href="http://www.youtube.com/watch?v=ZiWDKtdfqWQ">60X60 System</a></li>
	        <li><a href="http://www.youtube.com/watch?v=VMbbXcFju9E">Portable Shredding System</a></li>
		<li><a href="http://www.youtube.com/watch?v=WEn5xtJwtu4">60X85 System</a></li>
	        <li><a href="http://www.youtube.com/watch?v=1cOxYQB5icg">60X60 White Goods</a></li>
			      
	</ul>
 </div>

</div>

// Videobox object
VideoBox = Class.create();
VideoBox.prototype = {
	// Initialize object.
	initialize: function(index, item) {
		this.index = index;
		this.item = item;
		this.item.addClassName('videoboxjs');
		this.list = this.item.getElementsBySelector('ul')[0];
		// Create div.bigvideo and add it just before the ul.
		this.bigvideo = document.createElement('div');
		Element.addClassName(this.bigvideo, 'bigvideo');
		this.item.insertBefore(this.bigvideo, this.list);
		// Create array of videothumbs.
		this.thumbs = new Array;
		// Opera 9 doesn't like 'li a' in getElementsBySelector, so you
		// have to break it apart.
		var links = this.item.getElementsBySelector('li');
		for (var i=0; i < links.length; i++) {
			this.thumbs[i] = new VideoThumb(index, i, links[i].getElementsBySelector('a')[0]);
		}
		// Load up the first video.
		this.swap(0);
	},
	// Replace existing video with new one.
	swap: function(index) {
		// IE 6 won't show the video unless something else is in the box.
		// I chose to add a <br /> which I hide via CSS.
		this.bigvideo.innerHTML = '<br /><object width="425" height="350"><param name="movie" value="' + this.thumbs[index].video + '"></param><param name="wmode" value="transparent"></param><embed src="' + this.thumbs[index].video + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>';
		// Deselect all the thumbnails.
		this.thumbs.invoke('deselect');
		// Select the current thumbnail.
		this.thumbs[index].select();
	}
};

// Videothumb object
VideoThumb = Class.create();
VideoThumb.prototype = {
	// Initialize object.
	initialize: function(boxindex, index, link) {
		this.boxindex = boxindex;
		this.index = index;
		this.item = link;
		this.href = this.item.getAttribute('href');
		// Extract the v querystring value from the href. Youtube uses this
		// value for everything.
		this.videocode = this.href.toQueryParams().v;
		// Direct link to the video for use in the object/embed
		this.video = 'http://www.youtube.com/v/' + this.videocode;
		// Create thumbnail image and append it inside the list item
		var img = document.createElement('img');
		img.src = 'http://img.youtube.com/vi/' + this.videocode + '/default.jpg';
		img.alt = this.item.innerHTML;
		img.title = this.item.innerHTML;
		this.item.innerHTML = "";
		this.item.appendChild(img);
		// Observe the click event.
		Event.observe(this.item, 'click', this.swap.bindAsEventListener(this));
	},
	swap: function(evt) {
		// Call the swap method of the parent videobox with the thumbnail
		// thumbnail index as a parameter.
		aVB[this.boxindex].swap(this.index);
		// Stop the event so the browser doesn't follow the link.
		if (evt) {
			Event.stop(evt);
		}
	},
	select: function() {
		this.item.addClassName('current');
	},
	deselect: function() {
		this.item.removeClassName('current');
	}
};

// Don't do anything if we're using Opera 8 or earlier.
if (!Prototype.Browser.Opera || (Prototype.Browser.Opera && navigator.userAgent.toLowerCase().charAt(navigator.userAgent.toLowerCase().indexOf('opera') + 6) > 8)) {
	// Create array of videoboxes so you can have more than one on a page.
	var aVB = new Array;
	$$('div.videobox').each ( function(videobox, index) {
		aVB[index] = new VideoBox(index, videobox);
	});
}

//<!--

var imgList = new Array(
	"images/gallery/1.jpg",
	"images/gallery/2.jpg",
	"images/gallery/3.jpg",
	"images/gallery/5.jpg",
	"images/gallery/6.jpg",
	"images/gallery/duo.jpg"
	);

var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);

var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
	all_links=document.getElementById('gallery').getElementsByTagName('a');
	all_links[0].style.color="#7d3d3d";
	ShowMain(current_position);
}

function color_me(element,color){
	element.style.color=color;
}

function Prev(){
	color_me(all_links[current_position],'#000000');
	if((current_position-1)>-1){
		current_position=current_position-1;
	}
	else{
		current_position=(all_links.length-1);
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function direct_selection(number){
	all_links[current_position].style.color="#000000";
	current_position=number;
	ShowMain(current_position);
	all_links[current_position].style.color="#7d3d3d";
}

function Next() {
	color_me(all_links[current_position],'#000000');
	if((current_position+1)<all_links.length){
		current_position++;
	}
	else{
		current_position=0;
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function ShowMain(which){
	currentMain = which;
	currentMainT = which;
	if ( currentMain < 0 ) currentMain = 0;
	if ( currentMainT < 0 ) currentMainT = 0;
	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
	document.getElementById('mainImg').src = imgList[currentMain];
	document.getElementById('mainText').innerHTML = clientData[currentMainT];
	var PD = document.getElementById('Pg');
	var PD2 = document.getElementById('Pg2');
	
	document.getElementById("mainText").style.display = 'inline';
//	return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->


//<!--
function preloader(){
	// counter
	var i = 0;

	// create object
	imageObj = new Image();

	// set image list
	images = new Array();
	images[0]="images/gallery/1.jpg";
	images[1]="images/gallery/2.jpg";
	images[2]="images/gallery/3.jpg";
	images[3]="images/gallery/5.jpg";
	images[4]="images/gallery/6.jpg";
	images[5]="images/gallery/duo.jpg";


	// start preloading
	for(i=0; i<=3; i++){
		imageObj.src=images[i];
	}
}
//-->

<img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" />