var pageManager = { _current_page: {'index':0, 'alias':'', 'ready':true} , _loading_page: {'index':0, 'alias':'', 'ready':false} , _waiting: false , _ajax_target: '' , _animation_ready: true , _load_effect_duration: 1 , _pre_effect_duration: 1 , _left_toc_offset: 0 , _manual_load: false , _ie7: false , init: function(ajax_target, alias) { // set up all the links, set the current index if (/MSIE\s6/.test(navigator.userAgent)) { $$('body')[0].insert({'top': '

WARNING: Your Browser is Not Supported

You are using an out of date version of Internet Explorer. You can still use this site with your current browser if you choose, but we can\'t guarantee that it will look or work correctly. Don\'t worry - you can download a new browser for free. Try the latest version of Internet Explorer, or, better yet, check out Firefox or Google Chrome. Thanks!

Close this message.

'}); } pageManager._ie7 = /MSIE\s7/.test(navigator.userAgent); pageManager._current_page = pageManager._page_from_alias(alias); pageManager._loading_page = pageManager._current_page; pageManager._ajax_target = ajax_target; pageManager._fix_links(); SWFAddress.addEventListener(SWFAddressEvent.CHANGE, pageManager._load_effects); }, goto_page: function(alias) { // go to a page based on it's alias if (!pageManager._waiting) { pageManager._waiting = true; pageManager._goto_page(pageManager._page_from_alias(alias)); } }, _goto_page: function(page) { // go to a page based on it's index if (page.index == pageManager._current_page.index) { pageManager._waiting = false; return; } else { pageManager._loading_page = page; if ($$('.page')[page.index].down('.page-inner-content').innerHTML.length == 0) { // need to download content pageManager._animation_ready = false; pageManager._loading_page.ready = false; pageManager._ajax_req($H({'qc':0, 'alias':page.alias})); } pageManager._pre_effects(); } }, _content_loaded: function() { /*************************************************************************************** * called when ajax response is processed - insert content in page and let everybody know * that the content is ready for animations ***************************************************************************************/ if (this.header.sc == 0) { $(pageManager._loading_page.alias).down('.page-inner-content').update(this.body.content); pageManager._fix_links(); } else { pageManager._waiting = false; return; } pageManager._loading_page.ready = true; if (pageManager._animation_ready) { SWFAddress.setValue(pageManager._loading_page.alias) if (pageManager._manual_load) { pageManager._load_effects({path: pageManager._loading_page.alias}); } } }, _pre_effects: function() { /*************************************************************************************** * this (optional) function performs animation before the URL changes. if someone moves * from one page to another, it will happen as soon as they start the change, but before * the load_effects function. if someone arrives to a page directly, this function won't * be called. * * if this function isn't necessary, simply call the finished_pre function from this one ***************************************************************************************/ // change header, if necessary if (pageManager._current_page.alias == 'home') { // switch from home to sec $('home-header').visualEffect('fade', { duration: pageManager._pre_effect_duration }); $('sec-header').visualEffect('appear', { duration: pageManager._pre_effect_duration }); } else if (pageManager._loading_page.alias == 'home') { // switch from sec to home $('home-header').visualEffect('appear', { duration: pageManager._pre_effect_duration }); $('sec-header').visualEffect('fade', { duration: pageManager._pre_effect_duration }); } // shrink existing page $(pageManager._current_page.alias).down('.page-content').visualEffect('morph', { duration:pageManager._load_effect_duration, style: 'top:300px; height:0px;' } ); // move title down if (pageManager._current_page.alias == 'home') { $(pageManager._current_page.alias).down('.page-title').visualEffect('morph', { duration:pageManager._load_effect_duration, style: 'margin-top:479px;' } ); } else { $(pageManager._current_page.alias).down('.page-title').visualEffect('morph', { duration:pageManager._load_effect_duration, style: 'margin-top:364px;' } ); } // slide page var page_left_offset = (pageManager._loading_page.index * 3062) + 1062; $('slider').visualEffect('morph', { duration: pageManager._pre_effect_duration, style: 'left:-'+page_left_offset+'px;' }); // slide toc var width = $('top-toc').down('.'+pageManager._loading_page.alias).offsetWidth + 36; var toc_left_offset = pageManager._get_left_toc_offset(pageManager._loading_page.alias); $('top-toc').down('.'+pageManager._current_page.alias).removeClassName('selected'); $('selected-toc').visualEffect('morph', { duration:pageManager._pre_effect_duration, style: 'margin-left:'+(toc_left_offset + 30)+'px;width:'+width+'px;', afterFinish: function() { $('top-toc').down('.'+pageManager._loading_page.alias).addClassName('selected'); pageManager._finished_pre(); } } ); }, _finished_pre: function() { /*************************************************************************************** * this function must be called when the pre_effects function is complete - it starts the * load_effects function, but only if the content is ready to display (we might not be * finished downloading the content from the server). ***************************************************************************************/ pageManager._animation_ready = true; if (pageManager._loading_page.ready) { SWFAddress.setValue(pageManager._loading_page.alias); } }, _load_effects: function(event) { /*************************************************************************************** * this function is called by SWFAddress every time a page is loaded - it can start when * someone leaves one page for another, or if they come directly to a page ***************************************************************************************/ var path = event.path.replace(/\//g, ''); if (path != pageManager._loading_page.alias && path.length > 0) { // the page isn't loaded yet! need to download content pageManager._animation_ready = true; pageManager._loading_page = pageManager._page_from_alias(path); pageManager._loading_page.ready = false; pageManager._manual_load = true; pageManager._ajax_req($H({'qc':0, 'alias':path})); return true; } pageManager._manual_load = false; // feel specific effect - start the accoustic shift slider if (pageManager._loading_page.alias == 'real-feel') { feelMon.start(); } // video specific - insert the player if (pageManager._loading_page.alias == 'videos') { if (!$('videos').video_loaded) { swfobject.embedSWF("art/video-player.swf", "video-player", "840", "550", "9.0.0", false, {}, {wmode:"transparent"}, {}); $('videos').video_loaded = true; } } // faqs specifically - start the faq system if (pageManager._loading_page.alias == 'faqs') { if (!$('faqs').faqs_loaded) { faq_mon.init(); $('faqs').faqs_loaded = true; } } // check the header - might be wrong if we came here from a first load if (pageManager._loading_page.alias == 'home') { $('sec-header').hide(); $('home-header').show(); } else { $('sec-header').show(); $('home-header').hide(); } // check the selected toc - it might not be set if we came here from a first load var left_offset = pageManager._get_left_toc_offset(pageManager._loading_page.alias); var width = $('top-toc').down('.'+pageManager._loading_page.alias).offsetWidth + 36; $$('#top-toc .selected').each(function(s) { if (!s.hasClassName(pageManager._loading_page.alias)) { s.removeClassName('selected'); } }); $('top-toc').down('.'+pageManager._loading_page.alias).addClassName('selected'); $('selected-toc').setStyle('margin-left:'+(left_offset + 30)+'px;width:'+width+'px;'); // check the slider - make sure we are at the right offset var page_left_offset = (pageManager._loading_page.index * 3062) + 1062; $('slider').setStyle('left:-'+page_left_offset+'px;'); // show a page - rises up (so does page title) and grows at the same time var target_height = $(pageManager._loading_page.alias).down('.'+pageManager._loading_page.alias).offsetHeight + 49; $('slider').setStyle('height:' + (target_height + 115) + 'px;'); $(pageManager._loading_page.alias).down('.page-content').visualEffect('morph', { duration:pageManager._load_effect_duration, style: 'top:0px; height:'+target_height+'px;' , afterFinish:function() { $(pageManager._loading_page.alias).down('.page-content').setStyle('height:auto;top:0px;'); if (pageManager._ie7) { // need to make sure we set the window height in the faqs as well as here $$('.window')[0].setStyle('height:' + (target_height + 250) + 'px;'); } } } ); // move page title if (pageManager._loading_page.alias == 'home') { $(pageManager._loading_page.alias).down('.page-title').visualEffect('morph', { duration:pageManager._load_effect_duration, style: 'margin-top:149px;', afterFinish:pageManager._finished_all } ); } else { $(pageManager._loading_page.alias).down('.page-title').visualEffect('morph', { duration:pageManager._load_effect_duration, style: 'margin-top:64px;', afterFinish:pageManager._finished_all } ); } }, _finished_all: function() { /*************************************************************************************** * this function must be called when the load_effects function is complete - it gets the * manager ready for the next page request ***************************************************************************************/ pageManager._waiting = false; pageManager._current_page = pageManager._loading_page; }, _page_from_alias: function(alias) { /*************************************************************************************** * find an index based on the alias. to do that, we have to find the correct div in the * document based on it's id which should be the same as the alias. from there, the index * is simply the number of divs that come before the selected div with class "page". * * if for some reason the alias doesn't have a div, this function returns 0. ***************************************************************************************/ var _index = 0; // yeah, it's convoluted - should increment _index for every div.page before the given page for (;$(alias) && $(alias).previous('div.page', _index);++_index) {} return { 'alias': alias, 'index': _index, 'ready':true }; }, _get_left_toc_offset: function(alias) { // given an alias, gets the top toc left offset of that page's menu button var left = 0; for(var i = 0;$('top-toc').down('.'+alias) && $('top-toc').down('.'+alias).previous('li', i);++i) { left += $('top-toc').down('.'+alias).previous('li', i).offsetWidth + 36; } return left - (pageManager._ie7 ? 30 : 0); }, _fix_links: function() { // set up all of the links on the page - call this every time new content from the server is inserted on the page $$('a').each(function(s) { if (s.hasClassName('off-site')) { s.setAttribute('onclick', "window.open('"+s.href+"', '', ''); return false;"); } else { var href = s.href.split('/'); href = href[href.length - 1]; s.setAttribute('onclick', "pageManager.goto_page('"+href+"'); this.blur(); return false;"); if (pageManager._ie7) { if (s.href.indexOf('javascript:') == -1) { s.setAttribute('href', "javascript:pageManager.goto_page('"+href+"');"); } } } }); // rollovers $$('a.rollover').each(function(s){ var a = new Image(); var b = s.down().src; a.src = ( b.substring(0,b.lastIndexOf('.')) + '-over' + b.substring(b.lastIndexOf('.'),b.length) ); s.oldImg = a; s.onmouseover = pageManager._rollover_swap; s.onmouseout = pageManager._rollover_swap; }); }, _rollover_swap: function() { // if a drop down is open, close it if (this.oldImg) { a = this.down().src; this.down().src = this.oldImg.src; this.oldImg.src = a; } }, _ajax_validResponse: function(json) { if (json.length > 0) { eval('response = '+json); if (response.header) { return true; } } return false; }, _ajax_req: function(hash) { new Ajax.Request(pageManager._ajax_target, { method: 'post', parameters: hash, onSuccess: function(transport) { if (pageManager._ajax_validResponse(transport.responseText)) { eval('response = '+transport.responseText); pageManager._content_loaded.call(response); } }, onFailure: function(transport) { alert('Error connecting to server.'); } }); } }; var feelMon = { _step: 0 , _interval: 0 , start: function() { // reset interval window.clearInterval(feelMon._interval); $('shift-slide').setStyle('left:0px;'); feelMon._step = 0; feelMon._interval = window.setInterval(feelMon._change, 2600); }, _change: function() { var left = feelMon._step * -197; $('shift-slide').visualEffect('morph', { duration:.5, style:'left:'+left+'px;' , afterFinish: function() { feelMon._step = (feelMon._step + 1) % 4; } } ); } };