<script type="text/javascript">
        
        // pageChanged & sizeChanged functions are needed in every model file
        // other functions for model should also be in here to avoid conflicts
        var buttonSequence = new function() {
                // function called every time the page is viewed after it has initially loaded
                this.pageChanged = function() {
                        
                }
                
                // function called every time the size of the LO is changed
                this.sizeChanged = function() {
                        if (x_browserInfo.mobile == false) {
                                var $panel = $("#myPanel");
                                $panel.height($x_pageHolder.height() - parseInt($x_pageDiv.css("padding-top")) * 2 - parseInt($panel.css("padding-top")) * 2 - 5);
                        }
                }
                
                this.init = function() {
                        // buttonWidth attribute not used as button will be sized automatically
                        var panelWidth = x_currentPageXML.getAttribute("panelWidth"),
                                $splitScreen = $("#pageContents .splitScreen"),
                                $textHolder = $("#textHolder"),
                                $panel = $("#myPanel");
                        
                        if (panelWidth == "Full") {
                                $panel.appendTo($("#pageContents"));
                                $splitScreen.remove();
                        } else {
                                $textHolder.html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));
                                var textAlign = x_currentPageXML.getAttribute("align");
                                if (textAlign != "Right") {
                                        if (panelWidth == "Small") {
                                                $splitScreen.addClass("large");
                                        } else if (panelWidth == "Large") {
                                                $splitScreen.addClass("small");
                                        } else {
                                                $splitScreen.addClass("medium");
                                        }
                                } else {
                                        $textHolder
                                                .removeClass("left")
                                                .addClass("right")
                                                .appendTo($splitScreen);
                                        $("#infoHolder")
                                                .removeClass("right")
                                                .addClass("left");
                                        if (panelWidth == "Small") {
                                                $splitScreen.addClass("medium");
                                        } else if (panelWidth == "Large") {
                                                $splitScreen.addClass("xlarge");
                                        } else {
                                                $splitScreen.addClass("large");
                                        }
                                }
                        }
                        
                        var $infoGroup = $(".infoGroup:first");
                        
                        $infoGroup.find("p").html(x_addLineBreaks(x_currentPageXML.getAttribute("intro")));
                        
                        $(x_currentPageXML).children()
                                .each(function(i) {
                                        var $thisGroup;
                                        $thisGroup = $infoGroup.clone().appendTo($panel);
                                        if (i == $(x_currentPageXML).children().length - 1) {
                                                $thisGroup.find("button").remove();
                                        }
                                        $thisGroup.hide();
                                        $thisGroup.find("p")
                                                .html(x_addLineBreaks(this.getAttribute("text")));
                                });
                        
                        $panel.children()
                                .each(function(i) {
                                        if (i != $panel.children().length - 1) {
                                                $panel.find(".infoGroup:eq(" + i + ") button")
                                                        .button({
                                                                label:  $(x_currentPageXML).children()[i].getAttribute("name")
                                                                })
                                                        .click(function() {
                                                                var $this = $(this);
                                                                $this.hide();
                                                                if ($this.parent().index() != $("#pageContents .infoGroup").length-1) {
                                                                        $("#pageContents .infoGroup:eq(" + ($this.parent().index() + 1) + ")").fadeIn();
                                                                }
                                                        });
                                        }
                                });
                        
                        if (x_currentPage != 0) {
                                buttonSequence.sizeChanged();
                        }
                        
                        x_pageLoaded();
                }
        }
        
        buttonSequence.init();
        
</script>

<style type="text/css">
        
        #myPanel {
                overflow:       auto;
        }
        
        #pageContents button {
                margin:         10px;
                float:          right;
        }
        
</style>

<div id="pageContents">
        
        <div class="splitScreen">
                
                <div id="textHolder" class="left" tabindex="1"></div>
                
                <div id="infoHolder" class="right">
                        <div id="myPanel" class="panel">
                                <div class="infoGroup">
                                        <p></p>
                                        <button></button>
                                </div>
                        </div>
                </div>
                
        </div>
        
</div>