/**************************************************************
Script : MultiBox
Version : 1.3.2
Authors : Samuel Birch
Desc : Supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe
Addendum : Rewritten for Mootools version 1.2 (not backward-compatible with 1.1)
Licence : Open Source MIT Licence
Modified by Picturesafe for compatibility with mootoools 1.2.2, support of flowplayer and XBrowser and ;jsessionid
**************************************************************/
var MultiBox = new Class({
Implements: [Options, Events],
options: {
initialWidth: 250
, initialHeight: 250
, container: null
, containerFollowingIframe: null
, useOverlay: false
, contentColor: '#000'
, showNumbers: true
, showControls: true
//, autoPlay: false
, waitDuration: 2000
, descClassName: false
, descMinWidth: 400
, descMaxWidth: 600
, contentWidth: 400
, contentHeight: 300
, offset: {x:0, y:0}
, fixedTop: false
, path: 'files/'
, onOpen: $empty
, openFromLink: true
, relativeToWindow: true
}
, initialize: function(className, options){
this.setOptions(options);
this.openClosePos = {};
this.timer = 0;
this.contentToLoad = {};
this.index = 0;
this.opened = false;
this.contentObj = {};
this.containerDefaults = {};
if(this.options.useOverlay){
this.overlay = new Overlay({container: this.options.container || document.body, onClick:this.close.bind(this)});
}
this.content = $$('.'+className);
if(this.options.descClassName){
this.descriptions = $$('.'+this.options.descClassName);
this.descriptions.each(function(el){
el.setStyle('display', 'none');
});
}
this.container = new Element('div').addClass('MultiBoxContainer').inject(this.options.container || document.body);
this.containerFollowingIframe = new Element('iframe').addClass('MultiBoxContainer').inject(this.options.containerFollowingIframe || document.body);
this.iframe = new Element('iframe').setProperties({
'id': 'multiBoxIframe'
, 'name': 'MultiBoxIframe'
, 'src': 'javascript:void(0);'
, 'frameborder': 1
, 'scrolling': 'no'
}).setStyles({
'position': 'absolute'
, 'top': -20
, 'left': -20
, 'width': '115%'
, 'height': '115%'
, 'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
, 'opacity': 0
}).inject(this.container);
this.box = new Element('div').addClass('MultiBoxContent').inject(this.container);
this.closeButton = new Element('div').addClass('MultiBoxClose').inject(this.container).addEvent('click', this.close.bind(this));
this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').inject(this.container);
this.controls = new Element('div').addClass('MultiBoxControls').inject(this.controlsContainer);
this.previousButton = new Element('div').addClass('MultiBoxPrevious').inject(this.controls).addEvent('click', this.previous.bind(this));
this.nextButton = new Element('div').addClass('MultiBoxNext').inject(this.controls).addEvent('click', this.next.bind(this));
this.title = new Element('div').addClass('MultiBoxTitle').inject(this.controls);
this.number = new Element('div').addClass('MultiBoxNumber').inject(this.controls);
this.description = new Element('div').addClass('MultiBoxDescription').inject(this.controls);
if(this.content.length == 1){
this.title.setStyles({
'margin-left': 0
});
this.description.setStyles({
'margin-left': 0
});
this.previousButton.setStyle('display', 'none');
this.nextButton.setStyle('display', 'none');
this.number.setStyle('display', 'none');
}
new Element('div').setStyle('clear', 'both').inject(this.controls);
this.content.each(function(el,i){
el.index = i;
el.addEvent('click', function(e){
e.stop();
this.open(el);
}.bind(this));
if(el.href.indexOf('#') > -1){
el.content = $(el.href.substr(el.href.indexOf('#')+1));
if(el.content){el.content.setStyle('display','none');}
}
}, this);
this.containerFollowingIframeEffects = new Fx.Morph(this.containerFollowingIframe, {duration: 0, transition: Fx.Transitions.line});
this.containerEffects = new Fx.Morph(this.container, {duration: 400, transition: Fx.Transitions.sineInOut});
//this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 300, transition: Fx.Transitions.sineInOut});
this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 0, transition: Fx.Transitions.linear});
this.reset();
}
, setContentType: function(link){
var jsessionIdIndex = link.href.lastIndexOf(';jsessionid=');
var suffix = '';
if (jsessionIdIndex >= 0) suffix = link.href.substr(0, jsessionIdIndex);
else suffix = link.href;
suffix = suffix.substr(suffix.lastIndexOf('.')+1).toLowerCase();
var contentOptions = {};
if($chk(link.rel)){
var optArr = link.rel.split(',');
optArr.each(function(el){
var ta = el.split(':');
contentOptions[ta[0]] = ta[1];
});
}
if (contentOptions.type != undefined) str = contentOptions.type;
this.contentObj = {};
this.contentObj.url = link.href;
this.contentObj.xH = 0;
if (contentOptions.width) this.contentObj.width = contentOptions.width;
else this.contentObj.width = this.options.contentWidth;
if (contentOptions.height) this.contentObj.height = contentOptions.height;
else this.contentObj.height = this.options.contentHeight;
if (contentOptions.panel) this.panelPosition = contentOptions.panel;
else this.panelPosition = this.options.panel;
switch(suffix){
case 'jpg':
case 'gif':
case 'png':
this.type = 'image';
break;
case 'swf':
this.type = 'flash';
break;
case 'flv':
this.type = 'flashVideo';
// this.contentObj.xH = 70;
break;
case 'mov':
this.type = 'quicktime';
break;
case 'wmv':
this.type = 'windowsMedia';
break;
case 'rv':
case 'rm':
case 'rmvb':
this.type = 'real';
break;
case 'mp3':
this.type = 'flashMp3';
this.contentObj.width = 320;
this.contentObj.height = 70;
break;
case 'element':
this.type = 'htmlelement';
this.elementContent = link.content;
this.elementContent.setStyles({
display: 'block',
opacity: 0
})
if(this.elementContent.getStyle('width') != 'auto'){
// Bug fix: this.elementContent.getStyle('width') returns 480px.
// This causes NaN (and IE error) in subsequent calculations. Fixed by invoking toInt().
this.contentObj.width = this.elementContent.getStyle('width').toInt();
}
this.contentObj.height = this.elementContent.getSize().y;
this.elementContent.setStyles({
display: 'none',
opacity: 1
})
break;
default:
this.type = 'iframe';
if(contentOptions.ajax){
this.type = 'ajax';
}
break;
}
}
, reset: function(){
this.container.setStyles({
'opacity': 0
, 'display': 'none'
});
this.containerFollowingIframe.setStyles({
'opacity': 0
, 'display': 'none'
});
this.controlsContainer.setStyles({
'height': 0
});
this.removeContent();
this.previousButton.removeClass('MultiBoxButtonDisabled');
this.nextButton.removeClass('MultiBoxButtonDisabled');
this.opened = false;
}
, getOpenClosePos: function(el){
if (this.options.openFromLink) {
var w;
var h;
if (el.getFirst()) {
w = el.getFirst().getCoordinates().width - (this.container.getStyle('border').toInt() * 2);
if (w < 0) w = 0
h = el.getFirst().getCoordinates().height - (this.container.getStyle('border').toInt() * 2);
if (h < 0) h = 0
this.openClosePos = {
width: w
, height: h
, top: el.getFirst().getCoordinates().top
, left: el.getFirst().getCoordinates().left
};
}
else {
w = el.getCoordinates().width - (this.container.getStyle('border').toInt() * 2);
if (w < 0) w = 0
h = el.getCoordinates().height - (this.container.getStyle('border').toInt() * 2);
if (h < 0) h = 0
this.openClosePos = {
width: w
, height: h
, top: el.getCoordinates().top
, left: el.getCoordinates().left
};
}
}else{
var top = null;
if(this.options.fixedTop) top = this.options.fixedTop;
else{
top = ((window.getSize().y/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y;
}
this.openClosePos = {
width: this.options.initialWidth
, height: this.options.initialHeight
, top: top
, left: ((window.getSize().x/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x
};
}
return this.openClosePos;
}
, open: function(el){
if (this.options.onOpen) this.options.onOpen();
this.index = this.content.indexOf(el);
this.openId = el.getProperty('id');
if(!this.opened){
this.opened = true;
if (this.options.useOverlay) this.overlay.show();
this.getOpenClosePos(el);
this.container.setStyles(this.openClosePos);
this.containerFollowingIframe.setStyles(this.openClosePos);
this.container.setStyles({
opacity: 0
, display: 'block'
});
this.containerFollowingIframe.setStyles({
opacity: 0
, display: 'block'
});
var top = null;
if(this.options.fixedTop) top = this.options.fixedTop;
else{
top = ((window.getSize().y/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y+window.pageYOffset;
}
var left = ((window.getSize().x/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x+window.pageXOffset;
this.containerFollowingIframeEffects.start({
width: this.options.initialWidth
, height: this.options.initialHeight
, top: top
, left: left
, opacity: [0, 1]
});
this.containerEffects.start({
width: this.options.initialWidth
, height: this.options.initialHeight
, top: top
, left: left
, opacity: [0, 1]
});
this.load(this.index);
}else{
if (this.options.showControls) this.hideControls();
this.getOpenClosePos(this.content[this.index]);
this.timer = this.hideContent.bind(this).delay(500);
this.timer = this.load.pass(this.index, this).delay(1100);
}
}
, getContent: function(index){
this.setContentType(this.content[index]);
var desc = {};
if(this.options.descClassName){
this.descriptions.each(function(el,i){
if(el.hasClass(this.openId)){
desc = el.clone();
}
},this);
}
//var title = this.content[index].title;
this.contentToLoad = {
title: this.content[index].title || ' '
, desc: desc
, number: index+1
};
}
, close: function(){
if(this.options.useOverlay) this.overlay.hide();
if (this.options.showControls) this.hideControls();
this.hideContent();
this.containerFollowingIframeEffects.cancel();
this.containerEffects.cancel();
this.zoomOut.bind(this).delay(500);
}
, zoomOut: function(){
this.containerEffects.start({
width: this.openClosePos.width
, height: this.openClosePos.height
, top: this.openClosePos.top
, left: this.openClosePos.left
, opacity: 0
});
this.containerFollowingIframeEffects.start({
width: this.openClosePos.width
, height: this.openClosePos.height
, top: this.openClosePos.top
, left: this.openClosePos.left
, opacity: 0
});
this.reset.bind(this).delay(500);
}
, load: function(index){
this.box.addClass('MultiBoxLoading');
this.getContent(index);
if(this.type == 'image'){
var xH = this.contentObj.xH;
this.contentObj = new Asset.image(this.content[index].href, {onload: this.resize.bind(this)});
this.contentObj.xH = xH;
//this.contentObj = new Image();
//this.contentObj.onload = this.resize.bind(this);
//this.contentObj.src = this.content[index].href;
}
else this.resize();
}
, resize: function(){
var top = null;
if (this.options.fixedTop) top = this.options.fixedTop;
else {
top = ((window.getSize().y / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) - this.container.getStyle('border').toInt() + window.getScroll().y) + this.options.offset.y;
}
var left = ((window.getSize().x / 2) - (this.contentObj.width / 2) - this.container.getStyle('border').toInt()) + this.options.offset.x;
if (top < 0) top = 0;
if (left < 0) left = 0;
this.containerFollowingIframeEffects.cancel();
this.containerFollowingIframeEffects.start({
width: this.contentObj.width
, height: Number(this.contentObj.height) + this.contentObj.xH
, top: top
, left: left
, opacity: 1
});
this.containerEffects.cancel();
this.containerEffects.start({
width: this.contentObj.width
, height: Number(this.contentObj.height) + this.contentObj.xH
, top: top
, left: left
, opacity: 1
});
this.timer = this.showContent.bind(this).delay(500);
}
, showContent: function(){
this.box.removeClass('MultiBoxLoading');
this.removeContent();
this.contentContainer = new Element('div').setProperties({id: 'MultiBoxContentContainer'}).setStyles({opacity: 0, width: this.contentObj.width+'px', height: (Number(this.contentObj.height)+this.contentObj.xH)+'px'}).inject(this.box);
if(this.type == 'image') this.contentObj.inject(this.contentContainer);
else if(this.type == 'iframe'){
new Element('iframe').setProperties({
id: 'iFrame'+new Date().getTime()
, width: this.contentObj.width
, height: this.contentObj.height
, src: this.contentObj.url
, frameborder: 0
, scrolling: 'auto'
}).inject(this.contentContainer);
}else if(this.type == 'htmlelement'){
this.elementContent.clone().setStyle('display','block').inject(this.contentContainer);
}else if(this.type == 'ajax'){
new Request.HTML({
url: this.contentObj.url
, method: 'get'
, link: 'cancel'
, onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
$('MultiBoxContentContainer').set('html', responseHTML);
}.bind(this)
, onFailure: function(xhr) {
$('MultiBoxContentContainer').set('html', 'An error occured.
');
}.bind(this)
}).send();
}else{
this.createEmbedObject().inject(this.contentContainer);
if(this.str != ''){
$('MultiBoxMediaObject').innerHTML = this.str;
if (this.contentContainer.type='flashVideo') createFlowplayerContainer('a.flowplayer');
}
}
this.contentEffects = new Fx.Morph(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});
this.contentEffects.start({
opacity: 1
});
this.title.set('html', this.contentToLoad.title);
this.number.set('html', this.contentToLoad.number+' / '+this.content.length);
if (this.options.descClassName) {
if (this.description.getFirst()) {
this.description.getFirst().dispose();
}
if (this.contentToLoad.desc.inject){
this.contentToLoad.desc.inject(this.description).setStyles({
display: 'block'
});
}
}
//this.removeContent.bind(this).delay(500);
if (this.options.showControls) {
this.timer = this.showControls.bind(this).delay(800);
}
}
, hideContent: function(){
this.box.addClass('MultiBoxLoading');
this.contentEffects.start({
opacity: 0
});
this.removeContent.bind(this).delay(500);
}
, removeContent: function(){
if($('MultiBoxMediaObject')){
$('MultiBoxMediaObject').destroy();
}
if($('MultiBoxContentContainer')){
//$('MultiBoxContentContainer').empty();
$('MultiBoxContentContainer').destroy();
}
}
, showControls: function(){
this.clicked = false;
if(this.container.getStyle('height') != 'auto'){
this.containerDefaults.height = this.container.getStyle('height')
this.containerDefaults.backgroundColor = this.options.contentColor;
}
//var height = this.openClosePos.width - (this.container.getStyle('border').toInt()) + 30;
var cHeight = this.container.getStyle('height').toInt();
var height = cHeight - ((cHeight-this.contentObj.height)/2) + this.controls.getStyle('height').toInt();
this.container.setStyles({
'height': height+'px'
});
this.containerFollowingIframe.setStyles({
'height': height+'px'
});
if(this.contentToLoad.number == 1) this.previousButton.addClass('MultiBoxPreviousDisabled');
else this.previousButton.removeClass('MultiBoxPreviousDisabled');
if(this.contentToLoad.number == this.content.length) this.nextButton.addClass('MultiBoxNextDisabled');
else this.nextButton.removeClass('MultiBoxNextDisabled');
this.controlEffects.start({'height': this.controls.getStyle('height'), 'top': -this.controls.getStyle('height').toInt()+'px'});
}
, hideControls: function(num){
this.controlEffects.start({'height': 0}).chain(function(){
this.container.setStyles(this.containerDefaults);
this.containerFollowingIframe.setStyles(this.containerDefaults);
}.bind(this));
}
, next: function(){
if(this.index < this.content.length-1){
this.index++;
this.openId = this.content[this.index].getProperty('id');
if (this.options.showControls) {
this.hideControls();
}
this.getOpenClosePos(this.content[this.index]);
//this.getContent(this.index);
this.timer = this.hideContent.bind(this).delay(500);
this.timer = this.load.pass(this.index, this).delay(1100);
}
}
, previous: function(){
if(this.index > 0){
this.index--;
this.openId = this.content[this.index].getProperty('id');
if (this.options.showControls) {
this.hideControls();
}
this.getOpenClosePos(this.content[this.index]);
//this.getContent(this.index);
this.timer = this.hideContent.bind(this).delay(500);
this.timer = this.load.pass(this.index, this).delay(1000);
}
}
, createEmbedObject: function(){
var obj = null;
if(this.type == 'flash'){
obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
this.str = '';
this.str += '';
this.str += '';
this.str += '';
}
else if(this.type == 'flashVideo'){
obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
this.str = ' ';
}
else if(this.type == 'flashMp3'){
obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
this.str = '';
this.str += '';
this.str += '';
this.str += '';
this.str += '';
this.str += '