switch to mulibox for info box
[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.1) 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                         zIndex: 2,
18                         container: document.body,
19                         onClick: Class.empty
20                 };
21         },
22
23         initialize: function(div,options){
24                 this.setOptions(this.getOptions(), options);
25
26                 this.options.container = $(this.options.container);
27
28                 this.div = $(div);
29                 this.div.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                 });
38                 this.div.addEvent('click', function(){
39                         this.options.onClick();
40                 }.bind(this));
41
42                 this.position();
43
44                 window.addEvent('resize', this.position.bind(this));
45                 window.addEvent('scroll', this.position.bind(this));
46         },
47
48         position: function(){
49                 if(this.options.container == document.body){
50                         var h = window.getHeight()+'px';
51                         var s = window.getScrollTop()+'px';
52                         this.div.setStyles({top: s, height: h});
53                 }else{
54                         var myCoords = this.options.container.getCoordinates();
55                         this.div.setStyles({
56                                 top: myCoords.top+'px',
57                                 height: myCoords.height+'px',
58                                 left: myCoords.left+'px',
59                                 width: myCoords.width+'px'
60                         });
61                 }
62         },
63
64         show: function(){
65                 this.div.setStyles({display: 'block'});
66         },
67
68         hide: function(){
69                 this.div.setStyles({display: 'none'});
70         }
71 });
72 ShowWindow.implement(new Options);
73
74 /* Make overlay window and start slideshow */
75 function run_slideshow(startid) {
76  showwin.show();
77  show.stop();
78  if (startid < 0) {
79   show.play(0);
80  } else {
81   show.play(startid);
82   show.stop();
83  }
84  return false;
85 }
86
87 /* Stop slideshow and return to index page */
88 function stop_slideshow() {
89  show.stop();
90  showwin.hide();
91  return false;
92 }
93
94 /* List of lists of img variations. Each image variation is a three-element  */
95 /* array: [width, height, url]. Index of the outer array is the global ID.   */
96 var vimgs=[]
97 /*
98  * [
99  *  [
100  *   [width, height, url]
101  *   ...
102  *  ]
103  *  ...
104  * ]
105 */
106 /* Initialize everything, to be called on domready */
107 function init_gallery() {
108  $$('div.varimages').each(function(el){
109   var id=el.id
110   vimgs[id]=[]
111   el.getElements('a').each(function(ael,i){
112    dim = /(\d+)[^\d](\d+)/.exec(ael.text)
113    w = dim[1]
114    h = dim[2]
115    vimgs[id][i]=[w,h,ael.href]
116   })
117  })
118    /* debugging output
119  var msg='loaded '+vimgs.length+' image descriptions:'
120  vimgs.each(function(vimg,i){
121   msg+='\nid='+i
122   vimg.each(function(vimg,i){
123    msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
124   })
125  })
126  alert(msg)
127    /* end debugging output */
128
129  var iboxparams = {
130   useOverlay: true,
131   showNumbers: false,
132   openFromLink: false
133  }
134  ibox = new MultiBox('infobox', iboxparams)
135
136  var winparms = {}
137  showwin = new ShowWindow('slideshowWindow',winparms)
138
139  var showparms = {
140   wait: 3000,
141   effect: 'fade',
142   duration: 1000,
143   loop: true, 
144   thumbnails: true,
145   onClick: function(i){alert(i)}
146  }
147  show = new SlideShow('slideshowContainer','slideshowThumbnail',showparms)
148
149  parsedurl = parseUrl(document.URL)
150  // alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL)
151  if ($chk(parsedurl['anchor'])){
152   run_slideshow(parsedurl['anchor'])
153  }
154 }
155
156 /* Initialization */
157 window.addEvent('domready',init_gallery)