jQuery(function() {
url = parent.document.URL;
var iframe = document.createElement('iframe');
let width = 480;
let height = 600;
let initialWith = '220';
let buttonWidth = initialWith + 'px';
let frameWidth = width + "px";
let frameHeight = height + "px";
let negativeHeight = '-' + (height - 49) + 'px';
let responsiveWidth = "768";

iframe.setAttribute('id', 'customer-chatbox');
iframe.setAttribute("src", "https://chat.88livecom.com/widget_content?token=91378264&url="+url);
iframe.style.width        = buttonWidth;
iframe.style.height       = frameHeight;
iframe.style.position     = 'fixed';
iframe.style.overflow     = 'hidden';
iframe.style.zIndex       = 999999;

iframe.style.right    = 0;
iframe.style.marginRight  = '5px';

iframe.style.marginBottom  = negativeHeight;
iframe.style.bottom       = 0;
iframe.border             = 0;
iframe.marginwidth        = 0;
iframe.marginWidth        = 0;
iframe.marginheight       = 0;
iframe.marginHeight       = 0;
iframe.frameBorder        = 0;

//document.body.prepend(iframe);
document.body.appendChild(iframe);

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



function receiveMessage(event) {

if(event.data == "show_hide"){
let x = document.getElementById("customer-chatbox");

//check if window is full screen
if(x.style.height == "100%" && jQuery(window).width() > responsiveWidth){
x.style.width = frameWidth;
x.style.height = "600px";
x.contentWindow.postMessage('small_screen', '*');
}else{
x.style.height = "600px";
x.contentWindow.postMessage('small_screen', '*');
}

if(jQuery(window).width() > responsiveWidth){
// desktop window
if(x.style.marginBottom != "0px"){
// open
// x.style.width = frameWidth;
jQuery(x).animate({width: frameWidth}, {duration: 100});
jQuery(x).animate({marginBottom: '0px'});
x.contentWindow.postMessage('class_down', '*');
}else{
// close
jQuery(x).animate({marginBottom: negativeHeight, width: buttonWidth});
x.contentWindow.postMessage('class_up', '*');
}

}else{
//  sp window
if(x.style.marginBottom != "0px"){
x.style.height = "100%";
jQuery(x).animate({marginBottom: '0px'});
x.contentWindow.postMessage('full_screen', '*');
x.contentWindow.postMessage('class_down', '*');
}else{
jQuery(x).animate({marginBottom: negativeHeight});
x.contentWindow.postMessage('class_up', '*');
}
}

}else if(event.data == "show_fullscreen"){
let x = document.getElementById("customer-chatbox");
if(x.style.width == frameWidth){
x.style.width  = "100%";
x.style.height = "100%";
x.style.marginRight  = '0px';
x.contentWindow.postMessage('full_screen', '*');
}else{
x.style.width  = frameWidth;
x.style.height = "600px";
x.style.marginRight  = '5px';
x.contentWindow.postMessage('small_screen', '*');
}
}
}

jQuery(window).on('load resize', function(e) {
if(jQuery(window).width() <= responsiveWidth){
let x = document.getElementById("customer-chatbox");
jQuery(x).css("width","100%");

if(x.style.marginBottom != "0px"){
jQuery(x).css("height","600px");
}else{
jQuery(x).css("height","100%");
}

jQuery(x).css("margin-right","0px");
x.contentWindow.postMessage('responsive', '*');
}else{
let x = document.getElementById("customer-chatbox");
if(x.style.marginBottom != "0px"){
// closed
jQuery(x).css("width",buttonWidth);
}else{
// open
jQuery(x).css("width",frameWidth);
}
// jQuery(x).css("width",buttonWidth);
jQuery(x).css("margin-right","5px");
jQuery(x).css("height","600px");
x.contentWindow.postMessage('desktop', '*');
}
});

});