<style>
#content {
max-width: 940px;
max-height: 560px;
width: 100%;
height: 100%;
margin: 20px auto 20px auto;
box-shadow: 0px 4px 16px -4px #333;
position: relative;
}
#content-warning {
display: block;
padding: 20px;
width: 190px;
position: absolute;
top: 20px;
right: 20px;
background-color: #000;
text-align: left;
}
#content-warning-title {
color: #FFF;
font-family: "Arial", sans-serif;
font-weight: bold;
font-size: 20px;
padding: 0px;
margin: 0px;
}
#content-warning-text {
color: #FFF;
font-family: "Arial", sans-serif;
font-weight: normal;
font-size: 13px;
}
#content-warning-divider {
border-color: #595145;
}
</style>
<div id="content">
<div id="content-placeholder">
<img src="/sites/all/themes/gold/tech-town-map/fallback.jpg"/>
<div id="content-warning">
<h3 id="content-warning-title">Welcome</h3>
<hr id="content-warning-divider" />
<p id="content-warning-text">Please enable JavaScript in your browser to explore our interactive town</p>
</div>
</div>
</div>
<!-- This doesn't need to be in the same directory - just make sure this embed has the right location -->
<script src="/sites/all/themes/gold/tech-town-map/flambe.js"></script>
<script>
// UPDATE THIS BASED ON THE CURRENT SERVER CONFIG
// Returns the assets directory - use your cms to give this an absolute url
// This must be an absolute url and not a relative url
// By default it takes the current url without the query string and adds "/assets" to the end of it
function getMapAssetsBase() {
console.log( "Base url supplied as ", window.location.protocol +"//" + window.location.host + "/sites/all/themes/gold/tech-town-map/assets" );
return window.location.protocol +"//" + window.location.host + "/sites/all/themes/gold/tech-town-map/assets";
}
// flambe will create a canvas or a flash object with width/height of 100% append it to the div
// These addresses can be changed to absolute urls
if( flambe.embed(["/sites/all/themes/gold/tech-town-map/targets/main-flash.swf","/sites/all/themes/gold/tech-town-map/targets/main-html.js"], "content") ) {
// If successfully embedded, hide the placeholder content
document.getElementById("content-placeholder").style.display = "none";
}
var aligningFlambeContent = false;
function resizeMap( ) {
if ( !aligningFlambeContent ) {
// Set the map height based on its current width and desired aspect ratio
setTimeout( function() {
var map = document.getElementById( "content" );
map.style.height = (map.clientWidth * (560/940)) + "px";
// Force the flambe content to resize to it's new available space
aligningFlambeContent = true;
window.dispatchEvent(new Event('resize'));
}, 100 );
}else{
// Don't enter an endless resize loop
aligningFlambeContent = false;
}
}
// Attach listeners to the resize event
if(window.attachEvent) {
window.attachEvent('onresize', resizeMap );
}
else if(window.addEventListener) {
window.addEventListener('resize', resizeMap, true );
}
// Apply the above rule immediately
resizeMap();
</script>
