more correct sizing; simplify doc structure
[mkgallery.git] / include / gallery.js
1 /*
2         This is a part of mkgallery.pl suite
3         http://www.average.org/mkgallery/
4
5         Uses mootools (1.2) http://www.mootools.net/
6         Uses slideshow http://www.phatfusion.net/slideshow/
7 */
8
9 /*
10         Slideshow
11 */
12
13 var showWindow = new Class({
14
15         getOptions: function(){
16                 return {
17                         embed: [],
18                         zIndex: 2,
19                         container: document.body,
20                         onClick: $empty,
21                 }
22         },
23
24         initialize: function(name,options){
25                 this.setOptions(this.getOptions(), options)
26
27                 this.options.container = $(this.options.container)
28
29                 this.container = new Element('div').addClass(name).
30                 setProperties({
31                         id: name,
32                         name: name,
33                 }).setStyles({
34                         position: 'absolute',
35                         left: '0px',
36                         top: '0px',
37                         width: '100%',
38                         zIndex: this.options.zIndex,
39                         overflow: 'hidden',
40                         display: 'none'
41                 }).addEvent('click', function(){
42                         this.options.onClick()
43                 }.bind(this)).injectInside(this.options.container);
44
45                 this.embedded = []
46                 this.options.embed.each(function(el){
47                         var sub = new Element('div')
48                         sub.addClass(el).setProperties({
49                                 id: el,
50                                 name: el,
51                         }).injectInside(this.container)
52                         this.embedded.push(sub)
53                 },this)
54
55                 this.position()
56
57                 window.addEvent('resize', this.position.bind(this))
58                 window.addEvent('scroll', this.position.bind(this))
59         },
60
61         position: function(){
62                 if(this.options.container == document.body){
63                         this.h = window.getHeight()
64                         this.s = window.getScrollTop()
65                 }else{
66                         var myCoords = this.options.container.getCoordinates()
67                         this.h = myCoords.height
68                         this.s = myCoords.top
69                 }
70                 this.container.setStyles({
71                         top: this.s+'px',
72                         height: this.h+'px'
73                 })
74         },
75
76         show: function(){
77                 this.container.setStyle('display', 'block')
78         },
79
80         hide: function(){
81                 this.container.setStyle('display', 'none')
82         }
83 })
84 showWindow.implement(new Options)
85
86 var showControls = new Class({
87
88         getOptions: function(){
89                 return {
90                         next: $empty,
91                         prev: $empty,
92                         stop: $empty,
93                         play: $empty,
94                         exit: $empty,
95                 }
96         },
97
98         initialize: function(name,options){
99                 this.setOptions(this.getOptions(), options)
100
101                 this.container = $(name)
102
103                 var buttons = ['prev','stop','play','next','exit','comm']
104                 buttons.each(function(el){
105                         var sub = new Element('div')
106                         if (el == 'comm') {
107                                 this.comm = sub
108                                 sub.set('text', 'this is a comment field')
109                         /*
110                         } else {
111                                 sub.set('text', el)
112                         */
113                         }
114                         if (this.options[el]) {
115                                 sub.addEvent('click', function() {
116                                         this.options[el]()
117                                 }.bind(this))
118                         }
119                         sub.addClass('controlButton').setProperties({
120                                 id: el,
121                                 name: el,
122                         }).injectInside(this.container)
123                 },this)
124         },
125
126         settext: function(text) {
127                 this.comm.set(text)
128         }
129 })
130 showControls.implement(new Options)
131
132 /* Make overlay window and start slideshow */
133 function showImage(id,doplay) {
134  var i=rimgs[id][0]
135  /* alert('show id='+id+' index='+i+' doplay='+doplay) */
136  showwin.show()
137  show.play(i)
138  if (!doplay) {
139   show.stop()
140  }
141  return false
142 }
143
144 /* Stop slideshow and return to index page */
145 function showStop() {
146  show.quit()
147  showwin.hide()
148  /*
149  var img = show.newImage.getElement('img');
150  if(img) {
151   alert('remove element: '+img.get('tag')+'.'+img.get('class')+
152    '#'+img.get('id')+' src='+img.get('src'))
153   img.dispose()
154  }
155
156  img = show.oldImage.getElement('img');
157  if(img) {
158   alert('remove element: '+img.get('tag')+'.'+img.get('class')+
159    '#'+img.get('id')+' src='+img.get('src'))
160   img.dispose()
161  }
162
163  show.imagesHolder.getElements('img').each(function(el){
164   alert('remove element: '+el.get('tag')+'.'+el.get('class')+'#'+el.get('id')+
165    ' src='+el.get('src'))
166   el.dispose()
167  })
168  */
169  return false
170 }
171
172 /* List of lists of img variations. Each image variation is a three-element  */
173 /* array: [width, height, url]. Index of the outer array is the global ID.   */
174 var vimgs=[]
175 /*
176  * [
177  *  [
178  *   [width, height, url]
179  *   ...
180  *  ]
181  *  ...
182  * ]
183 */
184 /* resolve string ID to index */
185 var rimgs=[]
186
187 /* Initialize everything, to be called on domready */
188 function init_gallery() {
189  $$('.conceal').each(function(el){
190   el.setStyle('display', 'none')
191  })
192  $$('a.infoBox').each(function(el){
193   var url=el.get('href')
194   el.set('href',url+'?conceal')
195  })
196  $$('a.showStart').each(function(el){
197   el.addEvent('click', showImage.bind(el,[el.get('id'),1]))
198  })
199  $$('a.showImage').each(function(el){
200   el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
201  })
202  $$('div.varimages').each(function(el,i){
203   rimgs[el.id] = [i, el.title]
204   vimgs[i] = []
205   el.getElements('a').each(function(ael,j){
206    dim = /(\d+)[^\d](\d+)/.exec(ael.text)
207    w = dim[1]
208    h = dim[2]
209    vimgs[i][j]=[w,h,ael.href]
210   })
211  })
212    /* debugging output
213  var msg='loaded '+vimgs.length+' image descriptions:'
214  vimgs.each(function(vimg,i){
215   msg+='\nid='+i
216   vimg.each(function(vimg,i){
217    msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
218   })
219  })
220  alert(msg)
221    /* end debugging output */
222
223  var ovlparams = {}
224  ovl = new overlay(ovlparams)
225
226  var iboxparams = {
227   overlay: ovl,
228   showNumbers: false,
229   showControls: true,
230   openFromLink: false,
231   movieWidth: 640,
232   movieHeight: 480,
233   descClassName: 'infoBoxDesc',
234  }
235  ibox = new multiBox('infoBox', iboxparams)
236
237  var winparms = {
238   /* onClick: showStop,  /* temporarily */
239   embed: ['slideshowControls'],
240  }
241  showwin = new showWindow('slideshowContainer',winparms)
242
243  var showparms = {
244   wait: 3000,
245   effect: 'fade',
246   duration: 1000,
247   loop: false, 
248   thumbnails: false,
249   onClick: function(i){alert(i)}
250  }
251  show = new slideShow('slideshowContainer',vimgs,showparms)
252
253  var ctlparams = {
254   next: function(){show.next()},
255   prev: function(){show.previous()},
256   stop: function(){show.stop()},
257   play: function(){show.play()},
258   exit: function(){showStop()},
259  }
260  ctl = new showControls('slideshowControls',ctlparams)
261
262  parsedurl = parseUrl(document.URL)
263  /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */
264  if ($chk(parsedurl['anchor'])){
265   showImage(parsedurl['anchor'],0)
266  }
267 }
268
269 /* Initialization */
270 window.addEvent('domready',init_gallery)