// Start function when DOM has completely loaded 
var id=1;
var maxID;
$(document).ready(function(){ 
	
	$(".projectPic").hide();
	$("#p1").show();
	maxID = ($("#projectPics").children().length);
	if (maxID > 1){
	intervalID = setTimeout("cycle()", 5000);
	buildNav();
	$('a#1').css("color", "#FFFF66");
	}else if (maxID == 1){
	//$('#projectPicControls').hide();
	}else{
	$('#projectPicControls').hide();
	$('#projectPics').hide();
	}
	
	$('#projectPicControls a').click(function() {
			var $this = $(this);
			var x = $this.attr("className");
			var y = $this.attr("id");
			if (x == "prevPic"){
				$("#p"+id).fadeOut("slow", function(){
					$('a#'+id).css("color", "#FFFFFF");
					id-=1;
					if(id==0){id=maxID;}
					$("#p"+id).fadeIn("slow");
					$('a#'+id).css("color", "#FFFF66");
				});
			}else if(x=="nextPic"){
				$("#p"+id).fadeOut("slow", function(){
					$('a#'+id).css("color", "#FFFFFF");
					id+=1;
					if(id>maxID){id=1;}
					$("#p"+id).fadeIn("slow");
					$('a#'+id).css("color", "#FFFF66");
				});
			}else{
				$("#p"+id).fadeOut("slow", function(){
					$('a#'+id).css("color", "#FFFFFF");
					id=y;
					$("#p"+y).fadeIn("slow");
					$('a#'+y).css("color", "#FFFF66");
				});
			}
			clearInterval(intervalID);	
	});
});
  
function cycle(){

	var newID = id;
	newID++;
	if(id < maxID){
		$('#'+newID).click();
	}else{
		$('#1').click();
	}
	intervalID = setTimeout("cycle()", 8000);
	
}
function buildNav(){
	var navHTML = '<a href="#" class="prevPic"><img src="/sites/all/themes/labo/images/navLeftArw.png"></a> ';
	var navOutput = '';
	for(i=1;i<=maxID; i++){
		
		if(i==maxID){navOutput = '<a href="#" id="'+i+'">'+i+'</a> ';}
		else{navOutput = '<a href="#" id="'+i+'">'+i+'</a> &nbsp;|&nbsp; ';}
		navHTML += navOutput;
	}
	navHTML += '<a href="#" class="nextPic"><img src="/sites/all/themes/labo/images/navRightArw.png"></a>'
	$('#projectPicControls').append(navHTML);
}