2 /**************************************************************
\r
6 Authors : Samuel Birch
\r
7 Desc : Supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe
\r
8 Licence : Open Source MIT Licence
\r
10 **************************************************************/
\r
12 var MultiBox = new Class({
\r
14 getOptions: function(){
\r
18 container: document.body,
\r
20 contentColor: '#FFF',
\r
23 //showThumbnails: false,
\r
26 descClassName: false,
\r
37 relativeToWindow: true
\r
41 initialize: function(className, options){
\r
42 this.setOptions(this.getOptions(), options);
\r
44 this.openClosePos = {};
\r
46 this.contentToLoad = {};
\r
48 this.opened = false;
\r
49 this.contentObj = {};
\r
50 this.containerDefaults = {};
\r
52 if(this.options.useOverlay){
\r
53 this.overlay = new Overlay({container: this.options.container, onClick:this.close.bind(this)});
\r
56 this.content = $$('.'+className);
\r
57 if(this.options.descClassName){
\r
58 this.descriptions = $$('.'+this.options.descClassName);
\r
59 this.descriptions.each(function(el){
\r
60 el.setStyle('display', 'none');
\r
64 this.container = new Element('div').addClass('MultiBoxContainer').injectInside(this.options.container);
\r
65 this.iframe = new Element('iframe').setProperties({
\r
66 'id': 'multiBoxIframe',
\r
67 'name': 'mulitBoxIframe',
\r
68 'src': 'javascript:void(0);',
\r
72 'position': 'absolute',
\r
77 'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
\r
79 }).injectInside(this.container);
\r
80 this.box = new Element('div').addClass('MultiBoxContent').injectInside(this.container);
\r
82 this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', this.close.bind(this));
\r
84 this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').injectInside(this.container);
\r
85 this.controls = new Element('div').addClass('MultiBoxControls').injectInside(this.controlsContainer);
\r
87 this.previousButton = new Element('div').addClass('MultiBoxPrevious').injectInside(this.controls).addEvent('click', this.previous.bind(this));
\r
88 this.nextButton = new Element('div').addClass('MultiBoxNext').injectInside(this.controls).addEvent('click', this.next.bind(this));
\r
90 this.title = new Element('div').addClass('MultiBoxTitle').injectInside(this.controls);
\r
91 this.number = new Element('div').addClass('MultiBoxNumber').injectInside(this.controls);
\r
92 this.description = new Element('div').addClass('MultiBoxDescription').injectInside(this.controls);
\r
96 if(this.content.length == 1){
\r
97 this.title.setStyles({
\r
100 this.description.setStyles({
\r
103 this.previousButton.setStyle('display', 'none');
\r
104 this.nextButton.setStyle('display', 'none');
\r
105 this.number.setStyle('display', 'none');
\r
108 new Element('div').setStyle('clear', 'both').injectInside(this.controls);
\r
110 this.content.each(function(el,i){
\r
112 el.addEvent('click', function(e){
\r
113 new Event(e).stop();
\r
116 if(el.href.indexOf('#') > -1){
\r
117 el.content = $(el.href.substr(el.href.indexOf('#')+1));
\r
118 if(el.content){el.content.setStyle('display','none');}
\r
122 this.containerEffects = new Fx.Morph(this.container, {duration: 400, transition: Fx.Transitions.sineInOut});
\r
123 this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 300, transition: Fx.Transitions.sineInOut});
\r
128 setContentType: function(link){
\r
129 var str = link.href.substr(link.href.lastIndexOf('.')+1).toLowerCase();
\r
130 var contentOptions = {};
\r
131 if($chk(link.rel)){
\r
132 var optArr = link.rel.split(',');
\r
133 optArr.each(function(el){
\r
134 var ta = el.split(':');
\r
135 contentOptions[ta[0]] = ta[1];
\r
139 if(contentOptions.type != undefined){
\r
140 str = contentOptions.type;
\r
143 this.contentObj = {};
\r
144 this.contentObj.url = link.href;
\r
145 this.contentObj.xH = 0;
\r
147 if(contentOptions.width){
\r
148 this.contentObj.width = contentOptions.width;
\r
150 this.contentObj.width = this.options.movieWidth;
\r
152 if(contentOptions.height){
\r
153 this.contentObj.height = contentOptions.height;
\r
155 this.contentObj.height = this.options.movieHeight;
\r
157 if(contentOptions.panel){
\r
158 this.panelPosition = contentOptions.panel;
\r
160 this.panelPosition = this.options.panel;
\r
168 this.type = 'image';
\r
171 this.type = 'flash';
\r
174 this.type = 'flashVideo';
\r
175 this.contentObj.xH = 70;
\r
178 this.type = 'quicktime';
\r
181 this.type = 'windowsMedia';
\r
186 this.type = 'real';
\r
189 this.type = 'flashMp3';
\r
190 this.contentObj.width = 320;
\r
191 this.contentObj.height = 70;
\r
194 this.type = 'htmlelement';
\r
195 this.elementContent = link.content;
\r
196 this.elementContent.setStyles({
\r
201 if(this.elementContent.getStyle('width') != 'auto'){
\r
202 this.contentObj.width = this.elementContent.getStyle('width');
\r
205 this.contentObj.height = this.elementContent.getSize().size.y;
\r
206 this.elementContent.setStyles({
\r
214 this.type = 'iframe';
\r
215 if(contentOptions.ajax){
\r
216 this.type = 'ajax';
\r
223 this.container.setStyles({
\r
227 this.controlsContainer.setStyles({
\r
230 this.removeContent();
\r
231 this.previousButton.removeClass('MultiBoxButtonDisabled');
\r
232 this.nextButton.removeClass('MultiBoxButtonDisabled');
\r
233 this.opened = false;
\r
236 getOpenClosePos: function(el){
\r
237 if (this.options.openFromLink) {
\r
238 if (el.getFirst()) {
\r
239 var w = el.getFirst().getCoordinates().width - (this.container.getStyle('border').toInt() * 2);
\r
243 var h = el.getFirst().getCoordinates().height - (this.container.getStyle('border').toInt() * 2);
\r
247 this.openClosePos = {
\r
250 top: el.getFirst().getCoordinates().top,
\r
251 left: el.getFirst().getCoordinates().left
\r
255 var w = el.getCoordinates().width - (this.container.getStyle('border').toInt() * 2);
\r
259 var h = el.getCoordinates().height - (this.container.getStyle('border').toInt() * 2);
\r
263 this.openClosePos = {
\r
266 top: el.getCoordinates().top,
\r
267 left: el.getCoordinates().left
\r
271 if(this.options.fixedTop){
\r
272 var top = this.options.fixedTop;
\r
274 var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y;
\r
276 this.openClosePos = {
\r
277 width: this.options.initialWidth,
\r
278 height: this.options.initialHeight,
\r
280 left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x
\r
283 return this.openClosePos;
\r
286 open: function(el){
\r
288 this.options.onOpen();
\r
290 this.index = this.content.indexOf(el);
\r
292 this.openId = el.getProperty('id');
\r
295 this.opened = true;
\r
297 if(this.options.useOverlay){
\r
298 this.overlay.show();
\r
301 this.container.setStyles(this.getOpenClosePos(el));
\r
302 this.container.setStyles({
\r
307 if(this.options.fixedTop){
\r
308 var top = this.options.fixedTop;
\r
310 var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y;
\r
313 this.containerEffects.start({
\r
314 width: this.options.initialWidth,
\r
315 height: this.options.initialHeight,
\r
317 left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x,
\r
321 this.load(this.index);
\r
324 if (this.options.showControls) {
\r
325 this.hideControls();
\r
327 this.getOpenClosePos(this.content[this.index]);
\r
328 this.timer = this.hideContent.bind(this).delay(500);
\r
329 this.timer = this.load.pass(this.index, this).delay(1100);
\r
335 getContent: function(index){
\r
336 this.setContentType(this.content[index]);
\r
338 if(this.options.descClassName){
\r
339 this.descriptions.each(function(el,i){
\r
340 if(el.hasClass(this.openId)){
\r
345 //var title = this.content[index].title;
\r
346 this.contentToLoad = {
\r
347 title: this.content[index].title || ' ',
\r
348 //desc: $(this.options.descClassName+this.content[index].id).clone(),
\r
355 if(this.options.useOverlay){
\r
356 this.overlay.hide();
\r
358 if (this.options.showControls) {
\r
359 this.hideControls();
\r
361 this.hideContent();
\r
362 this.containerEffects.stop();
\r
363 this.zoomOut.bind(this).delay(500);
\r
364 this.options.onClose();
\r
367 zoomOut: function(){
\r
368 this.containerEffects.start({
\r
369 width: this.openClosePos.width,
\r
370 height: this.openClosePos.height,
\r
371 top: this.openClosePos.top,
\r
372 left: this.openClosePos.left,
\r
375 this.reset.bind(this).delay(500);
\r
378 load: function(index){
\r
379 this.box.addClass('MultiBoxLoading');
\r
380 this.getContent(index);
\r
381 if(this.type == 'image'){
\r
382 var xH = this.contentObj.xH;
\r
383 this.contentObj = new Asset.image(this.content[index].href, {onload: this.resize.bind(this)});
\r
384 this.contentObj.xH = xH;
\r
385 /*this.contentObj = new Image();
\r
386 this.contentObj.onload = this.resize.bind(this);
\r
387 this.contentObj.src = this.content[index].href;*/
\r
393 resize: function(){
\r
394 if (this.options.fixedTop) {
\r
395 var top = this.options.fixedTop;
\r
398 var top = ((window.getHeight() / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) - this.container.getStyle('border').toInt() + window.getScrollTop()) + this.options.offset.y;
\r
400 var left = ((window.getWidth() / 2) - (this.contentObj.width / 2) - this.container.getStyle('border').toInt()) + this.options.offset.x;
\r
408 this.containerEffects.stop();
\r
409 this.containerEffects.start({
\r
410 width: this.contentObj.width,
\r
411 height: Number(this.contentObj.height) + this.contentObj.xH,
\r
416 this.timer = this.showContent.bind(this).delay(500);
\r
419 showContent: function(){
\r
420 this.box.removeClass('MultiBoxLoading');
\r
421 this.removeContent();
\r
423 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'}).injectInside(this.box);
\r
425 if(this.type == 'image'){
\r
426 this.contentObj.injectInside(this.contentContainer);
\r
428 }else if(this.type == 'iframe'){
\r
429 new Element('iframe').setProperties({
\r
430 id: 'iFrame'+new Date().getTime(),
\r
431 width: this.contentObj.width,
\r
432 height: this.contentObj.height,
\r
433 src: this.contentObj.url,
\r
436 }).injectInside(this.contentContainer);
\r
438 }else if(this.type == 'htmlelement'){
\r
439 this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);
\r
441 }else if(this.type == 'ajax'){
\r
442 new Ajax(this.contentObj.url, {
\r
444 update: 'MultiBoxContentContainer',
\r
450 var obj = this.createEmbedObject().injectInside(this.contentContainer);
\r
451 if(this.str != ''){
\r
452 $('MultiBoxMediaObject').innerHTML = this.str;
\r
456 this.contentEffects = new Fx.Morph(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});
\r
457 this.contentEffects.start({
\r
461 this.title.setHTML(this.contentToLoad.title);
\r
462 this.number.setHTML(this.contentToLoad.number+' of '+this.content.length);
\r
463 if (this.options.descClassName) {
\r
464 if (this.description.getFirst()) {
\r
465 this.description.getFirst().remove();
\r
467 this.contentToLoad.desc.injectInside(this.description).setStyles({
\r
471 //this.removeContent.bind(this).delay(500);
\r
472 if (this.options.showControls) {
\r
473 this.timer = this.showControls.bind(this).delay(800);
\r
477 hideContent: function(){
\r
478 this.box.addClass('MultiBoxLoading');
\r
479 this.contentEffects.start({
\r
482 this.removeContent.bind(this).delay(500);
\r
485 removeContent: function(){
\r
486 if($('MultiBoxMediaObject')){
\r
487 $('MultiBoxMediaObject').empty();
\r
488 $('MultiBoxMediaObject').remove();
\r
490 if($('MultiBoxContentContainer')){
\r
491 //$('MultiBoxContentContainer').empty();
\r
492 $('MultiBoxContentContainer').remove();
\r
496 showControls: function(){
\r
497 this.clicked = false;
\r
499 if(this.container.getStyle('height') != 'auto'){
\r
500 this.containerDefaults.height = this.container.getStyle('height')
\r
501 this.containerDefaults.backgroundColor = this.options.contentColor;
\r
504 this.container.setStyles({
\r
505 //'backgroundColor': this.controls.getStyle('backgroundColor'),
\r
509 if(this.contentToLoad.number == 1){
\r
510 this.previousButton.addClass('MultiBoxPreviousDisabled');
\r
512 this.previousButton.removeClass('MultiBoxPreviousDisabled');
\r
514 if(this.contentToLoad.number == this.content.length){
\r
515 this.nextButton.addClass('MultiBoxNextDisabled');
\r
517 this.nextButton.removeClass('MultiBoxNextDisabled');
\r
520 this.controlEffects.start({'height': this.controls.getStyle('height')});
\r
524 hideControls: function(num){
\r
525 this.controlEffects.start({'height': 0}).chain(function(){
\r
526 this.container.setStyles(this.containerDefaults);
\r
530 showThumbnails: function(){
\r
535 if(this.index < this.content.length-1){
\r
537 this.openId = this.content[this.index].getProperty('id');
\r
538 if (this.options.showControls) {
\r
539 this.hideControls();
\r
541 this.getOpenClosePos(this.content[this.index]);
\r
542 //this.getContent(this.index);
\r
543 this.timer = this.hideContent.bind(this).delay(500);
\r
544 this.timer = this.load.pass(this.index, this).delay(1100);
\r
548 previous: function(){
\r
549 if(this.index > 0){
\r
551 this.openId = this.content[this.index].getProperty('id');
\r
552 if (this.options.showControls) {
\r
553 this.hideControls();
\r
555 this.getOpenClosePos(this.content[this.index]);
\r
556 //this.getContent(this.index);
\r
557 this.timer = this.hideContent.bind(this).delay(500);
\r
558 this.timer = this.load.pass(this.index, this).delay(1000);
\r
562 createEmbedObject: function(){
\r
563 if(this.type == 'flash'){
\r
564 var url = this.contentObj.url;
\r
566 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
567 this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '
\r
568 this.str += 'width="'+this.contentObj.width+'" ';
\r
569 this.str += 'height="'+this.contentObj.height+'" ';
\r
570 this.str += 'title="MultiBoxMedia">';
\r
571 this.str += '<param name="movie" value="'+url+'" />'
\r
572 this.str += '<param name="quality" value="high" />';
\r
573 this.str += '<embed src="'+url+'" ';
\r
574 this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
\r
575 this.str += 'width="'+this.contentObj.width+'" ';
\r
576 this.str += 'height="'+this.contentObj.height+'"></embed>';
\r
577 this.str += '</object>';
\r
581 if(this.type == 'flashVideo'){
\r
582 //var url = this.contentObj.url.substring(0, this.contentObj.url.lastIndexOf('.'));
\r
583 var url = this.contentObj.url;
\r
585 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
586 this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '
\r
587 this.str += 'width="'+this.contentObj.width+'" ';
\r
588 this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'" ';
\r
589 this.str += 'title="MultiBoxMedia">';
\r
590 this.str += '<param name="movie" value="'+this.options.path+'flvplayer.swf" />'
\r
591 this.str += '<param name="quality" value="high" />';
\r
592 this.str += '<param name="salign" value="TL" />';
\r
593 this.str += '<param name="scale" value="noScale" />';
\r
594 this.str += '<param name="FlashVars" value="path='+url+'" />';
\r
595 this.str += '<embed src="'+this.options.path+'flvplayer.swf" ';
\r
596 this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
\r
597 this.str += 'width="'+this.contentObj.width+'" ';
\r
598 this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'"';
\r
599 this.str += 'salign="TL" ';
\r
600 this.str += 'scale="noScale" ';
\r
601 this.str += 'FlashVars="path='+url+'"';
\r
602 this.str += '></embed>';
\r
603 this.str += '</object>';
\r
607 if(this.type == 'flashMp3'){
\r
608 var url = this.contentObj.url;
\r
610 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
611 this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '
\r
612 this.str += 'width="'+this.contentObj.width+'" ';
\r
613 this.str += 'height="'+this.contentObj.height+'" ';
\r
614 this.str += 'title="MultiBoxMedia">';
\r
615 this.str += '<param name="movie" value="'+this.options.path+'mp3player.swf" />'
\r
616 this.str += '<param name="quality" value="high" />';
\r
617 this.str += '<param name="salign" value="TL" />';
\r
618 this.str += '<param name="scale" value="noScale" />';
\r
619 this.str += '<param name="FlashVars" value="path='+url+'" />';
\r
620 this.str += '<embed src="'+this.options.path+'mp3player.swf" ';
\r
621 this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
\r
622 this.str += 'width="'+this.contentObj.width+'" ';
\r
623 this.str += 'height="'+this.contentObj.height+'"';
\r
624 this.str += 'salign="TL" ';
\r
625 this.str += 'scale="noScale" ';
\r
626 this.str += 'FlashVars="path='+url+'"';
\r
627 this.str += '></embed>';
\r
628 this.str += '</object>';
\r
631 if(this.type == 'quicktime'){
\r
632 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
633 this.str = '<object type="video/quicktime" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"';
\r
634 this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
\r
635 this.str += '<param name="src" value="'+this.contentObj.url+'" />';
\r
636 this.str += '<param name="autoplay" value="true" />';
\r
637 this.str += '<param name="controller" value="true" />';
\r
638 this.str += '<param name="enablejavascript" value="true" />';
\r
639 this.str += '<embed src="'+this.contentObj.url+'" autoplay="true" pluginspage="http://www.apple.com/quicktime/download/" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
\r
640 this.str += '<object/>';
\r
644 if(this.type == 'windowsMedia'){
\r
645 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
646 this.str = '<object type="application/x-oleobject" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"';
\r
647 this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
\r
648 this.str += '<param name="filename" value="'+this.contentObj.url+'" />';
\r
649 this.str += '<param name="Showcontrols" value="true" />';
\r
650 this.str += '<param name="autoStart" value="true" />';
\r
651 this.str += '<embed type="application/x-mplayer2" src="'+this.contentObj.url+'" Showcontrols="true" autoStart="true" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
\r
652 this.str += '<object/>';
\r
656 if(this.type == 'real'){
\r
657 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
658 this.str = '<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"';
\r
659 this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
\r
660 this.str += '<param name="src" value="'+this.contentObj.url+'" />';
\r
661 this.str += '<param name="controls" value="ImageWindow" />';
\r
662 this.str += '<param name="autostart" value="true" />';
\r
663 this.str += '<embed src="'+this.contentObj.url+'" controls="ImageWindow" autostart="true" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
\r
664 this.str += '<object/>';
\r
672 MultiBox.implement(new Options);
\r
673 MultiBox.implement(new Events);
\r
676 /*************************************************************/
\r