var loopImg = null;
var currentInterval_img;

function loopShow() {
    if (null != loopImg) {
        var showImg = null;
        loopImg.each(function (index) {
            if ($(this).attr("show") == 1) {
                showImg = $(this);
            }
        });

        if (null != showImg) {
            var showImg_id = showImg.attr("id");
            switch (showImg_id) {
                case "divKV_img1":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img2").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt2').addClass('on');
                    });
                    break;

                case "divKV_img2":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img3").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt3').addClass('on');
                    });
                    break;

                case "divKV_img3":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img4").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt4').addClass('on');
                    });
                    break;

                case "divKV_img4":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img5").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt5').addClass('on');
                    });
                    break;    

                case "divKV_img5":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img1").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt1').addClass('on');
                    });
                    break; 
            }
        }
    }
}
function preShow() {
    if (null != loopImg) {
        var showImg = null;
        loopImg.each(function (index) {
            if ($(this).attr("show") == 1) {
                showImg = $(this);
            }
        });

        if (null != showImg) {
            var showImg_id = showImg.attr("id");
            switch (showImg_id) {
                /*
                case "divKV_img1":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img5").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt5').addClass('on');
                    });
                    break;
                 */
                    case "divKV_img1":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img5").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt5').addClass('on');
                    });
                    break;
                case "divKV_img2":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img1").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt1').addClass('on');
                    });
                    break;

                case "divKV_img3":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img2").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt2').addClass('on');
                    });
                    break;

                case "divKV_img4":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img3").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt3').addClass('on');
                    });
                    break;  

                case "divKV_img5":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img4").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt4').addClass('on');
                    });
                    break;  
                  /*
                case "divKV_img6":
                    showImg.attr("show", "0").fadeOut(500, function () {
                        $("#divKV_img4").fadeIn(500).attr("show", "1");

                        $('#divKV1_footbar div').removeClass('on');
                        $('#divKV1_footbar #bt4').addClass('on');
                    });
                    break;
                */       
            }
        }
    }
}



$(document).ready(function () {

    loopImg = $("#divKV1 div");
    // var currentInterval_img = window.setInterval("loopShow()", 8000);

    $('#divKV1_footbar div').click(function () {
        var divID = $(this).attr('id');

        $('#divKV1_footbar div').removeClass('on');
        $(this).addClass('on');

        $("#divKV_img1").hide().attr("show", "0");
        $("#divKV_img2").hide().attr("show", "0");
        $("#divKV_img3").hide().attr("show", "0");
        $("#divKV_img4").hide().attr("show", "0");
        $("#divKV_img5").hide().attr("show", "0");
       // $("#divKV_img7").hide().attr("show", "0");
        switch (divID) {
            case "bt1":
                $("#divKV_img1").fadeIn(500).attr("show", "1");
                break;

            case "bt2":
                $("#divKV_img2").fadeIn(500).attr("show", "1");
                break;

            case "bt3":
                $("#divKV_img3").fadeIn(500).attr("show", "1");
                break;
            case "bt4":
                $("#divKV_img4").fadeIn(500).attr("show", "1");
                break;
            case "bt5":
                $("#divKV_img5").fadeIn(500).attr("show", "1");
                break;

        }
    });
    $('#nextBtn').click(function(){
        clearInterval(currentInterval_img);
        loopShow();
        currentInterval_img = window.setInterval("loopShow()", 8000);
    });
    $('#preBtn').click(function(){
        clearInterval(currentInterval_img);
        preShow();
        currentInterval_img = window.setInterval("loopShow()", 8000);
    });

});