<!-- Licensed under a BSD license. See bsd.license.html for license -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bamboo - Rug</title>
<link type="text/css" href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<style>
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html, body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Helvetica, Arial, Sans-Serif;
}
#editor td {
    padding: 0px;
}
#editor {
    border-spacing: 0px;
    width: 100%;
    height: 100%;
}
#canvas {
    width: 100%;
    height: 100%;
}
#viewContainer {
    width: 65%;
     height: 100%;
}
#controlContainer {
    width: 35%;
     height: 100%;
}
#controls {
    border-left: 5px solid black;
    background-color:#666;
    color: white;
    padding: 0px 0.5em 0px 0.5em;
    width: 100%;
    height: 100%;
    font-size: large;
}


#em_ctrl {
    background-color: transparent;
    width:99% ;
    border: 0px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    //color:transparent;
    cursor:default;
}

#theHeader {
    width:80%;
    height:40px;
    background:#777;
    position:right;
    left:0;
    top:0;
    border-bottom:2px solid #666;
}
</style>
<!--
-->

<script type="text/javascript" charset="utf-8"
    src="js/lzma.js">
</script>
<script type="text/javascript" charset="utf-8"
    src="http://code.jquery.com/jquery-1.12.1.min.js">
</script>

<script type="text/javascript" charset="utf-8"
    src="js/rug/colResizable-1.5.min.js">
</script>

<script type="text/javascript" charset="utf-8"
    src="js/jquery.backgrounder.js">
</script>


</head>
<body>
<table id="editor">
  <tr>
    <td id="viewContainer">
       <canvas id="canvas" name="canvas"></canvas>
    </td>
    <td id="controlContainer">
        <div id="controls">
            <div id=theHeader>
            <img src="rsr/p3d.png" valign=bottom>&nbsp;Bamboo&nbsp;Rug&nbsp;-&nbsp;
            <span id="status">NB : App won't work with JavaScript disabled.</span>
            </div>


            <iframe sandbox='allow-pointer-lock allow-scripts allow-same-origin'
                frameBorder='0' id="editor" src="rug/intrants.html"
                width="100%" height="80%"
                seamless='seamless'
                ALLOWTRANSPARENCY='true'>
            </iframe>

        </div>
    </td>
  </tr>
</table>

<div id="theBackground"><img src="rug/bamboo-blind.jpg" alt="theBackground" /></div>

<script type="text/javascript">
$(function() {
    $("#editor").colResizable({
        liveDrag: true,
        gripInnerHtml: "<div class='grip'></div>",
        draggingClass: "dragging",
    });


    $('#theBackground').backgrounder({element : 'body'});
});
</script>
<script async=true defer=true type="text/javascript" charset="utf-8"
    src="webfrost.js">
</script>
</body>
</html>


