/*
* media_viewer.js
* by Graham De Young
*
* The MediaViewer is a widget that allows for an image gallery with scrolling thumbnails.
*
* The constructor takes the following parameters:
* outerContainer - String - The id of an element that surrounds the links/thumbnails and the innerContainer
* innerContainer - String - The id of a element that directly surrounds the links/thumbnails
* largeImage - String - The id of an img element that represents the current gallery image
* imageContainer - String - The id of an element that contains the current large gallery image
* prevButton - String - The id of an element that reprents the previous button
* nextButton - String - The id of an element that reprents the next button
* scrollAxis - String - 'x' for horizontal, 'y' for vertical
* scrollDistance - Number - The distance by which to scroll the mediaviewer on each click
* thumbsVisible - Number - The maximum number of visible thumbnails
*
* Here is an example mediaviewer html block:

	<div id="image_container" class="hero">
		<img id="largeImage" src="/path/to/large/image" width="400" height="322" alt="This is a description of the image." />
	</div>
	<div id="mediaViewerBar">
		<img id="mediaViewerPrev" src="/path/to/previous/button" alt="Previous" width="9" height="5" />
		<div id="mediaViewerThumbs">
			<div id="mediaViewerSlider">
				<!-- Thumbnails go here: -->
				<a href="/path/to/large/image"><img src="/path/to/thumbnail" width="46" height="32" alt="Description of the image" /></a>
			</div>
		</div>
		<img id="mediaViewerNext" src="/path/to/next/button" alt="Next" width="9" height="5" />
	</div>

*/

mediaViewer = function(outerContainerId, innerContainerId, prevButtonId, nextButtonId, scrollAxis, scrollDistance, thumbsVisible, largeImageId, imageContainerId) {
	this.outerContainer = document.getElementById(outerContainerId);
	this.innerContainer = document.getElementById(innerContainerId);
	this.prevButton = document.getElementById(prevButtonId);
	this.nextButton = document.getElementById(nextButtonId);
	
	if (scrollAxis && typeof(scrollAxis) == 'string') {
		if (scrollAxis.toLowerCase() == 'x' || scrollAxis.toLowerCase() == 'y') {
			this.scrollAxis = scrollAxis.toLowerCase();
		} else {
			this.scrollAxis = 'x';
		}
	}
	if (largeImage && imageContainer) {
		this.largeImage = document.getElementById(largeImageId);
		this.imageContainer = document.getElementById(imageContainerId);
		this.isGallery = true;
	} else {
		this.isGallery = false;
	}
	this.scrollDistance = scrollDistance;
	this.thumbsVisible = thumbsVisible;
	this.offset = 0;

	var thumbLinks = this.innerContainer.getElementsByTagName("a");
	this.thumbTotal = thumbLinks.length;
	
	if (this.isGallery == true) {
		var largeImage = this.largeImage;
		var imageContainer = this.imageContainer;

		for (var i=0; i<thumbLinks.length; i++) {
			thumbLinks[i].onclick = function() {
				var imageSRC = this.getAttribute('href');
				largeImage.src = imageSRC;
	
				// This is a workaround for a specific issue with hero images for Humminbird 07.
				// The next line can be deleted/commented out for general usage.
				imageContainer.className = this.className;
				return false;
			};
		}
	}
	
	this.prevButton.mv = this;
	this.nextButton.mv = this;
	this.prevButton.onclick = this.prev;
	this.nextButton.onclick = this.next;
}

mediaViewer.prototype.isGallery = true;

mediaViewer.prototype.prev = function() {
	var mediaViewerElement = this.mv;
	var innerContainer = mediaViewerElement.innerContainer;
	if (mediaViewerElement.offset > 0) {
		if (mediaViewerElement.scrollAxis == 'y') {
			mediaViewerElement.scrollDistance--;
			if (!innerContainer.style.top) {
				innerContainer.style.top = mediaViewerElement.scrollDistance + 'px';
			} else {
				innerContainer.style.top = parseInt(innerContainer.style.top) + mediaViewerElement.scrollDistance + 'px';	
			}
		} else if (mediaViewerElement.scrollAxis == 'x') {
			mediaViewerElement.scrollDistance--;
			if (!innerContainer.style.left) {
				innerContainer.style.left = mediaViewerElement.scrollDistance + 'px';
			} else {
				innerContainer.style.left = parseInt(innerContainer.style.left) + mediaViewerElement.scrollDistance + 'px';	
			}
		}
		mediaViewerElement.offset--;
	}
}

mediaViewer.prototype.next = function() {
	var mediaViewerElement = this.mv;
	var innerContainer = mediaViewerElement.innerContainer;
	if (mediaViewerElement.offset < mediaViewerElement.thumbTotal - mediaViewerElement.thumbsVisible) {
		if (mediaViewerElement.scrollAxis == 'y') {
			if (!innerContainer.style.top) {
				innerContainer.style.top = -(mediaViewerElement.scrollDistance) + 'px';
			} else {
				innerContainer.style.top = parseInt(innerContainer.style.top) - mediaViewerElement.scrollDistance + 'px';
			}
		} else if (mediaViewerElement.scrollAxis == 'x') {
			if (!innerContainer.style.left) {
				innerContainer.style.left = -(mediaViewerElement.scrollDistance) + 'px';
			} else {
				innerContainer.style.left = parseInt(innerContainer.style.left) - mediaViewerElement.scrollDistance + 'px';
			}

		}
		mediaViewerElement.scrollDistance++;
		mediaViewerElement.offset++;
	}
}