viewportWidth = 760;
viewportHeight = 146;
imageWidth = 1024;
imageHeight = 197;

curPosX = 0;
curPosY = 0;
curSizeX = 1024;
curSizeY = 197;

function initImageRotator() {
    imageRotatorDiv = document.getElementById('imagerotator');
    imageElement = imageRotatorDiv.firstChild;
    imageElement.style.zIndex = "2";
    imageElement.src = nextImageName();
    initAnimationForObject(imageElement, (new Date()).getTime());
    rotatorFrame();
}

window.phase = 0;
function initAnimationForObject(obj, startTime) {
    phase++;
    obj.targPosX = 0;//(phase % 2 == 1) ? (viewportWidth - imageWidth) : 0;
    obj.targPosY = 0;
    obj.targSizeX = 1024;
    obj.targSizeY = 197;
    obj.startPosX = 0;//(phase % 2 == 0) ? (viewportWidth - imageWidth) : 0;
    obj.startPosY = 0;
    obj.startSizeX = 1024;
    obj.startSizeY = 197;
    obj.startTime = startTime;
    obj.endTime = obj.startTime + 15000;
}

function animateObject(obj) {
    proportion = (curTime - obj.startTime) / (obj.endTime - obj.startTime);
    if (proportion > 1) {
        if (obj.parentElement) obj.parentElement.removeChild(obj);
        return 0;
    }
    if (proportion < 0) {
        return 1;
    }
    
    obj.curPosX = proportion * (obj.targPosX - obj.startPosX) + obj.startPosX;
    obj.curPosY = proportion * (obj.targPosY - obj.startPosY) + obj.startPosY;
    obj.curSizeX = proportion * (obj.targSizeX - obj.startSizeX) + obj.startSizeX;
    obj.curSizeY = proportion * (obj.targSizeY - obj.startSizeY) + obj.startSizeY;
    
//    obj.style.top = obj.curPosY + "px";
//    obj.style.left = obj.curPosX + "px";
//    obj.style.width = obj.curSizeX + "px";
//    obj.style.height = obj.curSizeY + "px";
    
    if (proportion > 0.80) {
        p2 = (proportion - 0.80) / 0.20;
        obj.style.opacity = 1 - p2;
    }    
    
    return 1;
}

window.lastImageNum = -1;
function nextImageName() {
    return "/images/rotate/gimmeimage.php";
}

window.slowFrameCounter = 0;
window.lastFrameTime = 0;
window.deltaTime = 1;
function rotatorFrame() {
    curTime = (new Date()).getTime();
    if (window.lastFrameTime > 0) {
        deltaTime = curTime - window.lastFrameTime;
        if (deltaTime > 1000/15) window.slowFrameCounter++;
        else window.slowFrameCounter = 0;
    }
    window.lastFrameTime = curTime;
    
    if (animateObject(imageElement) == 0) {
        imageElement = nextImageElement;
        nextImageElement = undefined;
        imageElement.style.zIndex = "2";
    }
    if (window.nextImageElement) animateObject(nextImageElement);
    
    if (!window.nextImageElement) {        
        nextImageElement = document.createElement('img');
        nextImageElement.src = nextImageName();
        nextImageElement.style.zIndex = "1";
        imageRotatorDiv.appendChild(nextImageElement);
        initAnimationForObject(nextImageElement, imageElement.endTime - 3000);
    }
    if (window.slowFrameCounter < 5 && deltaTime < 10000) setTimeout("rotatorFrame()", 1000/30);
    if (window.slowFrameCounter >= 5) {
        nextImageElement.style.opacity = 1;
    }
}