$(document).ready(function () {
    $(".arrow").mouseover(function(){
        $(this).removeClass(''+$(this).attr('which')+'Active').addClass(''+$(this).attr('which')+'Hover');
    }).mouseout(function(){
        $(this).removeClass(''+$(this).attr('which')+'Hover').addClass(''+$(this).attr('which')+'Active');
    });    

var dynamicPosition = 1;
    
$('.arrow').click(function() {
    if($(this).attr('which') == "right"){     
        if(dynamicPosition < 3){
            dynamicPosition = dynamicPosition+1; 
            setDynamicIndicator(dynamicPosition);
            $('#dynamicDisplayGroup').animate({
                left: '-=483'
              }, 1000, function() {
                // Animation complete.
                
              });
        }
    }else{    
        if(dynamicPosition > 1){
            dynamicPosition = dynamicPosition-1; 
            setDynamicIndicator(dynamicPosition); 
            $('#dynamicDisplayGroup').animate({
                left: '+=483'
              }, 1000, function() {
                // Animation complete.
                
                
              });
        }
    }
});

function changeCountBG(x){   //console.log(x); 
    $('.dynamicDisplayCounter').each(function() {  
    
      if($(this).attr('id') == "dynamicDisplayCounter"+x){
         $(this).css({backgroundPosition: "0px 0px"})
      }else{
         $(this).css({backgroundPosition: "-14px 0px"})
      }

    });
}                    
 
function setDynamicIndicator(x){ 

    if(x == 1){
        $('#leftA').removeClass('leftHover').addClass('leftDisabled');
    }else if(x == 3){
        $('#rightA').removeClass('rightHover').addClass('rightDisabled');
    }else{
        $('#rightA').removeClass('rightHover').removeClass('rightDisabled').addClass('rightActive');
        $('#leftA').removeClass('leftHover').removeClass('leftDisabled').addClass('leftActive');
    }
    changeCountBG(x); 

}     
 setDynamicIndicator(dynamicPosition);   
});