(function(window){

    function tfLibrary(){
        var _tfLibraryObject = {};
        var BASE_URL = 'https://www.travelfriends.cz';

        _tfLibraryObject.initIframe = function(tourId, divId){
            var targetDiv = document.getElementById(divId);
            var iframe = createIframe(tourId);
            targetDiv.appendChild(iframe);

            console.log(iframe);
            return true;
        };

        function createIframe(tourId) {
            var iframe = document.createElement('iframe');
            iframe.src = encodeURI(BASE_URL+'/plugin/?tourId='+tourId);
            iframe.frameBorder = 0;
            iframe.style.width = '100%';
            iframe.style.height = '100%';
            return iframe;
        }

        _tfLibraryObject.bindToButton = function(tourId, buttonId){
            document.getElementById(buttonId).addEventListener('click', function () {
                createModal(tourId, buttonId)
                },false)
        };

        function createModal(tfTourId, tfButtonId) {
            console.log("Listener Added");
            console.log(tfTourId);
            console.log(tfButtonId);

            /* Modal */
            var modalDiv = document.createElement('div');
            modalDiv.id = 'tf-'+tfTourId+tfButtonId;
            modalDiv.setAttribute("style", "width: 100%; height: 100%;position: fixed;" +
                "left: 0;top: 0;z-index: 2000000; overflow: auto;background-color: rgba(0,0,0,0.6);");

            var closeButton = document.createElement('span');
            closeButton.innerHTML = "×";
            closeButton.setAttribute("style", "position:absolute;font-size: 28px;font-weight: bold;top:10px;right:15px;color:#ffffff;cursor:pointer;");
            closeButton.addEventListener('click', function () {
                var close = document.getElementById('tf-'+tfTourId+tfButtonId);
                document.body.removeChild(close);
            });
            modalDiv.addEventListener('click', function () {
                var close = document.getElementById('tf-'+tfTourId+tfButtonId);
                document.body.removeChild(close);
            });

            modalDiv.appendChild(closeButton);

            /* Main Content */
            var modalContent = document.createElement('div');
            modalContent.setAttribute("style", "margin: 0 auto;width: 95%;height: 90%;margin-top: 50px;");

            var iframe = createIframe(tfTourId);
            modalContent.appendChild(iframe);

            modalDiv.appendChild(modalContent);
            if(document.body != null){ document.body.appendChild(modalDiv); }
        }

        return _tfLibraryObject;
    }



    if(typeof(window.TF) === 'undefined'){
        window.TF = tfLibrary();
    }
})(window);

/* --- USAGE --- */
/* --- create your div

 <div id="tf-abu-dhabi"></div>

 */
/* --- call render

 <script>
 TF.initIframe("tourId","tf-abu-dhabi");
 </script>

 */