function deadEnd1() {
    document.getElementById('room').innerHTML = '行き止まり';
    document.getElementById('image').setAttribute('src', 'clickable4.jpg');
    document.getElementById('door1').removeAttribute('coords');
    document.getElementById('door2').removeAttribute('coords');
    document.getElementById('door3').removeAttribute('coords');
    document.getElementById('back').setAttribute('coords', '231,298,231,330,221,330,241,353,261,331,251,331,251,298');
    document.getElementById('back').setAttribute('onclick', 'back1()');
}

function deadEnd2() {
    document.getElementById('room').innerHTML = '行き止まり';
    document.getElementById('image').setAttribute('src', 'clickable4.jpg');
    document.getElementById('door1').removeAttribute('coords');
    document.getElementById('door2').removeAttribute('coords');
    document.getElementById('door3').removeAttribute('coords');
    document.getElementById('back').setAttribute('onclick', 'back2()');
}

function deadEnd3() {
    document.getElementById('room').innerHTML = '行き止まり';
    document.getElementById('image').setAttribute('src', 'clickable4.jpg');
    document.getElementById('door1').removeAttribute('coords');
    document.getElementById('door2').removeAttribute('coords');
    document.getElementById('door3').removeAttribute('coords');
    document.getElementById('back').setAttribute('onclick', 'back3()');
}

function deadEndNazo2() {
    document.getElementById('room').innerHTML = '行き止まり';
    document.getElementById('image').setAttribute('src', 'nazo-memo1.png');
    document.getElementById('nazo').setAttribute('href', 'nazo1.png');
    document.getElementById('nazo').setAttribute('data-lightbox', 'group');
    document.getElementById('door1').removeAttribute('coords');
    document.getElementById('door2').removeAttribute('coords');
    document.getElementById('door3').removeAttribute('coords');
    document.getElementById('back').setAttribute('onclick', 'back2()');
}

function deadEndNazo3() {
    document.getElementById('room').innerHTML = '行き止まり';
    document.getElementById('image').setAttribute('src', 'nazo-memo1.png');
    document.getElementById('nazo').setAttribute('href', 'nazo1.png');
    document.getElementById('nazo').setAttribute('data-lightbox', 'group');
    document.getElementById('door1').removeAttribute('coords');
    document.getElementById('door2').removeAttribute('coords');
    document.getElementById('door3').removeAttribute('coords');
    document.getElementById('back').setAttribute('onclick', 'back3()');
}

function back1() {
    document.getElementById('room').innerHTML = '1つ目の部屋';
    document.getElementById('image').setAttribute('src', 'clickable1.jpg');
    document.getElementById('door1').setAttribute('coords', '104,112,3,60,3,343,103,273');
    document.getElementById('door1').setAttribute('onclick', 'deadEnd1()');
    document.getElementById('door2').setAttribute('coords', '215,135,265,241');
    document.getElementById('door2').setAttribute('onclick', 'deadEnd1()');
    document.getElementById('door3').setAttribute('coords', '375,112,479,57,478,339,375,271');
    document.getElementById('door3').setAttribute('onclick', 'back2()');
    document.getElementById('back').removeAttribute('coords');
}

function back2() {
    document.getElementById('room').innerHTML = '2つ目の部屋';
    document.getElementById('image').setAttribute('src', 'clickable2.jpg');
    document.getElementById('nazo').removeAttribute('href');
    document.getElementById('nazo').removeAttribute('data-lightbox');
    document.getElementById('door1').setAttribute('coords', '104,112,3,60,3,343,103,273');
    document.getElementById('door1').setAttribute('onclick', 'back3()');
    document.getElementById('door2').setAttribute('coords', '215,135,265,241');
    document.getElementById('door2').setAttribute('onclick', 'deadEndNazo2()');
    document.getElementById('door3').setAttribute('coords', '375,112,479,57,478,339,375,271');
    document.getElementById('door3').setAttribute('onclick', 'deadEnd2()');
    document.getElementById('back').setAttribute('coords', '231,298,231,330,221,330,241,353,261,331,251,331,251,298');
    document.getElementById('back').setAttribute('onclick', 'back1()');
}

function back3() {
    document.getElementById('room').innerHTML = '3つ目の部屋';
    document.getElementById('image').setAttribute('src', 'clickable3.jpg');
    document.getElementById('nazo').removeAttribute('href');
    document.getElementById('nazo').removeAttribute('data-lightbox');
    document.getElementById('door1').setAttribute('coords', '104,112,3,60,3,343,103,273');
    document.getElementById('door1').setAttribute('onclick', 'success()');
    document.getElementById('door2').setAttribute('coords', '215,135,265,241');
    document.getElementById('door2').setAttribute('onclick', 'deadEnd3()');
    document.getElementById('door3').setAttribute('coords', '375,112,479,57,478,339,375,271');
    document.getElementById('door3').setAttribute('onclick', 'deadEndNazo3()');
    document.getElementById('back').setAttribute('onclick', 'back2()');
}

function success() {
    document.getElementById('room').innerHTML = '脱出成功!!';
    document.getElementById('room').setAttribute('class', 'success');
    document.getElementById('image').removeAttribute('src');
    document.getElementById('image').removeAttribute('alt');
    document.getElementById('room').setAttribute('class', 'success');
    var replay = document.createElement('a');
    replay.textContent = 'もう一度プレイする';
    replay.setAttribute('class', 'replay');
    replay.setAttribute('href', 'home.html');
    document.getElementById('room').after(replay);
    var thank = document.createElement('p');
    thank.textContent = 'Thank you for playing!!';
    thank.setAttribute('class', 'thank');
    document.getElementById('room').after(thank);
}

$(window).on('keydown', function(e) {
    if(e.keyCode === 37) { // ←
        focus_prev();
        return false;
    }
    if(e.keyCode === 39) { // →
        focus_next();
        return false;
    }
});
 
// フォーカスを前に移動する
function focus_prev() {
    // 現在のフォーカスを取得
    var currentFocusIndex = $('area').index($(':focus'));
 
    if(currentFocusIndex > -1) {
        for (var i = 0; i < $('area').length; i++) {
            if(i === currentFocusIndex && i > 0) {
                $('area').eq(i - 1).focus();
            }
        }
    }
}
 
// フォーカスを次に移動する
function focus_next() {
    // 現在のフォーカスを取得
    var currentFocusIndex = $('area').index($(':focus'));
 
    if(currentFocusIndex > -1) {
        for (var i = 0; i < $('area').length; i++) {
            if(i === currentFocusIndex && i < $('area').length - 1) {
                $('area').eq(i + 1).focus();
            }
        }
    } else {
        $('area').eq(0).focus();
    }
}

$(document).ready(function() {
    $('#door1, #door2').keydown(function(event) {
        if (event.which === 13) {
            $('#door1, #door2').click(deadEnd1());
        }
    });
    $('#door3').keydown(function(event) {
        if (event.which === 13) {
            $('#door3').click(back2());
        }
    });
    $('#back').keyup(function(event) {
        if (event.which === 13) {
            $('#back').click(back1());
        }
    });
});