$(document).ready(function() {	

	//start jbgallery (variables are created in (home.php)
	$("#jbgallery").jbgallery({
		style: jbgallery_style,
		interval: jbgallery_interval,
		slideshow: true		//start by default
	});


	//enable the jbgallery controls (and others) if there are multiple images
	if ( $("#jbgallery li").size() > 1 )
	{
		$("#slideshowcontrol").removeClass("disabled");
		$("#previousimagebtn").removeClass("disabled");
		$("#nextimagebtn").removeClass("disabled");
		$("#thumbnailcontrol").removeClass("disabled");
		$("#flpthumbnails").removeClass("disabled");
	}


	//set up the functionality for the slideshow control
	$("#slideshowcontrol").toggle(
	  	function() {
			$("#jbgallery").jbgallery("stop");
			$("#slideshowcontrol a").html("Start Slideshow");
			$("#slideshowcontrol a").attr("title", "Start Slideshow");
	  	},
		function() {
			$("#jbgallery").jbgallery("play");
			$("#slideshowcontrol a").html("Pause Slideshow");
			$("#slideshowcontrol a").attr("title", "Pause Slideshow");
	  	}
	);


	//set up the functionality for the "Next Image" button
	$("#nextimagebtn a").click(function() {
		$("#jbgallery").jbgallery("right");
		return false;
	});


	//set up the functionality for the "Previous Image" button
	$("#previousimagebtn a").click(function() {
		$("#jbgallery").jbgallery("left");
		return false;
	});


	//set up the functionality for the thumbnail control
	$("#thumbnailcontrol a").click(function() {
		$("#flpthumbnails").slideToggle(400);
		return false;
	});


	//set up the functionality for the twitter control
	$("#twittercontrol a").click(function() {
		$("#latesttweets").slideToggle(400);
		return false;
	});


	//fade out the thumbnails that aren't being hovered over
	$("a.flpthumbnail img").hover(
		function() {
			$("a.flpthumbnail img").not(this).stop().fadeTo("fast", 0.2);
		},
		function() {
			$("a.flpthumbnail img").not(this).stop().fadeTo("fast", 1);
		}
	);


	//set up the global style for the qtips
	//	|-> this is a stupid way to create CSS
	//	|-> http://craigsworks.com/projects/qtip/docs/tutorials/#styling
	$.fn.qtip.styles.tminusstyle = {	//the last part is the name of the style
		background:		"#000",
		border:			{color:"#ccc", radius:0, width:1},
		color:			"#fff",
		name:			"dark",			//name of the built-in style to inherit the rest of the properties from
		paddingBottom:	3,
		paddingLeft:	12,
		paddingRight:	12,
		paddingTop:		3,
		textAlign:		"center",
		tip:			{color:false, corner:"bottomMiddle", size:{x:8, y:10}}
	}


	//set up the tooltip for the RSS control
	$("#rsscontrol").qtip({
		content: "RSS feed",

		style: {
			name: "tminusstyle",
			tip: {corner:"bottomRight"}
		},

		show: {
			effect: {type:"fade", length:200}
		},

		hide: {
			effect: {type:"fade", length:200}
		},

		position: {
			corner: {target:"topMiddle", tooltip:"bottomRight"}
		}
	});


	//set up the tooltip for the Twitter control
	$("#twittercontrol a").qtip({
		content: "twitter updates",

		style: {
			name: "tminusstyle",
			tip: {corner:"bottomRight"}
		},

		show: {
			when: {event:"mouseover"},
			effect: {type:"fade", length:200}
		},

		hide: {
			when: {event:"click mouseout"},
			effect: {type:"fade", length:200}
		},

		position: {
			corner: {target:"topMiddle", tooltip:"bottomRight"}
		}
	});


	//set up the tooltip for the "Previous Image" button
	$("#previousimagebtn").qtip({
		content: "Previous photo",

		style: {
			name: "tminusstyle",
			tip: {corner:"leftMiddle"}
		},

		show: {
			effect: {type:"fade", length:200}
		},

		hide: {
			effect: {type:"fade", length:200}
		},

		position: {
			corner: {target:"rightMiddle", tooltip:"leftMiddle"}
		}
	});


	//set up the tooltip for the "Next Image" button
	$("#nextimagebtn").qtip({
		content: "Next photo",

		style: {
			name: "tminusstyle",
			tip: {corner:"rightMiddle"}
		},

		show: {
			effect: {type:"fade", length:200}
		},

		hide: {
			effect: {type:"fade", length:200}
		},

		position: {
			corner: {target:"leftMiddle", tooltip:"rightMiddle"}
		}
	});


	//set up the tooltips for the thumbnail images
	$("a.flpthumbnail[title]").qtip({
		style: {
			name: "tminusstyle"
		},
		show: {
			effect: {type:"fade", length:200}
		},
		hide: {
			effect: {type:"fade", length:200}
		},
		position: {
			corner: {target:"topMiddle", tooltip:"bottomMiddle"}
		}
	});


	//clicking a thumbnail changes the jbgallery image
	$("a.flpthumbnail").click(function() {

		//show the new image
		var newImageIndex = parseInt($(this).attr("id").split("-")[1]);
		$("#jbgallery").jbgallery("go" , newImageIndex);

		//close the thumbnails and show the tooltip
		$("#flpthumbnails").slideToggle(400);
		$("#thumbnailcontrol a").qtip("show");

		return false;
	});


	//sneak a peek of the thumbnails if there is more than one image
	if ( $("#thumbnailcontrol").hasClass("disabled") == false )
	{
		//hide them after a delay and show the tooltip
		setTimeout(function(){
				$("#flpthumbnails").slideToggle(400);

				$("#thumbnailcontrol a").qtip({
					content: "Click to open thumbnails",

					style: {
						name: "tminusstyle",
						tip: {corner:"bottomLeft"}
					},

					show: {
						when: {event:"click"},
						ready: true,
						effect: {type:"fade", length:200},
					},

					hide: {
						when: {event:"click"},
						effect: {type:"fade", length:200}
					},

					position: {
						corner: {target:"topMiddle", tooltip:"bottomLeft"}
					}
				});
		}, 1500);
	}


	//default the tweets to closed
	$("#latesttweets").removeClass("disabled");
	$("#latesttweets").slideToggle(0);
});