$(function(){
	$('.nav_btn img').each(function(){ 
		$alt = $(this).attr('alt');
		$src = $(this).attr('src');
		$src = $src.replace('.','_on.');
		$(this).parent().css({position:'relative',display:'block'});
		$(this).after('<img class="transition" src="'+$src+'" alt="'+$alt+'" style="display:none; position:absolute; top:0px; left:0px;" />');
		
		$(this).parent().hover(
			function(){ $(this).children('.transition').stop(true,true).fadeIn(300); },
			function(){ $(this).children('.transition').fadeOut(300); }
		);
	});
	
});

// Elemental Rotator v1.1 (10.12.09)  
// copyright Blue Ridge Solutions, Inc. www.blueridges.com
//
// INSTRUCTIONS
// Create container with the eRotator class and a unique id
// Place your element(s) of choice within the container
// Set the variables below to achieve a desired effect

// Set Animation slideshow and Element Type (img, p, *)
var slideshow = ".eRotator";
var elementType = "img"; 

// Final States (after animation, completed state)
var finalTop = 0;
var finalLeft = 0;
var finalOpacity = 1;
var finalHeight = 212;
var finalWidth = 623;

// Initial States (animate in, set to final if no animation)
var initialOpacity = 0;
var initialTop = finalTop;
var initialLeft = finalLeft;
var initialHeight = finalHeight;
var initialWidth = finalWidth;

// Post States (animate out, set to final if no animation)
var postOpacity = 0;
var postTop = finalTop; // add ['-='+] or ['+='+] to slide
var postLeft = finalLeft; // add ['-='+] or ['+='+] to slide
var postHeight = finalHeight;
var postWidth = finalWidth;

// Set Animation Time and Interval
var animationTime = 1500;
var animationInterval = 4500; // default 4000 ms, set to 0 to skip automatic transitions 
var animationTimerID = 0;

$(function(){ // Apply Initial States and Interval
	
	$(slideshow).each(function(){ 
		var container = $(this).attr('id');
		var container = "#"+container;
					   
		// Set Random Starting Point
		//rand = Math.round($(container+' '+elementType).length*Math.random())-1;
		//for (i=0;i<rand;i++) {$(container+' '+elementType+':first').remove().insertAfter(container+' '+elementType+':last');}
		
		if($(container).css('position') != 'relative' || $(container).css('position') != 'absolute'){ $(container).css({position:'relative'}); }
		$(container).css({overflow: 'hidden', width: finalWidth, height: finalHeight}); // Set container Size
		$(container+' '+elementType).css({position: 'absolute', top: initialTop, left: initialLeft, opacity: initialOpacity, width: initialWidth, height: initialHeight}); // Set All to Initial State
		$(container+' '+elementType+':first').css({position: 'absolute', top: finalTop, left: finalLeft, opacity: finalOpacity, width: finalWidth, height: finalHeight}); // Set 1st to Final State
		if(animationInterval) animationTimerID = setInterval( 'rotateFwd("'+container+'")', animationInterval);
	});
	
	$('#goFwd').click(function(e) {
		clearInterval(animationTimerID);															
		animationTimerID = 0;
		e.preventDefault();
		rotateFwd('.eRotator');
	});
	
	$('#goBak').click(function(e) {
		clearInterval(animationTimerID);															
		animationTimerID = 0;
		e.preventDefault();
		rotateBak('.eRotator');
	});

});


function rotateFwd(container){
	var ef = $(container+' '+elementType+':first');
	ef.remove().insertAfter(container+' '+elementType+':last');//.css({top: initialTop, left: initialLeft, opacity: initialOpacity, width: initialWidth, height: initialHeight});
	ef = $(container+' '+elementType+':first');
	var el = $(container+' '+elementType+':last');
	el.animate({top: postTop+'px', left: postLeft+'px', opacity: postOpacity, width: postWidth, height: postHeight}, animationTime); // Animate Out
	ef.animate({top: finalTop+'px', left: finalLeft+'px', opacity: finalOpacity, width: finalWidth, height: finalHeight}, animationTime); // Animate In
}

function rotateBak(container){
	var ef = $(container+' '+elementType+':first');
	var el = $(container+' '+elementType+':last');
	el.remove().insertBefore(container+' '+elementType+':first');
	ef.animate({top: postTop+'px', left: postLeft+'px', opacity: postOpacity, width: postWidth, height: postHeight}, animationTime); // Animate Out
	el.animate({top: finalTop+'px', left: finalLeft+'px', opacity: finalOpacity, width: finalWidth, height: finalHeight}, animationTime ); // Animate In
}