$(document).ready(function() {
    var autoSlide = true;
    var curItem = 0;
    var numOfItems = 5;
    var changeItemsSec = 10;
    var animateDuration = 0.2;


    var PrevClick = function() {
        $(".btnPrev").unbind("click");
        $(".btnNext").unbind("click");
        autoSlide = false;
        LoadPrev();
    };

    var NextClick = function() {
        $(".btnPrev").unbind("click");
        $(".btnNext").unbind("click");
        autoSlide = false;
        LoadNext();
    };

    var LoadPrev = function() {
        if (curItem == 0)
            AnimateTransition(curItem, numOfItems - 1);
        else
            AnimateTransition(curItem, curItem - 1);
    };

    var LoadNext = function() {
        if (curItem == numOfItems - 1)
            AnimateTransition(curItem, 0);
        else
            AnimateTransition(curItem, curItem + 1);
    };

    var DelayLoadNext = function() {
        $("body").delay(changeItemsSec * 1000).queue(function() {
            if (autoSlide == true) {
                LoadNext();
                $(this).dequeue();
            }
        });
    };

    var AnimateTransition = function(fromIdx, toIdx) {
        curItem = toIdx;
        var fromImg = $("#featured-article").find("input[value='" + fromIdx + "']:first").parent();
        var fromText = $("#featured-article").find("input[value='" + fromIdx + "']:last").parent();
        var toImg = $("#featured-article").find("input[value='" + toIdx + "']:first").parent();
        var toText = $("#featured-article").find("input[value='" + toIdx + "']:last").parent();

        fromImg.animate({
            opacity: 0
        }, animateDuration * 1000, function() {
            $(this).hide()
        });
        toImg.delay(animateDuration * 1000 / 2).show().animate({
            opacity: 1
        }, animateDuration * 1000, function() {

        });
        fromText.animate({
            opacity: 0
        }, animateDuration * 1000, function() {
            $(this).hide()
        });
        toText.delay(animateDuration * 1000 / 2).show().animate({
            opacity: 1
        }, animateDuration * 1000, function() {
			toText.removeAttr("style");
            if (autoSlide == true)
                DelayLoadNext();
            else {
                $(".btnPrev").click(PrevClick);
                $(".btnNext").click(NextClick);
            }
        });

    };

    DelayLoadNext();

    $(".btnPrev").click(PrevClick);
    $(".btnNext").click(NextClick);

});