var totalBanners = 5;   // number of “feature” div
    var interval = 3000;    // the interval in seconds
    var selectedBanner = 1;
    $(window).load(function() {
        init();
    });
    function init(){
        $("#promotionArea").append(createNav(totalBanners));
        var j = 1;
        $("#imagelist a").each(function(j) {
            $(this).bind("click", function() {
                $("#feature" + j).fadeIn(700);
                for (var i = 0; i <= totalBanners; i++) {
                    if (i != j) $("#feature" + i).fadeOut(700);
                }
                $("#imagelist").find("a").removeClass("active");
                $("#showFeature" + j).addClass("active");
                selectedBanner = j;
            });
            j++;
        });
        // init first item
        $("#imagelist a").eq(0).trigger("click");
        setInterval(function() {
            $("#imagelist a").eq(selectedBanner - 1).trigger("click");
            selectedBanner++;
            if (selectedBanner > totalBanners)
                selectedBanner = 1;
        }, interval);
    }
    function createNav(total) {
        var nav;
        nav = "<ul id='imagelist'>";
        for (var i = 1; i <= total; i++) {
            if (i == 1) {
                nav += "<li><a id='showFeature" + i + "' href='#' class='active'>" + i + "</a></li>";
            } else {
                nav += "<li><a id='showFeature" + i + "' href='#'>" + i + "</a></li>";
            }
        }
        nav += "</ul>";
        return nav;
    }