/*
 * @author Kyle Stephens
 * @year 2011
 * 
 * @description a simple navigation solution for photoblogs based which creates
 * forward and backward arrows when the mouse is over the left and right side of
 * a feature image
 */

$(document).ready(function() {	// wait until document has loaded
								// ensure image dimensions are not 0
	// feature image
	var height = 0;
	var width = 0;
	var featureImg = ".entry img:first";
	
	// navigation image
	var navLeft = "#navLeft";		// unique ID of navigation image
	var navRight = "#navRight";		// unique ID of navigation image
	var leftX = 0, leftY = 0;
	var rightX = 0, rightY = 0;
	
	// on feature image load
    $(featureImg).load(function() {
    	imgHeight = $(this).height();
    	imgWidth = $(this).width();

    	leftX = 35;
    	leftY = (imgHeight/2) - 75;	// arrow image is 75px X 150px
    	
    	rightX = imgWidth - 35 - 75;	// arrow image is 75px X 150px
    	rightY = leftY;
    	
    	$(navLeft).find("a:first").append('<img src="http://www.thescruffyboy.com/wp-content/themes/spotless/Arrow-Left.png" alt="Previous Post" style="background: none" />');
    	$(navRight).find("a:first").append('<img src="http://www.thescruffyboy.com/wp-content/themes/spotless/Arrow-Right.png" alt="Next Post" style="background: none" />');
    	
    	$(navLeft).css("top", $(featureImg).position().top + leftY + "px");
    	$(navLeft).css("left", $(featureImg).position().left + leftX + "px");
    	$(navLeft).css("opacity", 0.0);
    	
    	$(navRight).css("top", $(featureImg).position().top + rightY + "px");
    	$(navRight).css("left", $(featureImg).position().left + rightX + "px");
    	$(navRight).css("opacity", 0.0);
    });
    
	$(navLeft).hover(function(){
		$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
	},function(){
   		$(this).fadeTo("slow", 0.0); // This should set the opacity back to 0% on mouseout
	});
	
	$(navRight).hover(function(){
		$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
	},function(){
   		$(this).fadeTo("slow", 0.0); // This should set the opacity back to 0% on mouseout
	});
    
});