if (jQuery) {  

	//initializes the list of drawings, puts the list into an array which we can easlily iterate through
	var drawingList = [
		{title: "INTRO TO PHOTOPLAYS", medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches", path: "images/1-intro-to-photoplays.jpg"},
		{title: "SIGN LANGUAGE",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches", path: "images/2-sign-language.jpg"},
		{title: "LORAINE CESAREAN",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",path: "images/3-loraine-cesarean.jpg"},
		{title: "FLASH MAGICIAN",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/4-flash-magician.jpg"},
		{title: "KEN ANGER", medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/5-ken-anger.jpg"},
		{title: "ANNIE SPRINKLE", medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/5a-annie-sprinkle.jpg"},
		{title: "CANDY AND REY",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches", path: "images/6-candy-and-rey.jpg"},
		{title: "MUSICIAN ",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/6a-musician.jpg"},
		{title: "KISS ",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/10-kiss.jpg"},
		{title: "LOVERS",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/11-lovers.jpg"},
		{title: "CLOSE-UP COSTUME",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/12-close-up-costume.jpg"},
		{title: "FLOOR FLORA",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/13-floor-flora.jpg"},
		{title: "DIANA",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/14-diana.jpg"},
		{title: "PHOTOGRAPHER AND MODELS", medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/15-photographer-and-models.jpg"},
		{title: "PILOT ",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/16-pilot-2"},
		{title: "FLASH COLLAGE",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/18-flash-collage.jpg"},
		{title: "TWO FATHERS",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/19-two-fathers.jpg"},
		{title: "CANDLE COLLAGE", medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/20-candle-collage.jpg"},
		{title: "PAIKS PLUG",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/21-paiks-plug.jpg"},
		{title: "RIVERS POSING",  medium: "Size variable:", size: "24 x 36 inches or 40 x 56 inches",  path: "images/22-rivers-posing.jpg"}
	];

	$(document).ready( function(){
		
		var drawingContainer = $("#drawing");
		
		//initialize the index holder
		drawingContainer.data("cur",0);
		
		//hide the back button because we are on the first element
		$("div#back").hide();
		
		//this is triggered when a client clicks the prev button
		$("#btnPrev").click( function(){
			var currentIndex = drawingContainer.data("cur");
			if( currentIndex > 0){			
				LoadDrawing(currentIndex - 1);
			}		
			if( (currentIndex -1) == 0 ){
				$("div#back").hide();
			}		
			
			$("div#next").show();
			
			return false;
		});
		
		// this triggers when a client clicks the next button
		$("#btnNext").click( function(){
			var currentIndex = drawingContainer.data("cur");
			if( currentIndex < drawingList.length - 1){			
				LoadDrawing(currentIndex + 1);
			}
			if( ( currentIndex + 2 ) == drawingList.length){
				$("div#next").hide();
			}
			
			$("div#back").show();
			
			return false;
		});
		
		function LoadDrawing(index){
			drawingContainer.data("cur", index);
			
			//load the image
			$("#image", drawingContainer).attr("src", drawingList[index].path);
			
			//load the title
			$("#title", drawingContainer).html(drawingList[index].title);
			
			//load the medium
			$("#medium", drawingContainer).html(drawingList[index].medium);
			
			//load the size
			$("#size", drawingContainer).html(drawingList[index].size);
		}
		
	});
}