// nav HOVER STATES
	
	$(document).ready(function(){
	
		// remove link background images since we're re-doing the hover interaction below 
		// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
		// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
		$(".nav").children("li").each(function() {
			var current = "nav current-" + ($(this).attr("class"));
			var parentClass = $(".nav").attr("class");
			if (parentClass != current) {
				$(this).children("a").css({backgroundImage:"none"});
			}
		});	


		// create events for each nav item
		attachNavEvents(".nav", "home");
		attachNavEvents(".nav", "tlhs");
		attachNavEvents(".nav", "news");
		attachNavEvents(".nav", "projects");
		attachNavEvents(".nav", "contact");
		
		function attachNavEvents(parent, myClass) {
			$(parent + " ." + myClass).mouseover(function() {
				$(this).append('<div class="nav-' + myClass + '"></div>');
				$("div.nav-" + myClass).css({display:"none"}).fadeIn(200);
			}).mouseout(function() {
				$("div.nav-" + myClass).fadeOut(200, function() {
					$(this).remove();
				});
			}).mousedown(function() {
				$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
			}).mouseup(function() {
				$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
			});
		}
		
		

	});

/* Prevents IE6 Background Flicker */

try {
  document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}


/* jScroll content scroller */
$(function()
{
	$('#maincopybox').jScrollPane();
	$('#widecopybox').jScrollPane();
	$('#longcopybox').jScrollPane();
	$('#contactform').jScrollPane();
	$('#fullcopybox').jScrollPane();
	$('#projectcopybox').jScrollPane();
});



			
/* 	$(document).ready(function(){
	
		// generateSprites arguments: 
		// 1st - parent class (the main class on the parent ul), with preceding period
		// 2nd - selected prefix (eg. for a selected class of "selected-about", use "selected-" as the value)
		// 3rd - :active state toggle, set to true if you've defined :active states (and the jQuery equivalent) in your CSS
		// 4th - animation speed, in milliseconds (eg. 300 = 0.3 seconds)
		// 5th - animation style, as a string. Set to "slide" or "fade" (defaults to "fade")
		
		// example usage:
		// generateSprites(".navigation", "selected-", true, 300, "fade");
		// generateSprites(".top-nav", "position-", true, 200, "slide");
		// generateSprites(".sidebar-nav", "current-", false, 150, "fade");

		
		generateSprites(".nav", "current-", true, 150, "fade");

	});*/
	
$('#s2').cycle({
    fx:     'fade',
    speed:  'fast',
    timeout: 0,
    next:   '#next2',
    prev:   '#prev2'
});