/*
In your HTML page you need to define a variable called images which is an
array of the images that should be displayed in the image viewer. Here is
an example of what it should look like:

var images = [
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/dining_room/cellular_shades_4lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/living_room/cellular_shade_2lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/bathroom/cellular_shade_2lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/study/cellular_shades_3lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/bedroom/cellular_shades_5lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/entry_way/cellular_shades_6lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/living_room/cellular_shades_6lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/living_room/cellular_shades_7lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/bedroom/cellular_shade_6lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/bathroom/cellular_shade_6lg.jpg",
	"http://test.baliblinds.tst/BaliBlindsImages/ShowroomImages/study/cellular_shades_1lg.jpg"
];
*/

var currentImageIndex = 0;

function initImageViewer(){
	initImageViewer(0);
}

function initImageViewer(imageIndex){
	if (imageIndex === undefined) {
		imageIndex = 0;
	}
	
	if(images){
		setImage(imageIndex);
	} else {
		alert("No images defined");
	}
};

function setImage(index){
	if(index < 0){
		alert("Cannot set Image to a negative index");
	} else if(index >= images.length) {
		alert("Cannot set Image to a index not in images");
	} else {
		currentImageIndex = index;
		document.getElementById("imageViewerImg").src = images[index];
		
		var startIndex = currentImageIndex - 1;
		if (currentImageIndex == 0) {
			document.getElementById("imageViewerPrevA").style.display = 'none';
			document.getElementById("imageViewerPrevSpan").style.display = '';
			startIndex = 0;
		} else {
			document.getElementById("imageViewerPrevA").style.display = '';
			document.getElementById("imageViewerPrevSpan").style.display = 'none';
		}

		if (currentImageIndex < images.length-1) {
			document.getElementById("imageViewerNextA").style.display = '';
			document.getElementById("imageViewerNextSpan").style.display = 'none';
		} else {
			startIndex = images.length - 3;
			document.getElementById("imageViewerNextA").style.display = 'none';
			document.getElementById("imageViewerNextSpan").style.display = '';
		}

		setupImageSelector("imageViewerImageSelect1", startIndex);
		setupImageSelector("imageViewerImageSelect2", startIndex + 1);
		setupImageSelector("imageViewerImageSelect3", startIndex + 2);
	}
}

function setupImageSelector(imageSelectorId, imageIndex){
	var container = document.getElementById(imageSelectorId);
	var link = document.getElementById(imageSelectorId+"A");
	var span = document.getElementById(imageSelectorId+"Span");
	
	if (imageIndex < 0 || imageIndex >= images.length) {
		container.style.display = 'none';
	} else {
		container.style.display = '';
		link.innerHTML = imageIndex + 1;
		span.innerHTML = imageIndex + 1;
		/*		
			When setting an event handler you can just assign a function
			to it. You have to create a new function it will be assigned
			to. Thus we create an anonymous (unnamed function) below and
			set it to the links onclick property. Also notice the function
			returns false. This is to stop the event processing so the
			browser does not try to go to the actual HREF in the link tag
			after it processes this onclick event.
		*/
		link.onclick = function() { setImage(imageIndex); return false };
		if (imageIndex == currentImageIndex) {
			link.style.display='none';
			span.style.display='';
		} else {
			link.style.display='';
			span.style.display='none';
		}
	}
}