var currentPicture;
var currentPictureIdLength;



function showPic(pic, picIdLength){
	
	if(pic && picIdLength){
		currentPicture = pic;
		currentPictureIdLength = picIdLength;
		
		centerEl('loadingFrame');
		
		$('#shader').animate({opacity:'toggle'},500);
	}
	
	$('#loadingFrame').animate({opacity:'toggle'},400);
	$('#pictureFrame').html('<img id="currentPic" src="images/pictures/' + pic + '.jpg" style="display:block;padding:0;margin:0;" hspace="0" vspace="0">');
	
	centerEl('imageDisplay');
	$('#currentPic').ready(function(){
		setTimeout(function() {$('#imageDisplay').animate({opacity:'toggle'},1000,function(){$('#loadingFrame').css('display','none')});},502);
	})
	
	showButtons();
}
function removeImage(){
	$('#imageDisplay').animate({opacity:'toggle'},750);
	setTimeout(function() {$('#shader').animate({opacity:'toggle'},500);},752);
}

function centerEl( el ){
	var toTop = !document.body.scrollTop ? document.documentElement.scrollTop : parseInt( document.body.scrollTop )
	var winH = $( window ).height(); 
	var winW = $( window ).width(); 
	var centerDiv = $( '#' + el ); 
	centerDiv.css( 'top', winH/2-centerDiv.height()/2 + parseInt( toTop ) + 'px' ); 
	centerDiv.css( 'left', winW/2-centerDiv.width()/2 + 'px' ); 
}

function showNextImage(adder){
	currentPictureTemp = (parseInt(currentPicture) + parseInt(adder));
	
	if(currentPictureTemp != 0 && currentPictureTemp <= currentPictureIdLength){
		currentPicture = currentPictureTemp;
		$('#imageDisplay').animate({opacity:'toggle'},300);
		picToShow = currentPicture;
		setTimeout(function(){showPic(picToShow)},320);
	}
	
	showButtons();
}
function showButtons(auto){
	if(!auto){
		if(currentPicture == currentPictureIdLength){
			$('#nextButton').hide();
		}else{
			$('#nextButton').show();
		}
		
		if(currentPicture == 1){
			$('#prevButton').hide();
		}else{
			$('#prevButton').show();
		}
	}else{
		$('#nextButton').hide();
		$('#prevButton').hide();
	}
}

$( document ).ready(function(){
	var shade = $( '#shader' );	
	shade.css( 'opacity', 0.7 );
	shade.css( 'height', parseInt( document.body.clientHeight + 500 ) + 'px');
});