var enableNavigationRollovers = {

	init: function (matrix) {

		//setup our BG image
		var menuBGOn = new Image();
		menuBGOn.src = '/img/quoteBG_v2_on.gif';
		var menuBGOff = new Image();
		menuBGOff.src = '/img/quoteBG_v2.gif';

		// first grab the section image that we're going to change on hovers
		var sectionImage = $E('.sectionImage');
		// need to save path to active section image
		var currentSectionImageSrc = sectionImage.src;

		for (var i = 0; i < matrix.length; i++) {

			var listitem = document.getElementById(matrix[i][0]);
			// create our expando property to store image src			
			listitem.ImageSrc = matrix[i][1].src;

			if (i == 0) {
				$(listitem).addEvent('mouseover', function () {
					sectionImage.src = this.ImageSrc;
					this.style.background = 'url(/img/quoteBG_v2_start_on.gif)';
				});

				$(listitem).addEvent('mouseout', function () {
					sectionImage.src = currentSectionImageSrc;
					this.style.background = 'url(/img/quoteBG_v2_start.gif)';
				});				
			}
			else if (i == (matrix.length - 1)) {
				$(listitem).addEvent('mouseover', function () {
					sectionImage.src = this.ImageSrc;
					this.style.background = 'url(/img/quoteBG_v2_end_on.gif)';
				});

				$(listitem).addEvent('mouseout', function () {
					sectionImage.src = currentSectionImageSrc;
					this.style.background = 'url(/img/quoteBG_v2_end.gif)';
				});			
			} else {
				$(listitem).addEvent('mouseover', function () {
					sectionImage.src = this.ImageSrc;
					this.style.background = 'url(/img/quoteBG_v2_on.gif)';
				});

				$(listitem).addEvent('mouseout', function () {
					sectionImage.src = currentSectionImageSrc;
					this.style.background = 'url(/img/quoteBG_v2.gif)';
				});			
			}

	
		}
	}
}