<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 perspectives = new function() {
                // function called every time the page is viewed after it has initially loaded
                this.pageChanged = function() {
                        // refresh media if the current info showing is audio/video
                        if ($("#mainInfoHolder #pageVideo").length > 0) {
                                this.loadVideo($("#mainInfoHolder #pageVideo"));
                        } else if ($("#mainInfoHolder #pageAudio").length > 0) {
                                this.loadAudio($("#mainInfoHolder #pageAudio"));
                        }
                }
                
                // function called every time the size of the LO is changed
                this.sizeChanged = function(pageChg) {
                        $("#thumbHolder .thumbBox").filter(function() { return $(this).data("index") == $("#mainInfoHolder").data("index")}).trigger("click");
                }
                
                this.init = function() {
                        var     $thumbHolder = $("#thumbHolder");
                        
                        // set up thumb scrolling
                        var btnText = x_currentPageXML.getAttribute("backBtnTip");
                        if (btnText == undefined) {
                                btnText = "Back";
                        }
                        
                        $("#prevBtn")
                                .button({
                                        icons:          {primary: "prev"},
                                        label:          btnText,
                                        text:           false
                                })
                                .click(function() {
                                        $thumbHolder.animate({scrollLeft: $thumbHolder.scrollLeft() - $thumbHolder.find(".thumbBox:eq(0)").width() - 20}, 800, "easeInOutCubic");
                                })
                                .find(".ui-icon").css("background-image", 'url("' + x_templateLocation + 'common_html5/small_prev.png")');
                        
                        
                        btnText = x_currentPageXML.getAttribute("nextBtnTip");
                        if (btnText == undefined) {
                                btnText = "Forward";
                        }
                        
                        $("#nextBtn")
                                .button({
                                        icons:  {primary: "next"},
                                        label:  btnText,
                                        text:   false
                                })
                                .click(function() {
                                        $thumbHolder.animate({scrollLeft: $thumbHolder.scrollLeft() + $thumbHolder.find(".thumbBox:eq(0)").width() + 20}, 800, "easeInOutCubic");
                                })
                                .find(".ui-icon").css("background-image", 'url("' + x_templateLocation + 'common_html5/small_next.png")');
                        
                        
                        if (x_browserInfo.touchScreen == true) {
                                $thumbHolder.css("overflow-x", "auto");
                        }
                        
                        
                        // get default sound/movie tooltips
                        var soundTip = x_currentPageXML.getAttribute("soundTip");
                        if (soundTip == undefined) {
                                soundTip = "Sound Clip";
                        }
                        var videoTip = x_currentPageXML.getAttribute("videoTip");
                        if (videoTip == undefined) {
                                videoTip = "Video Clip";
                        }
                        
                        
                        // create thumbs in thumbBar
                        var newThumb = '<a href="#" class="thumbBox"><h3></h3><div class="thumbMedia"></div></a>';
                        $(x_currentPageXML).children().each(function(i) {
                                if (this.getAttribute("src") != undefined && this.getAttribute("src") != "") {
                                        var     $thisThumb = $(newThumb),
                                                $thisThumbMedia = $thisThumb.find(".thumbMedia");
                                        
                                        $thumbHolder.append($thisThumb);
                                        
                                        $thisThumb
                                                .data("index", i)
                                                .find("h3").html(this.getAttribute("name"));
                                        
                                        if (this.nodeName == "image" || this.nodeName == "sound") {
                                                var     imgSrc,
                                                        imgTip;
                                                
                                                if (this.nodeName == "image") {
                                                        imgSrc = eval(this.getAttribute("src"));
                                                        imgTip = this.getAttribute("tooltip");
                                                        
                                                } else { // sound - use default image / tip if none added
                                                        imgSrc = x_templateLocation + "common_html5/sound.jpg";
                                                        if (this.getAttribute("img") != undefined && this.getAttribute("img") != "") {
                                                                imgSrc = eval(this.getAttribute("img"));
                                                        }
                                                        
                                                        if (this.getAttribute("tooltip") != undefined) {
                                                                imgTip = this.getAttribute("tooltip");
                                                        } else {
                                                                imgTip = soundTip;
                                                        }
                                                }
                                                
                                                // add img and scale it on load
                                                $thisThumbMedia.html('<img alt="' + imgTip + '" class="centre" />');
                                                perspectives.loadImage($thisThumb.find("img"), [$thisThumb.width(), $thisThumb.height() - $thisThumb.find("h3").height() - 5], imgSrc);
                                                
                                        } else if (this.nodeName == "movie") {
                                                $thisThumbMedia.html('<div class="thumbVideo" title="' + videoTip + '"></div>');
                                                
                                                var $thisVideo = $thisThumbMedia.find("div");
                                                $thisVideo
                                                        .data({
                                                                "src"         :this.getAttribute("src"),
                                                                "dimensions":[$thisThumb.width(), $thisThumb.height() - $thisThumb.find("h3").height() - 5]
                                                        })
                                                        .attr("disabled", "disabled");
                                                
                                                perspectives.loadVideo($thisVideo);
                                        }
                                }
                        });
                        
                        
                        var     $mainInfoHolder = $("#mainInfoHolder"),
                                $mediaPanel = $("#mediaPanel"),
                                $mainTxt = $("#mainTxt");
                                
                        // set up thumbnail click events - fadeOut old mainInfo and fadeIn new contents
                        $("#thumbHolder .thumbBox")
                                .click(function() {
                                        var $this = $(this);
                                        //tweak to stop thumbnail from playing after clicking on it
                                        if ($this.find("video").length>0) $this.find("video")[0].pause(); 
                                        if ($mainInfoHolder.find("audio,video").length > 0) {
                                                // if there's an audio / video file playing in flash, pause it before changing info - otherwise it continues playing in background
                                                $mainInfoHolder.find("audio,video").each(function() {
                                                        var $this = $(this);
                                                        if ($this.is(":hidden")) { // flash
                                                                $this.parents(".mejs-inner").find(".mejs-pause button").trigger("click");
                                                        }
                                                });
                                        }
                                        
                                        var chgInfo = false;
                                        if ($mainInfoHolder.data("index") == undefined || $mainInfoHolder.data("index") != $this.data("index")) {
                                                chgInfo = true;
                                        }
                                        $mainInfoHolder.data("index", $this.data("index"));
                                        var     thisData = $(x_currentPageXML).children()[$mainInfoHolder.data("index")];
                                        
                                        if (chgInfo == true) {
                                                $mainInfoHolder.fadeOut(400, function() {
                                                        $mainInfoHolder.css({ // need to change the way the div's hidden so I can get its dimensions
                                                                "visibility"  :"hidden",
                                                                "display"             :"inherit"
                                                        });
                                                        
                                                        $mainTxt.html('<h3>' + thisData.getAttribute("name") + '</h3><p>' + x_addLineBreaks(thisData.getAttribute("txt")) + '</p>');
                                                        
                                                        if (thisData.nodeName == "image") {
                                                                $mediaPanel.html('<img alt="' + $this.find("img").attr("alt") + '" class="centre" />');
                                                                perspectives.loadImage($mediaPanel.find("img"), [$mainInfoHolder.width() * 0.4, $x_pageHolder.height() - parseInt($mainInfoHolder.css("margin-top")) - 53], eval(thisData.getAttribute("src")));
                                                                
                                                        } else if (thisData.nodeName == "sound") {
                                                                $mediaPanel.html('<img alt="' + $this.find("img").attr("alt") + '" class="centre" /><div id="pageAudio"></div>');
                                                                perspectives.loadImage($mediaPanel.find("img"), [$mainInfoHolder.width() * 0.4, $x_pageHolder.height() - parseInt($mainInfoHolder.css("margin-top")) - x_audioBarH - 53], $this.find("img").attr("src"));
                                                                
                                                                var $thisAudio = $mediaPanel.find("#pageAudio");
                                                                $thisAudio.data({
                                                                        "src" :thisData.getAttribute("src"),
                                                                        "width"       :$mediaPanel.find("img").width()
                                                                });
                                                                perspectives.loadAudio($thisAudio);
                                                                
                                                        } else { // movie
                                                                var videoDimensions = [320,240];
                                                                if (thisData.getAttribute("movieSize") != "" && thisData.getAttribute("movieSize") != undefined) {
                                                                        var dimensions = thisData.getAttribute("movieSize").split(",");
                                                                        if (dimensions[0] != 0 && dimensions[1] != 0) {
                                                                                videoDimensions = dimensions;
                                                                        }
                                                                }
                                                                
                                                                $mediaPanel.html('<div id="pageVideo" title="' + videoTip + '"></div>');
                                                                
                                                                var $thisVideo = $mediaPanel.find("#pageVideo");
                                                                $thisVideo.data({
                                                                        "src"         :thisData.getAttribute("src"),
                                                                        "dimensions":videoDimensions
                                                                });
                                                                perspectives.loadVideo($thisVideo);
                                                        }
                                                        
                                                        $mainInfoHolder.css({ // change back the way the div's hidden so it can fadeIn
                                                                "display"             :"none",
                                                                "visibility"  :"visible"
                                                        });
                                                        $mainInfoHolder.fadeIn();
                                                });
                                                
                                        } else { // no change to media shown - just resize if needed
                                                if (thisData.nodeName == "image") {
                                                        x_scaleImg($mediaPanel.find("img"), $mainInfoHolder.width() * 0.4, $x_pageHolder.height() - parseInt($mainInfoHolder.css("margin-top")) - 53, true, false);
                                                        
                                                } else if (thisData.nodeName == "sound") {
                                                        x_scaleImg($mediaPanel.find("img"), $mainInfoHolder.width() * 0.4, $x_pageHolder.height() - parseInt($mainInfoHolder.css("margin-top")) - x_audioBarH - 53, true, false);
                                                        var $audio = $mediaPanel.find("#pageAudio");
                                                        if ($audio.find(".mejs-audio").width() != $mediaPanel.find("img").width()) {
                                                                $audio.data("width", $mediaPanel.find("img").width());
                                                                perspectives.loadAudio($audio);
                                                        }
                                                }
                                        }
                                })
                                .focusin(function() {
                                        $(this).addClass("selected");
                                })
                                .focusout(function() {
                                        $(this).removeClass("selected");
                                })
                                .keypress(function(e) {
                                        var charCode = e.charCode || e.keyCode;
                                        if (charCode == 32) {
                                                $(this).trigger("click");
                                        }
                                });
                        
                        
                        // have to add this css using jQuery rather than in styles below as some browsers (IE) don't support first-child/last-child
                        $("#thumbHolder .thumbBox:eq(0)")
                                .css("margin-left", "40px")
                                .trigger("click");
                        
                        $("#thumbHolder .thumbBox:last-child").css("margin-right", "40px");
                        
                        x_pageLoaded();
                }
                
                this.loadImage = function($img, maxDimensions, src) {
                        $img
                                .css({ // stops flicker on 1st load of image
                                        "opacity"     :0,
                                        "filter"      :'alpha(opacity=0)'
                                })
                                .one("load", function() {
                                        var $this = $(this);
                                        x_scaleImg($this, maxDimensions[0], maxDimensions[1], true, true);
                                        
                                        $this.css({
                                                "opacity"     :1,
                                                "filter"      :'alpha(opacity=100)'
                                        });
                                })
                                .attr("src", src)
                                .each(function() { // called if loaded from cache as in some browsers load won't automatically trigger
                                        if (this.complete) {
                                                $(this).trigger("load");
                                        }
                                });
                }
                
                this.loadAudio = function($audio) {
                        $audio.mediaPlayer({
                                type    :"audio",
                                source  :$audio.data("src"),
                                width   :$audio.data("width")
                        });
                }
                
                this.loadVideo = function($video) {
                        $video.mediaPlayer({
                                type    :"video",
                                source  :$video.data("src"),
                                width   :Number($video.data("dimensions")[0]),
                                height  :Number($video.data("dimensions")[1])
                        });
                }
        }
        
        //tweak for outscaled thumbnails when returned from video-full-screen for mp4
        MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen;
        MediaElementPlayer.prototype.exitFullScreen = function() {
                $("#thumbHolder .thumbVideo video").each(function() {
                        var tmp_width = $(this.parentElement.parentElement.parentElement.parentElement).width();
                        var tmp_height = $(this.parentElement.parentElement.parentElement.parentElement).height();
                        var tmp_elem = this;
                        for (var i = 0; i < 5; i++) {
                                $(tmp_elem).width(tmp_width);
                                $(tmp_elem).height(tmp_height);
                                tmp_elem = tmp_elem.parentElement;
                        }                       
                });
                this.exitFullScreen_org();
        }
        
        //tweak for swf player for flv having full screen button active in thumbnails
        $(window).load(function () {
                
                $("#thumbHolder .thumbMedia").append('<div class="thumbCover"></div>');
                $("#thumbHolder .thumbCover").css({'position':'absolute','z-index':'1'});
                $("#thumbHolder .thumbVideo").css({'position':'absolute','z-index':'0'})
                $('#thumbHolder embed').attr({'wmode':'opaque'});

                $("#thumbHolder .thumbCover").each(function() {
                        $(this).width($(this).prev().width());
                        $(this).height($(this).prev().height());
                });
        });
        perspectives.init();
        
</script>

<style type="text/css">
        
        #thumbBar {
                position:       absolute;
                top:            10px;
                left:           0px;
                width:          100%;
                height:         110px;
                background:     #434343;
        }
        
        #thumbOverlayLeft, #thumbOverlayRight {
                position:               absolute;
                width:                  40px;
                height:                 100%;
        }
        
        #thumbOverlayLeft {
                background:     #434343; /* for non-css3 browsers */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010101', endColorstr='#00010101',GradientType=1 ); /* IE */
                background: -moz-linear-gradient(left,  rgba(1,1,1,1) 0%, rgba(1,1,1,1) 20%, rgba(1,1,1,0) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(1,1,1,1)), color-stop(20%,rgba(1,1,1,1)), color-stop(100%,rgba(1,1,1,0))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(left,  rgba(1,1,1,1) 0%,rgba(1,1,1,1) 20%,rgba(1,1,1,0) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(left,  rgba(1,1,1,1) 0%,rgba(1,1,1,1) 20%,rgba(1,1,1,0) 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(left,  rgba(1,1,1,1) 0%,rgba(1,1,1,1) 20%,rgba(1,1,1,0) 100%); /* IE10+ */
                background: linear-gradient(to right,  rgba(1,1,1,1) 0%,rgba(1,1,1,1) 20%,rgba(1,1,1,0) 100%); /* W3C */
        }
        
        #thumbOverlayRight {
                right:  0;
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00010101', endColorstr='#010101',GradientType=1 ); /* IE */
                background:     #434343; /* for non-css3 browsers */
                background: -moz-linear-gradient(left,  rgba(1,1,1,0) 0%, rgba(1,1,1,1) 80%, rgba(1,1,1,1) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(1,1,1,0)), color-stop(80%,rgba(1,1,1,1)), color-stop(100%,rgba(1,1,1,1))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(left,  rgba(1,1,1,0) 0%,rgba(1,1,1,1) 80%,rgba(1,1,1,1) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(left,  rgba(1,1,1,0) 0%,rgba(1,1,1,1) 80%,rgba(1,1,1,1) 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(left,  rgba(1,1,1,0) 0%,rgba(1,1,1,1) 80%,rgba(1,1,1,1) 100%); /* IE10+ */
                background: linear-gradient(to right,  rgba(1,1,1,0) 0%,rgba(1,1,1,1) 80%,rgba(1,1,1,1) 100%); /* W3C */
        }
        
        #thumbHolder {
                position:                       absolute;
                width:                          100%;
                height:                         100%;
                overflow:                       hidden;
                white-space:            nowrap;
        }
        
        #thumbHolder .thumbBox {
                display:                        inline-block;
                width:                          90px;
                height:                         90px;
                margin:                         5px;
                padding:                        3px;
                background-color:       white;
                border:                         2px solid transparent;
                text-decoration:        none;
        }
        
        #thumbHolder .thumbBox.selected {
                border-color:   yellow;
        }
        
        #thumbHolder .thumbBox h3 {
                text-align:             center;
                overflow:               hidden;
                margin-bottom:  5px;
        }
        
        #thumbHolder .thumbBox:link, #thumbHolder .thumbBox:hover, #thumbHolder .thumbBox:active, #thumbHolder .thumbBox:visited {
                color:  inherit;
        }
        
        /* removes controls from thumbnail version of video player */
        #thumbHolder .thumbMedia .mejs-container .mejs-controls, #thumbHolder .thumbMedia .mejs-container .mejs-layers {
                display: none !important;
        }
        
        #thumbHolder .thumbMedia img {
                border-width:   0px; /* IE8 fix */
        }
        
        
        #prevBtn {
                float:          left;
                z-index:        5;
        }
        
        #nextBtn {
                float:  right;
        }
        
        /* over ride default jquery button styles */
        #thumbBar button {
                background:             none;
                border:                 none;
                width:                  40px;
                height:                 100%;
                margin-right:   0;
        }
        
        #thumbBar button .ui-icon {
                width:          100%;
                height:         100%;
                position:       absolute;
                top:            0;
                left:           0;
                margin:         0px;
                background-position:    0px 0px;
        }
        
        #thumbBar button.ui-state-hover .ui-icon, #thumbBar button.ui-state-focus .ui-icon, #thumbBar button.ui-state-active .ui-icon {
                background-position: -40px 0px;
        }
        
        
        #mainInfoHolder {
                margin-top:     130px;
                visibility:     hidden;
        }
        
</style>

<div id="pageContents">
        
        <div id="mainInfoHolder">
                <div id="mediaPanel" class="panel inline x_floatLeft"></div>
                <div id="mainTxt"></div>
        </div>
        
        <div id="thumbBar">
                <button id="prevBtn"/>
                <div id="thumbHolder"></div>
                <div id="thumbOverlayLeft"/>
                <div id="thumbOverlayRight"/>
                <button id="nextBtn"/>
        </div>
        
</div>