var BannerImageIDs = new Array();
var ButtonImageUncheckIDs = new Array();
var ButtonImageCheckIDs = new Array();

var TRANSITION_TIME = 7000; // Milliseconds of time before we change image
var MaxBannerImageCount = 6; // Maximum images that can be loaded
var BannerImageIndex = 0; // Which image is the current image
var MAX_PROMO_OPACITY = 100; // The maximum opacity of the promotional image
var MIN_PROMO_OPACITY = 0; // The minimum opacity of the promotional image
var BannerPaused = 0;
var randomNumber = Math.floor(Math.random() * 5); // randomize start sequence

var RotationPlaying = true;
var IsDebug = false;

function SetOpacity(index, opacityLevel) {
    var eStyle = BannerImageIDs[index].style;
    eStyle.opacity = opacityLevel / 100;
    eStyle.filter = 'alpha(opacity=' + opacityLevel + ')';
}

function SetBannerImage() {
    if (IsDebug) {
        debugger;
    }
    for (ii = 0; ii < BannerImageCount; ii++) {
        if (ii < BannerImageIndex || ii > BannerImageIndex) {
            SetOpacity(ii, MIN_PROMO_OPACITY);
            //BannerImageIDs[ii].filters[0].opacity=MIN_PROMO_OPACITY;
            if (ButtonImageCheckIDs[ii]) {
                ButtonImageCheckIDs[ii].style.display = 'none';
            }
            if (ButtonImageUncheckIDs[ii]) {
                ButtonImageUncheckIDs[ii].style.display = 'block';
            }
        }
        if (ii == BannerImageIndex) {
            SetOpacity(ii, MAX_PROMO_OPACITY);
            //BannerImageIDs[ii].filters[0].opacity=MAX_PROMO_OPACITY;
            if (ButtonImageCheckIDs[ii]) {
                ButtonImageCheckIDs[ii].style.display = 'block';
            }
            if (ButtonImageUncheckIDs[ii]) {
                ButtonImageUncheckIDs[ii].style.display = 'none';
            }
        }
    }
    document.getElementById('ImageURL').href = BannerTargetURLs[BannerImageIndex];
}

function RotateImages() {
    if (BannerPaused == 0) {
        console.log('rotating images...');
        BannerImageIndex += 1;
        if (BannerImageIndex == BannerImageCount) {
            BannerImageIndex = 0;
        }
        SetBannerImage();
        if (!RotationPlaying) {
            return;
        }
        window.setTimeout(function(){
            RotateImages()
        }, TRANSITION_TIME);
    }
    else {
        console.log('rotating images  ...paused! resuming after transition');
        BannerPaused = 0;
        window.setTimeout(function(){
            RotateImages()
        }, TRANSITION_TIME);
    }
}

function InitializeRotatingBanners() {
    if (typeof(console) == 'undefined') {
        console = {};
        console.log = function () {};
    }
    console.log('InitializeRotatingBanners has been called');
    // if the web part is in designer mode, the variables will not be rendered
    if (typeof(BannerImageCount) == 'undefined') {
        console.log('BannerImageCount is undefined');
        return;
    }
    for (ii = 1; ii <= MaxBannerImageCount; ii++) {
        BannerImageIDs[ii - 1] = document.getElementById('RotatingPromoIndex' + ii);
        ButtonImageCheckIDs[ii - 1] = document.getElementById('ButtonImage' + ii);
        ButtonImageUncheckIDs[ii - 1] = document.getElementById('ButtonImage' + ii + "-2");
        if (ii > BannerImageCount) {
            var el = document.getElementById('ButtonImage' + ii);
            if (el) {
                el.style.display = 'none';
            }
            var el2 = document.getElementById('ButtonImage' + ii + "-2");
            if (el2) {
                el2.style.display = 'none';
            }
        }
        if (ii <= BannerImageCount) {
            // set the source of the images
            BannerImageIDs[ii - 1].src = BannerImageURLs[ii - 1];
            SetOpacity(ii - 1, MAX_PROMO_OPACITY);
        }
    }
    //document.getElementById('BannerLearnMoreURL').href = BannerTargetURLs[BannerImageIndex];
    document.getElementById('ImageURL').href = BannerTargetURLs[BannerImageIndex];

    // this ensures rotation starts with image index 0
    // BannerImageIndex = BannerImageCount - 1;
    BannerImageIndex = randomNumber;
    
    // Start the rotation sequence
	RotateImages();
}

function GoToBannerImage(index) {
    if ((index > 0) && (index <= BannerImageCount)) {
        BannerImageIndex = index - 1;
        BannerPaused = 1;
        console.log('pausing rotation!');
        SetBannerImage();
    }
}