var totalBanners = 5;   // max number of “banner” div
    var interval = 6000;    // 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() {
                for (var i = 0; i <= totalBanners; i++) {
                    if (i != j) {
                        if ($("#feature" + i + ":visible").length > 0) {
                            if (ie8OrLess) {
                                $("#feature" + i + " .text").hide();
                            }
                            $("#feature" + i).fadeOut(800);
                            break;
                        }
                    }
                }

                if (ie8OrLess || $("#feature" + j + " .text:hidden")) {
                    $("#feature" + j + " .text").show();
                }
                if (ie8OrLess) {
                    // only make the img (which may be within an anchor) fade in
                    // IE 6/7 can't hack the transparency of the text area and opacity change at the same time
                    if ($("#feature" + j + " a").length > 0) {
                        $("#feature" + j + " a").css("display", "none");
                    } else {
                        $("#feature" + j + " img").css("display", "none");
                    }

                    $("#feature" + j).css("display", "block");
                    if ($("#feature" + j + " a").length > 0) {
                        $("#feature" + j + " a").fadeIn(800);
                    } else {
                        $("#feature" + j + " img").fadeIn(800);
                    }
                } else {
                    $("#feature" + j).fadeIn(800);
                }

                $("#imagelist").find("a").removeClass("active");
                $("#showFeature" + j).addClass("active");

                selectedBanner = j;
                return false;
            });
            j++;
        });


        setInterval(function() {

            $("#imagelist a").eq(selectedBanner - 1).trigger("click");

            selectedBanner++;
            if (selectedBanner > totalBanners)
                selectedBanner = 1;

        }, interval);
    
    }
    
    function createNav(total) {
        var nav;
        var actualCount = 0;

        nav = "<ul id='imagelist'>";

        for (var i = 1; i <= total; i++) {
            if ($("#feature" + i).length > 0) {
                actualCount++;
                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>";
                }
            }
        }

        // in case there aren't the max allowed amount of banners
        totalBanners = actualCount;
        nav += "</ul>";

        return nav;
    }