// 画像のパスを設定します
var images = [
    "./img/top_image/shirakami01.jpg", "./img/top_image/tazawako01.jpg", "./img/top_image/chokaisan01.jpg", "./img/top_image/chokaisan02.jpg",
    "./img/top_image/oga_nyudouzaki01.jpg", "./img/top_image/ohgata01.jpg", "./img/top_image/ohgata02.jpg", "./img/top_image/taiheizan01.jpg",
    "./img/top_image/taiheizan02.jpg", "./img/top_image/taiheiko01.jpg", "./img/top_image/taiheiko02.jpg", "./img/top_image/komagatake01.jpg",
    "./img/top_image/komagatake02.jpg", "./img/top_image/omonogawa01.jpg", "./img/top_image/omonogawa02.jpg", "./img/top_image/omonogawa03.jpg",
    "./img/top_image/omonogawa04.jpg", "./img/top_image/akitacity01.jpg", "./img/top_image/marina_akita01.jpg", "./img/top_image/sensyukouen01.jpg",
    "./img/top_image/komachi01.jpg", "./img/top_image/akitakou01.jpg"
];
// 対応するタイトルを設定します
var image_titles = [
    "八森 岩館海岸 / 白神山地", "田沢湖畔", "鳥海山", "象潟 / 鳥海山",
    "男鹿 入道崎", "大潟村（春）", "大潟村（秋）", "太平山 / 男鹿半島",
    "太平山（山頂）", "森吉 太平湖", "森吉 太平湖", "秋田駒ケ岳（山頂）",
    "秋田駒ケ岳 / 田沢湖", "雄物川河口", "雄物川河口 / 秋田市街", "雄物川河口",
    "雄物川 / 日本海 / 男鹿半島", "秋田市街 / 男鹿半島", "秋田マリーナ", "千秋公園 / 秋田駅周辺",
    "こまちスタジアム", "秋田港"
];
// 画像が切り替わる秒数を設定します
var intNextSec = 5;

/****************** programs *****************/
// onLoad Event
window.onload = function() {
    start('top_image');
};

var _target_element = null;
var _timeout_id = 0;
var __timeout_id = 0;
var _current_image = 0;
var _current_element = null;
var _next_element = null;
var _opacity = 1.0;

var intActionSec = 0;

function init(strTargetId) {
    var e = document.getElementById(strTargetId);    // すりかえ元IMGエレメント

    e.parentNode.style.position = "relative";
    e.parentNode.style.top = "0px";
    e.parentNode.style.left = "0px";

    //var strClone = '<img id="imgchanger" style="position:absolute;top:0px;left:0px;display:none;">';
    //e.parentNode.innerHTML += strClone;
	var clone = document.createElement(e.tagName);
	clone.width = e.width;
	clone.height = e.height;
	clone.style.position = "absolute";
	clone.style.top = "0px";
	clone.style.left = "0px";
	clone.style.display = "none";
	clone.id = "imgchanger";
	e.parentNode.appendChild(clone);

    intNextSec *= 1000;   // ミリ秒にする
}

// 開始メソッド strTargetId=すりかえるIMGエレメントのID, intStartImage=開始イメージ番号
function start(strTargetId, intStartImage) {
    init(strTargetId);

    if (isNaN(intStartImage)) { intStartImage = 0; }        // 数値でない場合
    _target_element = document.getElementById(strTargetId); // すりかえ元IMGエレメント
    _clone_element = document.getElementById("imgchanger"); // すりかえ用IMGエレメント

    _current_image = intStartImage;    // 開始イメージ番号

    // すりかえ用IMGエレメントの初期設定
    with (_clone_element.style) {
        zIndex = "0";    // 背面に表示
        filter = "alpha(opacity=0)";  // IE filter
        opacity = 0.0;      // CSS3 opacity
        MozOpacity = 0.0;   // Mozilla opacity
        display = "";     // 表示状態
    }
    _target_element.src = images[_current_image];
    _current_element = _clone_element;  // アクションを行うエレメント
    _next_element = _target_element;

    _next();
}

// すりかえループ
function loop() {
    // まずTimeoutがされていたらクリアする
    clearTimeout(_timeout_id);

    // アクションループをまわす
    __timeout_id = setTimeout(_loop, intActionSec);
}

// アクションループ
function _loop() {
    // まずTimeoutがされていたらクリアする
    clearTimeout(__timeout_id);

    // アクションを行うエレメントに設定する
    with (_current_element.style) {
        filter = "alpha(opacity="+(_opacity*100)+")";  // IE filter
        opacity = _opacity;      // CSS3 opacity
        MozOpacity = _opacity;   // Mozilla opacity
    }
    with (_next_element.style) {
        filter = "alpha(opacity="+((1.0-_opacity)*100)+")";  // IE filter
        opacity = 1.0-_opacity;      // CSS3 opacity
        MozOpacity = 1.0-_opacity;   // Mozilla opacity
    }
    _opacity -= 0.1;  // opacity値を減算

    if (_opacity < 0) {
        // opacity値が 0 未満
        // アクションループの終了→次へ
        _next();
    } else {
        // 再びアクションループの呼び出し
        __timeout_id = setTimeout(_loop, intActionSec);
    }
}

// 次へ
function _next() {
    // イメージのタイトルを表示
    document.getElementById("image_title").innerHTML = image_titles[_current_image];

    // 現在のイメージ番号を次にする
    _current_image = (_current_image >= images.length-1) ? 0 : _current_image+1;
    // アクションを行っているエレメントのイメージを変更
    _current_element.src = images[_current_image];
    if (_clone_element.style.zIndex == "0") {
        // すりかえ用エレメントが前面の場合
        _clone_element.style.zIndex = "-1";    // すりかえ用を背面
        _target_element.style.zIndex = "0";    // すりかえ元を前面

        // すりかえ元をアクションを行うエレメントにする
        _current_element = _target_element;
        _next_element = _clone_element;
    } else {
        // すりかえ元エレメントが前面の場合
        _target_element.style.zIndex = "-1";  // すりかえ元を背面
        _clone_element.style.zIndex = "0";    // すりかえ用を前面

        // すりかえ用をアクションを行うエレメントにする
        _current_element = _clone_element;
        _next_element = _target_element;
    }

    _opacity = 1.0;    // opacity値の初期化

    // 次のすりかえをintNextSecミリ秒後実行する
    _timeout_id = setTimeout(loop, intNextSec);
}


// 停止メソッド?
function stop() {
    clearTimeout(__timeout_id);
    clearTimeout(_timeout_id);
}