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 TODO: 'create' function to open box from flash
\r
12 **************************************************************/
\r
14 var multiBox = new Class({
\r
16 getOptions: function(){
\r
20 container: document.body, //this will need to be setup to the box open in relation to this.
\r
21 overlay: false, //this will be a reference to an overlay instance. - TODO: implement below.
\r
22 contentColor: '#FFF',
\r
25 //showThumbnails: false,
\r
27 //waitDuration: 2000,
\r
28 descClassName: false,
\r
39 //relativeToWindow: true
\r
43 initialize: function(className, options){
\r
44 this.setOptions(this.getOptions(), options);
\r
46 this.openClosePos = {};
\r
48 this.contentToLoad = {};
\r
50 this.opened = false;
\r
51 this.contentObj = {};
\r
52 this.containerDefaults = {};
\r
54 if(this.options.useOverlay){
\r
55 this.overlay = new overlay({container: this.options.container, onClick:this.close.bind(this)});
\r
57 this.overlay = this.options.overlay;
\r
59 this.overlay.setOnClick(this.close.bind(this));
\r
62 this.content = $$('.'+className);
\r
63 if(this.options.descClassName){
\r
64 this.descriptions = $$('.'+this.options.descClassName);
\r
65 this.descriptions.each(function(el){
\r
66 el.setStyle('display', 'none');
\r
70 this.container = new Element('div').addClass('MultiBoxContainer').injectInside(this.options.container);
\r
71 this.iframe = new Element('iframe').setProperties({
\r
72 'id': 'multiBoxIframe',
\r
73 'name': 'mulitBoxIframe',
\r
74 'src': 'javascript:void(0);',
\r
78 'position': 'absolute',
\r
81 'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
\r
83 }).inject(this.container);
\r
84 this.box = new Element('div').addClass('MultiBoxContent').inject(this.container);
\r
86 this.closeButton = new Element('div').addClass('MultiBoxClose').inject(this.container).addEvent('click', this.close.bind(this));
\r
88 this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').inject(this.container);
\r
89 this.controls = new Element('div').addClass('MultiBoxControls').inject(this.controlsContainer);
\r
91 this.previousButton = new Element('div').addClass('MultiBoxPrevious').inject(this.controls).addEvent('click', this.previous.bind(this));
\r
92 this.nextButton = new Element('div').addClass('MultiBoxNext').inject(this.controls).addEvent('click', this.next.bind(this));
\r
94 this.title = new Element('div').addClass('MultiBoxTitle').inject(this.controls);
\r
95 this.number = new Element('div').addClass('MultiBoxNumber').inject(this.controls);
\r
96 this.description = new Element('div').addClass('MultiBoxDescription').inject(this.controls);
\r
100 if(this.content.length == 1){
\r
101 this.title.setStyles({
\r
104 this.description.setStyles({
\r
107 this.previousButton.setStyle('display', 'none');
\r
108 this.nextButton.setStyle('display', 'none');
\r
109 this.number.setStyle('display', 'none');
\r
112 new Element('div').setStyle('clear', 'both').inject(this.controls);
\r
114 this.content.each(function(el,i){
\r
116 el.addEvent('click', function(e){
\r
117 new Event(e).stop();
\r
120 if(el.href.indexOf('#') > -1){
\r
121 el.content = $(el.href.substr(el.href.indexOf('#')+1));
\r
122 if(el.content){el.content.setStyle('display','none');}
\r
126 this.containerEffects = new Fx.Morph(this.container, {duration: 400, transition: Fx.Transitions.Sine.easeInOut});
\r
127 this.iframeEffects = new Fx.Morph(this.iframe, {duration: 400, transition: Fx.Transitions.Sine.easeInOut});
\r
128 this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 300, transition: Fx.Transitions.Sine.easeInOut});
\r
133 setContentType: function(link){
\r
134 var str = link.href.substr(link.href.lastIndexOf('.')+1).toLowerCase();
\r
135 var contentOptions = {};
\r
136 if($chk(link.rel)){
\r
137 var optArr = link.rel.split(',');
\r
138 optArr.each(function(el){
\r
139 var ta = el.split(':');
\r
140 contentOptions[ta[0]] = ta[1];
\r
144 if(contentOptions.type != undefined){
\r
145 str = contentOptions.type;
\r
148 this.contentObj = {};
\r
149 this.contentObj.url = link.href;
\r
150 this.contentObj.src = link.href;
\r
151 this.contentObj.xH = 0;
\r
153 if(contentOptions.width){
\r
154 this.contentObj.width = contentOptions.width;
\r
156 this.contentObj.width = this.options.movieWidth;
\r
158 if(contentOptions.height){
\r
159 this.contentObj.height = contentOptions.height;
\r
161 this.contentObj.height = this.options.movieHeight;
\r
163 if(contentOptions.panel){
\r
164 this.panelPosition = contentOptions.panel;
\r
166 this.panelPosition = this.options.panel;
\r
175 this.type = 'image';
\r
178 this.type = 'flash';
\r
181 this.type = 'flashVideo';
\r
182 this.contentObj.xH = 70;
\r
185 this.type = 'quicktime';
\r
188 this.type = 'windowsMedia';
\r
193 this.type = 'real';
\r
196 this.type = 'flashMp3';
\r
197 this.contentObj.width = 320;
\r
198 this.contentObj.height = 70;
\r
201 this.type = 'htmlelement';
\r
202 this.elementContent = link.content;
\r
203 this.elementContent.setStyles({
\r
208 if(this.elementContent.getStyle('width') != 'auto'){
\r
209 this.contentObj.width = this.elementContent.getStyle('width');
\r
212 this.contentObj.height = this.elementContent.getSize().y;
\r
213 this.elementContent.setStyles({
\r
221 this.type = 'iframe';
\r
222 if(contentOptions.ajax){
\r
223 this.type = 'ajax';
\r
230 this.container.setStyles({
\r
234 this.controlsContainer.setStyles({
\r
237 this.removeContent();
\r
238 this.previousButton.removeClass('MultiBoxButtonDisabled');
\r
239 this.nextButton.removeClass('MultiBoxButtonDisabled');
\r
240 this.opened = false;
\r
243 getOpenClosePos: function(el){
\r
244 if (this.options.openFromLink) {
\r
245 if (el.getFirst()) {
\r
246 var w = el.getFirst().getCoordinates().width - (this.container.getStyle('border').toInt() * 2);
\r
250 var h = el.getFirst().getCoordinates().height - (this.container.getStyle('border').toInt() * 2);
\r
254 this.openClosePos = {
\r
257 top: el.getFirst().getCoordinates().top,
\r
258 left: el.getFirst().getCoordinates().left
\r
262 var w = el.getCoordinates().width - (this.container.getStyle('border').toInt() * 2);
\r
266 var h = el.getCoordinates().height - (this.container.getStyle('border').toInt() * 2);
\r
270 this.openClosePos = {
\r
273 top: el.getCoordinates().top,
\r
274 left: el.getCoordinates().left
\r
278 var border = this.container.getStyle('border').toInt();
\r
280 if(this.options.fixedTop){
\r
281 var top = this.options.fixedTop;
\r
283 var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+this.options.offset.y;
\r
285 this.openClosePos = {
\r
286 width: this.options.initialWidth,
\r
287 height: this.options.initialHeight,
\r
289 left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x
\r
292 return this.openClosePos;
\r
295 open: function(el){
\r
296 this.options._onOpen();
\r
298 this.index = this.content.indexOf(el);
\r
300 this.openId = el.getProperty('id');
\r
302 var border = this.container.getStyle('border').toInt();
\r
305 this.opened = true;
\r
307 if(this.options.overlay){
\r
308 this.overlay.show();
\r
311 this.container.setStyles(this.getOpenClosePos(el));
\r
312 this.container.setStyles({
\r
317 if(this.options.fixedTop){
\r
318 var top = this.options.fixedTop;
\r
320 var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+this.options.offset.y;
\r
324 this.containerEffects.start({
\r
325 width: this.options.initialWidth,
\r
326 height: this.options.initialHeight,
\r
328 left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x,
\r
332 this.load(this.index);
\r
335 if (this.options.showControls) {
\r
336 this.hideControls();
\r
338 this.getOpenClosePos(this.content[this.index]);
\r
339 this.timer = this.hideContent.bind(this).delay(500);
\r
340 this.timer = this.load.pass(this.index, this).delay(1100);
\r
346 getContent: function(index){
\r
347 this.setContentType(this.content[index]);
\r
349 if(this.options.descClassName){
\r
350 this.descriptions.each(function(el,i){
\r
351 if(el.hasClass(this.openId)){
\r
356 this.contentToLoad = {
\r
357 title: this.content[index].title || ' ',
\r
364 if(this.options.overlay){
\r
365 this.overlay.hide();
\r
367 if (this.options.showControls) {
\r
368 this.hideControls();
\r
370 this.hideContent();
\r
371 this.containerEffects.cancel();
\r
372 this.zoomOut.bind(this).delay(500);
\r
373 this.options._onClose();
\r
376 zoomOut: function(){
\r
377 this.iframeEffects.start({
\r
378 width: this.openClosePos.width,
\r
379 height: this.openClosePos.height
\r
381 this.containerEffects.start({
\r
382 width: this.openClosePos.width,
\r
383 height: this.openClosePos.height,
\r
384 top: this.openClosePos.top,
\r
385 left: this.openClosePos.left,
\r
388 this.reset.bind(this).delay(500);
\r
391 load: function(index){
\r
392 this.box.addClass('MultiBoxLoading');
\r
393 this.getContent(index);
\r
394 if(this.type == 'image'){
\r
395 var xH = this.contentObj.xH;
\r
396 this.contentObj = new Asset.image(this.content[index].href, {onload: this.resize.bind(this)});
\r
397 this.contentObj.xH = xH;
\r
403 resize: function(){
\r
404 if(this.tempSRC != this.contentObj.src){
\r
406 var border = this.container.getStyle('border').toInt();
\r
408 if (this.options.fixedTop) {
\r
409 var top = this.options.fixedTop;
\r
412 var top = ((window.getHeight() / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) - border + window.getScrollTop()) + this.options.offset.y;
\r
414 var left = ((window.getWidth() / 2) - (this.contentObj.width.toInt() / 2) - border) + this.options.offset.x;
\r
422 this.containerEffects.cancel();
\r
423 this.containerEffects.start({
\r
424 width: this.contentObj.width,
\r
425 height: Number(this.contentObj.height) + this.contentObj.xH,
\r
430 this.iframeEffects.start({
\r
431 width: Number(this.contentObj.width) + (border*2),
\r
432 height: Number(this.contentObj.height) + this.contentObj.xH + (border*2)
\r
434 this.timer = this.showContent.bind(this).delay(500);
\r
435 this.tempSRC = this.contentObj.src;
\r
439 showContent: function(){
\r
441 this.box.removeClass('MultiBoxLoading');
\r
442 this.removeContent();
\r
444 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
446 if(this.type == 'image'){
\r
447 this.contentObj.injectInside(this.contentContainer);
\r
449 }else if(this.type == 'iframe'){
\r
450 new Element('iframe').setProperties({
\r
451 id: 'iFrame'+new Date().getTime(),
\r
452 width: this.contentObj.width,
\r
453 height: this.contentObj.height,
\r
454 src: this.contentObj.url,
\r
457 }).injectInside(this.contentContainer);
\r
459 }else if(this.type == 'htmlelement'){
\r
460 this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);
\r
462 }else if(this.type == 'ajax'){
\r
464 update: $('MultiBoxContentContainer'),
\r
466 }).get(this.contentObj.url);
\r
469 var obj = this.createEmbedObject().injectInside(this.contentContainer);
\r
470 if(this.str != ''){
\r
471 $('MultiBoxMediaObject').innerHTML = this.str;
\r
475 this.contentEffects = new Fx.Morph(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});
\r
476 this.contentEffects.start({
\r
480 this.title.set('html', this.contentToLoad.title);
\r
481 this.number.set('html', this.contentToLoad.number+' of '+this.content.length);
\r
482 if (this.options.descClassName) {
\r
483 if (this.description.getFirst()) {
\r
484 this.description.getFirst().destroy();
\r
486 if(this.contentToLoad.desc){
\r
487 this.contentToLoad.desc.inject(this.description).setStyles({
\r
492 //this.removeContent.bind(this).delay(500);
\r
493 if (this.options.showControls) {
\r
494 this.timer = this.showControls.bind(this).delay(800);
\r
498 hideContent: function(){
\r
499 this.box.addClass('MultiBoxLoading');
\r
500 this.contentEffects.start({
\r
503 this.removeContent.bind(this).delay(500);
\r
506 removeContent: function(){
\r
507 if($('MultiBoxMediaObject')){
\r
508 $('MultiBoxMediaObject').empty();
\r
509 $('MultiBoxMediaObject').destroy();
\r
511 if($('MultiBoxContentContainer')){
\r
512 //$('MultiBoxContentContainer').empty();
\r
513 $('MultiBoxContentContainer').destroy();
\r
517 showControls: function(){
\r
518 this.clicked = false;
\r
520 if(this.container.getStyle('height') != 'auto'){
\r
521 this.containerDefaults.height = this.container.getStyle('height')
\r
522 this.containerDefaults.backgroundColor = this.options.contentColor;
\r
525 this.container.setStyles({
\r
526 //'backgroundColor': this.controls.getStyle('backgroundColor'),
\r
530 if(this.contentToLoad.number == 1){
\r
531 this.previousButton.addClass('MultiBoxPreviousDisabled');
\r
533 this.previousButton.removeClass('MultiBoxPreviousDisabled');
\r
535 if(this.contentToLoad.number == this.content.length){
\r
536 this.nextButton.addClass('MultiBoxNextDisabled');
\r
538 this.nextButton.removeClass('MultiBoxNextDisabled');
\r
541 var p = this.box.getCoordinates();
\r
542 this.controlsContainer.setStyles({
\r
546 this.controlEffects.start({'height': this.controls.getStyle('height')});
\r
547 this.iframeEffects.start({'height': this.iframe.getStyle('height').toInt()+this.controls.getStyle('height').toInt()});
\r
549 if(this.options.overlay){
\r
550 this.options.overlay.position();
\r
555 hideControls: function(num){
\r
556 this.iframeEffects.start({'height': this.iframe.getStyle('height').toInt()-this.controls.getStyle('height').toInt()});
\r
557 this.controlEffects.start({'height': 0}).chain(function(){
\r
558 this.container.setStyles(this.containerDefaults);
\r
562 showThumbnails: function(){
\r
567 if(this.index < this.content.length-1){
\r
569 this.openId = this.content[this.index].getProperty('id');
\r
570 if (this.options.showControls) {
\r
571 this.hideControls();
\r
573 this.getOpenClosePos(this.content[this.index]);
\r
574 //this.getContent(this.index);
\r
575 this.timer = this.hideContent.bind(this).delay(500);
\r
576 this.timer = this.load.pass(this.index, this).delay(1100);
\r
580 previous: function(){
\r
581 if(this.index > 0){
\r
583 this.openId = this.content[this.index].getProperty('id');
\r
584 if (this.options.showControls) {
\r
585 this.hideControls();
\r
587 this.getOpenClosePos(this.content[this.index]);
\r
588 //this.getContent(this.index);
\r
589 this.timer = this.hideContent.bind(this).delay(500);
\r
590 this.timer = this.load.pass(this.index, this).delay(1000);
\r
594 createEmbedObject: function(){
\r
595 if(this.type == 'flash'){
\r
596 var url = this.contentObj.url;
\r
598 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
599 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
600 this.str += 'width="'+this.contentObj.width+'" ';
\r
601 this.str += 'height="'+this.contentObj.height+'" ';
\r
602 this.str += 'title="MultiBoxMedia">';
\r
603 this.str += '<param name="movie" value="'+url+'" />'
\r
604 this.str += '<param name="quality" value="high" />';
\r
605 this.str += '<embed src="'+url+'" ';
\r
606 this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
\r
607 this.str += 'width="'+this.contentObj.width+'" ';
\r
608 this.str += 'height="'+this.contentObj.height+'"></embed>';
\r
609 this.str += '</object>';
\r
613 if(this.type == 'flashVideo'){
\r
614 //var url = this.contentObj.url.substring(0, this.contentObj.url.lastIndexOf('.'));
\r
615 var url = this.contentObj.url;
\r
617 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
618 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
619 this.str += 'width="'+this.contentObj.width+'" ';
\r
620 this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'" ';
\r
621 this.str += 'title="MultiBoxMedia">';
\r
622 this.str += '<param name="movie" value="'+this.options.path+'flvplayer.swf" />'
\r
623 this.str += '<param name="quality" value="high" />';
\r
624 this.str += '<param name="salign" value="TL" />';
\r
625 this.str += '<param name="scale" value="noScale" />';
\r
626 this.str += '<param name="FlashVars" value="path='+url+'" />';
\r
627 this.str += '<embed src="'+this.options.path+'flvplayer.swf" ';
\r
628 this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
\r
629 this.str += 'width="'+this.contentObj.width+'" ';
\r
630 this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'"';
\r
631 this.str += 'salign="TL" ';
\r
632 this.str += 'scale="noScale" ';
\r
633 this.str += 'FlashVars="path='+url+'"';
\r
634 this.str += '></embed>';
\r
635 this.str += '</object>';
\r
639 if(this.type == 'flashMp3'){
\r
640 var url = this.contentObj.url;
\r
642 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
643 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
644 this.str += 'width="'+this.contentObj.width+'" ';
\r
645 this.str += 'height="'+this.contentObj.height+'" ';
\r
646 this.str += 'title="MultiBoxMedia">';
\r
647 this.str += '<param name="movie" value="'+this.options.path+'mp3player.swf" />'
\r
648 this.str += '<param name="quality" value="high" />';
\r
649 this.str += '<param name="salign" value="TL" />';
\r
650 this.str += '<param name="scale" value="noScale" />';
\r
651 this.str += '<param name="FlashVars" value="path='+url+'" />';
\r
652 this.str += '<embed src="'+this.options.path+'mp3player.swf" ';
\r
653 this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
\r
654 this.str += 'width="'+this.contentObj.width+'" ';
\r
655 this.str += 'height="'+this.contentObj.height+'"';
\r
656 this.str += 'salign="TL" ';
\r
657 this.str += 'scale="noScale" ';
\r
658 this.str += 'FlashVars="path='+url+'"';
\r
659 this.str += '></embed>';
\r
660 this.str += '</object>';
\r
663 if(this.type == 'quicktime'){
\r
664 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
665 this.str = '<object type="video/quicktime" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"';
\r
666 this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
\r
667 this.str += '<param name="src" value="'+this.contentObj.url+'" />';
\r
668 this.str += '<param name="autoplay" value="true" />';
\r
669 this.str += '<param name="controller" value="true" />';
\r
670 this.str += '<param name="enablejavascript" value="true" />';
\r
671 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
672 this.str += '<object/>';
\r
676 if(this.type == 'windowsMedia'){
\r
677 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
678 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
679 this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
\r
680 this.str += '<param name="filename" value="'+this.contentObj.url+'" />';
\r
681 this.str += '<param name="Showcontrols" value="true" />';
\r
682 this.str += '<param name="autoStart" value="true" />';
\r
683 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
684 this.str += '<object/>';
\r
688 if(this.type == 'real'){
\r
689 var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
\r
690 this.str = '<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"';
\r
691 this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
\r
692 this.str += '<param name="src" value="'+this.contentObj.url+'" />';
\r
693 this.str += '<param name="controls" value="ImageWindow" />';
\r
694 this.str += '<param name="autostart" value="true" />';
\r
695 this.str += '<embed src="'+this.contentObj.url+'" controls="ImageWindow" autostart="true" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
\r
696 this.str += '<object/>';
\r
704 multiBox.implement(new Options);
\r
705 multiBox.implement(new Events);
\r
708 /*************************************************************/
\r