var centerPosX = document.getElementById("gamespinner").clientWidth / 2;
var centerPosY = document.getElementById("gamespinner").clientHeight / 2;
var displayedGame = 0;
var spinDir = 1;

function gameObject(img) {
    this.img = img;

    this.x = img.clientLeft;
    this.y = img.clientTop;
    this.width = 730;
    this.height = 330;
    this.scale = 1;
    this.zindex = 1;

    this.targetX = this.x;
    this.targetY = this.Y;
    this.targetScale = this.scale;

    this.update = function () {
        if (this.x < this.targetX) this.x += 10;
        if (this.x > this.targetX) this.x -= 10;
        if (this.scale < this.targetScale) this.scale += 0.003;
        if (this.scale > this.targetScale) this.scale -= 0.003;

        img.style.width = (this.width * this.scale) + "px";
        img.style.height = (this.height * this.scale) + "px";
        img.style.left = centerPosX + (this.x - ((this.width * this.scale) / 2)) + "px";
        img.style.top = centerPosY + (this.y - ((this.height * this.scale) / 2)) + "px";
        img.style.zIndex = this.zindex;
        img.style.opacity = this.scale;
    }
}

function spinnerUpdate() {
    centerPosX = document.getElementById("gamespinner").clientWidth / 2;
    centerPosY = document.getElementById("gamespinner").clientHeight / 2;
    for (i = 0; i < gameArray.length; i++) {
        //gameArray[i].x = centerPosX;
        //gameArray[i].y = centerPosY;
        gameArray[i].update();
        if (gameArray[i].img.style.visibility != 'visible') gameArray[i].img.style.visibility = 'visible';
    }

    for(i=0;i<gameArray.length;i++)
    {
        gameArray[i].zindex = 0;
        for (x = 0; x < gameArray.length; x++) {
            if (gameArray[i].scale > gameArray[x].scale) gameArray[i].zindex++;
        }
    }
}

function spinnerChange() {
    displayedGame+=spinDir;
    if (displayedGame == 3) { displayedGame = 1; spinDir = -1; }
    if (displayedGame == -1) { displayedGame = 1; spinDir = 1; }

    switch (displayedGame) {
        case 0:
            gameArray[0].targetX = 0;
            gameArray[0].targetY = 0;
            gameArray[0].targetScale = 1;
            gameArray[1].targetX = 650; //150;
            gameArray[1].targetY = 0;
            gameArray[1].targetScale = 0.8;
            gameArray[2].targetX = 1150; //300;
            gameArray[2].targetY = 0;
            gameArray[2].targetScale = 0.6;
            break;
        case 1:
            gameArray[0].targetX = -650; // -150;
            gameArray[0].targetY = 0;
            gameArray[0].targetScale = 0.8;
            gameArray[1].targetX = 0;
            gameArray[1].targetY = 0;
            gameArray[1].targetScale = 1;
            gameArray[2].targetX = 650;// 150;
            gameArray[2].targetY = 0;
            gameArray[2].targetScale = 0.8;
            break;
        case 2:
            gameArray[0].targetX = -1150; // -300;
            gameArray[0].targetY = 0;
            gameArray[0].targetScale = 0.6;
            gameArray[1].targetX = -650;// -150;
            gameArray[1].targetY = 0;
            gameArray[1].targetScale = 0.8;
            gameArray[2].targetX = 0;
            gameArray[2].targetY = 0;
            gameArray[2].targetScale = 1;
            break;
    }
}

var gameArray = new Array();

gameArray[0] = new gameObject(document.getElementById("game1"));
gameArray[1] = new gameObject(document.getElementById("game2"));
gameArray[2] = new gameObject(document.getElementById("game3"));

gameArray[0].x = 0;
gameArray[0].zindex = 3;
gameArray[0].scale = 1;
gameArray[1].x = 650;
gameArray[1].zindex = 2;
gameArray[1].scale = 0.8;
gameArray[2].x = 1150;
gameArray[2].zindex = 1;
gameArray[2].scale = 0.6;
for (i = 0; i < gameArray.length; i++) {
    gameArray[i].targetX = gameArray[i].x;
    gameArray[i].targetY = gameArray[i].y;
    gameArray[i].targetScale = gameArray[i].scale;
    gameArray[i].update();
}

setInterval("spinnerUpdate()", 10);
setInterval("spinnerChange()", 5000);