X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Fshow.js;h=b9ee1a08d8ef154c1ff26971db1acb92f7744968;hp=065898393fb3dcec995800df564f7961041726d9;hb=741d62b401cb7cf4b36f733c19af7b45ba51b1a8;hpb=84036a64eb5be457cfa21450ddc7da596eec8bbc

diff --git a/include/show.js b/include/show.js
index 0658983..b9ee1a0 100644
--- a/include/show.js
+++ b/include/show.js
@@ -43,6 +43,7 @@ var Show = new Class({
 			cbExit: function(){ alert('show exit undefined'); },
 			percentage: 98,
 			delay: 5000,
+			fxduration: 200,
 		}
 	},
 
@@ -59,20 +60,34 @@ var Show = new Class({
 			curr: {},
 			next: {},
 		};
+/*
+ *  thescripts.com/forum/thread170365.html
+ */
+		var hashpos = document.URL.search(/#/);
+		if (hashpos > 0) {
+			this.baseurl = document.URL.slice(0,hashpos);
+		} else {
+			this.baseurl = document.URL
+		}
+
 		this.updatecoords();
-		this.previd = -1;
-		this.ondisplay = new Element('img').
-			injectInside(this.container.container);
+		this.prevdisplay = new Element('img').
+			set('class', 'mainformat').
+			setProperty('alt', 'Current Image').
+			setStyle('opacity', 0).
+			injectInside(this.container.domelement());
+		this.ondisplay = this.prevdisplay.clone().
+			injectInside(this.container.domelement());
 		this.loadingdiv = new Element('div').
 		addClass('loading').setStyles({
 			position: 'absolute',
 			top: 0,
 			left: 0,
-			zIndex: 3,
+			zIndex: 4,
 			display: 'none',
 			width: this.coords.width,
 			height: this.coords.height,
-		}).injectInside(this.container.container);
+		}).injectInside(this.container.domelement());
 
 		window.addEvent('resize', this.resizer.bind(this))
 	},
@@ -89,17 +104,18 @@ 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 {
-			alert('show.prev called beyond first element');
+			/* alert('show.prev called beyond first element'); */
 		}
 	},
 
 	stop: function(){
-		if (this.isplaying) { $clear(this.timer); }
+		this.cleartimer()
 		this.isplaying = false;
-		$clear(this.timer);
 		this.controls.running(0);
 	},
 
@@ -109,17 +125,27 @@ var Show = new Class({
 		this.controls.running(1);
 	},
 
+	toggleplay: function(){
+		if (this.isplaying) { this.stop(); }
+		else { this.play(); }
+	},
+
 	next: function(){
+		this.cleartimer();
+		this.stopfx();
 		if (this.currentid < this.vimgs.length-1) {
 			this.show(this.currentid+1);
 		} else {
-			alert('show.next called beyond last element');
+			/* alert('show.next called beyond last element'); */
 		}
 	},
 
 	exit: function(){
-		if (this.isplaying) { $clear(this.timer); }
+		this.cleartimer();
 		this.stopfx();
+		this.prevdisplay.setStyle('display', 'none');
+		this.ondisplay.setStyle('display', 'none');
+		document.location.href = this.baseurl;
 		this.options.cbExit();
 	},
 
@@ -133,6 +159,7 @@ var Show = new Class({
 		this.options.cbStart();
 		this.isplaying = play;
 		this.controls.running(this.isplaying);
+		this.updatecoords();
 		this.show(id);
 		return false; /* to make it usable from href links */
 	},
@@ -141,7 +168,6 @@ var Show = new Class({
 
 	show: function(id){
 		/* alert('called show.show('+id+')'); */
-		this.previd = this.currentid;
 		this.currentid = id;
 		var newcache = {
 			prev: (id > 0)?this.prepare(id-1):{},
@@ -156,8 +182,9 @@ var Show = new Class({
 			this.pendingload = true;
 			this.showloading();
 		}
+		document.location.href = this.baseurl+'#'+this.vimgs[id][0];
 		this.controls.info(id,this.vimgs.length,
-				this.vimgs[id][0],
+				'#'+this.vimgs[id][0],
 				this.vimgs[id][1]);
 	},
 
@@ -218,8 +245,28 @@ var Show = new Class({
 		var newstyle = this.calcsize(cachel);
 		var newimg = cachel.img.clone();
 		newimg.setStyles(newstyle);
+		newimg.setStyles({
+			zIndex: 3,
+			opacity: 0,
+		});
+		this.prevdisplay.dispose();
+		this.prevdisplay = this.ondisplay.clone().
+		setStyle('zIndex', 2).injectInside(this.container.domelement());
 		newimg.replaces(this.ondisplay);
 		this.ondisplay = newimg;
+		this.effect();
+	},
+
+	effect: function(){
+		this.fx = new Fx.Tween(this.ondisplay, {
+			duration: this.options.fxduration,
+		});
+		this.fx.addEvent('complete',this.displaycomplete.bind(this));
+		this.fx.start('opacity', 0, 1);
+	},
+
+	displaycomplete: function(){
+		this.prevdisplay.setStyle('display', 'none');
 		if (this.isplaying) {
 			this.timer = this.autonext.delay(this.delay,this);
 		}
@@ -268,7 +315,12 @@ var Show = new Class({
 		this.loadingdiv.setStyle('display', 'none');
 	},
 
+	cleartimer: function(){
+		if (this.isplaying) { $clear(this.timer); }
+	},
+
 	stopfx: function(){
+		if (this.fx) this.fx.cancel();
 	},
 
 	updatecoords: function(){