function autoPlay() {
    Slidebox('next');
}

$(document).ready(function () {
    var autoPlayTime = 5000;
    autoPlayTimer = setInterval(autoPlay, autoPlayTime);

    $('#BannerView .next').click(function () {
        Slidebox('next', 'stop');
    });
    $('#BannerView .previous').click(function () {
        Slidebox('previous', 'stop');
    });
    /*var yPosition = $('#BannerView').height() / 2 - $('#BannerView .next').height() / 2;
    $('#BannerView .next').css('top', yPosition);
    $('#BannerView .previous').css('top', yPosition);*/
});
//slide page to id
function Slidebox(slideTo, autoPlay) {
    var autoPlayTime = 5000;
    var animSpeed = 1000; //animation speed
    var easeType = 'easeInOutExpo'; //easing type
    var sliderWidth = $('#BannerView').width();
    var leftPosition = $('#BannerView .container').css("left").replace("px", "");
    $("#BannerView .content").each(function (i) {
        totalContent = i * sliderWidth;
        $('#BannerView .container').css("width", totalContent + sliderWidth);
    });
    if (!$("#BannerView .container").is(":animated")) {

        //alert(leftPosition);

        if (slideTo == 'next') { //next
            if (autoPlay == 'stop') {
                //clearInterval(autoPlayTimer);
            }
            if (leftPosition == -totalContent) {
                $('#BannerView .container').animate({ left: 0 }, animSpeed, easeType); //reset
            } else {
                $('#BannerView .container').animate({ left: '-=' + sliderWidth }, animSpeed, easeType); //next
            }


            //alert(leftPosition);

            switch (leftPosition) {
                case "-1898":
                    $("#thumb1").addClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
                case "0":
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").addClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
                case "-949":
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").addClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
                case "4":
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").addClass("clicado");
                    break;
                default:
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
            }


        } else if (slideTo == 'previous') { //previous           
            if (autoPlay == 'stop') {
                //clearInterval(autoPlayTimer);
            }
            if (leftPosition == '0') {
                $('#BannerView .container').animate({ left: '-' + totalContent }, animSpeed, easeType); //reset
                $("#thumb1").addClass("clicado");
            } else {
                $('#BannerView .container').animate({ left: '+=' + sliderWidth }, animSpeed, easeType); //previous
                $("#thumb1").removeClass("clicado");
            }

            //alert(leftPosition);

            switch (leftPosition) {
                case "-949":
                    $("#thumb1").addClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
                case "-1898":
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").addClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
                case "0":
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").addClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
                case "4":
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").addClass("clicado");
                    break;
                default:
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
            }

        } else {
            switch (slideTo) {
                case "1":
                    $("#thumb1").addClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
                case "2":
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").addClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
                case "3":
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").addClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
                case "4":
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").addClass("clicado");
                    break;
                default:
                    $("#thumb1").removeClass("clicado");
                    $("#thumb2").removeClass("clicado");
                    $("#thumb3").removeClass("clicado");
                    $("#thumb4").removeClass("clicado");
                    break;
            }

            var slide2 = (slideTo - 1) * sliderWidth;
            if (leftPosition != -slide2) {
                //clearInterval(autoPlayTimer);
                $('#BannerView .container').animate({ left: -slide2 }, animSpeed, easeType); //go to number
            }
        }
    }
}