$(document).ready(function(){
   $("#callout1,#callout2,#callout3,#callout4").hide();
	$('.popupleft').hide().addClass("popupleftjs").ifixpng();
	$('.popupright').hide().addClass("popuprightjs").ifixpng();
	$('.popupdetails').ifixpng();

	$('.tile').mouseover(function() {
			$(this).prev(".popupleft, .popupright").show();
			$(this).children("img").attr({"src": $(this).children("img").attr("src").replace("-off","-on")});
	  });
	$('.tile').mouseout(function() {
			$(this).prev(".popupleft, .popupright").hide();
			$(this).children("img").attr({"src": $(this).children("img").attr("src").replace("-on","-off")});

	  });
	$('.tiledetails').mouseover(function(e) {
  		$(this).prev(".popupdetails").css({marginLeft: e.pageX-565}).show();
});	  
	$('.tiledetails').mouseout(function() {
			$(this).prev(".popupdetails").hide();

	  });
	$('.tiledetails').click(function() {
									 return false;
									 });
	$('a[@href="watermap.html"]').click(function() {
		newwindow=window.open('http://www.naturesownwatercare.com/images/large-map.jpg','map','height=504,width=792');
		return false;
	 });
	var navdropleft = homespot + "px";
	var navdrop2left = (homespot - 7) + "px";
	$('#navdrop').css("left",navdropleft);
	$('#navdrop2').css("left",navdrop2left);

	$('#mainlinks area[@href="index.html"]').mouseover(function() {
		$('#navdrop').stop().animate({left: "359px"},500,"swing");
		$('#navdrop2').stop().animate({left: "352px"},500,"swing");
	 });
	$('#mainlinks area[@href="index.html"]').mouseout(function() {
		$('#navdrop').stop().animate({left: navdropleft},500,"swing");
		$('#navdrop2').stop().animate({left: navdrop2left},500,"swing");
	 });
	$('#mainlinks area[@href="products.html"]').mouseover(function() {
		$('#navdrop').stop().animate({left: "438px"},500,"swing");
		$('#navdrop2').stop().animate({left: "431px"},500,"swing");
	 });
	$('#mainlinks area[@href="products.html"]').mouseout(function() {
		$('#navdrop').stop().animate({left: navdropleft},500,"swing");
		$('#navdrop2').stop().animate({left: navdrop2left},500,"swing");
	 });
	$('#mainlinks area[@href="hardwater.html"]').mouseover(function() {
		$('#navdrop').stop().animate({left: "542px"},500,"swing");
		$('#navdrop2').stop().animate({left: "535px"},500,"swing");
	 });
	$('#mainlinks area[@href="hardwater.html"]').mouseout(function() {
		$('#navdrop').stop().animate({left: navdropleft},500,"swing");
		$('#navdrop2').stop().animate({left: navdrop2left},500,"swing");
	 });
	$('#mainlinks area[@href="faq.html"]').mouseover(function() {
		$('#navdrop').stop().animate({left: "642px"},500,"swing");
		$('#navdrop2').stop().animate({left: "635px"},500,"swing");
	 });
	$('#mainlinks area[@href="faq.html"]').mouseout(function() {
		$('#navdrop').stop().animate({left: navdropleft},500,"swing");
		$('#navdrop2').stop().animate({left: navdrop2left},500,"swing");
	 });
	$('#mainlinks area[@href="contact.html"]').mouseover(function() {
		$('#navdrop').stop().animate({left: "724px"},500,"swing");
		$('#navdrop2').stop().animate({left: "717px"},500,"swing");
	 });
	$('#mainlinks area[@href="contact.html"]').mouseout(function() {
		$('#navdrop').stop().animate({left: navdropleft},500,"swing");
		$('#navdrop2').stop().animate({left: navdrop2left},500,"swing");
	 });
	$('#mainlinks area[@href="retailers.html"]').mouseover(function() {
		$('#navdrop').stop().animate({left: "832px"},500,"swing");
		$('#navdrop2').stop().animate({left: "825px"},500,"swing");
	 });
	$('#mainlinks area[@href="retailers.html"]').mouseout(function() {
		$('#navdrop').stop().animate({left: navdropleft},500,"swing");
		$('#navdrop2').stop().animate({left: navdrop2left},500,"swing");
	 });
});