X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Fgallery.js;h=445a826aa9f773beeb58cc418727f476547b92dc;hp=40707fe1eb8afc94062155745280c5ecdf8fb896;hb=ab432814a482877e9ec4fc066ac113120e5ef1cf;hpb=0605e5404527fedc6da3fafbf8c7da1536aadd2c

diff --git a/include/gallery.js b/include/gallery.js
index 40707fe..445a826 100644
--- a/include/gallery.js
+++ b/include/gallery.js
@@ -14,19 +14,23 @@ var showWindow = new Class({
 
 	getOptions: function(){
 		return {
+			embed: [],
 			zIndex: 2,
 			container: document.body,
 			onClick: $empty,
 		}
 	},
 
-	initialize: function(div,options){
+	initialize: function(name,options){
 		this.setOptions(this.getOptions(), options)
 
 		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,10 +38,19 @@ var showWindow = new Class({
 			zIndex: this.options.zIndex,
 			overflow: 'hidden',
 			display: 'none'
-		})
-		this.div.addEvent('click', function(){
+		}).addEvent('click', function(){
 			this.options.onClick()
-		}.bind(this))
+		}.bind(this)).injectInside(this.options.container);
+
+		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)
 
 		this.position()
 
@@ -47,33 +60,78 @@ var showWindow = new Class({
 
 	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'
-			})
+			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)
 
+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 (el == 'comm') {
+				this.comm = sub
+				sub.set('text', 'this is a comment field')
+			/*
+			} else {
+				sub.set('text', el)
+			*/
+			}
+			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)
+	},
+
+	settext: function(text) {
+		this.comm.set(text)
+	}
+})
+showControls.implement(new Options)
+
 /* Make overlay window and start slideshow */
 function showImage(id,doplay) {
- var i=rimgs[id]
+ var i=rimgs[id][0]
  /* alert('show id='+id+' index='+i+' doplay='+doplay) */
  showwin.show()
  show.play(i)
@@ -85,7 +143,7 @@ function showImage(id,doplay) {
 
 /* Stop slideshow and return to index page */
 function showStop() {
- show.stop()
+ show.quit()
  showwin.hide()
  /*
  var img = show.newImage.getElement('img');
@@ -142,9 +200,8 @@ function init_gallery() {
   el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
  })
  $$('div.varimages').each(function(el,i){
-  var id=el.id
-  rimgs[id]=i
-  vimgs[i]=[]
+  rimgs[el.id] = [i, el.title]
+  vimgs[i] = []
   el.getElements('a').each(function(ael,j){
    dim = /(\d+)[^\d](\d+)/.exec(ael.text)
    w = dim[1]
@@ -177,18 +234,30 @@ function init_gallery() {
  }
  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: false, 
-  thumbnails: true,
+  thumbnails: false,
   onClick: function(i){alert(i)}
  }
- show = new slideShow('slideshowContainer','slideshowThumbnail',showparms)
+ 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()},
+ }
+ ctl = new showControls('slideshowControls',ctlparams)
 
  parsedurl = parseUrl(document.URL)
  /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */