// xhrLoad 函數是一個非同步載入文件的函數
ht.Default.xhrLoad('./scenes/隧道1.json', function(text) {
    // 將 json 文件中的文本轉為我們需要的 json 格式的內容
    var json = ht.Default.parse(text);
    // 反序列化數據容器，解析用於生成對應的Data對象並添加到數據容器 這裡相當於把 json 文件中生成的 ht.Node 節點反序列化到數據容器中，這樣數據容器中就有這個節點了
    dm.deserialize(json);
});

dm.each(function(data) {
    // 對「電話」進行批量
    if (data.s('front.image') === 'assets/sos電話.png'){
        data.s('batch', 'sosBatch');
    }
    // 逃生通道批量（透明度也會影響性能）
    else if (data.s('all.color') === 'rgba(222,222,222,0.18)') {
        data.s('batch', 'emergencyBatch');
    }
    else if (data.s('shape3d') === 'models/隧道/攝影機.json' || data.s('shape3d') === 'models/隧道/橫洞.json' || data.s('shape3d') === 'models/隧道/捲簾門.json') {
        // 個別攝影機染色了 不做批量
        if(!data.s('shape3d.blend'))
            // 基礎批量什麼也不做
            data.s('batch', 'basicBatch');
    }
    else if (data.s('shape3d') === 'models/大型變壓器/變壓器.json') {    
        data.s('batch', 'tileBatch');
        data.setToolTip('單擊漫遊，雙擊車禍地點出現圖標');
    }
    else if (data.getDisplayName() === '地面') {
        // 設置隧道「地面」不可選中
        data.s('3d.selectable', false);
    }
    else if (data.s('shape3d') === 'models/隧道/排風.json') {
        // 排風扇的模型比較複雜，所以做批量
        data.s('batch', 'fanBatch');
    }
    else if (data.getDisplayName() === 'arrow') {
        // 隧道兩旁的箭頭路標
        if (data.getTag() === 'arrowLeft') data.s('shape3d.image', 'displays/abc.png');
        else data.s('shape3d.image', 'displays/abc2.png');
        data.s({
            'shape3d': 'billboard',
            // 快取，設置了 cache 的代價是需要設置 invalidateShape3dCachedImage
            'shape3d.image.cache': true,
            // 設置這個值，圖片上的鋸齒就不會太明顯了（若圖片類型為 json，則設置 shape3d.dynamic.transparent)
            'shape3d.transparent': true 
        });
        g3d.invalidateShape3dCachedImage(data);
    }
    // 隧道入口處的情報板
    else if (data.getTag() === 'board' || data.getTag() === 'board1') {
        // 業務屬性，用來控制文本的位置[x,y,width,height]
        data.a('textRect', [0, 2, 244, 46]); 
        // 業務屬性，設置文本內容
        data.a('limitText', '限速80，請開車燈');
        var min = -245;
        var name = 'board' + data.getId();
        window[name] = setInterval(function() {
            // 設置情報板中的文字向左滾動，並且當文字全部顯示時重複閃爍三次
            circleFunc(data, window[name], min);
        }, 100);
    }

    //給逃生通道上方的指示板 動態設置顏色
    var infos = ['人行橫洞1', '人行橫洞2', '人行橫洞3', '人行橫洞4', '車行橫洞1', '車行橫洞2', '車行橫洞3'];
    infos.forEach(function(info) {
        if(data.getDisplayName() === info) {
            data.a('emergencyColor', 'rgb(138, 138, 138)');
        }
    });

    infos = ['車道指示器', '車道指示器1', '車道指示器2', '車道指示器3'];
    infos.forEach(function(info) {
        if (data.getDisplayName() === info) {
            // 考慮到性能問題 將六面體變換為 billboard 類型元素
            createBillboard(data, 'assets/車道訊號-過.png', 'assets/車道訊號-過.png', info);
        }
    });
});

// 設置情報板中的文字向左滾動，並且當文字全部顯示時重複閃爍三次
function circleFunc(data, timer, min) {
    // 獲取當前業務屬性 limitText 的內容
    var text = data.a('limitText');
    // 設置業務屬性 textRect 文本框的坐標和大小
    data.a('textRect', [data.a('textRect')[0]-5, 2, 244, 46]); 
    if (parseInt(data.a('textRect')) <= parseInt(min)) {
        data.a('textRect', [255, 2, 244, 46]);
    }
    else if (data.a('textRect')[0] === 0) {
        clearInterval(timer);
        var index = 0;
        // 設置多個 timer 是因為能夠進入這個函數中的不止一個 data，如果在同一時間多個 data 設置同一個 timer，那肯定只會對最後一個節點進行動畫。後面還有很多這種陷阱，要注意
        var testName = 'testTimer' + data.getId();
        window[testName] = setInterval(function() {
            index++;
            // 如果情報板中文本內容為空
            if(data.a('limitText') === '') {
                setTimeout(function() {
                    // 設置為傳入的 text 值
                    data.a('limitText', text);
                }, 100);
            }
            else {
                setTimeout(function() {
                    // 若情報板中的文本內容不為空，則設置為空
                    data.a('limitText', ''); 
                }, 100);
            }
            // 重複三次 
            if(index === 11) { 
                clearInterval(window[testName]);
                data.a('limitText', text);
            }
        }, 100);

        setTimeout(function() {
            timer = setInterval(function() {
                // 回調函數
                circleFunc(data, timer, min);
            }, 100);
        }, 1500);
    }
}