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