var lastID = 1;
var isFading = false;
var timeToFade = 250.0;

window.onload = function() {
    var obj;
    //obj = document.getElementById("image1chkid1");
    //obj.FadeState = 2;
    
    //    for (var i = 1; i <= 4; i++) {
    //        fade("image1chkid" + lastID, "image1chkid" + i);
    //        lastID = lastID >= 4 ? 1 : lastID++;
    //    }
    //cycleImages();
}

function cycleImages()
{
    toggleCheck(document.getElementById("panel1chkid" + lastID));
    lastID++;
    if (lastID > 4) lastID = 1;
    setTimeout("cycleImages();", 4000);
}

function toggleCheck(object)
{
    if (isFading) return;

    // get id index
    var idx = object.id.substring(object.id.length - 1, object.id.length);
    var cssAttrChk = object.getAttribute("class") == null ? "className" : "class";
    var cssAttrImg = document.getElementById("image1chkid1").getAttribute("class") == null ? "className" : "class";
    
    var eid1;
    for(var i=1; i<=4; i++)
    {
        // checklist
        document.getElementById("panel1chkid" + i).setAttribute(cssAttrChk, "checklist");
            
        // images
        var cls = document.getElementById("image1chkid" + i).getAttribute(cssAttrImg);
        if (cls == "visible"){ 
            eid1 = i;
            document.getElementById("image1chkid" + eid1).setAttribute(cssAttrImg, "");
        }
    }

    document.getElementById("panel1chkid" + idx).setAttribute(cssAttrChk, "checklist checked");
    document.getElementById("image1chkid" + idx).setAttribute(cssAttrImg, "visible");
    fade("image1chkid" + eid1, "image1chkid" + idx);
}

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

    if(element.FadeState == null)
    {
        if(element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '0.8')
        {
          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;
    }
    else
    {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = timeToFade;
        element.style.display = element.FadeState == 2 ? 'none' : 'block';
        setTimeout("animateFade(" + new Date().getTime() + ",'" + eid1 + "','" + eid2 + "')", 33);
    }
}


function animateFade(lastTick, eid1, eid2)
{
    isFading = true;
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(eid1);

    if(element.FadeTimeLeft <= elapsedTicks)
    {
        element.style.display = element.FadeState == 1 ? 'block' : 'none';
        element.style.opacity = element.FadeState == 1 ? '.85' : '0';
        element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '85' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;

        // finished fading - move to next image
        fade(eid2, null);
        isFading = false;
        return;
    }

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

    newOpVal = newOpVal*0.85;
    element.style.opacity = newOpVal;
    element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

    setTimeout("animateFade(" + curTick + ",'" + eid1 + "', '" + eid2 + "')", 33);
}