X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Fgallery.js;h=25a2a5a285d876297cd6b36c6d3edf3bd4d8da99;hp=d0f9760a84fe87b460852c3325e4592c5fd5e4db;hb=af2f2275168124e103af685035fafdc0755d45be;hpb=481af6c9567c2f71575e7e3464103937d6025ce4

diff --git a/include/gallery.js b/include/gallery.js
index d0f9760..25a2a5a 100644
--- a/include/gallery.js
+++ b/include/gallery.js
@@ -1,8 +1,10 @@
 /*
+	$Id$
+
         This is a part of mkgallery.pl suite
         http://www.average.org/mkgallery/
 
-	Uses mootools (1.1) http://www.mootools.net/
+	Uses mootools (1.2) http://www.mootools.net/
 	Uses slideshow http://www.phatfusion.net/slideshow/
 */
 
@@ -14,19 +16,23 @@ var showWindow = new Class({
 
 	getOptions: function(){
 		return {
+			embed: [],
 			zIndex: 2,
 			container: document.body,
 			onClick: $empty,
-		};
+		}
 	},
 
-	initialize: function(div,options){
-		this.setOptions(this.getOptions(), options);
+	initialize: function(name,options){
+		this.setOptions(this.getOptions(), options)
 
-		this.options.container = $(this.options.container);
+		this.options.container = $(this.options.container)
 
-		this.div = $(div);
-		this.div.setStyles({
+		this.container = new Element('div').addClass(name).
+		setProperties({
+			id: name,
+			name: name,
+		}).setStyles({
 			position: 'absolute',
 			left: '0px',
 			top: '0px',
@@ -34,61 +40,124 @@ var showWindow = new Class({
 			zIndex: this.options.zIndex,
 			overflow: 'hidden',
 			display: 'none'
-		});
-		this.div.addEvent('click', function(){
-			this.options.onClick();
-		}.bind(this));
+		}).addEvent('click', function(){
+			this.options.onClick()
+		}.bind(this)).injectInside(this.options.container);
 
-		this.position();
+		this.embedded = []
+		this.options.embed.each(function(el){
+			var sub = new Element('div')
+			sub.addClass(el).setProperties({
+				id: el,
+				name: el,
+			}).injectInside(this.container)
+			this.embedded.push(sub)
+		},this)
 
-		window.addEvent('resize', this.position.bind(this));
-		window.addEvent('scroll', this.position.bind(this));
+		this.position()
+
+		window.addEvent('resize', this.position.bind(this))
+		window.addEvent('scroll', this.position.bind(this))
 	},
 
 	position: function(){
 		if(this.options.container == document.body){
-			var h = window.getHeight()+'px';
-			var s = window.getScrollTop()+'px';
-			this.div.setStyles({top: s, height: h});
+			this.h = window.getHeight()
+			this.s = window.getScrollTop()
 		}else{
-			var myCoords = this.options.container.getCoordinates();
-			this.div.setStyles({
-				top: myCoords.top+'px',
-				height: myCoords.height+'px',
-				left: myCoords.left+'px',
-				width: myCoords.width+'px'
-			});
+			var myCoords = this.options.container.getCoordinates()
+			this.h = myCoords.height
+			this.s = myCoords.top
 		}
+		this.container.setStyles({
+			top: this.s+'px',
+			height: this.h+'px'
+		})
 	},
 
 	show: function(){
-		this.div.setStyles({display: 'block'});
+		this.container.setStyle('display', 'block')
 	},
 
 	hide: function(){
-		this.div.setStyles({display: 'none'});
+		this.container.setStyle('display', 'none')
 	}
-});
-showWindow.implement(new Options);
+})
+showWindow.implement(new Options)
+
+var showControls = new Class({
+
+	getOptions: function(){
+		return {
+			next: $empty,
+			prev: $empty,
+			stop: $empty,
+			play: $empty,
+			exit: $empty,
+		}
+	},
+
+	initialize: function(name,options){
+		this.setOptions(this.getOptions(), options)
+
+		this.container = $(name)
+
+		var buttons = ['prev','stop','play','next','exit','comm']
+		buttons.each(function(el){
+			var sub = new Element('div')
+			if (this.options[el]) {
+				sub.addEvent('click', function() {
+					this.options[el]()
+				}.bind(this))
+			}
+			sub.addClass('controlButton').setProperties({
+				id: el,
+				name: el,
+			}).injectInside(this.container)
+		},this)
+	},
+
+})
+showControls.implement(new Options)
 
 /* Make overlay window and start slideshow */
-function run_slideshow(startid) {
- showwin.show();
- show.stop();
- if (startid < 0) {
-  show.play(0);
- } else {
-  show.play(startid);
-  show.stop();
+function showImage(id,doplay) {
+ var i=rimgs[id]
+ /* alert('show id='+id+' index='+i+' doplay='+doplay) */
+ showwin.show()
+ show.play(i)
+ if (!doplay) {
+  show.stop()
  }
- return false;
+ return false
 }
 
 /* Stop slideshow and return to index page */
-function stop_slideshow() {
- show.stop();
- showwin.hide();
- return false;
+function showStop() {
+ show.quit()
+ showwin.hide()
+ /*
+ var img = show.newImage.getElement('img');
+ if(img) {
+  alert('remove element: '+img.get('tag')+'.'+img.get('class')+
+   '#'+img.get('id')+' src='+img.get('src'))
+  img.dispose()
+ }
+
+ img = show.oldImage.getElement('img');
+ if(img) {
+  alert('remove element: '+img.get('tag')+'.'+img.get('class')+
+   '#'+img.get('id')+' src='+img.get('src'))
+  img.dispose()
+ }
+
+ show.imagesHolder.getElements('img').each(function(el){
+  alert('remove element: '+el.get('tag')+'.'+el.get('class')+'#'+el.get('id')+
+   ' src='+el.get('src'))
+  el.dispose()
+ })
+ */
+ return false
 }
 
 /* List of lists of img variations. Each image variation is a three-element  */
@@ -103,16 +172,32 @@ var vimgs=[]
  *  ...
  * ]
 */
+/* resolve string ID to index */
+var rimgs=[]
+
 /* Initialize everything, to be called on domready */
 function init_gallery() {
- $$('div.varimages').each(function(el){
-  var id=el.id
-  vimgs[id]=[]
-  el.getElements('a').each(function(ael,i){
+ $$('.conceal').each(function(el){
+  el.setStyle('display', 'none')
+ })
+ $$('a.infoBox').each(function(el){
+  var url=el.get('href')
+  el.set('href',url+'?conceal')
+ })
+ $$('a.showStart').each(function(el){
+  el.addEvent('click', showImage.bind(el,[el.get('id'),1]))
+ })
+ $$('a.showImage').each(function(el){
+  el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
+ })
+ $$('div.varimages').each(function(el,i){
+  rimgs[el.id] = i
+  vimgs[i] = []
+  el.getElements('a').each(function(ael,j){
    dim = /(\d+)[^\d](\d+)/.exec(ael.text)
    w = dim[1]
    h = dim[2]
-   vimgs[id][i]=[w,h,ael.href]
+   vimgs[i][j]=[w,h,ael.href,el.id,el.title]
   })
  })
    /* debugging output
@@ -126,31 +211,50 @@ function init_gallery() {
  alert(msg)
    /* end debugging output */
 
+ var ovlparams = {}
+ ovl = new overlay(ovlparams)
+
  var iboxparams = {
-  useOverlay: true,
+  overlay: ovl,
   showNumbers: false,
+  showControls: true,
   openFromLink: false,
-  descClassName: 'infoboxdesc',
+  movieWidth: 640,
+  movieHeight: 480,
+  descClassName: 'infoBoxDesc',
  }
- ibox = new multiBox('infobox', iboxparams)
+ ibox = new multiBox('infoBox', iboxparams)
 
- var winparms = {}
- showwin = new showWindow('slideshowWindow',winparms)
+ var winparms = {
+  /* onClick: showStop,  /* temporarily */
+  embed: ['slideshowControls'],
+ }
+ showwin = new showWindow('slideshowContainer',winparms)
 
  var showparms = {
   wait: 3000,
   effect: 'fade',
   duration: 1000,
-  loop: true, 
-  thumbnails: true,
-  onClick: function(i){alert(i)}
+  loop: false, 
+  thumbnails: false,
+  onClick: function(i){alert(i)},
+  comment: 'comm',
+ }
+ show = new slideShow('slideshowContainer',vimgs,showparms)
+
+ var ctlparams = {
+  next: function(){show.next()},
+  prev: function(){show.previous()},
+  stop: function(){show.stop()},
+  play: function(){show.play()},
+  exit: function(){showStop()},
  }
- show = new slideShow('slideshowContainer','slideshowThumbnail',showparms)
+ ctl = new showControls('slideshowControls',ctlparams)
 
  parsedurl = parseUrl(document.URL)
- // alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL)
+ /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */
  if ($chk(parsedurl['anchor'])){
-  run_slideshow(parsedurl['anchor'])
+  showImage(parsedurl['anchor'],0)
  }
 }