make links, nice style, etc.

[mkgallery.git] / include / gallery.js

diff --git a/include/gallery.js b/include/gallery.js
index 40707fe1eb8afc94062155745280c5ecdf8fb896..3dcc3c2201a7088a931e74bf40c3d9e8fa9c319d 100644 (file)
--- 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,30 +60,64 @@ 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 (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 showImage(id,doplay) {
  var i=rimgs[id]
@@ -85,7 +132,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,14 +189,13 @@ 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
+  vimgs[i] = []
   el.getElements('a').each(function(ael,j){
    dim = /(\d+)[^\d](\d+)/.exec(ael.text)
    w = dim[1]
    h = dim[2]
-   vimgs[i][j]=[w,h,ael.href]
+   vimgs[i][j]=[w,h,ael.href,el.id,el.title]
   })
  })
    /* debugging output
@@ -177,18 +223,31 @@ 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,
-  onClick: function(i){alert(i)}
+  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) */