parse_uri() needs two parameters
[phpfspot.git] / phpfspot.js
1 /***************************************************************************
2  *
3  * phpfspot, presents your F-Spot photo collection in Web browsers.
4  *
5  * Copyright (c) by Andreas Unterkircher
6  *
7  *  This program is free software; you can redistribute it and/or modify
8  *  it under the terms of the GNU General Public License as published by
9  *  the Free Software Foundation; either version 2 of the License, or
10  *  any later version.
11  *
12  *  This program is distributed in the hope that it will be useful,
13  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
14  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
15  *  GNU General Public License for more details.
16  *
17  *  You should have received a copy of the GNU General Public License
18  *  along with this program; if not, write to the Free Software
19  *  Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
20  *
21  ***************************************************************************/
22
23 /**
24  * display image
25  *
26  * this function will be called by client and fetches
27  * the single-photo view via AJAX from the server.
28  * Furthermore it will scrollup the browser to the top
29  * position so the image become visibile immediatley.
30  */
31 function showImage(id, scrollup)
32 {
33    /* is phpfspot skeleton really displayed? */
34    if(!document.getElementById('content'))
35       return;
36
37    var content = document.getElementById('content');
38
39    /* blank the screen */
40    if(scrollup != undefined) {
41       content.innerHTML = "";
42    }
43
44    /* fetch single-photo view from server */
45    HTML_AJAX.replace(content, encodeURI('rpc.php?action=showphoto&id=' + id));
46
47    /* scroll the window up to the top */
48    if(scrollup != undefined) {
49       window.scrollTo(0,0);
50    }
51
52    /* delete some global vars */
53    delete(origHeight); origHeight = undefined;
54    delete(origWidth); origWidth = undefined;
55    delete(photo_details_pos); photo_details_pos = undefined;
56
57 } // showImage()
58
59 /**
60  * scroll browser to the last shown photo
61  *
62  * this function will be called when user returns from single-photo
63  * to the photo index. It will scroll down the window (if possible)
64  * to the position of the last shown photo.
65  */
66 function moveToThumb(thumb_id)
67 {
68    if(thumb_id == undefined)
69       return;
70
71    if(thumbimg = document.getElementById('thumbimg' + thumb_id)) {
72       window.scrollTo(0, findPos(thumbimg,'top')-100);
73    }
74
75 } // moveToThumb()
76
77 /**
78  * return position of object
79  *
80  * this function returns the position of an object.
81  * depending on the parameter 'direction' it will either
82  * return the X or Y position.
83  */
84 function findPos(obj, direction) {
85    var cur = 0;
86    if (obj.offsetParent) {
87       do {
88          if(direction == 'left')
89             cur += obj.offsetLeft;
90          if(direction == 'top')
91             cur += obj.offsetTop;
92       } while (obj = obj.offsetParent);
93    }
94    return [cur];
95
96 } // findPos()
97
98 /**
99  * opens the credits page
100  */
101 function showCredits()
102 {
103    var credits = document.getElementById("content");
104    credits.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=showcredits'));
105
106 } // showCredits()
107
108 /**
109  * tag-selection handling
110  *
111  * this function is getting called by client to either
112  * - add
113  ∗ - delete
114  * - modify tag-match condition
115  *
116  * It will then fetch the result from the server via AJAX
117  * and updates the tag-selection.
118  */
119 function Tags(mode, id)
120 {
121    var objTemp = new Object();
122
123    if(mode == "add") {
124       // add tag to users session
125       objTemp['action'] = 'addtag';
126       objTemp['id'] = id;
127    }
128    else if(mode == "del") {
129       // del tag from users session
130       objTemp['action'] = 'deltag';
131       objTemp['id'] = id;
132    }
133    else if(mode == "condition") {
134       setCheckedValue(id, id.value);
135       objTemp['action'] = 'tagcondition';
136       objTemp['mode'] = id.value;
137    }
138
139    var retr = HTML_AJAX.post('rpc.php', objTemp);
140    if(retr == "ok") {
141       refreshAvailableTags();
142       refreshSelectedTags();
143       refreshPhotoIndex();
144    }
145    else {
146       window.alert("Server message: "+ retr);
147    }
148
149 } // Tags()
150
151 /**
152  * update available-tags tag-cloud
153  *
154  * this function queries an actual version of the tag-cloud
155  * for the available (not-selected) tags from the server via
156  * AJAX.
157  */
158 function refreshAvailableTags()
159 {
160    // update available tags
161    var avail_tags = document.getElementById('available_tags');
162    avail_tags.innerHTML = "Loading...";
163    avail_tags.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=show_available_tags'));
164
165 } // refreshAvailableTags()
166
167 /**
168  * update selected-tags list
169  *
170  * this function queries an actual version of the tag-list
171  * for the selected tags from the server via AJAX.
172  */
173 function refreshSelectedTags()
174 {
175    // update selected tags
176    var selected_tags = document.getElementById("selected_tags");
177    selected_tags.innerHTML = "Loading...";
178    selected_tags.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=show_selected_tags'));
179
180 } // refreshSelectedTags()
181
182 /**
183  * show photo index
184  *
185  * this function will fetch the photo-index view from
186  * the server via AJAX. It's also used to browse through
187  * the photo-index pages
188  */
189 function showPhotoIndex(begin_with, last_photo)
190 {
191    var url = "rpc.php?action=show_photo_index";
192    if(begin_with != undefined)
193       url = url + '&begin_with=' + begin_with;
194    if(last_photo != undefined)
195       url = url + '&last_photo=' + last_photo;
196
197    HTML_AJAX.replace(document.getElementById("content"), encodeURI(url));
198
199 } // showPhotoIndex()
200
201 /**
202  * update photo index
203  *
204  * this function will be called, to request a refresh of the
205  * photo index. this, for example, can be caused, when changing
206  * the tag-selection.
207  */
208 function refreshPhotoIndex()
209 {
210    /* only invoke showPhotoIndex(), if photo-index is really shown */
211    if(document.getElementById("index") != undefined || startup == 1) {
212       showPhotoIndex();
213       startup = 0;
214    }
215
216 } // refreshPhotoIndex()
217
218 /**
219  * blur cursor focus
220  *
221  * this function removes the focus-rectangle which may appear
222  * when click on a link. Not always beautiful.
223  */
224 function click(object)
225 {
226    if(object.blur)
227       object.blur();
228
229 } // click()
230
231 /**
232  * change current radio-button setting
233  *
234  * This function will check the radio-button with the given value.
235  * If no radio-button is currently displayed, this function will do
236  * nothing.
237  * If the given value does not exist, the existing radio buttons will
238  * be reseted.
239  */
240 function setCheckedValue(condition, value) {
241
242    var count = condition.length;
243    if(count == undefined) {
244       condition.checked = (condition.value == value.toString());
245       return;
246    }
247    for(var i = 0; i < count; i++) {
248       condition[i].checked = false;
249       if(condition[i].value == value.toString()) {
250          condition[i].checked = true;
251       }
252    }
253
254 } // setCheckedValue()
255
256 /**
257  * Invoke a search
258  *
259  * This function will be invoked by starting
260  * any kind of search (tag-name, photo-name, date, ...).
261  */
262 function startSearch()
263 {
264    from_year = document.getElementById('fromyear').value;
265    from_month = document.getElementById('frommonth').value;
266    from_day = document.getElementById('fromday').value;
267    from = from_year +"-"+ from_month +"-"+ from_day;
268    to_year = document.getElementById('toyear').value;
269    to_month = document.getElementById('tomonth').value;
270    to_day = document.getElementById('today').value;
271    to = to_year +"-"+ to_month +"-"+ to_day;
272
273    var objTemp = new Object();
274    objTemp['action'] = 'search';
275
276    if(document.getElementsByName('searchfor_tag')[0].value != "") {
277       objTemp['for_tag'] = document.getElementsByName('searchfor_tag')[0].value;
278    }
279    if(document.getElementsByName('searchfor_name')[0].value != "") {
280       objTemp['for_name'] = document.getElementsByName('searchfor_name')[0].value;
281    }
282    if(document.getElementsByName('consider_date')[0].checked == true) {
283       objTemp['from'] = from;
284       objTemp['to'] = to;
285    }
286
287    var retr = HTML_AJAX.post('rpc.php', objTemp);
288    if(retr == "ok") {
289       refreshAvailableTags();
290       refreshSelectedTags();
291       showPhotoIndex();
292    }
293    else {
294       window.alert("Server message: "+ retr);
295    }
296
297 } // startSearch()
298
299 /**
300  * enable/disable date search
301  *
302  * this function will either enable or disable the
303  * input fields for the date-search
304  */
305 function datesearch()
306 {
307    var mode = true;
308
309    if(document.getElementsByName('consider_date')[0].checked == true) {
310       mode = false;
311    }
312       
313    document.getElementById('fromyear').disabled = mode;
314    document.getElementById('frommonth').disabled = mode;
315    document.getElementById('fromday').disabled = mode;
316    document.getElementById('toyear').disabled = mode;
317    document.getElementById('tomonth').disabled = mode;
318    document.getElementById('today').disabled = mode;
319  
320 } // datesearch()
321
322 /**
323  * set view mode
324  *
325  * called for photo-index export. will return the
326  * selected mode via AJAX from the server.
327  */
328 function setViewMode(mode)
329 {
330    var exprt = document.getElementById('output');
331    exprt.innerHTML = "Loading...";
332    exprt.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=get_export&mode=' + mode));
333
334 } // setViewMode()
335
336 /**
337  * reset all search-fields
338  */
339 function clearSearch()
340 {
341    document.getElementsByName('searchfor_tag')[0].value = '';
342    document.getElementsByName('searchfor_name')[0].value = '';
343
344    if(document.getElementsByName('consider_date')[0].checked == true) {
345       document.getElementsByName('consider_date')[0].checked = false;
346       datesearch();
347    }  
348
349 } // clearSearch()
350
351 /**
352  * if the client is planless, ask the server what to do
353  * next.
354  */
355 function AskServerWhatToDo()
356 {
357    return HTML_AJAX.grab(encodeURI('rpc.php?action=what_to_do'));
358 } // AskServerWhatToDo()
359
360 /**
361  * init phpfspot
362  *
363  * this function will be called when the browser opens phpfspot
364  * the first time. It will fetch the tag-lists and will then
365  * switch to the right view, which the browser got told from
366  * the server (maybe someone hit the refresh button...).
367  */
368 function init_phpfspot(mode)
369 {
370    /* always load list of available tags */
371    refreshAvailableTags();
372
373    /* ask the server what we are currently displaying */
374    whattodo = AskServerWhatToDo();
375
376    if(whattodo == 'showpi' || whattodo == 'showpi_date') {
377       showPhotoIndex();
378    }
379    if(whattodo == 'showpi_tags') {
380       refreshSelectedTags();
381       showPhotoIndex();
382    }
383    if(whattodo == 'show_photo') {
384       if(photo = getPhotoToShow()) {
385          showImage(photo);
386          refreshSelectedTags();
387       }
388    }
389
390 } // init_phpfspot()
391
392 /**
393  * change background-color on mouse-over
394  */
395 function setBackGrdColor(item, color)
396 {
397    if(color == 'mouseover')
398       item.style.backgroundColor='#c6e9ff';
399    if(color == 'mouseout')
400       item.style.backgroundColor='#eeeeee';
401    if(color == 'mouseclick')
402       item.style.backgroundColor='#93A8CA';
403
404 } // setBackGrdColor()
405
406 /**
407  * ask server, which photo needs to be shown
408  *
409  * when user press the refresh-button in a single-photo
410  * view or maybe enters the link via an external URL, the
411  * client does not know, what photo will be shown (dimensions...).
412  * But the server can tell this the browser.
413  */
414 function getPhotoToShow()
415 {
416    var photo_to_show = HTML_AJAX.grab(encodeURI('rpc.php?action=get_photo_to_show'));
417
418    // if no image needs to be shown, return false from here
419    if(photo_to_show == "")
420       return false;
421    
422    return photo_to_show;
423
424 } // getPhotoToShow()
425
426 /**
427  * a fake-zoom for photo
428  *
429  * a quick to let the browser do some zooming on
430  * photos.
431  */
432 function zoom(mod)
433 {
434    var photo;
435
436    if(mod == undefined)
437       return;
438
439    /* internet explorer */
440    if(document.images['photo'].width)
441       photo = document.images['photo'];
442
443    /* all others */
444    if(photo == undefined && document.getElementById('photo').width)
445       photo = document.getElementById('photo');
446
447    if(photo != undefined) {
448
449       if(origWidth == undefined)
450          origWidth = photo.width;
451       if(origHeight == undefined)
452          origHeight = photo.height;
453
454       if(mod != 0) {
455          new_w = photo.width * (1 + mod/100);
456          new_h = photo.height * (1 + mod/100);
457          photo.width = new_w;
458          photo.height = new_h;
459
460          if(photo_details_pos == undefined) {
461             photo_details_pos = findPos(document.getElementById('photo_details'),'left');
462          }
463
464          if((photo.offsetLeft + new_w) >= photo_details_pos-20) {
465             hidePhotoDetails('true');
466          }
467          else {
468             hidePhotoDetails('false');
469          }
470       }
471       else {
472          photo.width = origWidth;
473          photo.height = origHeight;
474          hidePhotoDetails('false');
475       }
476    }
477
478 } // zoom()
479
480 /**
481  * hides the photo details layin
482  *
483  * if the photo is getting zoomed quiet large, this will
484  * auto-hide (and also restore) the photo-details-box.
485  */
486 function hidePhotoDetails(mode)
487 {
488    var photo_details;
489
490    if(photo_details = document.getElementById('photo_details')) {
491       if(mode == 'true') {
492          photo_details.style.visibility = 'hidden';
493          photo_details.style.display = 'none';
494       }
495       else {
496          photo_details.style.visibility = 'visible';
497          photo_details.style.display = '';
498       }
499    }
500 } // hidePhotoDetails()
501
502 /**
503  * show calendar
504  */
505 function showCalendar(date_box, click_obj)
506 {
507    var calendar = document.getElementById('calendar');
508    var year = document.getElementById(date_box+'year').value;
509    var month = document.getElementById(date_box+'month').value;
510    if(date_box == 'from') {
511       var xpos = document.getElementById('frompic').offsetLeft;
512       var ypos = document.getElementById('frompic').offsetTop;
513       calendar_mode = 'from';
514    }
515    if(date_box == 'to') {
516       var xpos = document.getElementById('topic').offsetLeft;
517       var ypos = document.getElementById('topic').offsetTop;
518       calendar_mode = 'to';
519    }
520    calendar.style.left = xpos + 100 + 'px';
521    calendar.style.top = ypos + 80 + 'px';
522
523    if(calendar.style.visibility == "" || calendar.style.visibility == 'hidden') {
524       calendar.style.visibility = 'visible';
525       calendar.innerHTML = "Loading...";
526       calendar.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=get_calendar_matrix&year=' + year + '&month=' + month));
527       calendar_shown = 1;
528    }
529    else {
530       hideCalendar();
531    }
532
533 } // showCalendar()
534
535 /**
536  * hide calendar
537  */
538 function hideCalendar()
539 {
540    var calendar = document.getElementById('calendar');
541    if(calendar.style.visibility != 'hidden') {
542       calendar.style.visibility = 'hidden';
543       calendar_shown = 0;
544    }
545 } // hideCalendar()
546
547 /**
548  * switch month in calendar
549  */
550 function setMonth(year, month, day)
551 {
552    var calendar = document.getElementById('calendar');
553    calendar.innerHTML = "Loading...";
554    calendar.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=get_calendar_matrix&year='+ year +'&month='+ month +'&day='+ day));
555 }
556
557 /**
558  * get the user-selected date from the calendar and
559  * put it into the date-search boxes
560  */
561 function setCalendarDate(year, month, day)
562 {
563    document.getElementById(calendar_mode+'year').value = year;
564    document.getElementById(calendar_mode+'month').value = month;
565    document.getElementById(calendar_mode+'day').value = day;
566    hideCalendar();
567
568 } // setCalendarDate()
569
570 /**
571  * reset phpfspot complelely and move to the begining
572  */
573 function resetAll()
574 {
575    HTML_AJAX.grab(encodeURI('rpc.php?action=reset'));
576    clearSearch();
577    refreshAvailableTags();
578    refreshSelectedTags();
579    refreshPhotoIndex();
580
581 } // resetAll()
582
583 /**
584  * find objects with their class-name
585  */
586 function WSR_getElementsByClassName(oElm, strTagName, oClassNames){
587    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
588    var arrReturnElements = new Array();
589    var arrRegExpClassNames = new Array();
590    if(typeof oClassNames == "object"){
591       for(var i=0; i<oClassNames.length; i++){
592          arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames[i].replace(/-/g, "\-") + "(\s|$)"));
593       }
594    }
595    else{
596       arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames.replace(/-/g, "\-") + "(\s|$)"));
597    }
598    var oElement;
599    var bMatchesAll;
600    for(var j=0; j<arrElements.length; j++){
601       oElement = arrElements[j];
602       bMatchesAll = true;
603       for(var k=0; k<arrRegExpClassNames.length; k++){
604          if(!arrRegExpClassNames[k].test(oElement.className)){
605             bMatchesAll = false;
606             break;
607          }
608       }
609       if(bMatchesAll){
610          arrReturnElements.push(oElement);
611       }
612    }
613    return (arrReturnElements)
614
615 } // WSR_getElementsByClassName()
616
617 /**
618  * javascript based photo preloading
619  */
620 function preloadPhotos(image_url) {
621
622    var i;
623    var timeout = 1000;
624    var waiting = 100;
625    var counting;
626
627    lbImg=WSR_getElementsByClassName(document,"img","thumb");
628    for(i=0;i<lbImg.length;i++){
629       lbImg[i].src=image_url[i];
630       // to not bomb the server with requests, give the page some time
631       // to load the images one by one. if a image exceeds the timeout,
632       // the next image will be loaded.
633       if(lbImg[i].complete != undefined && lbImg[i].complete != true) {
634          counting = 0;
635          while(lbImg[i].complete != true && counting < timeout) {
636             window.setTimeout("noop()", waiting);
637             counting+=waiting;
638          }
639       }
640    }
641
642 } // preloadPhotos()
643
644 /* a function that does nothing */
645 function noop() {}
646
647 /**
648  * start slideshow
649  */
650 function startSlideShow()
651 {
652    if(!sliding) {
653       HTML_AJAX.grab(encodeURI('rpc.php?action=reset_slideshow'));
654       nextSlide();
655       sliding = setInterval("nextSlide()", sliding_time*1000);
656       document.getElementById('stop_ico').src = "resources/32_stop.png";
657    }
658    else {
659       clearInterval(sliding);
660       sliding = 0;
661       document.getElementById('stop_ico').src = "resources/32_play.png";
662    }
663
664 } // startSlideShow()
665
666 /**
667  * switch to next slide
668  */
669 function nextSlide()
670 {
671    var next_img = HTML_AJAX.grab(encodeURI('rpc.php?action=get_next_slideshow_img'));
672    document.getElementById('slide_img').src = next_img;
673
674 } // nextSlide()
675
676 /**
677  * switch to previous slide
678  */
679 function prevSlide()
680 {
681    var prev_img = HTML_AJAX.grab(encodeURI('rpc.php?action=get_prev_slideshow_img'));
682    document.getElementById('slide_img').src = prev_img;
683
684 } // prevSlide()
685
686 /**
687  * interrupt slide show
688  */
689 function pauseSlideShow()
690 {
691    if(!sliding_paused) {
692       sliding_paused = 1;
693       clearInterval(sliding);
694       document.getElementById('pause_ico').src = "resources/32_play.png";
695    }
696    else {
697       sliding_paused = 0;
698       sliding = setInterval("nextSlide()", sliding_time*1000);
699       document.getElementById('pause_ico').src = "resources/32_pause.png";
700    }
701
702 } // pauseSlideShow()
703
704 /**
705  * start auto-browse
706  */
707 function startAutoBrowse()
708 {
709    if(!autobrowse) {
710       autoBrowse();
711       autobrowse = setInterval("autoBrowse()", 5000);
712    }
713    else {
714       clearInterval(autobrowse);
715       autobrowse = 0;
716       document.getElementById('autobrowse_ico').src = "resources/32_play.png";
717    }
718
719 } // startAutoBrowser()
720
721 /**
722  * auto-browsing
723  */
724 function autoBrowse()
725 {
726    if(document.getElementById('next_link')) {
727       var next_link = document.getElementById('next_link').href;
728       window.location.href = next_link;
729       document.getElementById('autobrowse_ico').src = "resources/32_pause.png";
730    }
731    /* we have reached the last photo */
732    else {
733       if(ab_ico = document.getElementById('autobrowse_ico'))
734          ab_ico.src = "resources/32_play.png";
735       clearInterval(autobrowse);
736    }
737
738 } // autoBrowse()
739
740 /**
741  * initiate slider to modify slide-switching-speed
742  */
743 function initSlider()
744 {
745    var sliderEl = document.getElementById ? document.getElementById("slider-1") : null;
746    var inputEl = document.forms[0]["slider-input-1"];
747    var s = new Slider(sliderEl, inputEl);
748    s.setMinimum(1);
749    s.setMaximum(10);
750    s.setValue(sliding_time);
751    document.getElementById("current_slide_time").innerHTML = sliding_time + "s Interval";
752    s.onchange = function () {
753       sliding_time = s.getValue();
754       document.getElementById("current_slide_time").innerHTML = sliding_time + "s Interval";
755       if(!sliding_paused && sliding) {
756          clearInterval(sliding);
757          sliding = setInterval("nextSlide()", sliding_time*1000);
758       }
759    };
760    window.onresize = function () {
761       s.recalculate();
762    };
763
764 } // initSlider()
765
766 /**
767  * if the sort-order (photo-name, date, ...) has been
768  * changed, update the photo-index view.
769  */
770 function update_sort_order(obj)
771 {  
772    var objTemp = new Object();
773    objTemp['value'] = obj.options[obj.selectedIndex].value;
774
775    var retr = HTML_AJAX.post('rpc.php?action=update_sort_order', objTemp);
776
777    if(retr == "ok") {
778       showPhotoIndex();
779    }
780    else {
781       window.alert("Server message: "+ retr);
782    }
783
784 } // update_sort_order()
785
786 /**
787  * handle key events
788  */
789 function keyDown(e) {
790    var evt = (e) ? e:(window.event) ? window.event:null;
791
792    if(evt) {
793       var key = (evt.charCode) ? evt.charCode :
794          ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
795
796
797       if(key == 37) /* left curosr */ {
798          if(document.getElementById('prev_link')) {
799             var prev_link = document.getElementById('prev_link').href;
800             window.location.href = prev_link;
801          }
802          return;
803       }
804       if(key == 38) /* up cursor */ {
805       }
806       if(key == 39) /* right curosr */ {
807          if(document.getElementById('next_link')) {
808             var next_link = document.getElementById('next_link').href;
809             window.location.href = next_link;
810          }
811          return;
812       }
813       if(key == 73 && evt.altKey && evt.ctrlKey) /* ctrl+alt+i */ {
814          showPhotoIndex();
815          return;
816       }
817       if(key == 82 && evt.altKey && evt.ctrlKey) /* ctrl+alt+r */ {
818          resetAll();
819          return;
820       }
821    }
822 }
823
824 document.onkeydown=keyDown;
825 if(document.layers) {
826    document.captureEvents(Event.KEYDOWN);
827 }
828
829 // will be reseted by first viewing photo-index
830 var startup = 1;
831 // calendar specific
832 var calendar_shown = 0;
833 var calendar_mode = '';
834 // auto-browsing & sliding
835 var autobrowse = 0;
836 var sliding = 0;
837 var sliding_paused = 0;
838 var sliding_time = 3;
839 // zooming
840 var origHeight;
841 var origWidth;
842 // position of the last shown photo in photo-index
843 var photo_details_pos;