wip
[mkgallery.git] / include / multibox.js
1 \r
2 /**************************************************************\r
3 \r
4         Script          : multiBox\r
5         Version         : 1.3.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
9         \r
10         TODO: 'create' function to open box from flash\r
11 \r
12 **************************************************************/\r
13 \r
14 var multiBox = new Class({\r
15         \r
16         getOptions: function(){\r
17                 return {\r
18                         initialWidth: 250,\r
19                         initialHeight: 250,\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
23                         showNumbers: true,\r
24                         showControls: true,\r
25                         //showThumbnails: false,\r
26                         //autoPlay: false,\r
27                         //waitDuration: 2000,\r
28                         descClassName: false,\r
29                         descMinWidth: 400,\r
30                         descMaxWidth: 600,\r
31                         movieWidth: 400,\r
32                         movieHeight: 300,\r
33                         offset: {x:0, y:0},\r
34                         fixedTop: false,\r
35                         path: 'files/',\r
36                         _onOpen: $empty,\r
37                         _onClose: $empty,\r
38                         openFromLink: true\r
39                         //relativeToWindow: true\r
40                 };\r
41         },\r
42 \r
43         initialize: function(className, options){\r
44                 this.setOptions(this.getOptions(), options);\r
45                 \r
46                 this.openClosePos = {};\r
47                 this.timer = 0;\r
48                 this.contentToLoad = {};\r
49                 this.index = 0;\r
50                 this.opened = false;\r
51                 this.contentObj = {};\r
52                 this.containerDefaults = {};\r
53                 \r
54                 if(this.options.useOverlay){\r
55                         this.overlay = new overlay({container: this.options.container, onClick:this.close.bind(this)});\r
56                 }\r
57                 this.overlay = this.options.overlay;\r
58                 if(this.overlay){\r
59                         this.overlay.setOnClick(this.close.bind(this));\r
60                 }\r
61                 \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
67                         });\r
68                 }\r
69                 \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
75                         'frameborder': 0,\r
76                         'scrolling': 'no'\r
77                 }).setStyles({\r
78                         'position': 'absolute',\r
79                         'top': -20,\r
80                         'left': -20,\r
81                         'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',\r
82                         'opacity': 0\r
83                 }).inject(this.container);\r
84                 this.box = new Element('div').addClass('MultiBoxContent').inject(this.container);\r
85                 \r
86                 this.closeButton = new Element('div').addClass('MultiBoxClose').inject(this.container).addEvent('click', this.close.bind(this));\r
87                 \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
90                 \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
93                 \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
97                 \r
98                 \r
99                 \r
100                 if(this.content.length == 1){\r
101                         this.title.setStyles({\r
102                                 'margin-left': 0\r
103                         });\r
104                         this.description.setStyles({\r
105                                 'margin-left': 0\r
106                         });\r
107                         this.previousButton.setStyle('display', 'none');\r
108                         this.nextButton.setStyle('display', 'none');\r
109                         this.number.setStyle('display', 'none');\r
110                 }\r
111                 \r
112                 new Element('div').setStyle('clear', 'both').inject(this.controls);\r
113                 \r
114                 this.content.each(function(el,i){\r
115                         el.index = i;\r
116                         el.addEvent('click', function(e){\r
117                                 new Event(e).stop();\r
118                                 this.open(el);\r
119                         }.bind(this));\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
123                         }\r
124                 }, this);\r
125                 \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
129                 \r
130                 this.reset();\r
131         },\r
132         \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
141                         });\r
142                 }\r
143                 \r
144                 if(contentOptions.type != undefined){\r
145                         str = contentOptions.type;\r
146                 }\r
147                 \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
152                 \r
153                 if(contentOptions.width){\r
154                         this.contentObj.width = contentOptions.width;\r
155                 }else{\r
156                         this.contentObj.width = this.options.movieWidth;\r
157                 }\r
158                 if(contentOptions.height){\r
159                         this.contentObj.height = contentOptions.height; \r
160                 }else{\r
161                         this.contentObj.height = this.options.movieHeight;\r
162                 }\r
163                 if(contentOptions.panel){\r
164                         this.panelPosition = contentOptions.panel;\r
165                 }else{\r
166                         this.panelPosition = this.options.panel;\r
167                 }\r
168                 \r
169                 \r
170                 switch(str){\r
171                         case 'jpg':\r
172                         case 'image':\r
173                         case 'gif':\r
174                         case 'png':\r
175                                 this.type = 'image';\r
176                                 break;\r
177                         case 'swf':\r
178                                 this.type = 'flash';\r
179                                 break;\r
180                         case 'flv':\r
181                                 this.type = 'flashVideo';\r
182                                 this.contentObj.xH = 70;\r
183                                 break;\r
184                         case 'mov':\r
185                                 this.type = 'quicktime';\r
186                                 break;\r
187                         case 'wmv':\r
188                                 this.type = 'windowsMedia';\r
189                                 break;\r
190                         case 'rv':\r
191                         case 'rm':\r
192                         case 'rmvb':\r
193                                 this.type = 'real';\r
194                                 break;\r
195                         case 'mp3':\r
196                                 this.type = 'flashMp3';\r
197                                 this.contentObj.width = 320;\r
198                                 this.contentObj.height = 70;\r
199                                 break;\r
200                         case 'element':\r
201                                 this.type = 'htmlelement';\r
202                                 this.elementContent = link.content;\r
203                                 this.elementContent.setStyles({\r
204                                         display: 'block',\r
205                                         opacity: 0\r
206                                 })\r
207         \r
208                                 if(this.elementContent.getStyle('width') != 'auto'){\r
209                                         this.contentObj.width = this.elementContent.getStyle('width');\r
210                                 }\r
211                                 \r
212                                 this.contentObj.height = this.elementContent.getSize().y;\r
213                                 this.elementContent.setStyles({\r
214                                         display: 'none',\r
215                                         opacity: 1\r
216                                 })\r
217                                 break;\r
218                                 \r
219                         default:\r
220                                 \r
221                                 this.type = 'iframe';\r
222                                 if(contentOptions.ajax){\r
223                                         this.type = 'ajax';\r
224                                 }\r
225                                 break;\r
226                 }\r
227         },\r
228         \r
229         reset: function(){\r
230                 this.container.setStyles({\r
231                         'opacity': 0,\r
232                         'display': 'none'\r
233                 });\r
234                 this.controlsContainer.setStyles({\r
235                         'height': 0\r
236                 });\r
237                 this.removeContent();\r
238                 this.previousButton.removeClass('MultiBoxButtonDisabled');\r
239                 this.nextButton.removeClass('MultiBoxButtonDisabled');\r
240                 this.opened = false;\r
241         },\r
242         \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
247                                 if (w < 0) {\r
248                                         w = 0\r
249                                 }\r
250                                 var h = el.getFirst().getCoordinates().height - (this.container.getStyle('border').toInt() * 2);\r
251                                 if (h < 0) {\r
252                                         h = 0\r
253                                 }\r
254                                 this.openClosePos = {\r
255                                         width: w,\r
256                                         height: h,\r
257                                         top: el.getFirst().getCoordinates().top,\r
258                                         left: el.getFirst().getCoordinates().left\r
259                                 };\r
260                         }\r
261                         else {\r
262                                 var w = el.getCoordinates().width - (this.container.getStyle('border').toInt() * 2);\r
263                                 if (w < 0) {\r
264                                         w = 0\r
265                                 }\r
266                                 var h = el.getCoordinates().height - (this.container.getStyle('border').toInt() * 2);\r
267                                 if (h < 0) {\r
268                                         h = 0\r
269                                 }\r
270                                 this.openClosePos = {\r
271                                         width: w,\r
272                                         height: h,\r
273                                         top: el.getCoordinates().top,\r
274                                         left: el.getCoordinates().left\r
275                                 };\r
276                         }\r
277                 }else{\r
278                         var border = this.container.getStyle('border').toInt();\r
279                         \r
280                         if(this.options.fixedTop){\r
281                                 var top = this.options.fixedTop;\r
282                         }else{\r
283                                 var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+this.options.offset.y;\r
284                         }\r
285                         this.openClosePos = {\r
286                                 width: this.options.initialWidth,\r
287                                 height: this.options.initialHeight,\r
288                                 top: top,\r
289                                 left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x\r
290                         };\r
291                 }\r
292                 return this.openClosePos;\r
293         },\r
294         \r
295         open: function(el){\r
296                 this.options._onOpen();\r
297         \r
298                 this.index = this.content.indexOf(el);\r
299                 \r
300                 this.openId = el.getProperty('id');\r
301                 \r
302                 var border = this.container.getStyle('border').toInt();\r
303                 \r
304                 if(!this.opened){\r
305                         this.opened = true;\r
306                         \r
307                         if(this.options.overlay){\r
308                                 this.overlay.show();\r
309                         }\r
310 \r
311                         this.container.setStyles(this.getOpenClosePos(el));\r
312                         this.container.setStyles({\r
313                                 opacity: 0,\r
314                                 display: 'block'\r
315                         });\r
316                         \r
317                         if(this.options.fixedTop){\r
318                                 var top = this.options.fixedTop;\r
319                         }else{\r
320                                 var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+this.options.offset.y;\r
321                         }\r
322                         \r
323                         \r
324                         this.containerEffects.start({\r
325                                 width: this.options.initialWidth,\r
326                                 height: this.options.initialHeight,\r
327                                 top: top,\r
328                                 left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x,\r
329                                 opacity: [0, 1]\r
330                         });\r
331                         \r
332                         this.load(this.index);\r
333                 \r
334                 }else{\r
335                         if (this.options.showControls) {\r
336                                 this.hideControls();\r
337                         }\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
341                         \r
342                 }\r
343                 \r
344         },\r
345         \r
346         getContent: function(index){\r
347                 this.setContentType(this.content[index]);\r
348                 var desc = false;\r
349                 if(this.options.descClassName){\r
350                 this.descriptions.each(function(el,i){\r
351                         if(el.hasClass(this.openId)){\r
352                                 desc = el.clone();\r
353                         }\r
354                 },this);\r
355                 }\r
356                 this.contentToLoad = {\r
357                         title: this.content[index].title || '&nbsp;',\r
358                         desc: desc,\r
359                         number: index+1\r
360                 };\r
361         },\r
362         \r
363         close: function(){\r
364                 if(this.options.overlay){\r
365                         this.overlay.hide();\r
366                 }\r
367                 if (this.options.showControls) {\r
368                         this.hideControls();\r
369                 }\r
370                 this.hideContent();\r
371                 this.containerEffects.cancel();\r
372                 this.zoomOut.bind(this).delay(500);\r
373                 this.options._onClose();\r
374         },\r
375         \r
376         zoomOut: function(){\r
377                 this.iframeEffects.start({\r
378                         width: this.openClosePos.width,\r
379                         height: this.openClosePos.height\r
380                 });\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
386                         opacity: 0\r
387                 });\r
388                 this.reset.bind(this).delay(500);\r
389         },\r
390         \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
398                 }else{\r
399                         this.resize();\r
400                 }\r
401         },\r
402         \r
403         resize: function(){\r
404                 if(this.tempSRC != this.contentObj.src){\r
405                         \r
406                         var border = this.container.getStyle('border').toInt();\r
407                         \r
408                         if (this.options.fixedTop) {\r
409                                 var top = this.options.fixedTop;\r
410                         }\r
411                         else {\r
412                                 var top = ((window.getHeight() / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) - border + window.getScrollTop()) + this.options.offset.y;\r
413                         }\r
414                         var left = ((window.getWidth() / 2) - (this.contentObj.width.toInt() / 2) - border) + this.options.offset.x;\r
415                         if (top < 0) {\r
416                                 top = 0\r
417                         }\r
418                         if (left < 0) {\r
419                                 left = 0\r
420                         }\r
421                         \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
426                                 top: top,\r
427                                 left: left,\r
428                                 opacity: 1\r
429                         });\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
433                         });\r
434                         this.timer = this.showContent.bind(this).delay(500);\r
435                         this.tempSRC = this.contentObj.src;\r
436                 }\r
437         },\r
438         \r
439         showContent: function(){\r
440                 this.tempSRC = '';\r
441                 this.box.removeClass('MultiBoxLoading');\r
442                 this.removeContent();\r
443                 \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
445                 \r
446                 if(this.type == 'image'){\r
447                         this.contentObj.injectInside(this.contentContainer);\r
448                         \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
455                                 frameborder: 0,\r
456                                 scrolling: 'auto'\r
457                         }).injectInside(this.contentContainer);\r
458                         \r
459                 }else if(this.type == 'htmlelement'){\r
460                         this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);\r
461                         \r
462                 }else if(this.type == 'ajax'){\r
463                         new Request.HTML({\r
464                                 update: $('MultiBoxContentContainer'),\r
465                                 autoCancel: true\r
466                         }).get(this.contentObj.url);\r
467                         \r
468                 }else{\r
469                         var obj = this.createEmbedObject().injectInside(this.contentContainer);\r
470                         if(this.str != ''){\r
471                                 $('MultiBoxMediaObject').innerHTML = this.str;\r
472                         }\r
473                 }\r
474                 \r
475                 this.contentEffects = new Fx.Morph(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});\r
476                 this.contentEffects.start({\r
477                         opacity: 1\r
478                 });\r
479                 \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
485                         }\r
486                         if(this.contentToLoad.desc){\r
487                                 this.contentToLoad.desc.inject(this.description).setStyles({\r
488                                         display: 'block'\r
489                                 });\r
490                         }\r
491                 }\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
495                 }\r
496         },\r
497         \r
498         hideContent: function(){\r
499                 this.box.addClass('MultiBoxLoading');\r
500                 this.contentEffects.start({\r
501                         opacity: 0\r
502                 });\r
503                 this.removeContent.bind(this).delay(500);\r
504         },\r
505         \r
506         removeContent: function(){\r
507                 if($('MultiBoxMediaObject')){\r
508                         $('MultiBoxMediaObject').empty();\r
509                         $('MultiBoxMediaObject').destroy();\r
510                 }\r
511                 if($('MultiBoxContentContainer')){\r
512                         //$('MultiBoxContentContainer').empty();\r
513                         $('MultiBoxContentContainer').destroy();        \r
514                 }\r
515         },\r
516         \r
517         showControls: function(){\r
518                 this.clicked = false;\r
519                 \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
523                 }\r
524                 \r
525                 this.container.setStyles({\r
526                         //'backgroundColor': this.controls.getStyle('backgroundColor'),\r
527                         'height': 'auto'\r
528                 });\r
529                 \r
530                 if(this.contentToLoad.number == 1){\r
531                         this.previousButton.addClass('MultiBoxPreviousDisabled');\r
532                 }else{\r
533                         this.previousButton.removeClass('MultiBoxPreviousDisabled');\r
534                 }\r
535                 if(this.contentToLoad.number == this.content.length){\r
536                         this.nextButton.addClass('MultiBoxNextDisabled');\r
537                 }else{\r
538                         this.nextButton.removeClass('MultiBoxNextDisabled');\r
539                 }\r
540                 \r
541                 var p = this.box.getCoordinates();\r
542                 this.controlsContainer.setStyles({\r
543                         'top': p.height\r
544                 });\r
545                 \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
548                 \r
549                 if(this.options.overlay){\r
550                         this.options.overlay.position();\r
551                 }\r
552 \r
553         },\r
554         \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
559                 }.bind(this));\r
560         },\r
561         \r
562         showThumbnails: function(){\r
563                 \r
564         },\r
565         \r
566         next: function(){\r
567                 if(this.index < this.content.length-1){\r
568                         this.index++;\r
569                         this.openId = this.content[this.index].getProperty('id');\r
570                         if (this.options.showControls) {\r
571                                 this.hideControls();\r
572                         }\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
577                 }\r
578         },\r
579         \r
580         previous: function(){\r
581                 if(this.index > 0){\r
582                         this.index--;\r
583                         this.openId = this.content[this.index].getProperty('id');\r
584                         if (this.options.showControls) {\r
585                                 this.hideControls();\r
586                         }\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
591                 }\r
592         },\r
593         \r
594         createEmbedObject: function(){\r
595                 if(this.type == 'flash'){\r
596                         var url = this.contentObj.url;\r
597                         \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
610                         \r
611                 }\r
612                 \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
616                         \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
636                         \r
637                 }\r
638                 \r
639                 if(this.type == 'flashMp3'){\r
640                         var url = this.contentObj.url;\r
641                         \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
661                 }\r
662                 \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
673                         \r
674                 }\r
675                 \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
685                         \r
686                 }\r
687                 \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
697                         \r
698                 }\r
699                 \r
700                 return obj;\r
701         }\r
702         \r
703 });\r
704 multiBox.implement(new Options);\r
705 multiBox.implement(new Events);\r
706 \r
707 \r
708 /*************************************************************/\r
709 \r