' +
link.next().innerHTML +
''+link.href+'' +
'
' +
'
'});
});
}
// Demo link Triangles
if ($('DemoLink'))
$('DemoLink').insert({top: ''});
}
}
// CSS3 Compliance
var html = {homeTxt: 'HomeBigText', bizTxt: 'BizLeft'};
// Shows or hides an animation step image with CSS3
function toggleCSS3 (elt, hide) {
(!!hide ? Element.removeClassName : Element.addClassName)(elt, 'Visible');
}
// Shows or hides an animation step image with Scriptaculous JS framework
function toggleJS (elt, hide) {
(!!hide ? Effect.Fade : Effect.Appear)(elt, {duration: Mx.params.animTime});
}
var toggleStep = css3 ? toggleCSS3 : toggleJS;
var BizAnim = Class.create({
initialize: function (biz, settings) {
this.biz = biz;
this.steps = $$('.'+Mx.css.stepClass+'_'+biz);
this.nbsteps = this.steps.length;
this.timer = 0;
// Initialize series of steps
this.init();
},
// toggleStep: css3 ? toggleCSS3 : toggleJS,
// Integrer toggle dans la classe
// Integrer les constantes (html, duration...
// Faire classe générique et étendre...
init: function () {
this.current = 0;
this.pause = true;
// Init steps (hide steps so that last will not stay for next anim)
this.steps.each(function (step, index) {
toggleStep(step, true);
});
// Init end/finish
this.txtBox = $(html.homeTxt) || $(html.bizTxt);
toggleStep(this.txtBox, true);
},
getCurrent: function () {
return this.steps[this.current];
},
next: function (handler) {
if (!this.pause)
{
// showing next step if not last
if (this.current < this.nbsteps - 1) {
toggleStep(this.getCurrent(), true);
this.current++;
mxlog('Next => '+this.getCurrent().id);
toggleStep(this.getCurrent());
}
// If last, showing finish & stoping Animation
if (this.current >= this.nbsteps - 1)
{
mxlog('Last => '+this.getCurrent().id);
this.stop();
this.finish();
}
this.timer = this.next.bind(this).delay(Mx.params.animTime);
// console.log(this.timer);
}
},
finish: function () {
if ($(html.homeTxt))
$('Title_'+this.biz).show().siblings().invoke('hide');
toggleStep(this.txtBox);
mxwarn('--- End Anim ---');
// console.groupEnd();
this.txtBox.fire('Anim:ended', {biz: this.biz});
},
start: function () {
if (this.pause)
{
// console.group('Anim ['+this.biz+']');
mxwarn('START ('+this.getCurrent().id+')');
this.pause = false;
toggleStep(this.getCurrent());
this.timer = this.next.bind(this).delay(Mx.params.animTime);
}
},
stop: function () {
window.clearTimeout(this.timer);
// console.warn(this.getCurrent().timer);
this.pause = true;
mxwarn('--- PAUSED ---');
}
});
var HomeAnim = Class.create({
initialize: function (bizs) {
this.current = 0;
this.anims = [];
bizs.each(function (biz) {
this.anims.push(new BizAnim(biz));
$('MenuLink_'+biz).observe('mouseenter', this.menuHover.bind(this, biz));
$('MenuLink_'+biz).observe('mouseleave', this.menuOut.bind(this));
}, this);
this.pause = true;
document.observe("Anim:ended", this.animWatcher.bind(this));
},
getCurrent: function () {
return this.anims[this.current];
},
start: function () {
this.pause = false;
this.getCurrent().start();
},
next: function () {
this.getCurrent().init();
this.current = (this.current + 1) % this.anims.length;
// Changing background !
$('Main').setStyle({background: 'url('+animImgs[this.getCurrent().biz].background.src+') left top no-repeat'});
// Changing Tripod's top
$('TripodTop').src = animImgs[this.getCurrent().biz].tripodTop.src;
this.getCurrent().start();
},
animWatcher: function (event) {
// event.stop();
mxwarn('--- AnimFinish triggered ---');
this.timer = this.next.bind(this).delay(5);
// console.log(this.timer);
},
menuHover: function (biz) {
this.stop();
toggleStep($('HomeBigText'));
// homeleft.select('.Title').invoke('hide');
$('BizText_'+biz).show().siblings().invoke('hide');;
},
menuOut: function () {
// toggleStep($('HomeBigText'), true);
this.start();
},
stop: function () {
this.getCurrent().stop();
window.clearTimeout(this.timer);
// console.warn(this.timer);
this.pause = true;
}
});
/*
// Anim controls
Event.observe(window, 'load', function () {
$('Main').insert({after: 'Init' +
'Start' +
'Stop'
});
})
*/
function newTab (link) {
window.open(link.href);
return false;
}
function setMessage (elt, type, msg) {
var types = ['Error', 'Warning', 'Message'];
types.each( function (c) {
if (elt.hasClassName(c))
elt.removeClassName(c);
});
elt.addClassName(type).update(msg).show();
}
// links and tabs must be in the same order from their parents !
function switchTab (tabs, link) {
if (Object.isString(link))
link = $(link);
if (Object.isString(tabs))
tabs = $(tabs);
var index = link.up().childElements().indexOf(link);
// Shows tab and hides others
tabs.childElements()[index].show().siblings().invoke('hide');
// Makes the clicked link the "Current" one (allowing css styling)
link.addClassName('Current').adjacent('.Current').invoke('removeClassName', 'Current');
return false;
}
/*
//Gestion du dimensionnement automatique des images de la prévisualisation en fct de la taille de la fenetre (script.php5 / preview.tpl)
var imgResize = function (img) {
var win = document.viewport.getDimensions();
var ratioWin = win.width / win.height;
// Redimensionnement si la fenêtre fait une taille minimum
if (win.height > minHeight + 2*Config.previewMargin)
{
if (ratioImg >= ratioWin)
{
// L'image n'est pas agrandi si la fenêtre est + grande
var newWidth = win.width > image.width ? image.width : win.width - 2 * Config.previewMargin;
img.setStyle({width:newWidth+'px', height:''});
}
else
{
// L'image n'est pas agrandie si la fenêtre est + grande
var newHeight = win.height > image.height ? image.height : win.height - 2 * Config.previewMargin;
img.setStyle({width:'', height:newHeight+'px'});
}
}
};
*/
// Using Box for centered images
function imgFrame (img) {
var imgContent;
// if url (not an existing image in page
if (Object.isString(img))
{
imgContent = new Image();
imgContent.src = img;
}
// If img is an Element
else
{
imgContent = $(img).clone().removeClassName('Zoom');
var win = document.viewport.getDimensions();
// max-height is Viewport Height - 75px (2*15px[box padding] + (25+10)px[title height] + 2*5px[top/bottom space left])
var spaceTaken = 2*15 + 25+10 + 2*5;
imgContent.setStyle({display: 'block', maxHeight: (win.height-spaceTaken)+'px', margin: '0 auto'}).stopObserving();
}
return showBox(imgContent, img.alt);
}
function contentFrame (html, title) {
return showBox(html, title);
}
// Using Box for web page
function frame (url, title, settings) {
settings = Object.isUndefined(settings) ? '' : settings;
var win = document.viewport.getDimensions();
var spaceTaken = 2*15 + 25+10 + 2*5 + 5;
style = Object.isUndefined(settings.style) ? '' : settings.style;
var content = '';
return showBox(content, title);
}
function switchBox (content, title, settings) {
closeBox();
return frame(content, title, settings);
}
var animImgs = [];
var home;
function homeAnim (bizs) {
// if (DEBUG) console.profile();
// Preloading next animation
var elt = $('HomeLeft');
bizs.each(function (biz, index) {
animImgs[biz] = { background: new Image(), tripodTop: new Image(), steps: [] };
// Preloading background
animImgs[biz].background.src = Mx.urls.img + '/background-' + biz + '.jpg';
// Preloading tripod head
animImgs[biz].tripodTop.src = Mx.urls.img + '/tripod-top-' + biz + '.png';
$R(1,3).each(function(step) {
// Preloading each step...
var img = new Image();
img.src = Mx.urls.img + '/anim/anim-'+biz+'-'+step+'.png';
animImgs[biz].steps.push(img);
// ...and inserting them in the page
var imgID = 'AnimStep_'+biz+'_'+step;
if (!$(imgID))
{
// Anim Images are style with opacity:0.
// Images are "display:none" in IE bacause it doesn't handle opacity
var html = '';
if (!Prototype.Browser.IE)
elt.show();
elt.insert({before: html});
}
else
elt.show();
});
});
home = new HomeAnim(bizs);
home.start();
// if (DEBUG) console.profileEnd();
}
// Business Home Animation (shows & hides each steps of the animation one after the other
var anim;
function bizHomeAnim (biz) {
anim = new BizAnim(biz);
anim.start();
}
// DEMO
var videos = [{
// tableau des vidéos
title : 'Relev\351 d\'une pi\350ce',
url : 'http://www.youtube.com/embed/k5YmN3EEKRo',
img : 'http://i4.ytimg.com/vi/k5YmN3EEKRo/default.jpg'
},{
title : 'Relev\351 d\'un poteau',
url : 'http://www.youtube.com/embed/OhCsUUB-Zjo',
img : 'http://i4.ytimg.com/vi/OhCsUUB-Zjo/default.jpg'
},{
title : 'Relev\351 d\'une ouverture',
url : 'http://www.youtube.com/embed/5J_Yy9eDwto',
img : 'http://i2.ytimg.com/vi/5J_Yy9eDwto/default.jpg'
},{
title : 'Relev\351 d\'une surface < 1m80',
url : 'http://www.youtube.com/embed/7YSZABDf2PA',
img : 'http://i4.ytimg.com/vi/7YSZABDf2PA/default.jpg'
},{
title : 'Relev\351 d\'un plafond 2 pentes',
url : 'http://www.youtube.com/embed/ovHNXVl3k-o',
img : 'http://i4.ytimg.com/vi/ovHNXVl3k-o/default.jpg'
},{
title : 'Relev\351 de charpente',
url : 'http://www.youtube.com/embed/kXkjTgVHvMs',
img : 'http://i4.ytimg.com/vi/kXkjTgVHvMs/default.jpg'
// },{
// title : 'Relev\351 d\'un bâtiment',
// url : 'http://www.youtube.com/embed/JVE-ByiAXQQ',
// img : 'http://i3.ytimg.com/vi/JVE-ByiAXQQ/default.jpg'
},{
title : 'Relev\351 d\'une poutre',
url : 'http://www.youtube.com/embed/GQRPLLS5QV8',
img : 'http://i4.ytimg.com/vi/GQRPLLS5QV8/default.jpg'
}];
var fullDemo = {
title : 'D\351monstration TRIPOD Measurix',
url : 'http://www.youtube.com/p/8E3F9F03524D89CE',//'http://www.youtube.com/watch?v=k5YmN3EEKRo&feature=PlayList&p=8E3F9F03524D89CE&index=0&playnext=1',//
img : 'resources/img/logo-small.jpg'
};
var vidLink = '' +
'#{title}' +
'';
var getVideoLink = function (index) {
return videos[index-1] ? vidLink.interpolate({
index:index,
title:index + '. ' + videos[index-1].title,
img:videos[index-1].img,
url:videos[index-1].url
}) : '';
};
var setVideo = function (index) {
// Full Demo
$$('a.VideoLink').invoke('removeClassName', 'CurrentVideo');
if (!videos[index-1])
{
// IE Object Patch !
if ($('IEPL'))
$('IEPL').remove();
// Set video title
$('VideoTitle').innerHTML = fullDemo.title;
// IE Object Patch !
if (Prototype.Browser.IE)
{
var pl = '';
$('YoutubeDemoVideo').hide();
$('EmbeddedVideo').insert({top:pl});
}
else
{
// Remove IE Object Patch !
if ($('IEPL'))
$('IEPL').remove();
$('YoutubeDemoVideo').show();
// End Patch
$('YoutubeDemoVideo').src = fullDemo.url+'?rel=0&autoplay=1&fs=1';
}
$('VideoLink_'+index).addClassName('CurrentVideo');
// set next & prev links
$('PreviousVideo').innerHTML = $('NextVideo').innerHTML = '';
}
// tests de l'ID
else if ($('YoutubeDemoVideo'))
{
// IE Object Patch !
if ($('IEPL'))
$('IEPL').remove();
$('YoutubeDemoVideo').show();
// End Patch
// Set video title
$('VideoTitle').innerHTML = index + '. ' + videos[index-1].title;
// set Video
$('YoutubeDemoVideo').src = videos[index-1].url+'?rel=0&autoplay=1&version=3';
$('VideoLink_'+index).addClassName('CurrentVideo');
// set next & prev links
$('PreviousVideo').innerHTML = getVideoLink(index-1);
$('NextVideo').innerHTML = getVideoLink(index+1);
$('Demo').scrollTo();
}
return false;
};
function initDemo () {
$('EmbeddedVideo').show();
var html = '';
html += vidLink.interpolate({index:0, title:fullDemo.title, img:fullDemo.img, url:fullDemo.url}) + '| ' +
' ' +
' ' +
'  ' +
' Tour de France 2011 et Concours TRIPOD' + 'Inscrivez-vous pour le Tour de France 2011 et gagnez un TRIPOD !' + ' ' + ' Inscription G\351om\350tres' + '  ' +
' ' +
' ' +
' Inscription Architectes' + '  ' +
' ' +
' ' +
' Inscription Diagnostiqueurs' + '  ' +
' ' +
' Actualit\351 Measurix !' + '' +
' ' +
' Un G\351om\350tre heureux !' + '' +
' \253 Je tenais \340 vous remercier pour cette journ\351e extraordinaire au circuit de SPA.' +
' Vous m\'avez donn\351 une grosse envie d\'essayer le pilotage. \273 ' +
' ' +
' | ' +
'
| ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' Actualit\351 Measurix !' + '' +
' ' +
' Tour de France Circuit' + '' +
' ' +
' ' +
' ' +
' ' +
' ' +
' | ' +
'
| ' +
'' +
' ' +
' ' +
'' +
'' +
'' +
' | ' +
'
',
news: '#{data}
' }; var news = [ { title: 'Tour de France Circuit', data: [ [{src: 'circuit-1.jpg'}, {src: 'circuit-2.jpg'}].map( function (item) { return tpl.img.interpolate(item); }).join('') + '' +
'' +
'' +
'' +
' |
' +
' 
' +
' 
' +
' 
' +
' 
' +
' 