var imageViewer = {
	idx : 0,
	
	init : function() {
		$slides = $('.slide');
		$navigation = '<a href="" onclick="imageViewer.prev();return false;" id="prev" class="prev"><<</a>';
		
		$slides.each(function(n) {
			$i = n + 1;
			$navigation += '<a href="" onclick="imageViewer.page(' +  n + ');return false;" class="'+ n;
			if(n == $slides.length-1) {
				$navigation += ' last"';
			} else {
				$navigation += '"';
			}
			$navigation += '>'+ $i +'</a>';
		});
		
		$navigation += '<a href="" onclick="imageViewer.next();return false;" id="next" class="next">>></a>';
		if($slides.length < 2) {
			$navigation = '&nbsp;';
		}
		$('#viewerControlsContainer').html($navigation);
		$activeSlide = $($slides[imageViewer.idx]);
		$('#index').html(imageViewer.idx);
		$('.0').addClass('currentSlide');
	},
	
	page : function(gotoX) {
		if(imageViewer.idx != gotoX) {
			$activeSlide = $($slides[imageViewer.idx]);
			$('.'+ imageViewer.idx).removeClass('currentSlide');
			$activeSlide.css({'z-index' : '10'}).fadeOut(850);
			imageViewer.idx = gotoX;
			$nextSlide = $($slides[imageViewer.idx]);
			$nextSlide.css({'z-index' : '9', 'display' : 'inline'});
			$('.'+ imageViewer.idx).addClass('currentSlide');
		}
	},
	prev : function() {
		$activeSlide = $($slides[imageViewer.idx]);
		$('.'+ imageViewer.idx).removeClass('currentSlide');
		$activeSlide.css({'z-index' : '10'}).fadeOut(850);
		if(imageViewer.idx <= 0) {
			imageViewer.idx = $slides.length-1;
		} else {
			imageViewer.idx = imageViewer.idx - 1;
		}
		$nextSlide = $($slides[imageViewer.idx]);
		$('.'+ imageViewer.idx).addClass('currentSlide');
		$nextSlide.css({'z-index' : '9', 'display' : 'inline'});
	},
	next : function() {
		$activeSlide = $($slides[imageViewer.idx]);
		$('.'+ imageViewer.idx).removeClass('currentSlide');
		$activeSlide.css({'z-index' : '10'}).fadeOut(850);
	
		if(imageViewer.idx >= $slides.length-1) {
			imageViewer.idx = 0;
		} else {
			imageViewer.idx = imageViewer.idx + 1;
		}
		$nextSlide = $($slides[imageViewer.idx]);
		$('.'+ imageViewer.idx).addClass('currentSlide');
		$nextSlide.css({'z-index' : '9', 'display' : 'inline'});
	}
	
}