mousemove strange behavior

Question

i am trying to change images of a slideshow using mousemove. but its not working correctly. It only works correctly first time and after that even the mouse is not clicked it assumed that mouse is clicked. You can check demo here http://unirazz.com/kb/html/movie.html

here is the code for mousemove

        var clicking = false;
        var pageX = 0;

        $('#movieShow').mousedown(function(e){
            clicking = true;
            pageX = e.pageX;            
        });

        $(document).mouseup(function(e){
            clicking = false;
            pageX = 0;
            //alert('h');
        })

        $('#movieShow').mousemove(function(e){
            if(clicking == false) return;

            // Mouse click + moving logic here
            //$('.movestatus').text('mouse moving');
            if(pageX == 0) return;
            if((e.pageX - pageX) > 0){
                var t = e.pageX - pageX;
                if(t%10 == 0){
                    pageX = e.pageX;
                    //console.log('right');
                    rightClick();
                }
            }
            else{
                var t = pageX - e.pageX;
                if(t%10 == 0){
                    pageX = e.pageX;
                    //console.log('left');
                    leftClick();
                }           
            }
        });

Answer 1

It seems to be getting confused when you click and hold and drag your mouse outside the 'movieShow'. Your document.mouseup isn't working so it never sets clicking to false;

I think you need to define a mouseout for 'movieShow' that does the same thing as mouseup

$('#movieShow').mouseout(function(e){
    clicking = false;
    pageX = 0;
})