$(document).ready(function(){
	
	var speechballon = new Image();
	speechballon.src = "img/speechballon2.png";
	speechballon.id = "speechballon";
	

	
	
	$("body").append("<div id='contains_hen'><div id='hen' style='background-position:0px 0px;'><a href='./thehen/'><img src='img/pixel.gif' alt='' width='20' height='20'  border='0' /></a></div></div>");
		$("#hen")
	.data("direction", "ltr")
	.data("stop", false)
	.hover(function(){
		var popin="<div id='popinHen'>The hen is a small browser game featuring a ravenous hen, a nest and some worms.<br />Give it a try!</div>" ;
		var opacityLayer="<div id='opacityLayer' ></div>";
		$(this).data("stop", true);
		
		var left = Number($(this).css("left").replace("px", "")) -80;
		
		if(!document.getElementById('popinHen')){
			$("body").append(popin);
			$("body").append(speechballon);
			$("body").append(opacityLayer);
		}
		$("#opacityLayer").css('height', $("body").outerHeight() + $("body").scrollTop());
		var speecharrowTop = $("#hen").offset().top - 30;
		var popinhenTop = speecharrowTop - $("#popinHen").outerHeight() + 4;
		$("#popinHen")
			.css("display","block")
			.css("left", left + "px")
			.css("top", popinhenTop);
		$("#opacityLayer")
			.css("display","block")
			;
		$("#speechballon")
			.css("display","inline")
			.css("left", (left + 100) + "px")
			.css("top", speecharrowTop);
		
		
	},
	function(){
		$("#popinHen, #speechballon, #opacityLayer").css("display", "none");
		$(this).data("stop", false).each(animateHen);
	})
	.each(animateHen);
	
});

function animateHen(){
	
	
	
	var innerW = $("body").innerWidth();

	var elt = $(this);
	
	if (elt.data("stop") == true ) return false;
	
	
	var left = elt.css("left");
	left = Number(left.replace("px", ""));
	
	var leftMin  = Math.floor(innerW / 2) - 50 ;
	var leftMax = Math.floor(innerW / 2) + 30 ;
	
	if(isNaN(left) || left < leftMin - 20) left = leftMin ;
	

	
	if (elt.data("direction") =="ltr" && left >leftMax )
		elt.data("direction", "rtl") ;
	else if (elt.data("direction") =="rtl" && left < leftMin)
		elt.data("direction", "ltr") ;
	
	var leftIncr=-2
	var imgXposition = 20 ;
	
	
	if (elt.data("direction") =="ltr" ) { 
		leftIncr = 2;
		imgXposition = 0;
	}
	
	left += leftIncr ;
	
	
	
	var imagePosition = elt.css("backgroundPosition");
	if(imagePosition){
		imagePosition =  imagePosition.replace(/px/gi, "");
		imagePosition =  imagePosition.split(" ");
		var curimgYposition = Number(imagePosition[1]);
		
		var imgYposition= 0 ;
		if(curimgYposition  < 60)
			imgYposition = curimgYposition + 20;

		elt.css({left:left + "px", backgroundPosition: imgXposition + "px " + imgYposition + "px"})
		.animate({width:"20px"}, 125, animateHen);
	}
}