attempt to migrate to moo 1.2
[mkgallery.git] / include / multibox.js
1 \r
2 /**************************************************************\r
3 \r
4         Script          : MultiBox\r
5         Version         : 1.3.1\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 **************************************************************/\r
11 \r
12 var MultiBox = new Class({\r
13         \r
14         getOptions: function(){\r
15                 return {\r
16                         initialWidth: 250,\r
17                         initialHeight: 250,\r
18                         container: document.body,\r
19                         useOverlay: false,\r
20                         contentColor: '#FFF',\r
21                         showNumbers: true,\r
22                         showControls: true,\r
23                         //showThumbnails: false,\r
24                         //autoPlay: false,\r
25                         waitDuration: 2000,\r
26                         descClassName: false,\r
27                         descMinWidth: 400,\r
28                         descMaxWidth: 600,\r
29                         movieWidth: 400,\r
30                         movieHeight: 300,\r
31                         offset: {x:0, y:0},\r
32                         fixedTop: false,\r
33                         path: 'files/',\r
34                         onOpen: $empty,\r
35                         onClose: $empty,\r
36                         openFromLink: true,\r
37                         relativeToWindow: true\r
38                 };\r
39         },\r
40 \r
41         initialize: function(className, options){\r
42                 this.setOptions(this.getOptions(), options);\r
43                 \r
44                 this.openClosePos = {};\r
45                 this.timer = 0;\r
46                 this.contentToLoad = {};\r
47                 this.index = 0;\r
48                 this.opened = false;\r
49                 this.contentObj = {};\r
50                 this.containerDefaults = {};\r
51                 \r
52                 if(this.options.useOverlay){\r
53                         this.overlay = new Overlay({container: this.options.container, onClick:this.close.bind(this)});\r
54                 }\r
55                 \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
61                         });\r
62                 }\r
63                 \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
69                         'frameborder': 1,\r
70                         'scrolling': 'no'\r
71                 }).setStyles({\r
72                         'position': 'absolute',\r
73                         'top': -20,\r
74                         'left': -20,\r
75                         'width': '115%',\r
76                         'height': '115%',\r
77                         'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',\r
78                         'opacity': 0\r
79                 }).injectInside(this.container);\r
80                 this.box = new Element('div').addClass('MultiBoxContent').injectInside(this.container);\r
81                 \r
82                 this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', this.close.bind(this));\r
83                 \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
86                 \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
89                 \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
93                 \r
94                 \r
95                 \r
96                 if(this.content.length == 1){\r
97                         this.title.setStyles({\r
98                                 'margin-left': 0\r
99                         });\r
100                         this.description.setStyles({\r
101                                 'margin-left': 0\r
102                         });\r
103                         this.previousButton.setStyle('display', 'none');\r
104                         this.nextButton.setStyle('display', 'none');\r
105                         this.number.setStyle('display', 'none');\r
106                 }\r
107                 \r
108                 new Element('div').setStyle('clear', 'both').injectInside(this.controls);\r
109                 \r
110                 this.content.each(function(el,i){\r
111                         el.index = i;\r
112                         el.addEvent('click', function(e){\r
113                                 new Event(e).stop();\r
114                                 this.open(el);\r
115                         }.bind(this));\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
119                         }\r
120                 }, this);\r
121                 \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
124                 \r
125                 this.reset();\r
126         },\r
127         \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
136                         });\r
137                 }\r
138                 \r
139                 if(contentOptions.type != undefined){\r
140                         str = contentOptions.type;\r
141                 }\r
142                 \r
143                 this.contentObj = {};\r
144                 this.contentObj.url = link.href;\r
145                 this.contentObj.xH = 0;\r
146                 \r
147                 if(contentOptions.width){\r
148                         this.contentObj.width = contentOptions.width;\r
149                 }else{\r
150                         this.contentObj.width = this.options.movieWidth;\r
151                 }\r
152                 if(contentOptions.height){\r
153                         this.contentObj.height = contentOptions.height; \r
154                 }else{\r
155                         this.contentObj.height = this.options.movieHeight;\r
156                 }\r
157                 if(contentOptions.panel){\r
158                         this.panelPosition = contentOptions.panel;\r
159                 }else{\r
160                         this.panelPosition = this.options.panel;\r
161                 }\r
162                 \r
163                 \r
164                 switch(str){\r
165                         case 'jpg':\r
166                         case 'gif':\r
167                         case 'png':\r
168                                 this.type = 'image';\r
169                                 break;\r
170                         case 'swf':\r
171                                 this.type = 'flash';\r
172                                 break;\r
173                         case 'flv':\r
174                                 this.type = 'flashVideo';\r
175                                 this.contentObj.xH = 70;\r
176                                 break;\r
177                         case 'mov':\r
178                                 this.type = 'quicktime';\r
179                                 break;\r
180                         case 'wmv':\r
181                                 this.type = 'windowsMedia';\r
182                                 break;\r
183                         case 'rv':\r
184                         case 'rm':\r
185                         case 'rmvb':\r
186                                 this.type = 'real';\r
187                                 break;\r
188                         case 'mp3':\r
189                                 this.type = 'flashMp3';\r
190                                 this.contentObj.width = 320;\r
191                                 this.contentObj.height = 70;\r
192                                 break;\r
193                         case 'element':\r
194                                 this.type = 'htmlelement';\r
195                                 this.elementContent = link.content;\r
196                                 this.elementContent.setStyles({\r
197                                         display: 'block',\r
198                                         opacity: 0\r
199                                 })\r
200         \r
201                                 if(this.elementContent.getStyle('width') != 'auto'){\r
202                                         this.contentObj.width = this.elementContent.getStyle('width');\r
203                                 }\r
204                                 \r
205                                 this.contentObj.height = this.elementContent.getSize().size.y;\r
206                                 this.elementContent.setStyles({\r
207                                         display: 'none',\r
208                                         opacity: 1\r
209                                 })\r
210                                 break;\r
211                                 \r
212                         default:\r
213                                 \r
214                                 this.type = 'iframe';\r
215                                 if(contentOptions.ajax){\r
216                                         this.type = 'ajax';\r
217                                 }\r
218                                 break;\r
219                 }\r
220         },\r
221         \r
222         reset: function(){\r
223                 this.container.setStyles({\r
224                         'opacity': 0,\r
225                         'display': 'none'\r
226                 });\r
227                 this.controlsContainer.setStyles({\r
228                         'height': 0\r
229                 });\r
230                 this.removeContent();\r
231                 this.previousButton.removeClass('MultiBoxButtonDisabled');\r
232                 this.nextButton.removeClass('MultiBoxButtonDisabled');\r
233                 this.opened = false;\r
234         },\r
235         \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
240                                 if (w < 0) {\r
241                                         w = 0\r
242                                 }\r
243                                 var h = el.getFirst().getCoordinates().height - (this.container.getStyle('border').toInt() * 2);\r
244                                 if (h < 0) {\r
245                                         h = 0\r
246                                 }\r
247                                 this.openClosePos = {\r
248                                         width: w,\r
249                                         height: h,\r
250                                         top: el.getFirst().getCoordinates().top,\r
251                                         left: el.getFirst().getCoordinates().left\r
252                                 };\r
253                         }\r
254                         else {\r
255                                 var w = el.getCoordinates().width - (this.container.getStyle('border').toInt() * 2);\r
256                                 if (w < 0) {\r
257                                         w = 0\r
258                                 }\r
259                                 var h = el.getCoordinates().height - (this.container.getStyle('border').toInt() * 2);\r
260                                 if (h < 0) {\r
261                                         h = 0\r
262                                 }\r
263                                 this.openClosePos = {\r
264                                         width: w,\r
265                                         height: h,\r
266                                         top: el.getCoordinates().top,\r
267                                         left: el.getCoordinates().left\r
268                                 };\r
269                         }\r
270                 }else{\r
271                         if(this.options.fixedTop){\r
272                                 var top = this.options.fixedTop;\r
273                         }else{\r
274                                 var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y;\r
275                         }\r
276                         this.openClosePos = {\r
277                                 width: this.options.initialWidth,\r
278                                 height: this.options.initialHeight,\r
279                                 top: top,\r
280                                 left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x\r
281                         };\r
282                 }\r
283                 return this.openClosePos;\r
284         },\r
285         \r
286         open: function(el){\r
287         \r
288                 this.options.onOpen();\r
289         \r
290                 this.index = this.content.indexOf(el);\r
291                 \r
292                 this.openId = el.getProperty('id');\r
293                 \r
294                 if(!this.opened){\r
295                         this.opened = true;\r
296                         \r
297                         if(this.options.useOverlay){\r
298                                 this.overlay.show();\r
299                         }\r
300                         \r
301                         this.container.setStyles(this.getOpenClosePos(el));\r
302                         this.container.setStyles({\r
303                                 opacity: 0,\r
304                                 display: 'block'\r
305                         });\r
306                         \r
307                         if(this.options.fixedTop){\r
308                                 var top = this.options.fixedTop;\r
309                         }else{\r
310                                 var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y;\r
311                         }\r
312                         \r
313                         this.containerEffects.start({\r
314                                 width: this.options.initialWidth,\r
315                                 height: this.options.initialHeight,\r
316                                 top: top,\r
317                                 left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x,\r
318                                 opacity: [0, 1]\r
319                         });\r
320                         \r
321                         this.load(this.index);\r
322                 \r
323                 }else{\r
324                         if (this.options.showControls) {\r
325                                 this.hideControls();\r
326                         }\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
330                         \r
331                 }\r
332                 \r
333         },\r
334         \r
335         getContent: function(index){\r
336                 this.setContentType(this.content[index]);\r
337                 var desc = {};\r
338                 if(this.options.descClassName){\r
339                 this.descriptions.each(function(el,i){\r
340                         if(el.hasClass(this.openId)){\r
341                                 desc = el.clone();\r
342                         }\r
343                 },this);\r
344                 }\r
345                 //var title = this.content[index].title;\r
346                 this.contentToLoad = {\r
347                         title: this.content[index].title || '&nbsp;',\r
348                         //desc: $(this.options.descClassName+this.content[index].id).clone(),\r
349                         desc: desc,\r
350                         number: index+1\r
351                 };\r
352         },\r
353         \r
354         close: function(){\r
355                 if(this.options.useOverlay){\r
356                         this.overlay.hide();\r
357                 }\r
358                 if (this.options.showControls) {\r
359                         this.hideControls();\r
360                 }\r
361                 this.hideContent();\r
362                 this.containerEffects.stop();\r
363                 this.zoomOut.bind(this).delay(500);\r
364                 this.options.onClose();\r
365         },\r
366         \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
373                         opacity: 0\r
374                 });\r
375                 this.reset.bind(this).delay(500);\r
376         },\r
377         \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
388                 }else{\r
389                         this.resize();\r
390                 }\r
391         },\r
392         \r
393         resize: function(){\r
394                 if (this.options.fixedTop) {\r
395                         var top = this.options.fixedTop;\r
396                 }\r
397                 else {\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
399                 }\r
400                 var left = ((window.getWidth() / 2) - (this.contentObj.width / 2) - this.container.getStyle('border').toInt()) + this.options.offset.x;\r
401                 if (top < 0) {\r
402                         top = 0\r
403                 }\r
404                 if (left < 0) {\r
405                         left = 0\r
406                 }\r
407                 \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
412                         top: top,\r
413                         left: left,\r
414                         opacity: 1\r
415                 });\r
416                 this.timer = this.showContent.bind(this).delay(500);\r
417         },\r
418         \r
419         showContent: function(){\r
420                 this.box.removeClass('MultiBoxLoading');\r
421                 this.removeContent();\r
422                 \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
424                 \r
425                 if(this.type == 'image'){\r
426                         this.contentObj.injectInside(this.contentContainer);\r
427                         \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
434                                 frameborder: 0,\r
435                                 scrolling: 'auto'\r
436                         }).injectInside(this.contentContainer);\r
437                         \r
438                 }else if(this.type == 'htmlelement'){\r
439                         this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);\r
440                         \r
441                 }else if(this.type == 'ajax'){\r
442                         new Ajax(this.contentObj.url, {\r
443                                 method: 'get',\r
444                                 update: 'MultiBoxContentContainer',\r
445                                 evalScripts: true,\r
446                                 autoCancel: true\r
447                         }).request();\r
448                         \r
449                 }else{\r
450                         var obj = this.createEmbedObject().injectInside(this.contentContainer);\r
451                         if(this.str != ''){\r
452                                 $('MultiBoxMediaObject').innerHTML = this.str;\r
453                         }\r
454                 }\r
455                 \r
456                 this.contentEffects = new Fx.Morph(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});\r
457                 this.contentEffects.start({\r
458                         opacity: 1\r
459                 });\r
460                 \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
466                         }\r
467                         this.contentToLoad.desc.injectInside(this.description).setStyles({\r
468                                 display: 'block'\r
469                         });\r
470                 }\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
474                 }\r
475         },\r
476         \r
477         hideContent: function(){\r
478                 this.box.addClass('MultiBoxLoading');\r
479                 this.contentEffects.start({\r
480                         opacity: 0\r
481                 });\r
482                 this.removeContent.bind(this).delay(500);\r
483         },\r
484         \r
485         removeContent: function(){\r
486                 if($('MultiBoxMediaObject')){\r
487                         $('MultiBoxMediaObject').empty();\r
488                         $('MultiBoxMediaObject').remove();\r
489                 }\r
490                 if($('MultiBoxContentContainer')){\r
491                         //$('MultiBoxContentContainer').empty();\r
492                         $('MultiBoxContentContainer').remove(); \r
493                 }\r
494         },\r
495         \r
496         showControls: function(){\r
497                 this.clicked = false;\r
498                 \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
502                 }\r
503                 \r
504                 this.container.setStyles({\r
505                         //'backgroundColor': this.controls.getStyle('backgroundColor'),\r
506                         'height': 'auto'\r
507                 });\r
508                 \r
509                 if(this.contentToLoad.number == 1){\r
510                         this.previousButton.addClass('MultiBoxPreviousDisabled');\r
511                 }else{\r
512                         this.previousButton.removeClass('MultiBoxPreviousDisabled');\r
513                 }\r
514                 if(this.contentToLoad.number == this.content.length){\r
515                         this.nextButton.addClass('MultiBoxNextDisabled');\r
516                 }else{\r
517                         this.nextButton.removeClass('MultiBoxNextDisabled');\r
518                 }\r
519                 \r
520                 this.controlEffects.start({'height': this.controls.getStyle('height')});\r
521 \r
522         },\r
523         \r
524         hideControls: function(num){\r
525                 this.controlEffects.start({'height': 0}).chain(function(){\r
526                         this.container.setStyles(this.containerDefaults);\r
527                 }.bind(this));\r
528         },\r
529         \r
530         showThumbnails: function(){\r
531                 \r
532         },\r
533         \r
534         next: function(){\r
535                 if(this.index < this.content.length-1){\r
536                         this.index++;\r
537                         this.openId = this.content[this.index].getProperty('id');\r
538                         if (this.options.showControls) {\r
539                                 this.hideControls();\r
540                         }\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
545                 }\r
546         },\r
547         \r
548         previous: function(){\r
549                 if(this.index > 0){\r
550                         this.index--;\r
551                         this.openId = this.content[this.index].getProperty('id');\r
552                         if (this.options.showControls) {\r
553                                 this.hideControls();\r
554                         }\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
559                 }\r
560         },\r
561         \r
562         createEmbedObject: function(){\r
563                 if(this.type == 'flash'){\r
564                         var url = this.contentObj.url;\r
565                         \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
578                         \r
579                 }\r
580                 \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
584                         \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
604                         \r
605                 }\r
606                 \r
607                 if(this.type == 'flashMp3'){\r
608                         var url = this.contentObj.url;\r
609                         \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
629                 }\r
630                 \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
641                         \r
642                 }\r
643                 \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
653                         \r
654                 }\r
655                 \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
665                         \r
666                 }\r
667                 \r
668                 return obj;\r
669         }\r
670         \r
671 });\r
672 MultiBox.implement(new Options);\r
673 MultiBox.implement(new Events);\r
674 \r
675 \r
676 /*************************************************************/\r
677 \r