/*
* FUNCTIONS
*/
var startWithAutorotation = '';
var startWithAutotour = '';
var panotourPlayer = null;
function getTourPlayer() {
if ( panotourPlayer == null ) {
panotourPlayer = document.getElementById('krpanoSWFObject');
}return panotourPlayer;
}
//External commands and dynamic elements
function updatePanorama(panoid) {
var groupid = getTourPlayer().get("scene["+panoid+"].group");
var titleid = getTourPlayer().get("scene["+panoid+"].titleid");
var currentSceneThumbnail = jQuery('.slide[data-id='+panoid+'] .pano-thumbnail img').attr('src');
var descriptionid = getTourPlayer().get("scene["+panoid+"].descriptionid");
//If currently viewing scene
if(jQuery('#scene').hasClass('layered-visible')){
//Scene title into the header
jQuery('header').attr('title',ktools.I18N.getInstance().getMessage(titleid));
jQuery('header h1').text(ktools.I18N.getInstance().getMessage(titleid));
//Scene thumbnail
jQuery('header .thumbnail').attr('src', currentSceneThumbnail);
history.pushState('', document.title, window.location.pathname);
//If currently viewing layer fullpage
}else{
insertProjectInfo();
//To show helper only on the first section
if(jQuery('.section.first-section').hasClass('active')){
jQuery('#helper').removeClass('none');
}else{
jQuery('#helper').addClass('none');
}
}
//Always place current group id and pano id into a custom attribute of body tag
jQuery('body').attr('data-groupid',groupid).attr('data-panoid',panoid);
//Update navigation bubbles
jQuery('nav li, nav ul, nav a').removeClass('active');
jQuery('nav a.pano-single[data-target='+panoid+']').addClass('active');
jQuery('nav a.pano-single[data-target='+panoid+']').parent().addClass('active');
jQuery('nav a.pano-in-a-group[data-target='+panoid+']').addClass('active');
jQuery('nav a.pano-in-a-group[data-target='+panoid+']').parent().parent().parent().addClass('active');
autoScrollToActiveThumb(jQuery('nav>ul>li.active').eq(0).index()+1);
//If description is not empty
if (descriptionid != "") {
//If currently viewing scene
if(jQuery('#scene').hasClass('layered-visible')){
var htmlDescription = htmlEncode(ktools.I18N.getInstance().getMessage(descriptionid));
//Strip HTML description and place it on description
htmlDescription = htmlDescription.replace(/<(?:.|\n)*?>/gm, '');
jQuery('header .project-description').html(htmlDescription);
//Remove tweak if no description
jQuery('header h1').removeClass('padded');
}
//console.log('description scene: '+ktools.I18N.getInstance().getMessage(descriptionid));
//If no description
}else{
//If currently viewing layer fullpage
if(jQuery('#scene').hasClass('layered-visible')){
//Remove all text from description
jQuery('header .project-description').text('');
//Tweak for no description padding gap
jQuery('header h1').addClass('padded');
}
}
if (groupid != null) {
var titleid = getTourPlayer().get("panoramagroup["+groupid+"].titleid");
if(jQuery('#scene').hasClass('layered-visible')){
history.pushState('', document.title, '#'+groupid+'/'+panoid);
}
if (titleid != "") {
//HTML tags with class (group-title) will display the group title
var finalTitle = ktools.I18N.getInstance().getMessage(titleid);
//console.log('group title: '+finalTitle);
//If no group,
var mainscene = getTourPlayer().get("panoramagroup["+groupid+"].mainscene");
var descriptionid = getTourPlayer().get("panoramagroup["+groupid+"].descriptionid");
if (descriptionid != "")
{
//If group description
//console.log('description du group: '+ktools.I18N.getInstance().getMessage(descriptionid));
}else{
//If no group description,
//console.log('no group description');
}
}
}else{
//If no group,
//console.log('no group ');
if(jQuery('#scene').hasClass('layered-visible')){
history.pushState('', document.title, '#'+panoid);
}
}
}
//Toggle autorotation on/off
//@cmd (string) 'off'-> stop autorotation 'on'-> resume autorotation
var autorotation = function(cmd){
if(cmd=='off'){
getTourPlayer().call('stopautorotation()');
jQuery('.autorotation').removeClass('on');
}else if(cmd=='on'){
getTourPlayer().call('startautorotation()');
jQuery('.autorotation').addClass('on');
}else{
if(startWithAutorotation || startWithAutotour == 'yes'){
jQuery('.autorotation').removeClass('none').addClass('on');
};
}
}
//Strip all HTML tags
//@html (string) html/text to convert to txt
var strip = function(html){
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
//Replace unwanted characters from a string
//@string
var safeString = function(string){
var str;
str = string.replace(/ /g, '_');
str = str.replace(/é/g, 'e');
str = str.replace(/è/g, 'e');
str = str.replace(/ê/g, 'e');
str = str.replace(/ë/g, 'e');
str = str.replace(/à/g, 'a');
str = str.replace(/î/g, 'i');
str = str.replace(/ï/g, 'i');
str = str.replace(/ô/g, 'o');
str = str.replace(/[&\/\\#+(),$~%.'":*!?<>{}]/g,'_').toLowerCase();
return str;
}
//Build the sections array
var rawGroups;
rawGroups = "panogroup277__||__panogroup7707__||__panogroup35__||__panogroup527__||__panogroup511__||__panogroup36__||__panogroup505__||__panogroup9595__||__panogroup7736__||__panogroup7738__||__panogroup7000__||__panogroup498__||__panogroup6988__||__";
rawGroups = rawGroups.substring(0, rawGroups.length - 6);
rawGroups = safeString(rawGroups);
var theFinalSections = rawGroups.split("__||__");
//Replace escaped characters to parse HTML
var htmlEncode = function(value){
return String(value)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/</g, '<')
.replace(/ /g, ' ')
.replace(/>/g, '>');
}
//Display the sphere
var displayPano = function(){
jQuery('#fullpage').removeClass('on');
jQuery('#commands').addClass('on');
// jQuery('header').removeClass('none');
$.fn.fullpage.setAllowScrolling(false);
//Make the scene visible
jQuery('#scene').addClass('layered-visible');
//Disable click on header
jQuery('header').removeClass('active');
//Retrieve data from current scene
var currentID = jQuery('body').attr('data-panoid');
var currentTitle = jQuery('.slide[data-id='+currentID+'] .link-title').text();
var currentDescription = jQuery('.slide[data-id='+currentID+'] .pano-description').text();
//Strip HTML from description
currentDescription = currentDescription.replace(/<(?:.|\n)*?>/gm, '');
var currentThumbnailPath = jQuery('.slide[data-id='+currentID+'] .pano-thumbnail img').attr('src');
//Update header info
jQuery('header').attr('title',currentTitle);
jQuery('header h1').text(currentTitle);
//If description longer than 5 characters
if(currentDescription.length>5){
jQuery('header h1').removeClass('padded');
jQuery('header .project-description').text(currentDescription);
//If description shorter than 5 characters
}else{
jQuery('header h1').addClass('padded');
jQuery('header .project-description').text('');
}
//Update thumbnail
jQuery('header .thumbnail').attr('src', currentThumbnailPath);
}
//Display the layer
var displayLayer = function(){
//Retrieve data of the current scene
var theGroupID = jQuery('body').attr('data-groupid');
var thePanoID = jQuery('body').attr('data-panoid');
//This is a single pano
if(theGroupID===undefined){
$.fn.fullpage.silentMoveTo(thePanoID);
//This is a pano in a group
}else{
var theIndex = jQuery('.slide[data-id='+thePanoID+']').index();
$.fn.fullpage.silentMoveTo(theGroupID,theIndex);
}
jQuery('#scene').removeClass('layered-visible');
jQuery('#fullpage').addClass('on');
$.fn.fullpage.setAllowScrolling(true);
insertProjectInfo();
jQuery('header').addClass('active');
jQuery('#commands').removeClass('on');
//Stop autotour to avoid krpano changing automatically scenes independently from the full page layer
if(startWithAutotour=='yes'){
autorotation('off');
}
}
//Insert project info into the header
var insertProjectInfo = function(){
//Scene title
jQuery('header').attr('title','HTL1 Lastenstraße');
jQuery('header h1').text('HTL1 Lastenstraße');
var projectDescription = '';
if(projectDescription.length>5){
var htmlDescription = htmlEncode('');
htmlDescription = htmlDescription.replace(/<(?:.|\n)*?>/gm, '');
jQuery('header .project-description').text(htmlDescription);
jQuery('header h1').removeClass('padded');
}else{
jQuery('header .project-description').text('');
jQuery('header h1').addClass('padded');
}
jQuery('header .thumbnail').attr('src', 'indexdata/thumbnail.jpg');
}
//Insert group title, description and thumbnail into the modal
//@id is the group ID. If undefined, project title, description and thumbnail are used
var populateModal = function(id){
var groupTitle,groupDescription,groupImgSrc,authorName,tempImg;
if(id !== undefined){
//If it is a scene ID
if(jQuery('.slide[data-id='+id+']').length>0){
groupTitle = jQuery('.slide[data-id='+id+'] h2 .link-title').text();
groupDescription = jQuery('.slide[data-id='+id+'] .pano-description').eq(0).html();
groupDescription = htmlEncode(groupDescription);
tempImg = jQuery('.slide[data-id='+id+'] .pano-thumbnail img').eq(0);
groupImgSrc = tempImg.attr('src');
//else it is a group id
}else{
groupTitle = jQuery('.section[data-id='+id+'] .slide.active h2.group-title').text();
groupDescription = jQuery('.section[data-id='+id+'] .slide.active .group-description').html();
groupDescription = htmlEncode(groupDescription);
tempImg = jQuery('.section[data-id='+id+'] .slide.active .group-thumbnail').eq(0);
groupImgSrc = tempImg.attr('src');
}
//If undefined id, insert project info
}else{
groupTitle = 'HTL1 Lastenstraße';
groupDescription = '';
groupImgSrc = 'indexdata/thumbnail.jpg';
}
groupDescription = htmlEncode(groupDescription);
jQuery('.modal.group .image').css({backgroundImage:'url('+groupImgSrc+')'});
jQuery('.modal.group .group-title').text(groupTitle);
jQuery('.modal.group .group-description').html(groupDescription);
jQuery('.modal.group .group-description font').each(function(){
if(jQuery(this).attr('size')=='6'){
jQuery(this).replaceWith('
');
}
if(jQuery(this).attr('size')=='1'){
jQuery(this).replaceWith(''+jQuery(this).text()+'');
}
});
}
//Check all group descriptionand author informations. If empty, hide the "show group info" and author link
var checkGroupDescription = function(){
jQuery('.slide').each(function(){
var id = jQuery(this).closest('.section').attr('data-id');
var content = jQuery(this).find('.group-description').text();
var groupTitle = jQuery(this).find('.group-title').eq(0);
var sceneDescription = jQuery(this).find('.pano-description').eq(0).text();
//strip html tags
var sceneDescriptionStriped = strip(sceneDescription);
jQuery(this).find('.pano-description-short').text(sceneDescriptionStriped);
//Automatically toggle text description/html description according to description length
if(sceneDescriptionStriped.length>34){
jQuery(this).find('.toggle-scene-info, .pano-description-short').removeClass('none');
jQuery(this).find('.pano-description').addClass('none');
}else{
jQuery(this).find('.toggle-scene-info, .pano-description-short').addClass('none');
jQuery(this).find('.pano-description').removeClass('none');
}
if(content==''){
var groupTitleText = groupTitle.text();
groupTitle.text(groupTitleText);
jQuery('nav ul[data-id='+id+'] .toggle-group-info').parent().hide();
}
});
var author = jQuery('.modal .link-author').text();
if(author==''){
jQuery('.modal .author').addClass('none');
}
}
//Open/close modal
//@action can be 'open' or 'close'
var modal = function(action){
if(action == 'open'){
jQuery('.modal').addClass('layered-visible');
$.fn.fullpage.setAllowScrolling(false);
setTimeout(function(){
jQuery('.modal').addClass('opened');
}, 10);
}else if(action == 'close'){
jQuery('.modal').removeClass('opened');
$.fn.fullpage.setAllowScrolling(true);
setTimeout(function(){
jQuery('.modal').removeClass('layered-visible');
}, 500);
}else{
return;
}
}
//Automatically place the active/current scene/group at the middle of the screen
//@index (integer) is the index of the first childs
of the nav>ul
var autoScrollToActiveThumb = function(index){
if(index=='undefined'){
index = jQuery('nav>ul>li.active').index();
}
var windowHeight = jQuery(window).height();
var halfWindowHeight = windowHeight/2;
var itemHeight = jQuery('nav ul li:first-child').outerHeight();
var activeItemPosition = itemHeight*index;
var offset = activeItemPosition-halfWindowHeight+itemHeight/2;
if(activeItemPosition>halfWindowHeight){
jQuery('nav').slimscroll({scrollTo:offset+'px'});
}
}
/*
* EXECUTE ONCE DOM READY
*/
jQuery(document).ready(function() {
//Place a css class on the very first section (useful for helper)
jQuery('.section').eq(0).addClass('first-section');
//Full Page
jQuery('#fullpage').fullpage({
fixedElements: '#scene,header,#nav-overlay',
//normalScrollElements: 'nav',
scrollBar: false,
scrollOverflow: true,
autoScrolling: true,
anchors: theFinalSections,
//anchors: ['section1', 'section2', 'section3'],
afterRender: function(){
//Remove loader when fullpage has finished loading
jQuery('#loader').removeClass('opened');
setTimeout(function(){
jQuery('#loader').removeClass('layered-visible');
}, 1050);
if(startWithAutotour=='yes'){
displayPano();
autorotation('on')
}else{
autorotation();
displayPano();
}
},
afterLoad: function(anchorLink, index){
// console.log('after load');
},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
jQuery('.fp-prev, .fp-next, .previous-section, .next-section').addClass('closed');
setTimeout(function(){
//Get data from the current scene
var currentID = jQuery('.section.active .slide.active').attr('data-id');
getTourPlayer().call('mainloadscene('+currentID+')');
}, 550);
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
jQuery('.fp-prev, .fp-next, .previous-section, .next-section').removeClass('closed');
},
onLeave: function(index, nextIndex, direction){
jQuery('#helper').addClass('none');
setTimeout(function(){
//Get data from the current scene
var currentID = jQuery('.section.active .slide.active').attr('data-id');
getTourPlayer().call('mainloadscene('+currentID+')');
}, 550);
}
});
checkGroupDescription();
//When navigation bubbles exceeds viewport height
jQuery('nav').slimscroll({});
jQuery('.modal .group-description').slimscroll({
color: '#aaa',
alwaysVisible: true
});
//Replace escaped characters and parse HTML
jQuery('.html-encode').each(function(){
var RAW_HTML = jQuery(this).html();
var final = htmlEncode(RAW_HTML);
jQuery(this).html(final);
});
//Navigation bubbles: For a scene in a group
jQuery('nav a.pano-in-a-group').on('click', function(e){
e.preventDefault();
var theIndex = jQuery(this).parent().index();
var navIndex = jQuery(this).parent().parent().parent().index();
var theParent = jQuery(this).closest('ul');
var theGroupID = theParent.attr('data-id');
var theAnchor = jQuery(this).attr('data-target');
//If currently viewing the scene
if(jQuery('#scene').hasClass('layered-visible')){
getTourPlayer().call('mainloadscene('+theAnchor+')');
//If currently viewing the layer fullpage
}else{
$.fn.fullpage.silentMoveTo(theGroupID, theIndex);
}
});
//Navigation bubbles: For a single scene (not in a group)
jQuery('nav a.pano-single').on('click', function(e){
e.preventDefault();
var theIndex = jQuery(this).parent().index();
var theAnchor = jQuery(this).attr('data-target');
//If currently viewing the scene
if(jQuery('#scene').hasClass('layered-visible')){
getTourPlayer().call('mainloadscene('+theAnchor+')');
//If currently viewing the layer fullpage
}else{
$.fn.fullpage.silentMoveTo(theAnchor, theIndex);
}
});
//Display modal group info
jQuery('.toggle-group-info').on('click', function(e){
e.preventDefault();
var theTargetID = jQuery(this).attr('data-target');
// var theTargetID = jQuery('.section.active').attr('data-id');
populateModal(theTargetID);
if(jQuery('.modal .group-title').text()!==''){
modal('open');
}else {
return false;
}
});
//Display scene info
jQuery('.toggle-scene-info').on('click', function(e){
e.preventDefault();
// var theTargetID = jQuery(this).attr('data-target');
var theTargetID = jQuery(this).closest('.slide').attr('data-id');
populateModal(theTargetID);
modal('open');
});
//View pano
jQuery('.view-pano').on('click', function(e){
e.preventDefault();
displayPano();
});
//View layer
jQuery('#commands a.view-layer').on('click', function(e){
e.preventDefault();
displayLayer();
});
//next scene
jQuery('#commands a.next').on('click', function(e){
e.preventDefault();
getTourPlayer().call('loadNextScene()');
});
//previous scene
jQuery('#commands a.previous').on('click', function(e){
e.preventDefault();
getTourPlayer().call('loadPreviousScene()');
});
//Go to previous section
jQuery('.previous-section').on('click', function(e){
e.preventDefault();
$.fn.fullpage.moveSectionUp();
});
//Go to next section
jQuery('.next-section').on('click', function(e){
e.preventDefault();
$.fn.fullpage.moveSectionDown();
});
//Click to display project properties only when on displayLayer mode
jQuery('header').on('click', function(){
//If currently viewing scene
if(jQuery('#scene').hasClass('layered-visible')){
displayLayer();
//If currently viewing the layer fullpage
}else{
populateModal();
modal('open');
}
});
//Remove the next section button on the last section
jQuery('.section').eq(jQuery('.section').length - 1).find('a.next-section').hide();
//Remove the previous section button on the first section
jQuery('.section').eq(0).find('a.previous-section').hide();
//Add tooltips on previous and next arrows
jQuery('.fp-controlArrow.fp-next').attr('title', 'Next scene');
jQuery('.fp-controlArrow.fp-prev').attr('title', 'Previous scene');
//Display project info modal
// jQuery('header').on('click', function(){
// populateModal();
// modal('open');
// });
//Close modal command
jQuery('.modal .commands .close').on('click', function(e){
e.preventDefault();
modal('close');
});
//Toggle autorotation
jQuery('a.autorotation').on('click', function(e){
e.preventDefault();
if(jQuery(this).hasClass('on')){
autorotation('off');
//getTourPlayer().call('stopautorotation()');
//jQuery(this).removeClass('on');
}else{
if(startWithAutotour=='yes'){
autorotation('on');
displayPano();
}else{
autorotation('on');
}
//getTourPlayer().call('startautorotation()');
//jQuery(this).addClass('on');
}
});
//Enter/exit fullscreen
jQuery('a.fullscreen').on('click', function(e){
e.preventDefault();
if(jQuery(this).hasClass('enter')){
// requestFullScreen();
jQuery('body').fullscreen();
jQuery(this).removeClass('enter').addClass('exit');
}else{
// requestFullScreen('exit');
$.fullscreen.exit();
jQuery(this).removeClass('exit').addClass('enter');
}
});
});
jQuery(window).load(function(){
});
