var imageVisible = 0;
var transitionTime = 1000;
var maxImageWidth = 70;
var maxThumbnailWidth = 10;
var imageContainerAmount;
var randomFactorForThumbnailSize=30;

initForIE();

function initForIE() {
	if(!Array.indexOf){
	    Array.prototype.indexOf = function(obj){
	        for(var i=0; i<this.length; i++){
	            if(this[i]==obj){
	                return i;
	            }
	        }
	        return -1;
	    }
	}
}

$(initImageViewer);

function initImageViewer() {
	if($("section.images").size()>0) {
		initImages();
		initViewers();
		$(window).resize(sizeImages);
		$(window).resize(function() {$(".imageViewer").each(function() {sizeViewer($(this));})});
	}
}

function initViewers() {
	var countViewers = 0;
	$("section.images p").each(function() {
		if($("img",viewer).size()>1) {
			$(this).wrap("<div style=\"float:left;position:relative;\" id=\"imageViewer"+countViewers+"\" class=\"imageViewer\" />");
								$("img:gt(0)",this).hide();
			$("img",this).unwrap();
			var viewer = $("#imageViewer"+countViewers);
			$("img",viewer).addClass("stacked");
	
			viewer.attr('numImages',$("img",viewer).size());
			viewer.attr('shownImage',0);
			if(viewer.attr('numImages')>1) {
				viewer.prepend('<div class="imgNavigation" id="imgNavigation'+viewer.attr('id')+'">'+createImgNavLinks(viewer)+'</div>');
			}
			countViewers++;
		}

	})
		imageContainerAmount = countViewers;	
	sizeImages();
	$(".imageViewer").each(function() {sizeViewer($(this))});

}

function initImages() {
	$("section.images img").each(function() {
		$(this).attr('ratio',$(this).width()/$(this).height());
	});
}


function nextImage(id) {
	var viewer = $("#"+id);
	var numImages = viewer.attr('numImages');
	var shownImage = viewer.attr('shownImage');
	numImages = Number(numImages);
	shownImage = Number(shownImage);
	if(shownImage<numImages) {
		$("img:visible",viewer).fadeOut(transitionTime);
		$("img:eq("+(shownImage+1)+")",viewer).fadeIn(transitionTime);
		var shownImage = viewer.attr('shownImage',shownImage+1);
		$('#imgNavigation'+id).html(createImgNavLinks($('#'+id)));
		sizeViewerAnimated(viewer);
	}
}

function prevImage(id) {
	var viewer = $("#"+id);
	var numImages = viewer.attr('numImages');
	var shownImage = viewer.attr('shownImage');
	numImages = Number(numImages);
	shownImage = Number(shownImage);
	if(shownImage>0) {
		$("img:visible",viewer).fadeOut(transitionTime);
		$("img:eq("+(shownImage-1)+")",viewer).fadeIn(transitionTime);
		var shownImage = viewer.attr('shownImage',shownImage-1);
		$('#imgNavigation'+id).html(createImgNavLinks($('#'+id)));
		sizeViewerAnimated(viewer);
	}
}

function sizeViewer(viewer) {
	var shownImage = viewer.attr('shownImage');
	viewer.width($("img:eq("+shownImage+")",viewer).width());
	viewer.height($("img:eq("+shownImage+")",viewer).height());
}


function sizeViewerAnimated(viewer) {
	var shownImage = viewer.attr('shownImage');
	viewer.animate({
		width: $("img:eq("+shownImage+")",viewer).width(),
		height: $("img:eq("+shownImage+")",viewer).height()
	})
	viewer.width($("img:eq("+shownImage+")",viewer).width());
	viewer.height($("img:eq("+shownImage+")",viewer).height());
}



function sizeImages() {
	var pos = $("section.images").position();
	var maxWidth = Math.round(($("html").width()/100*maxImageWidth)/imageContainerAmount);
	var maxHeight = $(window).height()-pos.top-60;

	$("section.images img").each(function() {
		if(maxWidth/$(this).attr('ratio')<maxHeight) {
			$(this).width(maxWidth);
			$(this).height(maxWidth/$(this).attr('ratio'));
		} else {
			$(this).height(maxHeight);
			$(this).width(maxHeight*$(this).attr('ratio'));
		}
	}); 
}

function createImgNavLinks(object) {
	var shownImage = object.attr('shownImage');
	var numImages = object.attr('numImages');
	shownImage = Number(shownImage)+1;
	numImages = Number(numImages);
	var id=object.attr('id');
	navLinks = '';
	if(shownImage>1) {
		navLinks += "<span class='leftArrow'><a onclick='prevImage(\""+id+"\")'>&nbsp;&laquo;</a></span> ";
	}
	navLinks +=shownImage+'/'+numImages;
	if(shownImage<numImages) {
		navLinks += " <span class='rightArrow'><a onclick='nextImage(\""+id+"\")'>&raquo;&nbsp;</a></span>";
	}
	return navLinks;
}