pull phatfusion scripts that actually work with mootools 1.2

diff --git a/include/gallery.css b/include/gallery.css
index 93fea0d93baa2dd58e9e9e2931b4bbf3db27e70f..e5c5e82a936ccb9978c4f2efa91ca3f4c0768ba9 100644 (file)
--- a/include/gallery.css
+++ b/include/gallery.css
@@ -31,25 +31,6 @@ table.slide td {
  vertical-align: middle;
 }
 
-div.ibox {
- background-color: #ffffc0;
- border: 1px solid black;
- margin: 0px;
- padding: 0px;
- font-size: 10px;
- display: none;
- z-index: 1000;
- position: absolute;
-}
-div.iboxtitle {
- background-color: blue;
- margin: 0px;
- padding: 0.5ex;
-}
-div.iboxtitle * {
- color: white;
-}
-
 table.ipage {
  background-color: #ffffc0;
  border: 1px solid black;

diff --git a/include/gallery.js b/include/gallery.js
index f85f19a30d9142773fcb4e623e5181d863dad0ae..d0f9760a84fe87b460852c3325e4592c5fd5e4db 100644 (file)
--- a/include/gallery.js
+++ b/include/gallery.js
@@ -10,13 +10,13 @@
        Slideshow
 */
 
-var ShowWindow = new Class({
+var showWindow = new Class({
 
        getOptions: function(){
                return {
                        zIndex: 2,
                        container: document.body,
-                       onClick: Class.empty
+                       onClick: $empty,
                };
        },
 
@@ -69,7 +69,7 @@ var ShowWindow = new Class({
                this.div.setStyles({display: 'none'});
        }
 });
-ShowWindow.implement(new Options);
+showWindow.implement(new Options);
 
 /* Make overlay window and start slideshow */
 function run_slideshow(startid) {
@@ -132,10 +132,10 @@ function init_gallery() {
   openFromLink: false,
   descClassName: 'infoboxdesc',
  }
- ibox = new MultiBox('infobox', iboxparams)
+ ibox = new multiBox('infobox', iboxparams)
 
  var winparms = {}
- showwin = new ShowWindow('slideshowWindow',winparms)
+ showwin = new showWindow('slideshowWindow',winparms)
 
  var showparms = {
   wait: 3000,
@@ -145,7 +145,7 @@ function init_gallery() {
   thumbnails: true,
   onClick: function(i){alert(i)}
  }
- show = new SlideShow('slideshowContainer','slideshowThumbnail',showparms)
+ show = new slideShow('slideshowContainer','slideshowThumbnail',showparms)
 
  parsedurl = parseUrl(document.URL)
  // alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL)

diff --git a/include/multibox.js b/include/multibox.js
index fd2803bd4c607ec5951973e495af8f6c9b75d8ea..2b8a8c7fd4352a91cfd940112dbf2491b25c2de2 100644 (file)
--- a/include/multibox.js
+++ b/include/multibox.js
@@ -1,28 +1,30 @@
 \r
 /**************************************************************\r
 \r
-       Script          : MultiBox\r
-       Version         : 1.3.1\r
+       Script          : multiBox\r
+       Version         : 1.3.2\r
        Authors         : Samuel Birch\r
        Desc            : Supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe\r
        Licence         : Open Source MIT Licence\r
+       \r
+       TODO: 'create' function to open box from flash\r
 \r
 **************************************************************/\r
 \r
-var MultiBox = new Class({\r
+var multiBox = new Class({\r
        \r
        getOptions: function(){\r
                return {\r
                        initialWidth: 250,\r
                        initialHeight: 250,\r
-                       container: document.body,\r
-                       useOverlay: false,\r
+                       container: document.body, //this will need to be setup to the box open in relation to this.\r
+                       overlay: false, //this will be a reference to an overlay instance. - TODO: implement below.\r
                        contentColor: '#FFF',\r
                        showNumbers: true,\r
                        showControls: true,\r
                        //showThumbnails: false,\r
                        //autoPlay: false,\r
-                       waitDuration: 2000,\r
+                       //waitDuration: 2000,\r
                        descClassName: false,\r
                        descMinWidth: 400,\r
                        descMaxWidth: 600,\r
@@ -31,10 +33,10 @@ var MultiBox = new Class({
                        offset: {x:0, y:0},\r
                        fixedTop: false,\r
                        path: 'files/',\r
-                       onOpen: $empty,\r
-                       onClose: $empty,\r
-                       openFromLink: true,\r
-                       relativeToWindow: true\r
+                       _onOpen: $empty,\r
+                       _onClose: $empty,\r
+                       openFromLink: true\r
+                       //relativeToWindow: true\r
                };\r
        },\r
 \r
@@ -50,7 +52,11 @@ var MultiBox = new Class({
                this.containerDefaults = {};\r
                \r
                if(this.options.useOverlay){\r
-                       this.overlay = new Overlay({container: this.options.container, onClick:this.close.bind(this)});\r
+                       this.overlay = new overlay({container: this.options.container, onClick:this.close.bind(this)});\r
+               }\r
+               this.overlay = this.options.overlay;\r
+               if(this.overlay){\r
+                       this.overlay.setOnClick(this.close.bind(this));\r
                }\r
                \r
                this.content = $$('.'+className);\r
@@ -66,30 +72,28 @@ var MultiBox = new Class({
                        'id': 'multiBoxIframe',\r
                        'name': 'mulitBoxIframe',\r
                        'src': 'javascript:void(0);',\r
-                       'frameborder': 1,\r
+                       'frameborder': 0,\r
                        'scrolling': 'no'\r
                }).setStyles({\r
                        'position': 'absolute',\r
                        'top': -20,\r
                        'left': -20,\r
-                       'width': '115%',\r
-                       'height': '115%',\r
                        'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',\r
                        'opacity': 0\r
-               }).injectInside(this.container);\r
-               this.box = new Element('div').addClass('MultiBoxContent').injectInside(this.container);\r
+               }).inject(this.container);\r
+               this.box = new Element('div').addClass('MultiBoxContent').inject(this.container);\r
                \r
-               this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', this.close.bind(this));\r
+               this.closeButton = new Element('div').addClass('MultiBoxClose').inject(this.container).addEvent('click', this.close.bind(this));\r
                \r
-               this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').injectInside(this.container);\r
-               this.controls = new Element('div').addClass('MultiBoxControls').injectInside(this.controlsContainer);\r
+               this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').inject(this.container);\r
+               this.controls = new Element('div').addClass('MultiBoxControls').inject(this.controlsContainer);\r
                \r
-               this.previousButton = new Element('div').addClass('MultiBoxPrevious').injectInside(this.controls).addEvent('click', this.previous.bind(this));\r
-               this.nextButton = new Element('div').addClass('MultiBoxNext').injectInside(this.controls).addEvent('click', this.next.bind(this));\r
+               this.previousButton = new Element('div').addClass('MultiBoxPrevious').inject(this.controls).addEvent('click', this.previous.bind(this));\r
+               this.nextButton = new Element('div').addClass('MultiBoxNext').inject(this.controls).addEvent('click', this.next.bind(this));\r
                \r
-               this.title = new Element('div').addClass('MultiBoxTitle').injectInside(this.controls);\r
-               this.number = new Element('div').addClass('MultiBoxNumber').injectInside(this.controls);\r
-               this.description = new Element('div').addClass('MultiBoxDescription').injectInside(this.controls);\r
+               this.title = new Element('div').addClass('MultiBoxTitle').inject(this.controls);\r
+               this.number = new Element('div').addClass('MultiBoxNumber').inject(this.controls);\r
+               this.description = new Element('div').addClass('MultiBoxDescription').inject(this.controls);\r
                \r
                \r
                \r
@@ -105,7 +109,7 @@ var MultiBox = new Class({
                        this.number.setStyle('display', 'none');\r
                }\r
                \r
-               new Element('div').setStyle('clear', 'both').injectInside(this.controls);\r
+               new Element('div').setStyle('clear', 'both').inject(this.controls);\r
                \r
                this.content.each(function(el,i){\r
                        el.index = i;\r
@@ -119,8 +123,9 @@ var MultiBox = new Class({
                        }\r
                }, this);\r
                \r
-               this.containerEffects = new Fx.Morph(this.container, {duration: 400, transition: Fx.Transitions.sineInOut});\r
-               this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 300, transition: Fx.Transitions.sineInOut});\r
+               this.containerEffects = new Fx.Morph(this.container, {duration: 400, transition: Fx.Transitions.Sine.easeInOut});\r
+               this.iframeEffects = new Fx.Morph(this.iframe, {duration: 400, transition: Fx.Transitions.Sine.easeInOut});\r
+               this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 300, transition: Fx.Transitions.Sine.easeInOut});\r
                \r
                this.reset();\r
        },\r
@@ -142,6 +147,7 @@ var MultiBox = new Class({
                \r
                this.contentObj = {};\r
                this.contentObj.url = link.href;\r
+               this.contentObj.src = link.href;\r
                this.contentObj.xH = 0;\r
                \r
                if(contentOptions.width){\r
@@ -163,6 +169,7 @@ var MultiBox = new Class({
                \r
                switch(str){\r
                        case 'jpg':\r
+                       case 'image':\r
                        case 'gif':\r
                        case 'png':\r
                                this.type = 'image';\r
@@ -202,7 +209,7 @@ var MultiBox = new Class({
                                        this.contentObj.width = this.elementContent.getStyle('width');\r
                                }\r
                                \r
-                               this.contentObj.height = this.elementContent.getSize().size.y;\r
+                               this.contentObj.height = this.elementContent.getSize().y;\r
                                this.elementContent.setStyles({\r
                                        display: 'none',\r
                                        opacity: 1\r
@@ -268,36 +275,39 @@ var MultiBox = new Class({
                                };\r
                        }\r
                }else{\r
+                       var border = this.container.getStyle('border').toInt();\r
+                       \r
                        if(this.options.fixedTop){\r
                                var top = this.options.fixedTop;\r
                        }else{\r
-                               var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y;\r
+                               var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+this.options.offset.y;\r
                        }\r
                        this.openClosePos = {\r
                                width: this.options.initialWidth,\r
                                height: this.options.initialHeight,\r
                                top: top,\r
-                               left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x\r
+                               left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x\r
                        };\r
                }\r
                return this.openClosePos;\r
        },\r
        \r
        open: function(el){\r
-       \r
-               this.options.onOpen();\r
+               this.options._onOpen();\r
        \r
                this.index = this.content.indexOf(el);\r
                \r
                this.openId = el.getProperty('id');\r
                \r
+               var border = this.container.getStyle('border').toInt();\r
+               \r
                if(!this.opened){\r
                        this.opened = true;\r
                        \r
-                       if(this.options.useOverlay){\r
+                       if(this.options.overlay){\r
                                this.overlay.show();\r
                        }\r
-                       \r
+\r
                        this.container.setStyles(this.getOpenClosePos(el));\r
                        this.container.setStyles({\r
                                opacity: 0,\r
@@ -307,14 +317,15 @@ var MultiBox = new Class({
                        if(this.options.fixedTop){\r
                                var top = this.options.fixedTop;\r
                        }else{\r
-                               var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y;\r
+                               var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+this.options.offset.y;\r
                        }\r
                        \r
+                       \r
                        this.containerEffects.start({\r
                                width: this.options.initialWidth,\r
                                height: this.options.initialHeight,\r
                                top: top,\r
-                               left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x,\r
+                               left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x,\r
                                opacity: [0, 1]\r
                        });\r
                        \r
@@ -334,7 +345,7 @@ var MultiBox = new Class({
        \r
        getContent: function(index){\r
                this.setContentType(this.content[index]);\r
-               var desc = {};\r
+               var desc = false;\r
                if(this.options.descClassName){\r
                this.descriptions.each(function(el,i){\r
                        if(el.hasClass(this.openId)){\r
@@ -342,29 +353,31 @@ var MultiBox = new Class({
                        }\r
                },this);\r
                }\r
-               //var title = this.content[index].title;\r
                this.contentToLoad = {\r
                        title: this.content[index].title || ' ',\r
-                       //desc: $(this.options.descClassName+this.content[index].id).clone(),\r
                        desc: desc,\r
                        number: index+1\r
                };\r
        },\r
        \r
        close: function(){\r
-               if(this.options.useOverlay){\r
+               if(this.options.overlay){\r
                        this.overlay.hide();\r
                }\r
                if (this.options.showControls) {\r
                        this.hideControls();\r
                }\r
                this.hideContent();\r
-               this.containerEffects.stop();\r
+               this.containerEffects.cancel();\r
                this.zoomOut.bind(this).delay(500);\r
-               this.options.onClose();\r
+               this.options._onClose();\r
        },\r
        \r
        zoomOut: function(){\r
+               this.iframeEffects.start({\r
+                       width: this.openClosePos.width,\r
+                       height: this.openClosePos.height\r
+               });\r
                this.containerEffects.start({\r
                        width: this.openClosePos.width,\r
                        height: this.openClosePos.height,\r
@@ -382,41 +395,49 @@ var MultiBox = new Class({
                        var xH = this.contentObj.xH;\r
                        this.contentObj = new Asset.image(this.content[index].href, {onload: this.resize.bind(this)});\r
                        this.contentObj.xH = xH;\r
-                       /*this.contentObj = new Image();\r
-                       this.contentObj.onload = this.resize.bind(this);\r
-                       this.contentObj.src = this.content[index].href;*/\r
                }else{\r
                        this.resize();\r
                }\r
        },\r
        \r
        resize: function(){\r
-               if (this.options.fixedTop) {\r
-                       var top = this.options.fixedTop;\r
-               }\r
-               else {\r
-                       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
-               }\r
-               var left = ((window.getWidth() / 2) - (this.contentObj.width / 2) - this.container.getStyle('border').toInt()) + this.options.offset.x;\r
-               if (top < 0) {\r
-                       top = 0\r
-               }\r
-               if (left < 0) {\r
-                       left = 0\r
+               if(this.tempSRC != this.contentObj.src){\r
+                       \r
+                       var border = this.container.getStyle('border').toInt();\r
+                       \r
+                       if (this.options.fixedTop) {\r
+                               var top = this.options.fixedTop;\r
+                       }\r
+                       else {\r
+                               var top = ((window.getHeight() / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) - border + window.getScrollTop()) + this.options.offset.y;\r
+                       }\r
+                       var left = ((window.getWidth() / 2) - (this.contentObj.width.toInt() / 2) - border) + this.options.offset.x;\r
+                       if (top < 0) {\r
+                               top = 0\r
+                       }\r
+                       if (left < 0) {\r
+                               left = 0\r
+                       }\r
+                       \r
+                       this.containerEffects.cancel();\r
+                       this.containerEffects.start({\r
+                               width: this.contentObj.width,\r
+                               height: Number(this.contentObj.height) + this.contentObj.xH,\r
+                               top: top,\r
+                               left: left,\r
+                               opacity: 1\r
+                       });\r
+                       this.iframeEffects.start({\r
+                               width: Number(this.contentObj.width) + (border*2),\r
+                               height: Number(this.contentObj.height) + this.contentObj.xH + (border*2)\r
+                       });\r
+                       this.timer = this.showContent.bind(this).delay(500);\r
+                       this.tempSRC = this.contentObj.src;\r
                }\r
-               \r
-               this.containerEffects.stop();\r
-               this.containerEffects.start({\r
-                       width: this.contentObj.width,\r
-                       height: Number(this.contentObj.height) + this.contentObj.xH,\r
-                       top: top,\r
-                       left: left,\r
-                       opacity: 1\r
-               });\r
-               this.timer = this.showContent.bind(this).delay(500);\r
        },\r
        \r
        showContent: function(){\r
+               this.tempSRC = '';\r
                this.box.removeClass('MultiBoxLoading');\r
                this.removeContent();\r
                \r
@@ -439,12 +460,10 @@ var MultiBox = new Class({
                        this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);\r
                        \r
                }else if(this.type == 'ajax'){\r
-                       new Ajax(this.contentObj.url, {\r
-                               method: 'get',\r
-                               update: 'MultiBoxContentContainer',\r
-                               evalScripts: true,\r
+                       new Request.HTML({\r
+                               update: $('MultiBoxContentContainer'),\r
                                autoCancel: true\r
-                       }).request();\r
+                       }).get(this.contentObj.url);\r
                        \r
                }else{\r
                        var obj = this.createEmbedObject().injectInside(this.contentContainer);\r
@@ -458,15 +477,17 @@ var MultiBox = new Class({
                        opacity: 1\r
                });\r
                \r
-               this.title.setHTML(this.contentToLoad.title);\r
-               this.number.setHTML(this.contentToLoad.number+' of '+this.content.length);\r
+               this.title.set('html', this.contentToLoad.title);\r
+               this.number.set('html', this.contentToLoad.number+' of '+this.content.length);\r
                if (this.options.descClassName) {\r
                        if (this.description.getFirst()) {\r
-                               this.description.getFirst().remove();\r
+                               this.description.getFirst().destroy();\r
+                       }\r
+                       if(this.contentToLoad.desc){\r
+                               this.contentToLoad.desc.inject(this.description).setStyles({\r
+                                       display: 'block'\r
+                               });\r
                        }\r
-                       this.contentToLoad.desc.injectInside(this.description).setStyles({\r
-                               display: 'block'\r
-                       });\r
                }\r
                //this.removeContent.bind(this).delay(500);\r
                if (this.options.showControls) {\r
@@ -485,11 +506,11 @@ var MultiBox = new Class({
        removeContent: function(){\r
                if($('MultiBoxMediaObject')){\r
                        $('MultiBoxMediaObject').empty();\r
-                       $('MultiBoxMediaObject').remove();\r
+                       $('MultiBoxMediaObject').destroy();\r
                }\r
                if($('MultiBoxContentContainer')){\r
                        //$('MultiBoxContentContainer').empty();\r
-                       $('MultiBoxContentContainer').remove(); \r
+                       $('MultiBoxContentContainer').destroy();        \r
                }\r
        },\r
        \r
@@ -517,11 +538,22 @@ var MultiBox = new Class({
                        this.nextButton.removeClass('MultiBoxNextDisabled');\r
                }\r
                \r
+               var p = this.box.getCoordinates();\r
+               this.controlsContainer.setStyles({\r
+                       'top': p.height\r
+               });\r
+               \r
                this.controlEffects.start({'height': this.controls.getStyle('height')});\r
+               this.iframeEffects.start({'height': this.iframe.getStyle('height').toInt()+this.controls.getStyle('height').toInt()});\r
+               \r
+               if(this.options.overlay){\r
+                       this.options.overlay.position();\r
+               }\r
 \r
        },\r
        \r
        hideControls: function(num){\r
+               this.iframeEffects.start({'height': this.iframe.getStyle('height').toInt()-this.controls.getStyle('height').toInt()});\r
                this.controlEffects.start({'height': 0}).chain(function(){\r
                        this.container.setStyles(this.containerDefaults);\r
                }.bind(this));\r
@@ -669,8 +701,8 @@ var MultiBox = new Class({
        }\r
        \r
 });\r
-MultiBox.implement(new Options);\r
-MultiBox.implement(new Events);\r
+multiBox.implement(new Options);\r
+multiBox.implement(new Events);\r
 \r
 \r
 /*************************************************************/\r

diff --git a/include/overlay.js b/include/overlay.js
index e5d2f3fb3bfa979441131b64136ffef0390b4043..078b75a1e93a1d78f67c708a08c280ff8f04c2cf 100644 (file)
--- a/include/overlay.js
+++ b/include/overlay.js
@@ -1,7 +1,7 @@
 \r
 /**************************************************************\r
 \r
-       Script          : Overlay\r
+       Script          : overlay\r
        Version         : 1.2\r
        Authors         : Samuel birch\r
        Desc            : Covers the window with a semi-transparent layer.\r
@@ -9,7 +9,7 @@
 \r
 **************************************************************/\r
 \r
-var Overlay = new Class({\r
+var overlay = new Class({\r
        \r
        getOptions: function(){\r
                return {\r
@@ -17,7 +17,7 @@ var Overlay = new Class({
                        opacity: 0.7,\r
                        zIndex: 1,\r
                        container: document.body,\r
-                       onClick: Class.empty\r
+                       _onClick: $empty\r
                };\r
        },\r
 \r
@@ -38,7 +38,7 @@ var Overlay = new Class({
                        'id': 'OverlayIframe',\r
                        'name': 'OverlayIframe',\r
                        'src': 'javascript:void(0);',\r
-                       'frameborder': 1,\r
+                       'frameborder': 0,\r
                        'scrolling': 'no'\r
                }).setStyles({\r
                        'position': 'absolute',\r
@@ -61,16 +61,23 @@ var Overlay = new Class({
                        backgroundColor: this.options.colour\r
                }).injectInside(this.container);\r
                \r
-               this.container.addEvent('click', function(){\r
-                       this.options.onClick();\r
-               }.bind(this));\r
+               if(this.options._onClick){\r
+                       this.container.addEvent('click', function(){\r
+                               this.options._onClick.call(this)\r
+                       }.bind(this));\r
+               }\r
                \r
-               this.fade = new Fx.Tween(this.container).set('opacity', 0);\r
+               //this.fade = new Fx.Tween(this.container).set('opacity', 0);\r
+               this.container.fade('hide');\r
                this.position();\r
                \r
                window.addEvent('resize', this.position.bind(this));\r
        },\r
        \r
+       setOnClick: function(func){\r
+               this.container.addEvent('click', func);\r
+       },\r
+       \r
        position: function(){ \r
                if(this.options.container == document.body){ \r
                        var h = window.getScrollHeight()+'px'; \r
@@ -87,14 +94,16 @@ var Overlay = new Class({
        },\r
        \r
        show: function(){\r
-               this.fade.start(0,this.options.opacity);\r
+               //this.fade.start(0,this.options.opacity);\r
+               this.container.fade(this.options.opacity);\r
        },\r
        \r
        hide: function(){\r
-               this.fade.start(this.options.opacity,0);\r
+               //this.fade.start(this.options.opacity,0);\r
+               this.container.fade('out');\r
        }\r
        \r
 });\r
-Overlay.implement(new Options);\r
+overlay.implement(new Options);\r
 \r
 /*************************************************************/\r

diff --git a/include/slideshow.js b/include/slideshow.js
index cc312d9c1577815beedb58672a17c3a7e775a815..7f2e97385d2f670ec64fff8d5ee15bb66c3839e3 100644 (file)
--- a/include/slideshow.js
+++ b/include/slideshow.js
@@ -1,15 +1,15 @@
 \r
 /**************************************************************\r
 \r
-       Script          : SlideShow\r
+       Script          : slideShow\r
        Version         : 1.3\r
        Authors         : Samuel Birch\r
-       Desc            : \r
+       Desc            : transitions between images\r
        Licence         : Open Source MIT Licence\r
 \r
 **************************************************************/\r
 \r
-var SlideShow = new Class({\r
+var slideShow = new Class({\r
        \r
        getOptions: function(){\r
                return {\r
@@ -17,12 +17,12 @@ var SlideShow = new Class({
                        duration: 2000,\r
                        transition: Fx.Transitions.linear,\r
                        direction: 'right', //top|right|bottom|left|random\r
-                       color: false,\r
+                       //color: false,\r
                        wait: 5000,\r
-                       loop: false,\r
+                       loop: true,\r
                        thumbnails: false,\r
                        thumbnailCls: 'outline',\r
-                       backgroundSlider: false,\r
+                       backgroundSlider: false, //change to be an instance.\r
                        loadingCls: 'loading',\r
                        onClick: false\r
                };\r
@@ -156,7 +156,8 @@ var SlideShow = new Class({
                });\r
                var img = this.newImage.getElement('img');\r
                if(img){\r
-                       img.replaceWith(this.imageObj.clone());\r
+                       this.imageObj.clone().replaces(img);\r
+                       //img.replaces(this.imageObj.clone());\r
                }else{\r
                        var obj = this.imageObj.clone();\r
                        obj.injectInside(this.newImage);\r
@@ -216,6 +217,7 @@ var SlideShow = new Class({
                if(doNext){\r
                        this.cloneImage();\r
                        $clear(this.timer);\r
+                       /* console.log(this.image) */\r
                        if(this.image < this.images.length-1){\r
                                if(wait){\r
                                        this.wait();\r
@@ -249,7 +251,8 @@ var SlideShow = new Class({
        cloneImage: function(){\r
                var img = this.oldImage.getElement('img');\r
                if(img){\r
-                       img.replaceWith(this.imageObj.clone());\r
+                       this.imageObj.clone().replaces(img);\r
+                       //img.replaces(this.imageObj.clone());\r
                }else{\r
                        var obj = this.imageObj.clone();\r
                        obj.injectInside(this.oldImage);\r
@@ -268,7 +271,7 @@ var SlideShow = new Class({
        \r
        effect: function(){\r
                this.animating = true;\r
-               this.effectObj = this.newImage.effects({\r
+               this.effectObj = new Fx.Morph(this.newImage, {\r
                        duration: this.options.duration,\r
                        transition: this.options.transition\r
                });\r
@@ -355,10 +358,9 @@ var SlideShow = new Class({
        },\r
        \r
        wipe: function(){\r
-               this.oldImage.effects({\r
+               this.newImage.morph({\r
                        duration: this.options.duration,\r
-                       transition: this.options.transition\r
-               }).start({\r
+                       transition: this.options.transition,\r
                        top: [0,this.topOut],\r
                        left: [0, this.leftOut]\r
                })\r
@@ -390,8 +392,8 @@ var SlideShow = new Class({
        }\r
        \r
 });\r
-SlideShow.implement(new Options);\r
-SlideShow.implement(new Events);\r
+slideShow.implement(new Options);\r
+slideShow.implement(new Events);\r
 \r
 \r
 /*************************************************************/\r