$(document).ready(function(){
    /**
     * A crude slider
     *
     * ...but with a rather snazzy bounce-back effect for when the user tries to scroll too far
     * ...it's one way to get around the unbind() function fail... :-)
     */
    //Set up
    $slider = $('.slider-nav');
    $panels = $('.slider-nav li');
    var panelWidth = $panels[0].offsetWidth + parseInt($panels.eq(0).css('margin-left').replace("px", ""));
    var totalWidth = panelWidth * $panels.length;
    $slider.css('width', totalWidth);
    $slider.css('position','relative');
    checkWidth();

    //value that slider's left should be set to when rightmost thumbnail is flush with rightmost edge:
    var rightMost = $('#slider-navigation .nav-next').offset().left - $('#slider-navigation .nav-prev').offset().left - totalWidth - parseFloat($('#slider-navigation .nav-prev').css('width')) - parseFloat($('#slider-navigation .nav-next').css('margin-left'));
    //moved this up here to use it in checkWidth()
    var leftVal

    /*
     * Check whether the width of the panels is greater than
     * the width of the viewing window. If it is, enable the buttons.
     */
    function checkWidth(){

        //Animation has stopped when this is called
        $slider.data("onTheMove", false);

        if(totalWidth <= parseInt($('.slider-window').css('width').replace("px",""))){
            //Panels fit within window, buttons not needed.
            $('#slider-navigation .nav-prev').css('background-position', '-148px -139px');
            $('#slider-navigation .nav-next').css('background-position', '-167px -139px');

            $('#slider-navigation .nav-prev').unbind('click', function(){slide('moveRight');});
            $('#slider-navigation .nav-next').unbind('click', function(){slide('moveLeft');});
        } else {
            //Buttons
            $('#slider-navigation .nav-prev').bind('click',function(){slide('moveRight');}).css('cursor','hand');
            $('#slider-navigation .nav-next').bind('click',function(){slide('moveLeft');}).css('cursor','hand');
        }
        leftVal = $slider.css('left');
        //bloody IE...
        if (leftVal == "auto") { leftVal = 0; };
        currentPosition = parseFloat(leftVal);
        if(currentPosition == 0){
            //Disable the left button if the first item is already visible
            $('#slider-navigation .nav-prev').css('background-position', '-148px -139px');
            if((currentPosition + totalWidth) > parseInt($('.slider-window').css('width').replace("px",""))){
                //disable right
                $('#slider-navigation .nav-next').css('background-position', '-167px -50px');
            }
        } else if(currentPosition < 0){
            //Re-enable the left button because content is out of the window
            $('#slider-navigation .nav-prev').css('background-position', '-148px -50px');
            if((currentPosition + totalWidth) < parseInt($('.slider-window').css('width').replace("px",""))){
                //right
                $('#slider-navigation .nav-next').css('background-position', '-167px -139px');
            }
        }
    }

    /*
     * on button press move the slider left or right
     */
    function slide(direction){
        if ($slider.data("onTheMove") == false) {
            $slider.data("onTheMove", true);

            leftVal = $slider.css('left');
            //bloody IE...
            if (leftVal == "auto") { leftVal = 0; };

            switch(direction){
                case 'moveLeft':
                    //movement = parseInt($slider.css('left').replace("px", "")) - panelWidth + 'px';

                    movement = parseFloat(leftVal) - panelWidth;
                    $slider.animate( {"left": movement}, 500, function(){checkWidth();} );
                    //Check position - add half a panel width to make the effect nicer:
                    if (( $slider.offset().left + totalWidth - (panelWidth / 2) ) < $('#slider-navigation .nav-next').offset().left) {
                        //seeing as unbinding the buttons doesn't work - how's about bouncing the panels back?
                        $slider.animate( {"left": rightMost}, 250);
                    };
                break;
                case 'moveRight':
                    //movement = parseInt($slider.css('left').replace("px", "")) + panelWidth + 'px';

                    movement = parseFloat(leftVal) + panelWidth;
                    $slider.animate( {"left": movement}, 500, function(){checkWidth();} );
                    //Check position:
                    if (( $slider.offset().left + parseFloat($('#slider-navigation .nav-prev').css('width')) + panelWidth ) > $('#slider-navigation .nav-prev').offset().left) {
                        //seeing as unbinding the buttons doesn't work - how's about bouncing the panels back?
                        $slider.animate( {"left": 0}, 250);
                    };
                break;
            }
        }
    }
});