$(document).ready(function()
{
	var imgArray = new Array();
	
	// Iterate over every element, looking for li's with the img attribute set
	$("ul.services li[@img]").each( function() {
		// Read in the img attribute, allowing for multiple images (separated by commas)
		var imgs = $(this).attr("img").split(",");
		imgArray = imgArray.concat(imgs);
		
		var photo_ids = new Array();
		for(i = imgArray.length - imgs.length; i < imgArray.length; i++) {
			photo_ids.push("photo_" + i + "_s");
		}
		
		// Associate the target id with the source element(s)
		$(this).attr("photo_id", photo_ids.join(","));
		
		// Set up a custom class
		$(this).addClass("linked");
		
		// Set up source element mouseovers
		$(this).hover(
			function () {
				$(this).addClass("selected");
				
				var photo_ids = $(this).attr("photo_id").split(",");
				$.each(photo_ids, function(i, n) {
					$("#" + this).addClass("selected");
				});
			},
			function () {
				$(this).removeClass("selected");
				
				$.each(photo_ids, function(i, n) {
					$("#" + this).removeClass("selected");
				});					
			}
		);
		$(this).click( function() {
			var photo_ids = $(this).attr("photo_id").split(",");
			$("#" + photo_ids[0]).parent().click();
		});
	});
	
	// Add all images to the photo_viewer
	$.each(imgArray, function(i, n) {
		var caption = $("ul.services li[@photo_id*=photo_" + i +"_s]").text();
		img_html = "<a href='/images/services/fullsize/" + imgArray[i] + "' class='thickbox' rel='services' title='"+ caption + "'>" + 
				   "<img src='/images/services/thumbnails/" + imgArray[i] + "' id='photo_" + i + "_s' />" +
				   "</a>";
		$("#photo_viewer").append(img_html);	
	});
	
	// Set up photo_viewer image mouseovers
	$("#photo_viewer img").hover(
		function() {
			$(this).addClass("selected");
			$("ul.services li[@photo_id*="+ $(this).attr("id") +"]").addClass("selected");
	},
		function() {
			$(this).removeClass("selected");
			$("ul.services li[@photo_id*="+ $(this).attr("id") +"]").removeClass("selected");
	});
});