var Videobox = {
init: function (options) {
// init default options
this.options = Object.extend({
resizeDuration: 400, // Duration of height and width resizing (ms)
initialWidth: 250, // Initial width of the box (px)
initialHeight: 250, // Initial height of the box (px)
defaultWidth: 800, // Default width of the box (px)
defaultHeight: 450, // Default height of the box (px)
animateCaption: true, // Enable/Disable caption animation
flvplayer: 'swf/flvplayer.swf'
}, options || {});
this.anchors = [];
$A($$('a')).each(function(el){
if(el.rel && el.href && el.rel.test('^vidbox', 'i')) {
el.addEvent('click', function (e) {
e = new Event(e);
e.stop();
this.click(el);
}.bind(this));
this.anchors.push(el);
}
}, this);
this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
new Element('div').setStyle('clear', 'both').injectInside(this.bottom);
var nextEffect = this.nextEffect.bind(this);
this.fx = {
overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}),
bottom: this.bottom.effect('margin-top', {duration: 400})
};
},
click: function(link) {
return this.open (link.href, link.title, link.rel);
},
open: function(sLinkHref, sLinkTitle, sLinkRel) {
this.href = sLinkHref;
this.title = sLinkTitle;
this.rel = sLinkRel;
this.position();
this.setup();
this.video(this.href);
this.top = Window.getScrollTop() + (Window.getHeight() / 15);
this.center.setStyles({top: this.top+'px', display: ''});
this.fx.overlay.start(0.8);
this.step = 1;
this.center.setStyle('background','#fff url(loading.gif) no-repeat center');
this.caption.innerHTML = this.title;
this.fx.center.start({'height': [this.options.contentsHeight]});
},
setup: function(){
var aDim = this.rel.match(/[0-9]+/g);
this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth;
this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight;
},
position: function(){
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
},
video: function(sLinkHref){
if (sLinkHref.match(/youtube\.com\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('=');
this.videoID = videoId[1];
this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/kilinbox\.net\/images\/zoomify/i)) {
this.flash = false;
this.other = ''
}
else if (sLinkHref.match(/\.divx/i)) {
this.flash = false;
this.other = ''
}
else if (sLinkHref.match(/\.flv/i)) {
this.flash = false;
this.other = ''
}
else if (sLinkHref.match(/\.mp4/i)) {
this.flash = false;
this.other = ''
}
else {
this.flash = true;
this.videoID = sLinkHref;
this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
}
},
nextEffect: function(){
switch (this.step++){
case 1:
this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]});
break;
this.step++;
case 2:
this.center.setStyle('background','#fff');
this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ;
this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''});
if (this.options.animateCaption){
this.fx.bottom.set(-this.bottom.offsetHeight);
this.bottomContainer.style.height = '';
this.fx.bottom.start(0);
break;
}
this.bottomContainer.style.height = '';
this.step++;
}
},
close: function(){
this.fx.overlay.start(0);
this.center.style.display = this.bottomContainer.style.display = 'none';
this.center.innerHTML = '';
return false;
}
};
window.addEvent('domready', Videobox.init.bind(Videobox));