take care of showing the "loading" animation, at the right place

[mkgallery.git] / include / show.js

diff --git a/include/show.js b/include/show.js
index 5016928d2c1cef6718a1298260954e8616a3e461..c333249931cf168e53d31d43dad839eef4b2603f 100644 (file)
--- a/include/show.js
+++ b/include/show.js
@@ -72,12 +72,10 @@ var Show = new Class({
 
                this.updatecoords();
                this.prevdisplay = new Element('img').
-                       set('class', 'mainformat').
-                       setProperty('alt', 'Current Image').
-                       setStyle('opacity', 0).
-                       injectInside(this.container.container);
-               this.ondisplay = this.prevdisplay.clone().
-                       injectInside(this.container.container);
+                       setStyle('opacity', 0);
+               this.container.grab(this.prevdisplay);
+               this.ondisplay = this.prevdisplay.clone();
+               this.container.grab(this.ondisplay);
                this.loadingdiv = new Element('div').
                addClass('loading').setStyles({
                        position: 'absolute',
@@ -87,7 +85,8 @@ var Show = new Class({
                        display: 'none',
                        width: this.coords.width,
                        height: this.coords.height,
-               }).injectInside(this.container.container);
+               });
+               this.container.grab(this.loadingdiv);
 
                window.addEvent('resize', this.resizer.bind(this))
        },
@@ -104,6 +103,8 @@ var Show = new Class({
        /* prev, play, stop, next, exit, comm are methods for button presses */
 
        prev: function(){
+               this.cleartimer();
+               this.stopfx();
                if (this.currentid > 0) {
                        this.show(this.currentid-1);
                } else {
@@ -112,9 +113,8 @@ var Show = new Class({
        },
 
        stop: function(){
-               if (this.isplaying) { $clear(this.timer); }
+               this.cleartimer()
                this.isplaying = false;
-               $clear(this.timer);
                this.controls.running(0);
        },
 
@@ -130,6 +130,8 @@ var Show = new Class({
        },
 
        next: function(){
+               this.cleartimer();
+               this.stopfx();
                if (this.currentid < this.vimgs.length-1) {
                        this.show(this.currentid+1);
                } else {
@@ -138,12 +140,12 @@ var Show = new Class({
        },
 
        exit: function(){
-               if (this.isplaying) { $clear(this.timer); }
+               this.cleartimer();
+               this.stopfx();
                this.prevdisplay.setStyle('display', 'none');
                this.ondisplay.setStyle('display', 'none');
-               this.stopfx();
-               this.options.cbExit();
                document.location.href = this.baseurl;
+               this.options.cbExit();
        },
 
        comm: function(){
@@ -239,18 +241,20 @@ var Show = new Class({
        },
 
        display: function(cachel){
-               var newstyle = this.calcsize(cachel);
-               var newimg = cachel.img.clone();
-               newimg.setStyles(newstyle);
-               newimg.setStyles({
+               var newimg = cachel.img.clone().
+               set('class', 'mainformat').
+               setProperty('alt', 'Current Image').
+               setStyles(this.calcsize(cachel)).
+               setStyles({
                        zIndex: 3,
                        opacity: 0,
                });
-               this.prevdisplay.dispose();
-               this.prevdisplay = this.ondisplay.clone().
-               setStyle('zIndex', 2).injectInside(this.container.container);
-               newimg.replaces(this.ondisplay);
+               this.ondisplay.replaces(this.prevdisplay).
+               setProperty('alt', 'Previous Image').
+               setStyle('zIndex', 2);
+               this.prevdisplay = this.ondisplay;
                this.ondisplay = newimg;
+               this.container.grab(this.ondisplay);
                this.effect();
        },
 
@@ -305,13 +309,21 @@ var Show = new Class({
        },
 
        showloading: function(){
-               this.loadingdiv.setStyle('display', 'block');
+               this.loadingdiv.setStyles({
+                       display: 'block',
+                       width: this.coords.width,
+                       height: this.coords.height,
+               });
        },
 
        hideloading: function(){
                this.loadingdiv.setStyle('display', 'none');
        },
 
+       cleartimer: function(){
+               if (this.isplaying) { $clear(this.timer); }
+       },
+
        stopfx: function(){
                if (this.fx) this.fx.cancel();
        },