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