$(function() {
	
	//hide the images gallery div to start off with
	$('div#gallery_images').hide();
	//hide the pager
	$('div#gallery_pager').hide();
	//hide the category back button
	$('span.gallery_back').hide();
	
	
	//gallery title show and hide
	$('span.title').hide();
	var gallery;
    $('ul.gallery_category li').hover(
    	function(){
			gallery = $(this).attr('class');
			$('.'+gallery+ ' img').attr("src", "files/gallery_art/"+gallery+"_hover.jpg");	
    	},
    	function(){
    		$('.'+gallery+ ' img').attr("src", "files/gallery_art/"+gallery+".jpg");
    	}
    );

	
	
	
	
	//click on a category item
	$('ul.gallery_category li').click(function() {
		
		//re-hide the gallery back button
		$('span.gallery_back').hide();	
		//just to let the program know that we are IN the image gallery
		$(this).toggleClass('in');
		//clear the images div first
		$('div#gallery_images').html('');
		//reset the gallery pager
		$('div#gallery_pager').html('');

		//get the category (MUST be first class(dumb way to do this..)!!!)
		var category = $(this).attr("class").split(' ');
		category = category[0];
		

		if($(this).hasClass('in'))//if we have found the right gallery AND if we are not switching back to the category page
		{
			//show the loading animation
			$('div#gallery_images').html('<div id="ajax-loader">Loading...</div>');
			//get the correct gallery list html		
			$.get('tools/flickrGallery/getSet.php', {category: category}, function(data){				
				//load the returned html (with animation)
				$('div#gallery_images').fadeOut('slow',function(){
					$('div#gallery_images').html(data);
					//show the gallery
					$('div#gallery_images').fadeIn('slow');
					//pages of images :)
					$('div#gallery_images li').quickpaginate({ perpage: 12, showcounter: true, pager: $('div#gallery_pager')});
					//install the lightBox into the gallery
					//$('div#gallery_images a.image').lightBox({fixedNavigation:true});	--this is done in the getSet.php page now.....			
					//show the pager... if quickpaginate was initiated.
					if($('div#gallery_pager').text() != '')
						$('div#gallery_pager').fadeIn("slow");						
				});
			});
			
			//show the back button -- if this goes in the .get callback, then in some cases the back button might be shown on all categories while on the category page
			$('span.gallery_back').fadeIn('slow');
		}
		else
			$('div#gallery_pager').hide();
			//$('div#gallery_pager').addClass('hidden');
		
		//hide/show all the unused categories
		$('div#gallery ul.gallery_category li').not(this).toggle('fast');
		
		//hide/show the gallery	
		//$('div.gallery_images').fadeToggle('slow');
		$('div#gallery_images').toggle();
	});
	
});