jQuery.preloadImages = function()
{
	for(var i = 0; i<arguments.length; i++)
	{
		jQuery("<img>").attr("src", arguments[i]);
	}
}


// preload images first (can run before page is fully loaded)
$.preloadImages("valokuvaus_off.png", "valokuvaus_on.png","kuvitus_off.png","kuvitus_on.png","hinnasto_off.png","hinnasto_on.png","yhteystiedot_off.png","yhteystiedot_on.png");




 $(document).ready(function(){
   $('a.customGal').zoomimage({
	controlsTrigger: 'mouseover',
	className: 'custom',
	shadow: 40,
	controls: false,
	opacity: 1,
	centered: true,
	beforeZoomIn: function(boxID) {
		$('#' + boxID)
			.find('img')
			.css('opacity', 0)
			.animate(
				{'opacity':1},
				{ duration: 500, queue: false }
			);
	},
	beforeZoomOut: function(boxID) {
		$('#' + boxID)
			.find('img')
			.css('opacity', 1)
			.animate(
				{'opacity':0},
				{ duration: 500, queue: false }
			);
	}

});


});

function changeImagesRow(currentGroup, totalGroups) {
	
	//Tulostetaan navi ryhmien määrän mukaan
	var naviHtml = "";
	//alert(currentGroup);
	
	for(a = 0; a < totalGroups; a++) {
		
		if (totalGroups < 2) {
			
			if (a == currentGroup) {
			naviHtml += '<span class="activeImage">' + (a + 1) + '</span>';
			}
				else {
				naviHtml += '<span><a href="#" onclick="changeImagesRow(' + a + ',' + totalGroups + ');">' + (a + 1) + '</a></span>&nbsp;<span class="imageNaviLine">|</span>&nbsp;';
				}
		}
			else{
				
				if (a == currentGroup) {
				naviHtml += '<span class="activeImage">' + (a + 1) + '</span>&nbsp;<span class="imageNaviLine">|</span>&nbsp;';
				}
					else {
					naviHtml += '<span><a href="#" onclick="changeImagesRow(' + a + ',' + totalGroups + ');">' + (a + 1) + '</a></span>&nbsp;<span class="imageNaviLine">|</span>&nbsp;';
					}
				
			}
		
		
				
	}

	$("#imageNavi").html(naviHtml);
	
	//Näytetään oikea sisältö
	for(e = 0; e < totalGroups; e++) {
	
		if (e == currentGroup) {
			$("#group" + currentGroup).show();	
		}
			else {
				$("#group" + e).hide();	
			}
	}
	
	
	
	
	
	//alert(currentGroup + " : " + totalGroups);
	
	
	
}


//	<div id="imageNavi"><span class="activeImage">1</span>&nbsp;<span class="imageNaviLine">|</span>&nbsp;<span><a href="#" onclick="changeImagesRow(1);">2</a></span></div>