/*
	-- -- -- -- -- -- --
	css sprites 2
	nav behaviour

	http://www.alistapart.com/articles/sprites2

	! thanks go to dave shea for the code !
	-- -- -- -- -- -- --
*/

function generateSprites(parent, selectedPrefix, setActive, hoverSpeed, style) {
	// throw the parent object's class into a variable
	var parentClass = $(parent).attr("class");

	// start a loop that cycles through each of the li elements inside the parent element
	$(parent).children("li").each(function() {
		// create a few variables that we'll need during this function:
		// myClass = the class of the object we're currently inspecting
		// current = what the selected class should look like for the parent of the object we're currently inspecting
		var myClass = ($(this).attr("class"))
		var current = parent.substring(1) + " current-" + ($(this).attr("class"));

		// turn on nav events for element this loop identifies
		attachNavEvents(parent, myClass, setActive, hoverSpeed, style);
	
		// let's hide the CSS-defined background image, but only if this isn't the currently-selected item
		if (parentClass != current) {
			$(this).children("a").css({backgroundImage:"none"});
		}

	});
}


function attachNavEvents(parent, myClass, setActive, hoverSpeed, style) {
	$(parent + " ." + myClass).mouseover(function() {
		// create pseudo-link
		$(this).append('<div class="nav-' + myClass + '"></div>');
		// either slide or fade, depending on the style value
		if (style == "slide") {
			// slide down the pseudo-link
			$("div.nav-" + myClass).css({display:"none"}).slideDown(hoverSpeed);
		} else {
			// fade in the pseudo-link
			$("div.nav-" + myClass).css({display:"none"}).fadeIn(hoverSpeed);
		}
	}).mouseout(function() {
		// either slide or fade, depending on the style value
		if (style == "slide") {
			// slide up & destroy pseudo-link
			$("div.nav-" + myClass).slideUp(hoverSpeed, function() {
				$(this).remove();
			});
		} else {
			// fade out & destroy pseudo-link
			$("div.nav-" + myClass).fadeOut(hoverSpeed, function() {
				$(this).remove();
			});
		}
	});


	// we only want to check the mousedown/up events if the CSS exists for :active states
	// if so, let's apply our selective filtering to undo the events above
	if (setActive) {
		$(parent + " ." + myClass).mousedown(function() {
			$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
		}).mouseup(function() {
			$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
		});
	}
}

$(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, 350, "fade");
	
	$('.slideshow').cycle({ 
		fx:    'fade', 
		speed:  3400,
		sync:   0
	 });
	
	$('.presentation').cycle({ 
		fx:    'fade', 
		speed:  4200,
		random: 1
	 });
});


// $(document).ready(function(){
// 	$('.presentation').crossSlide({
// 		fade: 2,
// 		shuffle: true
// 		}, [
// 		{
// 			src:  '/img/pres-1.jpg',
// 			from: 'top left 1x',
// 			to:   'bottom right 1.3x',
// 			time: 4
// 		}, {
// 			src:  '/img/pres-2.jpg',
// 			from: 'top left 1x',
// 			to:   'bottom right 1.3x',
// 			time: 4
// 		}, {
// 			src:  '/img/pres-3.jpg',
// 			from: '100% 80% 1.3x',
// 			to:   '80% 0% 1x',
// 			time: 4
// 		}, {
// 			src:  '/img/pres-4.jpg',
// 			from: 'top left 1x',
// 			to:   'bottom right 1.3x',
// 			time: 4
// 		}, {
// 			src:  '/img/pres-5.jpg',
// 			from: '100% 80% 1.3x',
// 			to:   '80% 0% 1x',
// 			time: 4
// 		}, {
// 			src:  '/img/pres-6.jpg',
// 			from: '100% 80% 1x',
// 			to:   '100% 0% 1.3x',
// 			time: 4
// 		}, {
// 			src:  '/img/pres-7.jpg',
// 			from: 'top left 1x',
// 			to:   'bottom right 1.3x',
// 			time: 4
// 		}
// 	]);
// });