/**Code is copied from the Grid-format and modified to work in a label resource
 **This will only work if it is the only shadebox on the page**/

<div id="shadebox-title">
	<img src="http://link_to/popup_icon.gif" height="16" width="16" /> <span> Lightbox Title</span>
<div>
<div id="shadebox">
	<div id="shadebox_overlay" onclick="toggle_shadebox();" style="height: 1224px;"></div>
	<div id="shadebox_content"><img id="shadebox_close" onclick="toggle_shadebox();"
		src="http://moodle6.westone.wa.gov.au/theme/image.php/overlay/format_grid/1373472160/close"
		style="display: none;" />
	/**PUT YOUR CONTENT IN HERE**/
	</div>
</div>

<script type="text/javascript">// <![CDATA[
function load() {
	//Content is shown and if javascript is enabled it will be hidden and link made.
	//If it's going to be a page a different check needs to happen to either show the
	// shadebox or open it as a new page.
    document.getElementById("shadebox").style.display = 'none';

    //Make the title a link so the shadebox can open
    var newTitle = document.createElement('a');
    newTitle.id = "shadebox-title-active";
    newTitle.onclick = function() { open_shadebox(); };
    newTitle.href = "#";
    var oldTitle = document.getElementById("shadebox-title");
    var parent = oldTitle.parentNode;
    var oldTitleNodes = oldTitle.childNodes;
    for(var i = 0; i < oldTitleNodes.length; i++) {
        newTitle.appendChild(oldTitleNodes[i]);
    }
    parent.insertBefore(newTitle, oldTitle);
    parent.removeChild(oldTitle);

    //Move to end of html
    document.body.appendChild(document.getElementById("shadebox"));
    document.getElementById("shadebox_close").style.display = "";

    initialize_shadebox();
    update_shadebox();
    window.onresize = function() {
        update_shadebox();
    }
}

function open_shadebox() {
    //Make the shadebox visible, scroll to it.
    document.getElementById("shadebox").style.display = "";
    toggle_shadebox();
    return true;
}

/** Below is shadebox code **/
var shadebox_open = false;

function initialize_shadebox() {
    hide_shadebox();
    //document.getElementById('shadebox_overlay').style.display="";
    var content = document.getElementById('shadebox_content');
    content.style.position = 'absolute';
    content.style.width = '800px';
    content.style.top = '50px';
    content.style.left = '50%';
    content.style.marginLeft = '-400px';
    content.style.zIndex = '9000001';
}

function toggle_shadebox() {
    if(shadebox_open) {
        hide_shadebox();
        shadebox_open = false;
        window.scrollTo(0, 0);
    } else {
        show_shadebox();
        shadebox_open = true;
    }
}

function show_shadebox() {
    update_shadebox();
    document.getElementById("shadebox").style.display = "";
    update_shadebox();
}

function hide_shadebox() {
    document.getElementById("shadebox").style.display = 'none';
}

//code from quirksmode.org
//author unknown.
function get_page_size() {
    var xScroll, yScroll;
    if(window.innerHeight && window.scrollMaxY) {
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if(document.body.scrollHeight > document.body.offsetHeight) { //all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { //Explorer Mac ... also works in Explorer 6 strict and safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }

    var windowWidth, windowHeight;
    if(self.innerHeight) { // all except Explorer
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    } else if(document.documentElement && document.documentElement.clientHeight) { //Explorer 6 strict mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if(document.body) { //other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }

    //for small pages with total height less than height of the viewport
    if(yScroll < windowHeight) {
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }

    //for small pages with total width less than width of the viewport
    if(xScroll < windowWidth) {
        pageWidth = windowWidth;
    } else {
        pageWidth = xScroll;
    }
    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
    return arrayPageSize;
}

function update_shadebox() {
    //Make the overlay fullscreen (width happens automatically, so just update the height)
    var overlay = document.getElementById("shadebox_overlay");
    var pagesize = get_page_size();
    overlay.style.height = pagesize[1] + "px";
}load()
// ]]></script>