Box = new Class({
Implements: [Options, Events],
options: {
type: 'html',
width: 200,
height: 100,
margin: 124,
delay: 400,
zIndex: 1,
clip: {
top: 20,
right: 20,
bottom: 20,
left: 20
},
title: '',
description: ''
},
initialize: function(options){
this.setOptions(options);
this.fireEvent('beforeOpen');
this.options.margin += 30;
},
construct: function(){
this.width = this.options.width;
this.height = this.options.height;
this.cover = new Element('div', {
styles: {
width: window.getWidth(), height: window.getHeight(), 
'z-index': 999 * this.options.zIndex,
opacity: 0
},
events: {
click: this.close.bind(this)
},
'class': 'cover',
title: 'Fermeture',
id: 'cover_page'
}).inject(document.body).fade(1);
this.box = new Element('div', {
'class': 'box loading', id: 'box',
styles: {
'z-index': (999 * this.options.zIndex) + 1,
'width': this.options.width, 'height': this.options.height
}
}).inject(document.body);
this.resizeFx = new Fx.Morph(this.box, {
duration: this.options.delay + 100,
link: 'cancel',
transition: 'circ:out'
});
this.container = new Element('div', {
'class': 'boxCont'
}).inject(this.box);
this.loadFx = new Fx.Tween(this.container, {
duration: this.options.delay + 100,
transition: 'circ'
});
this.addEvent('load', (function(){
this.loadFx.start('opacity', 1);
this.box.removeClass('loading');
}).bind(this));
this.content = new Element('div', {
'class': 'boxContCont'
}).inject(this.container);
this.navBar = new Element('div', {
'class': 'boxNavBar'
}).inject(this.container);
this.title = new Element('h4', {
text: this.options.title,
styles: {
padding: '5px 15px', 'float': 'right'
}
}).injectTop(this.navBar);
this.closeBtn = new Element('button', {
'class': 'box-close box-btn',
title: '<b>Fermeture</b>', text: 'Close',
events: {
click: (function(){
this.close();
}).bind(this)
}
}).injectTop(this.navBar);
this.closeBtn.tip({x: -6, y: 6});
this.box.setStyles({left: this.x(), top: this.y()});
this.fn = (function(){
this.center();
}).bind(this);
window.addEvents({'resize': this.fn, 'scroll': this.fn});
},
open: function(){
this.construct();
this.center();
this.container.fade('hide');
this.fireEvent('open', '', 500);
},
resize: function(fnResize){
this.content.setStyle('height', 'auto');
this.navBar.setStyle('width', this.width);
var h = this.height + this.navBar.getHeight();
this.resizeFx.addEvents({
onComplete: (function(){
fnResize.call();
this.center();
this.resizeFx.removeEvents('complete');
}).bind(this)
});
this.resizeFx.start({
width: this.width,
height: h,
left: this.x(),
top: this.y()
});
},
adapt: function(dims){
var ndims = proportions.constrain(
dims, window.getWidth() - this.options.clip.left - this.options.clip.right - (parseInt(this.box.getStyle('padding')) * 2),
window.getHeight() - this.navBar.getHeight() - this.options.clip.top - this.options.clip.bottom - (parseInt(this.box.getStyle('padding')) * 2)
);
if(dims.width > ndims.width){
this.height = ndims.height;
this.width = ndims.width;
}
else {
this.height = dims.height;
this.width = dims.width;
}
},
x: function() {
var w = window.getWidth() - this.options.clip.left - this.options.clip.right;
return (((w - this.width) / 2) + this.options.clip.left) +
window.getScroll().x - parseInt(this.box.getStyle('padding'));
},
y: function() {
var h = window.getHeight() - this.options.clip.top - this.options.clip.bottom;
return (((h - this.height - this.navBar.getHeight()) / 2) + this.options.clip.top) +
window.getScroll().y - parseInt(this.box.getStyle('padding'));
},
center: function(onCenter) {
new Fx.Morph(this.box, {
onComplete: onCenter
}).start({
left: this.x(),
top: this.y()
});
this.cover.setStyles({
width: window.getWidth(),
height: window.getHeight()
});
if(Browser.Engine.trident && Browser.Engine.version < 8)
this.cover.setStyles({
top: window.getScroll().y,
position: 'absolute'
});
},
ajax: function(url, options){
new Request.HTML($merge({
url: url,
headers: {
'X-template': 'module'
},
evalScripts: true,
update: this.container,
onSuccess: (function(){
this.height = this.container.getHeight();
this.resize(this.fireEvent.bind(this, 'load'));
}).bind(this)
}, options)).send();
},
html: function(HTML){
this.open();
this.content.appendHTML(HTML);
},
image: function(url){
return this.img(url);
},
img: function(url){
var img = new Asset.image(url, {
onload: (function(){
var w = img.width;
this.adapt({
width: img.width,
height: img.height
});
this.resize((function(){
this.fireEvent('load');
img.inject(this.content).set({
height: this.height,
width: this.width
});
if($defined(window.Zoom)){
var ratio = w / this.width;
if(ratio > 1)
var zm = new Zoom(this.content).dblClick(ratio);
}
}).bind(this));
}).create({delay: this.options.delay, bind: this})
});
return img;
},

flash: function(url, options){
this.swf(url, options);
},
swiff: function(url, options){
this.swf(url, options);
},
swf: function(url, options){
},

vcard: function(options){
},
map: function(url, options){
this.kml(url, options);
},
geo: function(url, options){
this.kml(url, options);
},
kml: function(url, options){
var options = $merge({
map: {
lon: 2.475010,
lat: 48.754835
},
width: 600,
height: 450
}, options);
var unloadMap = (function(){
GUnload();
this.removeEvent('close', unloadMap);
}).bind(this);
this.addEvent('close', unloadMap);
this.adapt({
width: options.width,
height: options.height
});
var show = function(){
this.content.setStyle('height', this.height);
var map = new G.Map2(this.content);
map.setCenter(new G.LatLng(options.map.lat, options.map.lon), 12);
map.enableScrollWheelZoom();
var access = new G.GeoXml(url);
G.Event.addListener(access, 'load', function(){
access.gotoDefaultViewport(map);
});
map.addOverlay(access);
this.fireEvent('load');
}
this.resize((function(){
if(!window.google) loadGMap(site.GKey, show.bind(this));
else show.bind(this)();
}).bind(this));
},

flv: function(url, options){
this.flow(url, options);
},
video: function(url, options){
this.flow(url, options);
},
flow: function(url, options){
var options = $merge({
options: flowConf.options,
player: flowConf.player
}, options);
options.options.clip = {
autoPlay: true,
autoBuffering: true,
url: url
}
var playr = new Element('div');
var video = function(){
(function(){
img.dispose();
this.removeEvent('load', video);
playr.set({
id: 'videoplayer',
styles: {
clear: 'both',
height: this.height,
width: this.width
}
}).inject(this.content);
flowplayer($(playr), options.player, options.options);
}).delay(100, this);
};
var closeVideo = function(){
this.removeEvent('beforeClose', closeVideo);
playr.destroy();
img.inject(this.content);
};
this.addEvents({
load: video,
beforeClose: closeVideo
});
var img = this.img(url.replace(/.([flv|mp4]*)$/, '.jpg'));
},

audio: function(url, options){
this.mp3(url, options);
},
mp3: function(url, options){
var options = $merge({
options: flowConf.options,
player: flowConf.player,
height: 30,
width: 400
}, options);
this.adapt({
width: options.width,
height: options.height
});
var playr = new Element('div', {
id: 'audioplayer',
styles: {
clear: 'both',
height: this.height,// || options.height || this.options.height,
width: this.width// || options.width || this.options.width
}
}).inject(this.content);
this.resize((function(){
flowplayer($(playr), options.player, options.options);
this.fireEvent('load');
}).bind(this));
if(options.splash)
playr.setStyle('background', 'url(' + options.splash + ') no-repeat center center');
},

playlist: function() {
},

close: function() {
this.fireEvent('beforeClose');
this.cover.disintegrate();
var bfx = new Fx.Morph(this.box, {
onComplete: (function(){
this.box.destroy();
window.removeEvent('resize', this.fn);
window.removeEvent('scroll', this.fn);
this.fireEvent('close');
}).bind(this)
});
bfx.start({
opacity: 0,
top: this.box.getTop() + 200
});
}
});
Boxes = new Class({
Implements: [Options, Events],
Binds: ['previous', 'next'],
options: {
elements: '[rev=litebox]',
boxOptions: {}
},
initialize: function(options){
this.setOptions(options);
this.context = $(this.options.context) || $(document.body);
this.box = new Box(this.options.boxOptions);
this.context.addEvent('click', (function(e){
if(this.isItem(e.target)){
e.preventDefault();
this.open(false, e);
}
}).bind(this));
},
open: function(element, e){
var element = element ? element : e.target.bubble(this.getElements());
if(element.get('coords'))
this.box.setOptions(JSON.decode(element.get('coords')));
this.box.open();
this.previousBtn = new Element('button', {
'class': 'box-previous box-btn',
title: 'Previous', text: 'Previous',
events: {
click: this.previous,
focus: function(){
this.blur();
}
}
}).injectBefore(this.box.title);
this.nextBtn = new Element('button', {
'class': 'box-next box-btn',
title: 'Next', text: 'Next',
events: {
click: this.next,
focus: function(){
this.blur();
}
}
}).injectBefore(this.box.title);
this.load(element);
},
getTitle: function(el){
if(el.title != null || el.get('text') != null)
return el.title || el.get('text');
else if(el.getElement('img'))
return el.getElement('img').title || el.getElement('img').title;
},
load: function(el){
this.box.removeEvents('beforeClose');
this.box.box.addClass('loading');
this.box.container.fade('hide');
if(this.isItem(el)){
this.box.content.innerHTML = '';
if(this.box.title)
this.box.title.set({
text: this.getTitle(el)
});
var item = el.bubble(this.getElements());
var type = item.rel ? item.rel : getFileType(item.href).type;
eval('this.box.' + type + '(\'' + item.href + '\')');
this.index = this.getIndex(el);
if(this.nextBtn){
if(this.index + 1 < this.getElements().length){
this.nextBtn.open();
var txt = '<strong>Élément suivant : </strong>' + this.getTitle(this.getElements()[this.index + 1]);
this.nextBtn.tip({
msg: txt, x: -6, y: 6
});
}
else this.nextBtn.close();
}
if(this.previousBtn){
if(this.index > 0){
this.previousBtn.open();
var txt = '<strong>Élément précédant : </strong>' + this.getTitle(this.getElements()[this.index - 1]);
this.previousBtn.tip({
msg: txt, x: -6, y: 6
});
}
else this.previousBtn.close();
}
}
var change = function(){
this.fireEvent('change', [el, this.index]);
this.box.removeEvent('load', change);
};
var change = change.bind(this);
this.box.addEvent('load', change);
},
getElements: function(){
return this.context.getElements(this.options.elements);
},
isItem: function(el){
var el = $(el);
return el.getParents().some(function(item){
return this.getElements().contains(item);
}, this) || this.getElements().contains(el);
},
getIndex: function(el){
this.getElements().each(function(le, index){
if(le == el) i = index;
});
return i;
},
next: function(){
this.load(this.getElements()[this.index + 1]);
this.fireEvent('next', this.index + 1);
},
previous: function(){
this.load(this.getElements()[this.index - 1]);
this.fireEvent('previous', this.index - 1);
}
});
