$(document).ready(function() {
    $("#scrollable").scrollable({vertical: true, circular: true, keyboard: false});
});

$(document).ready(function() {
    var hoverflg = 0;
    var imgcnt = $("#scrollable .items div:not(:.cloned) img").size() - 1; // 1 origin
    var actidx = $("#scrollable .items div:not(:.cloned) img").index($("#scrollable .items div:not(:.cloned) .active")); // 0 origin
    var timeout = 0;
    // interval
    setInterval(function() {
        if( hoverflg || timeout ) { return; }
        var api = $("#scrollable").data("scrollable");
        if( actidx >= imgcnt ) actidx = 0; else actidx++;
        $("#scrollable .items img").removeClass("active");
        $("#scrollable .items div:not(:.cloned) img:eq(" + actidx + ")").addClass("active");
        $("#visualBlock .left img").ImageSwitch({
            Type:"ScrollIn",
            NewImage:$("#scrollable .items div:not(:.cloned) .active").attr("src"),
            Direction:"TopDown",
            EndOpacity:0
        });
        // でかい画像のリンク先書き換え
        $("#visualBlock .left a").attr("href", $("#scrollable .items div:not(:.cloned) .active").attr("name"));
	if($("#scrollable .items div:not(:.cloned) .active").hasClass('target_blank')) {
	    $("#visualBlock .left a").attr("target", "_blank");
	}else {
	    $("#visualBlock .left a").removeAttr("target");
	}
        // 表示対象とサムネイルの位置が違う場合にサムネイルをスクロール
        if( parseInt(actidx / 6) != api.getIndex() ) api.seekTo(parseInt(actidx / 6), 1000);
    }, 4000);
    // マウスがサムネイルの辺りにいる場合は切り替えを止める
    $("#visualBlock .right .inner").hover(function () { hoverflg = 1; },
                                          function () { hoverflg = 0; });
    // サムネイルクリックした時
    $("#scrollable .items img").click(function() {
        if( timeout ) { return; }
        if( $(this).hasClass("active") ) { return; }
        timeout = 1;
        $("#visualBlock .left img").ImageSwitch({
            Type:"ScrollIn",
            NewImage:$(this).attr("src"),
            Direction:"TopDown",
            EndOpacity:0
        });
        $("#scrollable .items img").removeClass("active");
        $(this).addClass("active");
        $("#visualBlock .left a").attr("href", $(this).attr("name"));
	if($("#scrollable .items div:not(:.cloned) .active").hasClass('target_blank')) {
	    $("#visualBlock .left a").attr("target", "_blank");
	}else {
	    $("#visualBlock .left a").removeAttr("target");
	}
        actidx = $("#scrollable .items div:not(:.cloned) img").index($("#scrollable .items div:not(:.cloned) .active")); // 0 origin
        setTimeout(function() { timeout = 0; }, 1500);
    });
});