var default_loading_image = `<img src="https://virtual-art-studio.com/doga/assets/images/load.gif" id="do_ga_loading_image" style="width:10% ; position: absolute;    top: 50%;    left: 50%;    transform: translateY(-50%) translateX(-50%);    -webkit- transform: translateY(-50%) translateX(-50%)" />`;

document.getElementById("do_ga_area").style.position = "relative";
document.getElementById("do_ga_area").innerHTML = default_loading_image;
document.getElementById("do_ga_area").style.background = "#000";
document.getElementById("do_ga_area").style.width = "100%";
var height = document.getElementById("do_ga_area").clientWidth / 1.3333333333333;
document.getElementById("do_ga_area").style.height = height + "px";

var iframeWidth = 0;

function frame_resize(){
    let element = document.getElementById("do_ga_area");
    element.style.margin = "0px";
    element.style.padding = "0px";
    iframeWidth = element.clientWidth;
    if(!document.getElementById("dogaIframe")){
    }else{
        document.getElementById("dogaIframe").style.width = iframeWidth + "px";
    }
}

var rs = window.addEventListener('resize', function(){
	setTimeout(function(){
		frame_resize();
	}, 300);
});

window.addEventListener("load", function(){
    frame_resize();
});

window.addEventListener("message", receiveMessage, false);

function receiveMessage(e) {
    if(e.data.kubun == "resize"){
        let scrollHeight = e.data.scrollHeight;
        var iframe_height = (scrollHeight + "").replace("px" , "");
        if(iframe_height < 0){
        }else{
            document.getElementById("dogaIframe").style.width = iframeWidth + "px";
            document.getElementById("dogaIframe").style.height = iframe_height + "px";
            document.getElementById("do_ga_area").style.height = document.getElementById("dogaIframe").style.height; //TODO
        }
    }
    if(e.data.kubun == "redirect"){
        document.location = e.data.url;
    }
}

var view = "https://virtual-art-studio.com/doga/doga/view/71/" + iframeWidth + "?second=&preview_mode=";

var iframe = document.createElement("iframe");
document.getElementById("do_ga_area").append(iframe);

iframe.src = view;
iframe.scrolling = "no";
iframe.id = "dogaIframe";
iframe.style.cssText = 'width:' + iframeWidth + 'px;height:' + iframeWidth + 'px;display:block;border:0px blue solid';
frame_resize();

iframe.addEventListener("load", iframe_onload);

function iframe_onload(){
    document.getElementById("do_ga_loading_image").style.display = "none";
    document.getElementById("do_ga_area").style.background = "";
}