function slideSwitch() {
	    var $active = $('#photoBrowser img.active');
		switch($("#photoBrowser img").index($("img.active"))){
			case 0:
			$("a.active").removeClass("active");
			$("#btn2").addClass("active");
			break;
			case 1:
			$("a.active").removeClass("active");
			$("#btn3").addClass("active");
			break;
			case 2:
			$("a.active").removeClass("active");
			$("#btn4").addClass("active");
			break;
			case 3:
			$("a.active").removeClass("active");
			$("#btn1").addClass("active");
			break;
		}
	    if ( $active.length == 0 ) $active = $('#photoBrowser img:last');

	    // use this to pull the images in the order they appear in the markup
	    var $next =  $active.next().length ? $active.next()
	        : $('#photoBrowser img:first');


	    $active.addClass('last-active');

	    $next.css({opacity: 0.0})
	        .addClass('active')
	        .animate({opacity: 1.0}, 1000, function() {
	            $active.removeClass('active last-active');
	        });
		
	}

	
$(document).ready(function() {
	var playing = true;
	
	if($("#photoBrowser img").size()==1){
		$("#btnPlayPause").hide();
		playing = false;
	} else{
		playing = true;
		slideshow();
	}
	
	function slideshow(){
		if(playing==true){
			slideInterval = setInterval( "slideSwitch()", 5000 );
		} else{
			clearInterval(slideInterval);
		}
	}
	
	$('#btnPlayPause').click(function() {
		if(playing==true){
			playing = false;
			$(this).addClass("paused");
			slideshow();
		} else{
			playing = true;
			$(this).removeClass("paused");
			slideshow();
		}
	});
	
	//Lightbox
	$("#btnZoom").click(function(){
		//Stop the Slideshow
		if($("#photoBrowser img").size()>1){
			playing = false;
			slideshow();			
		}
		$("#btnPlayPause").addClass("paused");
		//Get the Current Image
		var currentImg = $("#photoBrowser img.active").attr('src');
		var url = currentImg.split("/");
		//Add the lightbox
		var windowHeight = $(window).height();
		$('body').append('<div id="overlay"></div>');
		$("#overlay").height(windowHeight);
		$('body').append('<div id="lightbox"></div>');
		$("#lightbox").append("<img src='"+url[0]+"/"+url[1]+"/"+"z"+url[2]+"' alt=''/>");
		$("#lightbox").append("<a href='javascript:;' class='btnClose'>Close</a>");
		
	});
	$(".btnClose").live("click",function(){
		close();
	});
	$("#overlay").live("click",function(){
		close();
	});
	//Close Lightbox
	function close(){
		$("#overlay").animate({opacity: 0}, 200, function() {
		  $("#overlay").remove();
		});
		$("#lightbox").animate({opacity: 0}, 200, function() {
		  $("#lightbox").remove();
		});
	}
	$("#btn1").click(function(){
		$("img.active").removeClass("active");
		$("#photoBrowser img:eq(0)").addClass("active");
		$("a.active").removeClass("active");
		$(this).addClass("active");
	});
	$("#btn2").click(function(){
		$("img.active").removeClass("active");
		$("#photoBrowser img:eq(1)").addClass("active");
		$("a.active").removeClass("active");
		$(this).addClass("active");
	});
	$("#btn3").click(function(){
		$("img.active").removeClass("active");
		$("#photoBrowser img:eq(2)").addClass("active");
		$("a.active").removeClass("active");
		$(this).addClass("active");
	});
	$("#btn4").click(function(){
		$("img.active").removeClass("active");
		$("#photoBrowser img:eq(3)").addClass("active");
		$("a.active").removeClass("active");
		$(this).addClass("active");
	});
});