var TimeToFade = 1000.0;
var nowArryName = "one";
var nowIndex = "0";
var imgJson = { "one": { "0": "Images/bg_knights-tour.jpg", "1": "Images/bg_sudoku.jpg", "2": "Images/bg_urbanjumble.jpg" }, "two": { "0": "Images/bg_repeat.jpg", "1": "Images/bg_jumpeg.jpg", "2": "Images/bg_hangman.jpg" }, "three": { "a": "Images/feat7.png", "b": "Images/feat8.png", "c": "Images/feat9.png"} };

function fadeImg(group) {
    nowArryName = group;
    switch (nowIndex) {
        case "0":
            nowIndex = "1";
            break;
        case "1":
            nowIndex = "2";
            break;
        case "2":
            nowIndex = "0";
            break;
    }
    fade("imgTarget", nowIndex);
}

function fade(eid, type) {
    var element = document.getElementById(eid);
    if (element == null)
        return;


    if (element.FadeState == null) {
        if (element.style.opacity == null || element.style.opacity == ''
       || element.style.opacity == '1')
            element.FadeState = 2;
        else
            element.FadeState = -2;
    }

    if (element.FadeState == 1 || element.FadeState == -1) {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
        changeImage(element, imgJson[nowArryName][type]);
    }
    else {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade;
        setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "','" + type + "')", 33);
    }
}

function animateFade(lastTick, eid, type) {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(eid);

    if (element.FadeTimeLeft <= elapsedTicks) {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';

        if (isIE6) {
            if (element.filters.alpha == undefined) {
                element.style.filter += 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';
            }
            else {
                element.filters.alpha.opacity = element.FadeState == 1 ? 100 : 0;
            }
        }
        else {
            element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';
        }
        
        element.FadeState = element.FadeState == 1 ? 2 : -2;

        if (element.FadeState == -2) {
            changeImage(element, imgJson[nowArryName][type]);
            fade(eid);
        }
        return;
    }

    element.FadeTimeLeft -= elapsedTicks;
    var newOpVal = element.FadeTimeLeft / TimeToFade;
    if (element.FadeState == 1)
        newOpVal = 1 - newOpVal;

    element.style.opacity = newOpVal;

    if (isIE6) {
        if (element.filters.alpha == undefined) {
            element.style.filter += 'alpha(opacity = ' + (newOpVal * 100) + ')';
        }
        else {
            element.filters.alpha.opacity = newOpVal * 100;
        }
    }
    else {
        element.style.filter = 'alpha(opacity = ' + (newOpVal * 100) + ')';
    }

    setTimeout("animateFade(" + curTick + ",'" + eid + "','" + type + "')", 33);
}

function changeImage(target, targetImg) {
    if (targetImg != undefined) {
        if (isIE6 && target.src.toLowerCase().lastIndexOf("x.gif") != -1) {
            if (target.getAttribute("source") != targetImg) {
                target.setAttribute("source", targetImg);
                target.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = targetImg;
            }
        }
        else {
            if (target.src != targetImg) {
                target.src = targetImg;
            }
        }
    }
}