/**
 * Credit for the JavaScript and the portfolio navigation goes to Enhance. I highly recommend checking them out.
 * http://enhance.qd-creative.co.uk/2008/10/26/how-to-make-a-navigable-horizontally-scrollable-portfolio/
 */
// Function initiates when DOM is ready
$(function() {
	// Apply styles to #screenshot and wrap it in #screenshot-wrapper
	$('#screenshot').show()
	$('#screenshot').css({
			height: '165px', // 165 is the height of each screenshot piece
			width: ($(this).width() * $('#screenshot li').size()) + 'px', // i.e. 900x10 = 9000
			position: 'relative'
		})
		.wrap('<div id="screenshot-wrapper" style="width:550px;overflow:hidden;position:relative;float:left;"></div>'); // Wrap in new DIV element (required for scroll to work properly)
	$('#screenshot li')
		// Looping through each list-item:
		.each(function() {
			var newNavItem = addScreenshotNavItem( $(this).attr('id') , $('img:eq(0)',this).attr('src') , $('h2',this).text() );
			newNavItem.children('a:eq(0)').click(function() {
				// When screenshot nav-item is clicked:
				$('img',this).css({opacity:0.5}); // Dim to .8 opacity (to show the user they've been there)
                var id = $(this).attr('href').split('#')[1]; // FIX: IE returns actual HREF instead of href attribute
				var difference = $('#screenshot').offset().left-$('#screenshot li#' + id).offset().left; // leftOffset of ul#screenshot minus leftOffset of selected screenshot piece
				$('#screenshot').animate({left: difference}, 700); // Animate to the value of different over 700 milliseconds

                return false; // prevent default action of links
			});
		})
		.css({
			width: '650px', // Specify width as 880 (900 minus 10px padding on each side)
			margin: 0, 
			float: 'left'

		});
});
 
function addScreenshotNavItem(id,imgSrc,title) {     
	// If the new navigation menu has NOT been created yet:
	if(!$('#screenshot-nav').get(0)) { // Test whether nav-menu already exists
		$('<ul id="screenshot-nav"/>')
		.insertBefore('#screenshot-wrapper'); // If it does not exist then create it and insert before #screenshot-wrapper (an element which will be created later)
	}
	// creates a new list item and appends it to #screenshot-nav
	return $('<li  style="float:left; margin: 5 5 5 5;"><a href="#' + id + '" title="' + title + '"><img style="border-color: #000;" width="90" border="1" src="' + imgSrc + '" alt="' + title + '" /></a><br></li>').css({display:'inline'}).appendTo('#screenshot-nav');
}