$(document).ready(function() {

    /*
        $("#be1").animate({ width: "343px" }, 5000, function() {
        $("#be1").animate({ opacity: "0.1" }, 600);
        $("#be2").animate({ opacity: "0.1" }, 600, function() {
            $("#be1").css("backgroundColor", "#F2F2F3")
.css("borderRightColor", "#FFFFFF")
            $("#be1").animate({ opacity: "1" }, 600)
            $("#be2").css("backgroundColor", "#3F3E43")
.css("borderRightColor", "#3F3E43")
.animate({ opacity: "1" }, 1000)
.animate({ width: "343px" }, 5000, function() {
    $("#be2").animate({ opacity: "0.1" }, 600);
    $("#be3").animate({ opacity: "0.1" }, 600, function() {
    $("#be2").css("backgroundColor", "#F2F2F3")
.css("borderRightColor", "#FFFFFF")
    $("#be2").animate({ opacity: "1" }, 600)
    $("#be3").css("backgroundColor", "#3F3E43")
.css("borderLeftColor", "#3F3E43")
.animate({ opacity: "1" }, 1000)
}
);
}
);
        }
);


    });
    */
go();

/*
    $("#be1").animate({ width: "343px" }, 5000, function() {
        $("#be1").animate({ opacity: "0.1" }, 600);
        $("#be2").animate({ opacity: "0.1" }, 600, function() {
            $("#be1").css("backgroundColor", "#F2F2F3")
.css("borderRightColor", "#FFFFFF")
            $("#be1").animate({ opacity: "1" }, 600)
            $("#be2").css("backgroundColor", "#3F3E43")
.css("borderRightColor", "#3F3E43")
.animate({ opacity: "1" }, 1000)
.animate({ width: "343px" }, 5000, function() {
    $("#be2").animate({ opacity: "0.1" }, 600);
    $("#be3").animate({ opacity: "0.1" }, 600, function() {
    $("#be2").css("backgroundColor", "#F2F2F3")
.css("borderRightColor", "#FFFFFF")
    $("#be2").animate({ opacity: "1" }, 600)
    $("#be3").css("backgroundColor", "#3F3E43")
.css("borderLeftColor", "#3F3E43")
.animate({ opacity: "1" }, 1000)
}
);
}
);
        }
);


    });
*/

});


function go() {
    $("#be1").animate({ width: "345px" }, 10000, function() { go1() });
}

function go1() {
    $("#be1").animate({ opacity: "0.1" }, 600);
    $("#be2").animate({ opacity: "0.1" }, 600, function() { go2() });
}

function go2() {
    $("#be1").removeClass("sel");
    $("#bp").attr("src", $("#bp2").attr("src"));
            $("#be1").animate({ opacity: "1" }, 600)
            $("#be2").addClass("sel")
.animate({ opacity: "1" }, 600)
.animate({ width: "345px" }, 10000, function() { go3() });
}

function go3() {
    $("#be2").animate({ opacity: "0.1" }, 600);
    $("#be3").animate({ opacity: "0.1" }, 600,function() { go4() });
}

function go4() {
    $("#be2").removeClass("sel");
    $("#bp").attr("src", $("#bp3").attr("src"));
    $("#be2").animate({ opacity: "1" }, 600)
    $("#be3").addClass("sel")
.animate({ opacity: "1" }, 600)
.animate({ width: "345px" }, 10000, function() { go5() });
}

function go5() {
    $("#be3").animate({ opacity: "0.1" }, 600);
    $("#be4").animate({ opacity: "0.1" }, 600, function() { go6() });
}

function go6() {
    $("#be3").removeClass("sel");
    $("#bp").attr("src", $("#bp4").attr("src"));
    $("#be3").animate({ opacity: "1" }, 600)
    $("#be4").addClass("sel")
.animate({ opacity: "1" }, 600)
.animate({ width: "345px" }, 10000, function() { go7() });
}

function go7() {
    $("#be4").animate({ opacity: "0.1" }, 600);
    $("#be1").animate({ opacity: "0.1" }, 600, function() { go8() });
}

function go8() {
    $("#be4").removeClass("sel");
    $("#bp").attr("src", $("#bp1").attr("src"));
    $("#be4").animate({ opacity: "1" }, 600)
    $("#be1").addClass("sel")
.animate({ opacity: "1" }, 600, function() { go() });
}