'use strict';
/*globals document, console, XMLHttpRequest*/

//console.log('hello from server');

(function(global) {
    var serverHost = '//instapos.org:8443/widget/';
    var partyId = '19';
	var service = 'undefined';
    var useIframe = 'true';
	var httpType = 'https';
	var BASEURL = 'https://instapos.org:19443/widget/';
	var SOCKURL = 'wss://instapos.org:8443';
	var WEBHOOKS = 'https://instapos.org:8443';

    init();
    injectStyles();
	//injectJs();
	
    function init() {
        var fooWidgets = document.querySelectorAll('#openBox');
        for (var i = 0; i < fooWidgets.length; ++i) {
            var fooWidget = fooWidgets[i];
            processFooWidget(fooWidget);
        }
    }

    function processFooWidget(fooWidget) {
        var id = fooWidget.getAttribute('data-widget-box');
        var processed = fooWidget.getAttribute('data-foo-processed');
        if (!id || processed === 'done') {
            //skip this one as it has either already been processed, or lacks an ID
            //This is done to ensure logic is not executed twice in the event that the
            //user erroneously embeds the script tag more than once on a single page
            console.log('skipping element:', fooWidget);
            return;
        }
        createFooWidget(fooWidget, id);
    }

    function createFooWidget(fooWidget, id) {

        
            var iframe = document.createElement('iframe');
            iframe.setAttribute('src', `${serverHost}/api/3rd/presence/widget/${id}/init?iframe=true&partyId=${partyId}&service=${service}&BASEURL=${BASEURL}&SOCKURL=${SOCKURL}&WEBHOOKS=${WEBHOOKS}`);
            iframe.setAttribute('class', 'foo-widget-iframe');
            iframe.setAttribute('data-widget-id', id);
			iframe.setAttribute('id', Date.now());
			iframe.setAttribute('name', Date.now());
            iframe.setAttribute('scrolling', 'no');
            iframe.setAttribute('frameborder', '0');
			iframe.style.maxWidth = '100%';
			iframe.style.padding = '0px';
            //iframe.style.height = '600px';
            iframe.style.width = '100%';
			iframe.style.bottom = '0';
			iframe.style.right = '2px';
			iframe.style.position = 'relative';
			iframe.style.zIndex = '9999';
			iframe.allow="microphone; autoplay;";
           	/*iframe.setAttribute('width', '100%');iframe.style.boxShadow  = 'rgb(0, 87, 155) 0px 0px 5px';
			iframe.style.borderTop= '2px solid rgb(255, 255, 255)';
			iframe.style.borderRight= '2px solid rgb(255, 255, 255)';
			iframe.style.borderLeft= '2px solid rgb(255, 255, 255)';
			iframe.style.borderTopLeftRadius= '10px';
			iframe.style.borderTopRightRadius= '10px';
			iframe.style.borderBottom = 'none';
			iframe.style.border = 'none';
            iframe.style.position = 'relative';
			iframe.style.overflow = 'hidden';
			iframe.style.maxWidth = '350px';
			iframe.style.padding = '2px';
			iframe.style.background = '#CCCCCC';*/

            fooWidget.appendChild(iframe);

            fooWidget.setAttribute('data-foo-processed', 'done');
        
    }

    //See http://css-tricks.com/snippets/javascript/inject-new-css-rules
    function injectStyles() {
        var css = '.foo-widget { 	position: fixed;     right: 0;     bottom: 0px;     z-index: 9998;     display: none;     width:400px; 	border: 1px solid #dfdfdf;     background-color: #f9f9f9;     -webkit-box-shadow: 0 0 50px 10px rgba(0,0,0,.15);     -moz-box-shadow: 0 0 50px 10px rgba(0,0,0,.15);     box-shadow: 0 0 50px 10px rgba(0,0,0,.15);     -webkit-border-radius: 2px;     -moz-border-radius: 2px;     border-radius: 2px; 	margin: 0;     padding: 0;     vertical-align: baseline;     font-size: 100%;	  }  .openBox{ 	padding: 10px;  	height: auto;  	display:none; 	position: fixed;  	bottom: 0;  	right: 20px;  	z-index: 9999;  	background-color: rgba(255, 255, 255, 0.97);  	color: #00579b; 	direction: ltr; 	font-weight: bold; 	font-family: Arial, Helvetica, sans-serif;  	font-size: 12px;  	line-height: 140%;  	box-shadow: #00579b 0px 0px 5px;  	border-top: 2px solid rgb(255, 255, 255);  	border-right: 2px solid rgb(255, 255, 255);  	border-left: 2px solid rgb(255, 255, 255);  	border-top-left-radius: 10px;  	border-top-right-radius: 10px;  	border-bottom: none;  	cursor: pointer;  	max-width: 250px;  	display: block;  	opacity: 1; }  .closeBox{ 	padding: 5px 10px;     height: auto;     position: absolute;     bottom: 506px;     right: 1px;     display:none;     z-index: 9995;     background-color: black;     color: #00579b;     direction: ltr;     font-weight: bold;     font-family: Arial, Helvetica, sans-serif;     font-size: 12px;     line-height: 140%;     cursor: pointer;     max-width: 250px;     display: block;     opacity: 1;     background-color: #c1c1c1; }  .closeBox a{     font-size: 14px;	 }  #lo_mail_icon{ 	width:20px;  	height:25px;   	padding-top:2px;  	border:none;  	margin-top: -8px;  	margin-left: 5px; } ';
        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
            style.styleSheet.cssText = css;
        }
        else {
            style.appendChild(document.createTextNode(css));
        }
        var head = document.head || document.querySelector('head');
        head.appendChild(style);
    }
	
	 function injectJs() {
		console.log("going to inject js",BASEURL+'assets/js/jquery.js');

		var jsappUrl = BASEURL+'assets/js/jquery.js';
		var appjs = document.createElement('script');
		appjs.async = false; 
		appjs.src = jsappUrl;
		var head = document.head || document.querySelector('head');
		document.body.appendChild(appjs);
		
		var appUrl = BASEURL+'assets/widget/inject.js';
		var app = document.createElement('script');
		app.async = false; 
		app.src = appUrl;
		var head = document.head || document.querySelector('head');
		document.body.appendChild(app);
	 }
}());