How can I use .mousemove to fade the background image according to the distance from the center page?

I have this feature installed

if (window.innerWidth && window.innerHeight) {
 var winW = window.innerWidth;
 }

var xM = winW/180; 

var axis = 0;
$(window).bind('mousemove',function(e){
 var xCoord =  Math.floor(e.pageX/xM);
 axis = 0.6 * Math.sin(xCoord);
 var pageCoords = "( " + e.pageX + ", " + e.pageY + ", " + xCoord + " )";
     $("span#showme").text(pageCoords);
 });
    setInterval(function() {
     $("#welcome-background").fadeTo(0, 0.4 + axis);
 }, 100);

      

        
        
        
      

    

(for more reference and visual work- http://jsfiddle.net/ySjqh/2/ )

In theory, it is theoretically possible to split the page into segments from 0-180 and then calculate which segment the mouse pointer is displayed on. The Math.sin () function is then used to determine the degree of opacity based on padding the starting point of 0.4 opacity (jQuery style) and should use the mouse position to determine how much of the remaining 0.6 is applied based on its distance from center, where the mouse on the center page should give full opacity.

I don't understand why the script behaves this way, rolling over the entire sine wave when I limited the input of the Math.sin (x) function to 1 <x <180. If you replace xCoord with an axis at the point where I will plot the jQuery text for #showme you will see it throws negative numbers, which it shouldn't be! ... so I don't understand where the problem / behavior is coming from !!! Disappointment!!!