Can anyone tell me what's wrong with this switch statement (javascript)?

Question

Hey all, its your typical slider - both automated and controlled by user click. Problem is when you click, if you are on last slide,it shouldn't show right arrow, and if you are on first slide, it shouldn't show left arrow. If you are anywhere else, it should show both arrows. However, when on last slide it still shows right arrow. However, when on first slide, it correctly doens't show left arrow. But then when you get to middle slides, it doesn't bring back right arrow:

    $(".paging").show();
$(".image_reel img:first").addClass("active");
$active = $(".image_reel img:first"); 

var imageWidth = $(".window").width();  
var imageSum = $(".image_reel img").size();  
var imageReelWidth = imageWidth * imageSum;

$(".image_reel").css({'width' : imageReelWidth});

rotate = function(){

    var triggerId = $active.attr('src').substring(7,8);
    var image_reelPosition = (triggerId - 1) * imageWidth;



    $(".image_reel img").removeClass("active");
    $active.addClass("active");

    switch ($active.attr('src')) {
        case "images/4.png":
            var $lastPic = $active.attr("src");
            manageControls($lastPic);
            break;
        case "images/1.png":
            var $firstPic = $active.attr('src');
            manageControls($firstPic);
            break;
        case "image/2.png":
            var $standardPic = $active.attr('src');
            manageControls($standardPic);
            break;
        case "image/3.png":
            var $standardPic = $actice.attr('src');
            manageControls($standardPic);
            break;
    } 




    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500);
};

rotateSwitch = function(){
    play = setInterval(function(){
    if(!$(".paging a").show()) $(".paging a").show(); //This is CRITICAL - this makes sure the arrows reappear after they have been removed
        $active = $(".image_reel img.active").parent().next().find("img");
        if ($active.length === 0){
            $active = $('.image_reel img:first');
            var $firstPic = $active.attr("src");
            manageControls($firstPic); 
        }
        rotate();
    }, 5000);
};

rotateSwitch();

$(".paging a").click(function(){
    $active = ($(this).attr('id')=='rightCtr') ? $(".image_reel img.active").parent().next().find('img') : $(".image_reel img.active").parent().prev().find('img');


    if ($active.length === 0){
        $active = $('.image_reel img:first');
    }


    clearInterval(play);  
    rotate();
    rotateSwitch();  


    return false; 
});


manageControls = function(whichImg){
    (whichImg == "images/4.png") ? $(".paging a#rightCtr").hide() : $(".paging a#rightCtr").show();
    (whichImg == "images/1.png") ? $(".paging a#leftCtr").hide() : $(".paging a#rightCtr").show();

    if(whichImg != "images/1.png" || whichImg != "images/4.png"){
        $(".paging a#rightCtr").show();
        $(".paging a#rightCtr").show();
    }

};

html:

<div class="window">
            <div class="image_reel">
                <a href="#"><img src="images/1.png" alt="" /></a>
                <a href="#"><img src="images/2.png" alt="" /></a>
                <a href="#"><img src="images/3.png" alt="" /></a>
                <a href="#"><img src="images/4.png" alt="" /></a>
            </div>
        </div>
        <div class="paging">
            <a href="#" id="leftCtr">Left</a>
            <a href="#" id="rightCtr">Right</a>
        </div>
 </div>

Thanks for any response.

Answer 1

It is working, you just have a typo:

        var $standardPic = $actice.attr('src');
                                ^

should be

        var $standardPic = $active.attr('src');

Notes:

• Your code can be rewritten in a much more elegant way, you can use another logic instead of the switch statement, especially with the help of jquery selectors.
• Use firebug , it helps with javascript debugging and web development in general, and it has a console that shows errors.

Answer 2

The switch statement is weird, but it's OK I think. I believe that the problem is with that "manageControls" function. Inside the last if statement, you do the same thing twice. Also the expression in the if will always be true.

I said that the switch is "weird" because, well, it is:

    switch ($active.attr('src')) {
    case "images/4.png":
        var $lastPic = $active.attr("src");
        manageControls($lastPic);
        break;

OK. So for that first case , you now know that the "src" attribute of the active element is "images/4.png". So, if you know that, why do you need to get it again to set the "$lastPic" variable? Why do you need those variables at all? Why not just collapse the entire switch down to

 manageControls($active.attr('src'));