<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>