var sliderHome;
var slider;
$(document).ready(function () {
    $(".beneficio-item").click(function(){
        var id = $(this).data("beneficio");
        $(".beneficio-item-texto:visible").fadeOut(500,function(){
            $("#beneficio-"+id).removeClass("hidden");
            $("#beneficio-"+id).fadeIn(500);
        });
        return false;
        
    });
    
    var $control = $('<div class="beneficioSlideControl hidden-xs hidden-sm"></div><div class="row  hidden-xs hidden-sm" id="row-control"><div class="col-md-4 text-right page-arrow-prev"><a href="#"><img src="assets/img/home/arrow_slide_izq.svg" /></a></div><div class="col-md-4"><div id="bx-pager" class="text-center"><a data-slide-index="0" href="">1</a><a data-slide-index="1" href="">2</a><a data-slide-index="2" href="">3</a><a data-slide-index="3" href="">4</a><a data-slide-index="4" href="">5</a><a data-slide-index="5" href="">6</a><a data-slide-index="6" href="">7</a></div></div><div class="col-md-4 text-left page-arrow-next"><a href="#"><img src="assets/img/home/arrow_slide_der.svg" /></a></div></div>');
      //$("body").append($control);
      
      
      
      slider = $('#beneficios-slider').bxSlider({
        mode: 'horizontal',
        controls : false,
        auto:true,
        pause:6000
      });
      //$("body").detach($control);
     
     $control.appendTo("#beneficios .bx-wrapper");

    $(".page-arrow-prev").click(function () {
        slider.goToPrevSlide();
        return false;
    });

    $(".page-arrow-next").click(function () {
        slider.goToNextSlide();
        return false;
    });
    
    //$("#bx-pager a").off("click");
      $("#bx-pager a").click(function(e){
          
          var index = $(this).data("slide-index");
          slider.goToSlide(Number(index));
          return false;

      });

});