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