var imageName = "portfolio-";
var pageNumber;
  
$(document).ready(function(){
  //preloader
  for (i = 0; i <= maxPages; i++){

	imagePath = ("images/" + imageName + i + ".png");
	$(".preload").append("<img src=" + imagePath + " />");

  }
});

$(window).ready(function(){

	
	startSlideShow();
	clearTimeout(a);
	
	loadValue();
    updateImage();

	
	
	
	$(".btnAdd").click(function(){
  	 clearTimeout(a);
     pageNumber = (pageNumber + 1);
     updateImage(); 
     pageCounter();	
  });
  
  $(".btnSub").click(function(){
  	 clearTimeout(a); //remove slideshow
     pageNumber = (pageNumber - 1);
     updateImage();  
     pageCounter();	
  }); 
  
	
	
	$(".title").click(function(){
	
		pageNumber = (0);
		updateImage(); 
		pageCounter();	

	
	});



});

  function loadValue(){
  	pageNumber = 0;
  }

  function pageCounter(){
 	 
 	 if (pageNumber >= maxPages){
 	 	clearTimeout(a); //remove slideshow
 	 	$(".btnAdd").css("display","none");
 	 }
 	 
 	 if (pageNumber <= 0){
 	 	$(".btnSub").css("display","none");
 	 }
 	 
 	 if (pageNumber > 0){
 	    $(".btnSub").css("display","inline");
 	 }
 	 
 	 if (pageNumber < maxPages){
 	    $(".btnAdd").css("display","inline");
 	 }
  }


function alertpageNumber(){
	alert(pageNumber);
}

function updateImage(){
	imagePath = ("images/" + imageName + pageNumber + ".png");
	$(".imagePageHolder").attr('src',imagePath);
}



function startSlideShow(){
	a=setTimeout("next()", (timeoutVar * 1000));
}

function next(){
	 //same code as clicking add, except it calls itself at the end to loop.
	 pageNumber = (pageNumber + 1);
     updateImage(); 
     pageCounter();	

	 if (pageNumber < maxPages){
 	 	a=setTimeout("next()", (timeoutVar * 1000));  
 	 }
 
}