var currentPane = 0;
var ShiftTimer;
var rate = 10; // milliseconds between frames
var transrate = 2;  // increment transparency by each frame
var hold = 6000;  // milliseconds to hold on an image
var maxHeight = 0;

function startRotater(){  
    if(document.getElementById("RotatorPane_0") != null && document.getElementById("RotatorPane_1") != null){
        var count = 0;
        do{
            document.getElementById("RotatorPane_" + count).className = "rotPane";
            if(document.getElementById("RotatorPane_" + count).offsetHeight - 42 > maxHeight){
                maxHeight = document.getElementById("RotatorPane_" + count).offsetHeight - 42;
            };
            if(count > 0){
                document.getElementById("RotatorPane_" + count).className = "rotPane hidden";
            }
            count++;
        }while(document.getElementById("RotatorPane_" + count) != null)
        document.getElementById("RotatorPane_0").style.height = maxHeight + "px";
        
        ShiftTimer = setTimeout(function() { fadeOutImage(document.getElementById("RotatorPane_0") , 100); }, hold);
    }
}

function fadeOutImage(targetImage, opacity) {
    if (opacity > 0) {
        opacity -= transrate;
        if (opacity < 0) opacity = 0;

        if (targetImage.filters) {
            try {
	            targetImage.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
            } catch (e) {
	            // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
	            targetImage.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
            }
        } else {
            targetImage.style.opacity = opacity / 100;
        }
    }

    if (opacity > 0) {
        ShiftTimer = setTimeout(function() { fadeOutImage(targetImage, opacity); }, rate);
    }else{
        targetImage.className = "rotPane hidden";
        unHighlightThumb();
        if(document.getElementById("RotatorPane_" + (currentPane + 1)) != null){
            currentPane = currentPane + 1;
        }else{
            currentPane = 0;
        }
        highlightThumb();
        targetImage = document.getElementById("RotatorPane_" + currentPane);
        targetImage.className = "rotPane";
        targetImage.style.height = maxHeight + "px";
        if (targetImage.filters) {
	        try {
		        targetImage.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
	        } catch (e) {
		        // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
		        targetImage.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
	        }
        } else {
	        targetImage.style.opacity = 0;
        }
        fadeInImage(targetImage, 0);
    }
}

function fadeInImage(targetImage, opacity) {
    if (opacity < 100) {
        opacity += transrate;
        if (opacity > 100) opacity = 100;

        if (targetImage.filters) {
	        try {
		        targetImage.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
	        } catch (e) {
		        // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
		        targetImage.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
	        }
        } else {
	        targetImage.style.opacity = opacity / 100;
        }
    }

    if (opacity < 100) {
        ShiftTimer = setTimeout(function() { fadeInImage(targetImage, opacity); }, rate);
    }else{
        targetImage.style.opacity = '';
        targetImage.style.filter = '';
        ShiftTimer = setTimeout(function() { fadeOutImage(targetImage, opacity); }, hold);
    }
}

function unHighlightThumb(){
    document.getElementById("Thumb_" + currentPane).className = "";
}

function highlightThumb(){
    document.getElementById("Thumb_" + currentPane).className = "current";
}

function switchPaneImage(id) {
    clearTimeout(ShiftTimer);
    fadePrev(document.getElementById("RotatorPane_" + currentPane), 0, id);

}

function fadePrev(targetImage, opacity, id) {
    if (targetImage.filters) {
        try {
	        targetImage.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
        } catch (e) {
	        // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
	        targetImage.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
        }
    } else {
        targetImage.style.opacity = 0;
    }
    targetImage.className = "rotPane hidden";
    unHighlightThumb();
    currentPane = id;
    highlightThumb();
    targetImage = document.getElementById("RotatorPane_" + currentPane);
    targetImage.style.height = maxHeight + "px";
    targetImage.className = "rotPane";
    if (targetImage.filters) {
        try {
	        targetImage.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
        } catch (e) {
	        // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
	        targetImage.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
        }
    } else {
        targetImage.style.opacity = 0;
    }
    fadeInImage(targetImage, 0);
}

startRotater();