var ring = document.getElementById('top-one');
var ringContent = document.getElementById('content-artist-one');

var game = document.getElementById('top-two');
var gameContent = document.getElementById('content-artist-two');

var wall = document.getElementById('top-three');
var wallContent = document.getElementById('content-artist-three');

var anim;
var controll = 1;

ring.onmouseover = openR;
game.onmouseover = openG;
wall.onmouseover = openW;

ringContent.style.height = 360 + 'px';
gameContent.style.height = 0 + 'px';
wallContent.style.height = 0 + 'px';

function openR(){
    if(controll == 2){
        animOpenRing();
        animCloseGame();
    }
    if(controll == 3){
        animOpenRing();
        animCloseWall();
    }
    controll = 1
}

function openG(){
    if(controll == 1){
        animOpenGame();
        animCloseRing();
    }
    
    if(controll == 3){
        animOpenGame();
        animCloseWall();
    }
    controll = 2
}

function openW(){
    if(controll == 1){
        animOpenWall();
        animCloseRing();
    }
    if(controll == 2){
        animOpenWall();
        animCloseGame();
    }
    controll = 3
}
velocity = 30;
animOpenRing = function(){
    ring.onmouseover = null;
    game.onmouseover = null;
    wall.onmouseover = null;
    ring.className += ' on';
    game.className = 'top-side';
    wall.className = 'top-side';
    ringContent.style.height = parseInt(ringContent.style.height) + velocity + 'px';
    anim = setTimeout('animOpenRing()', 1)
    if(parseInt(ringContent.style.height) == 330){
        clearTimeout(anim);
        ringContent.style.height = 360 + 'px';
        ring.onmouseover = openR;
        game.onmouseover = openG;
        wall.onmouseover = openW;
    }
}
animCloseRing = function(){
    ringContent.style.height = parseInt(ringContent.style.height) - velocity + 'px';
    anim = setTimeout('animCloseRing()', 1)
    if(parseInt(ringContent.style.height) == 30){
        clearTimeout(anim);
        ringContent.style.height = 0 + 'px'
    }
}

animOpenGame = function(){
    ring.onmouseover = null;
    game.onmouseover = null;
    wall.onmouseover = null;
    game.className += ' on';
    ring.className = 'top-side';
    wall.className = 'top-side';
    gameContent.style.height = parseInt(gameContent.style.height) + velocity + 'px';
    anim = setTimeout('animOpenGame()', 1)
    if(parseInt(gameContent.style.height) == 330){
        clearTimeout(anim);
        gameContent.style.height = 360 + 'px';
        ring.onmouseover = openR;
        game.onmouseover = openG;
        wall.onmouseover = openW;
    }
}
animCloseGame = function(){
    gameContent.style.height = parseInt(gameContent.style.height) - velocity + 'px';
    anim = setTimeout('animCloseGame()', 1)
    if(parseInt(gameContent.style.height) == 30){
        clearTimeout(anim);
        gameContent.style.height = 0 + 'px'
    }
}

animOpenWall = function(){
    ring.onmouseover = null;
    game.onmouseover = null;
    wall.onmouseover = null;
    wall.className += ' on';
    ring.className = 'top-side';
    game.className = 'top-side';
    wallContent.style.height = parseInt(wallContent.style.height) + velocity + 'px';
    anim = setTimeout('animOpenWall()', 1)
    if(parseInt(wallContent.style.height) == 330){
        clearTimeout(anim);
        wallContent.style.height = 360 + 'px';
        ring.onmouseover = openR;
        game.onmouseover = openG;
        wall.onmouseover = openW;
    }
}
animCloseWall = function(){
    wallContent.style.height = parseInt(wallContent.style.height) - velocity + 'px';
    anim = setTimeout('animCloseWall()', 1)
    if(parseInt(wallContent.style.height) == 30){
        clearTimeout(anim);
        wallContent.style.height = 0 + 'px'
    }
}