window.addEvent('domready', function() { fixNav(); // correct borders, add bullets fixOverlays(); // sets height on overlays hookNav(); //slide lhs navigation hookWhereNext(); if (window.ie6) fixPNG(); // fixes PNG display - TODO edit path in the .htc }); /* NAV FIXING */ function fixNav() { stripBorder($('navbar').getChildren().pop().getChildren()[0]); stripBorder($('nav2').getChildren().pop().getChildren()[0]); var subChildren = $$('#navbar ul').each(function(el) { var kids = el.getChildren(); if (kids) stripBorder(kids.pop().getChildren()[0]); }); if($('lhs')) { var sideNav = $('lhs').getElement('ul'); if (sideNav) { var actives = sideNav.getElements('.active'); var menuSelected = {'color':'#cd1805','font-weight':'normal', 'background':'url('+ incPath +'/images/lhs-arrow.png) 96% 50% no-repeat'}, mainHeader = {'background':'#dadecf','font-weight':'bold'}, subHeader = {'background':'#edeee8','font-weight':'bold'}; switch (actives.length) { case 1: actives[0].getChildren()[0].setStyles(menuSelected).setStyle('font-weight','bold'); break; case 2: actives[0].setStyle('background', '#fff'); actives[0].getChildren()[0].setStyles(mainHeader); actives[1].getChildren()[0].setStyles(menuSelected); slideNavOpen(actives[0]); break; case 3: actives[0].getChildren()[0].setStyles(mainHeader); actives[1].getChildren()[0].setStyles(subHeader); actives[1].setStyle('background', '#fff'); actives[2].getChildren()[0].setStyles(menuSelected); slideNavOpen(actives[1]); break; } } } } function slideNavOpen(o) { o.setStyle('overflow', 'hidden'); var navSlide = new Fx.Tween(o, {duration:1000}); navSlide.start('height', o.getElements('a')[0].clientHeight, o.clientHeight); } function stripBorder(el) { if (el) el.setStyle('border-right', 'none'); } /* Nav hooking */ function hookNav() { var alreadyActive = $('head').getElements('.active'); allNav = $('navbar').getChildren().extend($('nav2').getChildren()), setAllInactive = function() { allNav.each(function(el){ el.removeClass('active'); el.getElements('li').removeClass('active'); }); }; allNav.each(function(el) { el.child = el.getElement('ul'); el.showChildren = function() { if (el.hasClass('active')) return; setAllInactive(); if (el.child) el.child.getElements('li').each(function(li){ var fx = new Fx.Tween(li, { duration:500 }); fx.start('margin-top', -23,0); }); el.addClass('active'); }; el.addEvent('mouseover', el.showChildren); el.getElements('li').each(function(li){ li.addEvent('mouseover', function() { li.getParent().getChildren().removeClass('active'); li.addClass('active'); }); }); }); // mouseoutage if ($('banner')) $('banner').addEvent('mouseover', function() { if (alreadyActive.hasClass('active')) return; setAllInactive(); alreadyActive.each(function(li, i) { if (i==0) li.showChildren(); else li.addClass('active'); }); }); } /* Global home */ function hookGlobalHome() { // dataset var ul = $$('#homeright ul'); if (!ul) return; var container = $$('#homeright .homecontent'), topbar = new Element('div', {'class': 'topbar'}); container.adopt(topbar); var scroll = new Fx.Scroll($$('#homeright .mapwrapper'), { wait: false, duration: 800, offset: {'x': -100, 'y': -120}, transition: Fx.Transitions.Sine.easeInOut }); count = 0; ul.getChildren().each(function(li) { var kids = li.getChildren(), label = kids[0], sublocations = kids[1], tb_link = new Element('a', {'href':'#'}); clickfunction = function(ev) { if (this.hasClass('active')) return stopEvent(ev); scroll.toElement(this); $$S('.topbar a').removeClass('active'); $$S('#homeright li'). each(function(el){ if (!el.hasClass('active')) return; var dur = window.ie ? 0 : 200; new Fx.Style(el, 'opacity', {duration:dur, onComplete: function(){ el.removeClass('active'); el.setStyle('opacity', 1); }}).start(1, 0.5); }); this.addClass('active'); tb_link.addClass('active'); if (window.ie6) fixPNG(); return stopEvent(ev); }.bind(li); li.addEvent('click', clickfunction); tb_link.addEvent('click', clickfunction); //override the stopEvent for the actual links li.getElements('a').each(function(a){ a.onclick = function() { window.location.href = a.href; } }); if (count==0) clickfunction(); count++; tb_link.adopt(label.clone()); topbar.adopt(tb_link); }); // inject the home banner if flash is available $$('#banner').getChildren()[0].remove(); $$('#banner').adopt(new Element('div', {id:'homeflashbanner'})); swfobject.createSWF({data:incPath+"/flash/home.swf", width:"960", height:"254", wmode:'opaque'}, {wmode:'opaque'}, "homeflashbanner"); } /* LOCATION HOME */ // reverts = array of events to trigger before doing something else (eg switching focus) var reverts = new Array(); function revert() { reverts.each(function(func) { // revert any current boxes to hidden func(); }); reverts = new Array(); // empty } function fixOverlays() { $$('.overlay').each(function(overlay){ overlay.setStyle('height', overlay.getParent().clientHeight); }); } function hookLocationHome() { var head = $$('#homehead'); if (!head) return; // attach to the up-arrows $$('.blockhead .up').each(function(link) { var container = link.getParent().getParent(); clickFunction = function(ev) { // "this" = container var replacement = this.getElement('.fullcontent'); // if this container's already displaying, exit; if (!replacement.hasClass('hide')) return; revert(); // closes other boxes // set to current height and increase it replacement.removeClass('hide'); new Fx.Style(replacement, 'height', {duration:500}).set(this.clientHeight).start(180); replacement.setStyle('overflow', 'hidden'); // fade in the overlay $$('.overlay').each(function(overlay){ if (overlay.hasClass('hide')) { // only remove if overlay is hidden overlay.removeClass('hide'); new Fx.Style(overlay, 'opacity', {duration:200}).set(0).start(0.6); reverts[reverts.length] = function() { new Fx.Style(overlay, 'opacity', {duration:200, onComplete: function() { overlay.addClass('hide'); }}).start(0); }; overlay.addEvent('mouseover', revert); } }); // overlays to trigger a close when you mouse-out - top is covered by the main overlay var overLeft = new Element('div', {styles:'left:-5px;bottom:0;width:5px;height:180px;position:absolute;z-index:1000'}), overRight = new Element('div', {styles:'right:-5px;bottom:0;width:5px;height:180px;position:absolute;z-index:1000'}), overBottom = new Element('div', {styles:'left:0;bottom:-5px;width:231px;height:5px;position:absolute;z-index:1000'}); overLeft.addEvent('mouseover', revert); overRight.addEvent('mouseover', revert); overBottom.addEvent('mouseover', revert); replacement.getParent().adopt(overLeft); replacement.getParent().adopt(overRight); replacement.getParent().adopt(overBottom); // add this box to the list of reverts needed before another box shows reverts[reverts.length] = function() { overLeft.remove(); overRight.remove(); overBottom.remove(); new Fx.Style(this, 'height', {duration:500, onComplete:function() { this.addClass('hide'); if (this.flashID) replacement.removeChild($$('#'+this.flashID)); }.bind(this)}).start(replacement.getParent().clientHeight); }.bind(replacement); // check for flash content and activate? swfobj? var flvswapout = this.getElement(".miniflv"); if (flvswapout) { var randomID = 'swf' + Math.floor(Math.random()*1000000), flashURL = flvswapout.getText(), par = {flashvars:'vid='+flashURL, wmode:'opaque'}, att = {data:incPath+"/flash/smallplayer.swf", width:"231", height:"146", wmode:'opaque'}; replacement.flashID = randomID; // so we can nuke it later on flvswapout.getParent().adopt(new Element('div', {id:randomID})); swfobject.createSWF(att, par, randomID); } var mapswapout = this.getElement('.minimap'); if (mapswapout) { var randomID = 'swf' + Math.floor(Math.random()*1000000), flashURL = mapswapout.getText(), par = {flashvars:'vid='+flashURL, wmode:'opaque'}, att = {data:incPath+"/flash/smallplayer.swf", width:"231", height:"146", wmode:'opaque'}; replacement.flashID = randomID; // so we can nuke it later on mapswapout.getParent().adopt(new Element('div', {id:randomID})); swfobject.createSWF({data:flashURL, width:"231", height:"146", wmode:'opaque'}, {wmode:'opaque'}, randomID); } stopEvent(ev); // kill the click event }.bind(container); //link.addEvent('click', stopEvent); container.addEvent('mouseover', clickFunction); //container.getElement('.fullcontent').addEvent('mouseout', revert); //$('content').addEvent('mouseout', revert); }); // create a merry-go-round on the banner. switch out text, etc, on a timer // cease timing on mouse-over, continue on mouse-out // also allow direct navigation from a drop down in the top-right var items = head.getElements('.item'), overlay = head.getElement('.overlay'), navbar = new Element('ul', {'class':'hhdropdown'}); if (!items | items.length==0) return; head.adopt(navbar); // show the first item items[0].removeClass('hide'); // function for switching slides head.switchSlide = function(item) { if (currentI == item | item >= items.length | item < 0) return; var current = items[currentI], next = items[item]; currentI = item; // fade in overlay, hide current item, display hidden item, fade out overlay.removeClass('hide'); new Fx.Style(overlay, 'opacity', {duration:200, onComplete: function() { // switch content current.addClass('hide'); next.removeClass('hide'); // and fade out new Fx.Style(overlay, 'opacity', {duration:200, onComplete: function() { overlay.addClass('hide'); }}).start(0); }}).set(0).start(1); var navhider = new Fx.Style(navbar, 'opacity', {duration:200, onComplete: function() { navhider.start(1); }}).start(0.1); }; // preload background images & create navigation entry var count = 0; items.each(function(item){ var i = new Image(1,1); i.src = item.getStyle('background-image'); var link = new Element('a'), thisI = count; link.addEvent('click', function() { head.switchSlide(thisI); }); link.setText(item.getElement('.head').getChildren()[1].getText() ); navbar.adopt(new Element('li').adopt(link)); count++; }); navbar.fx = new Fx.Style(navbar, 'height', {duration:200, wait:false}); navbar.fullHeight = navbar.getStyle('height'); navbar.setStyle('height', 0); navbar.hidden = true; navbar.toggle = function() { if (navbar.hidden) navbar.fx.start(navbar.fullHeight); else navbar.fx.start(0); navbar.hidden = !navbar.hidden; }; navbar.addEvent('mouseover', navbar.toggle); navbar.addEvent('mouseout', navbar.toggle); var pauseMGR = false; head.addEvent('mouseover', function() { pauseMGR = true; }); head.addEvent('mouseout', function() { pauseMGR = false; }); var currentI = 0, nextI = function() { if (currentI == items.length-1) return 0; return currentI + 1; }; var switcher = function() { if (this.length < 2 | !overlay.hasClass('hide') | pauseMGR) return; head.switchSlide(nextI()); }; switcher.periodical(10000, items); } /* Where Next pop-up contact-me page */ function hookWhereNext() { $('nav2').getElement('a').addEvent('click', openOverlay); $('wnform').addEvent('submit', function(e) { new Event(e).stop(); var log = $('wn-callback'); this.send({ update: log, onComplete: showWNCallback() }); }); } function showWNCallback() { $('wn-callback').style.display = "block"; } function hideWNCallback() { $('wn-callback').style.display = "none"; } function openOverlay (ev) { $('wn-container').style.display = 'block'; stopEvent(ev); } function closeOverlay() { $('wn-container').style.display = 'none'; } /* SHARED */ function stopEvent(ev) { // Kills all known events... Dead. if (!ev) return false; if (ev.stopPropagation) { ev.stopPropagation(); ev.preventDefault(); } else { ev.returnValue = false; ev.cancelBubble = true; } return false; } function fixPNG() { $$('a').setStyle('behavior', 'url(../iepngfix.htc)'); $$('div').setStyle('behavior', 'url(../iepngfix.htc)'); $$('span').setStyle('behavior', 'url(../iepngfix.htc)'); } function getObjectID(object) { var objectID = (object).split('_'); objectID = objectID[1]; return objectID; } function hookFloorPlans(floorplanlocation) { if(floorplanlocation == 'london-spitalfields') { var path = incPath + '/images/floor-plans-images/spitalfields/'; //get the first nav item and set it to active var activeNavItem1 = $('floor-plan-scroll-container-1').getElement('a'); var activeNavItem2 = $('floor-plan-scroll-container-2').getElement('a'); var activeNavItem3 = $('floor-plan-scroll-container-3').getElement('a'); var activeFloorNav = $('floor-plan-levels').getElement('a'); //initialise the first image to be active activeNavItem1.getElement('img').src = (path + getObjectID(activeNavItem1.name) + "-on.gif"); activeNavItem2.getElement('img').src = (path + getObjectID(activeNavItem2.name) + "-on.gif"); activeNavItem3.getElement('img').src = (path + getObjectID(activeNavItem3.name) + "-on.gif"); activeFloorNav.getElement('img').src =(path + activeFloorNav.name + "-on.gif"); var container1 = $('floor-plan-scroll-container-1'); var container2 = $('floor-plan-scroll-container-2'); container2.addClass('hide'); var container3 = $('floor-plan-scroll-container-3'); container3.addClass('hide'); //removes the noscript tag $('floor-plan-scroll-container-1').removeClass('noscript'); $('floor-plan-scroll-container-2').removeClass('noscript'); $('floor-plan-scroll-container-3').removeClass('noscript'); var scroll1 = new Fx.Scroll('floor-plan-scroller-1', { wait: false, duration: 1, offset: {'x': 0, 'y': 0}, transition: Fx.Transitions.Sine.easeInOut }); var scroll2 = new Fx.Scroll('floor-plan-scroller-2', { wait: false, duration: 1, offset: {'x': 0, 'y': 0}, transition: Fx.Transitions.Sine.easeInOut }); var scroll3 = new Fx.Scroll('floor-plan-scroller-3', { wait: false, duration: 1, offset: {'x': 0, 'y': 0}, transition: Fx.Transitions.Sine.easeInOut }); $('floor-plan-scroll-container-1').getElements('a').addEvent('click', function(event){ event = new Event(event).stop(); if(this != activeNavItem1) { var objectID = getObjectID(this.name); scroll1.toElement(objectID); var activeImg1 = this.getElement('img'); activeImg1.src = (path + objectID + "-on.gif"); activeNavItem1.getElement('img').src = (path + getObjectID(activeNavItem1.name) + "-off.gif"); activeNavItem1 = this; } else { //do nothing, you clicked on the same item again } }); $('floor-plan-scroll-container-2').getElements('a').addEvent('click', function(event){ event = new Event(event).stop(); if(this != activeNavItem2) { var objectID = getObjectID(this.name); scroll2.toElement(objectID); var activeImg2 = this.getElement('img'); activeImg2.src = (path + objectID + "-on.gif"); activeNavItem2.getElement('img').src = (path + getObjectID(activeNavItem2.name) + "-off.gif"); activeNavItem2 = this; } else { //do nothing, you clicked on the same item again } }); $('floor-plan-scroll-container-3').getElements('a').addEvent('click', function(event){ event = new Event(event).stop(); if(this != activeNavItem3) { var objectID = getObjectID(this.name); scroll3.toElement(objectID); var activeImg3 = this.getElement('img'); activeImg3.src = (path + objectID + "-on.gif"); activeNavItem3.getElement('img').src = (path + getObjectID(activeNavItem3.name) + "-off.gif"); activeNavItem3 = this; } else { //do nothing, you clicked on the same item again } }); $('floor-plan-levels').getElements('a').addEvent('click', function(event){ event = new Event(event).stop(); if(this != activeFloorNav) { var activeFloorImg = this.getElement('img'); activeFloorImg.src = (path + this.name + "-on.gif"); activeFloorNav.getElement('img').src = (path + activeFloorNav.name + "-off.gif"); activeFloorNav = this; var allLevels = $('floor-plan-levels').getElements('a'); var levelSize = allLevels.length; for(var i=0; i