$(document).ready(function(){

    $(".jsPanel2").hide();
    $(".jsPanel3").hide();
    $(".jsPanel4").hide();

    $(".btn1").click(function(){
        $(this).parent().find(".jsPanelBtn").removeClass("on");
        $(this).parent().find(".jsPanelBtn").addClass("off");
        $(this).removeClass("off");
        $(this).addClass("on");
        $(this).parent().parent().find('.jsPanelImg').hide();
        $(this).parent().parent().find('.jsPanel1').show();
    });
    $(".btn2").click(function(){
        $(this).parent().find(".jsPanelBtn").removeClass("on");
        $(this).parent().find(".jsPanelBtn").addClass("off");
        $(this).removeClass("off");
        $(this).addClass("on");
        $(this).parent().parent().find('.jsPanelImg').hide();
        $(this).parent().parent().find('.jsPanel2').show();
    });
    $(".btn3").click(function(){
        $(this).parent().find(".jsPanelBtn").removeClass("on");
        $(this).parent().find(".jsPanelBtn").addClass("off");
        $(this).removeClass("off");
        $(this).addClass("on");
        $(this).parent().parent().find('.jsPanelImg').hide();
        $(this).parent().parent().find('.jsPanel3').show();
    });
    $(".btn4").click(function(){
        $(this).parent().find(".jsPanelBtn").removeClass("on");
        $(this).parent().find(".jsPanelBtn").addClass("off");
        $(this).removeClass("off");
        $(this).addClass("on");
        $(this).parent().parent().find('.jsPanelImg').hide();
        $(this).parent().parent().find('.jsPanel4').show();
    });


    $(".scrollRightBtn").bind('click',function(){        
        scrollRight($(this));
    });
    $(".scrollLeftBtn").bind('click',function(){
        scrollLeft($(this));
    });
    $(".scrollRightBtnWide").bind('click',function(){
        scrollRightWide($(this));
    });
    $(".scrollLeftBtnWide").bind('click',function(){
        scrollLeftWide($(this));
    });
        
});


function scrollRight(btn){    
    var container = btn.parents(".jsScrollerNarrowBody");
    var numFeatured = container.find(".numFeatured").val();
    var panelCurrentHolder = container.find(".panelCurrent");
    var panelCurrent = parseInt(panelCurrentHolder.val());
    var scrollFrames = Math.ceil(numFeatured / 3);
    if(panelCurrent < scrollFrames){
        $(".scrollRightBtn").unbind('click');
        $(".scrollLeftBtn").unbind('click');
        var scrollable = container.find(".scrollable");
        var left = parseInt(scrollable.css("left"));
        left = left - 525;
        scrollable.animate({left: left}, 1000, function(){
            panelCurrentHolder.val(panelCurrent + 1);
            $(".scrollRightBtn").bind('click',function(){
                scrollRight($(this));
            });
            $(".scrollLeftBtn").bind('click',function(){
                scrollLeft($(this));
            });
        });
    }
}

function scrollLeft(btn){    
    var container = btn.parents(".jsScrollerNarrowBody");
    var panelCurrentHolder = container.find(".panelCurrent");
    var panelCurrent = parseInt(panelCurrentHolder.val());
    if(panelCurrent > 1){
        $(".scrollRightBtn").unbind('click');
        $(".scrollLeftBtn").unbind('click');        
        var scrollable = container.find(".scrollable");
        var left = parseInt(scrollable.css("left"));
        left = left + 525;
        scrollable.animate({left: left}, 1000, function(){
            panelCurrentHolder.val(panelCurrent - 1);
            $(".scrollRightBtn").bind('click',function(){
                scrollRight($(this));
            });
            $(".scrollLeftBtn").bind('click',function(){
                scrollLeft($(this));
            });
        });
    }
}



function scrollRightWide(btn){
    var container = btn.parents(".jsScrollerWideBody");
    var numFeatured = container.find(".numFeatured").val();
    var panelCurrentHolder = container.find(".panelCurrent");
    var panelCurrent = parseInt(panelCurrentHolder.val());
    var scrollFrames = Math.ceil(numFeatured / 3);
    if(panelCurrent < scrollFrames){
        $(".scrollRightBtnWide").unbind('click');
        $(".scrollLeftBtnWide").unbind('click');
        var scrollable = container.find(".scrollable");
        var left = parseInt(scrollable.css("left"));
        left = left - 588;
        scrollable.animate({left: left}, 1000, function(){
            panelCurrentHolder.val(panelCurrent + 1);
            $(".scrollRightBtnWide").bind('click',function(){
                scrollRightWide($(this));
            });
            $(".scrollLeftBtnWide").bind('click',function(){
                scrollLeftWide($(this));
            });
        });
    }
}

function scrollLeftWide(btn){
    var container = btn.parents(".jsScrollerWideBody");
    var panelCurrentHolder = container.find(".panelCurrent");
    var panelCurrent = parseInt(panelCurrentHolder.val());
    if(panelCurrent > 1){
        $(".scrollRightBtnWide").unbind('click');
        $(".scrollLeftBtnWide").unbind('click');
        var scrollable = container.find(".scrollable");
        var left = parseInt(scrollable.css("left"));
        left = left + 588;
        scrollable.animate({left: left}, 1000, function(){
            panelCurrentHolder.val(panelCurrent - 1);
            $(".scrollRightBtnWide").bind('click',function(){
                scrollRightWide($(this));
            });
            $(".scrollLeftBtnWide").bind('click',function(){
                scrollLeftWide($(this));
            });
        });
    }
}