<!DOCTYPE html>
<html onload="">

<head>
    <title>ONCE 1.0.0</title>
    <meta charset="utf-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">

    <script>
        class App {
            static start() {
                //document.body.append("Hello World ;)");
                //WebBeans = WebBeans.getInstance();
                //this.dropSupport = new DropSupport().init();
               return "Hello World ;)";
            }
            static init() {
                console.log("start loading App components...");
                 return "start loading App components...";
            }
            
            discover() {
                return this.models;
            }

        }
        var app = new App();
		/*
        class DropSupport {
        	constructor() {
        		this.dropTargetContainerElement = null;
        	}

        	init(element) {
        		if (!element)
        			element = document;
				element.addEventListener("drop", this.onDrop.bind(this), false);
	  			element.addEventListener("dragover", this.onDragover.bind(this), false);
				element.addEventListener("dragenter", this.onDragenter.bind(this), false);
				element.addEventListener("dragleave", this.onDragleave.bind(this), false);
        	}

            loadDescriptor(descriptorUrl) {
				var aClass = ONCE.lookupClass4Descriptor(descriptorUrl);
				if (aClass) return Promise.resolve(aClass);

                var ior = new IOR().init(descriptorUrl);

                return ONCE.start(ior).then(
                    aClass => {
                        console.log("loaded ", aClass.type.name);
                        //this.current.class = aClass;
                        //this.maintainOptions(this.current);
                        if (aClass.demo)
                            aClass.demo();
                        return aClass;

                    });
                //               Thinglish.loadAndStartAll(null,[ior]);
                return null;
            }

            append(aClass, element) {
                var instance = aClass.getInstance();
                var defaultView = instance.defaultView;
                defaultView.append(element);
            }

        	onDrop(event) {
				if(this.dropTargetContainerElement) {
					this.dropTargetContainerElement.classList.remove("drop-target");
					this.dropTargetContainerElement = "";
				}
				event.preventDefault();
				event.stopPropagation();
				var url = event.dataTransfer.getData("URL");
				console.log(url);
				if (!url) return;
				//document.getElementById("component").value = url;
				console.log(event.target);

				var ucpView = UcpComponentSupport.getUcpView4Element(event.target);
				var element = null;
				if (ucpView)
					element = ucpView.container.element;

				var aClass = this.loadDescriptor(url).then(
					aClass => {
						this.append(aClass, element);
					}
				);

			}
        	onDragover(event) {
			  // prevent default to allow drop
			  event.preventDefault();
			}

        	onDragenter(event) {
			  // highlight potential drop target when the draggable element enters it
			  if(this.dropTargetContainerElement){
				  this.dropTargetContainerElement.classList.remove("drop-target");
				  this.dropTargetContainerElement = "";
			  }

			  this.dropTargetContainerElement = UcpComponentSupport.getUcpView4Element(event.target);
			  if(this.dropTargetContainerElement){
				  this.dropTargetContainerElement = this.dropTargetContainerElement.container.element;
				  this.dropTargetContainerElement.classList.add("drop-target");
			  }
			  else {
				  this.dropTargetContainerElement = event.target;
				  event.target.classList.add("drop-target");
			  }
			}        	
        	onDragleave(event) {
				// reset background of potential drop target when the draggable element leaves it
				event.target.classList.remove("drop-target");
	  		}	

        }
		*/
    </script>
    <script src="/EAMD.ucp/Components/tla/EAM/layer1/Thinglish/Once/1.0.0/src/js/Once.class.js" type="text/javascript"></script>

    <style type="text/css">
        html,
        body {
            height: 100%;
            overflow: auto
        }
        
        .fullHeight {
            height: 100%;
        }
        
        header,
        footer,
        .panel-heading,
        .panel-footer {
            height: 10%;
            background-color: lightblue;
        }
        
        .content,
        .panel-body {
            height: 80%;
            overflow-y: scroll
        }
        .hide {
			display:none;
		  }
		.center-bold {
			text-align: center;
			font-weight: bold;
		  }  
		  .drop-target {
			  background-color: #29e;
			  border-color: #fff;
			  border-style: solid;
			}
		 
    </style>
</head>

<body>
	<div class="center-bold">Drag and Drop Component to Load</div>
</body>

</html>