git.zarb.org Git - booh/blob - www/themes/gradient/booh.js

   1 var images_ary = new Array();
   2 var images_loaded = new Array();
   3 var current = 0;
   4 var slideshow = 0;
   5 var slideshow_pause = null;
   6 var slideshow_timer = null;
   7
   8 for (i = 0; i < images.length; i++) {
   9     /* this array will contain 0 if image not yet loaded, 1 when loading,
  10      * 2 when complete */
  11     images_loaded[i] = 0;
  12 }
  13
  14 function dbg(t) {
  15     document.getElementById('dbg_text').innerHTML += t + "<br/>";
  16 }
  17
  18 /* load image, return 1 if image is finished loading */
  19 function load(i) {
  20     if (images_loaded[i] == 0) {
  21         images_ary[i] = new Image();
  22         images_ary[i].src = images[i];
  23         images_loaded[i] = 1;
  24     }
  25     if (images_loaded[i] == 1) {
  26         if (images_ary[i].complete) {
  27             images_loaded[i] = 2;
  28         } else {
  29             return 0;
  30         }
  31     }
  32     return 1;
  33 }
  34
  35 function getparam(key) {
  36     all_params = location.href.split("#");
  37     if (all_params.length > 1) {
  38         params = all_params[1].split("&");
  39         for (i = 0; i < params.length; i++) {
  40             keyvalue = params[i].split("=");
  41             if (keyvalue[0] == key) {
  42                 return keyvalue[1];
  43             }
  44         }
  45     }
  46     return null;
  47 }
  48
  49 function loadcurrent(img) {
  50     for (i = 0; i < images.length; i++) {
  51         if (images[i] == img) {
  52             current = i;
  53             display_current();
  54             return;
  55         }
  56     }
  57     current = 0;
  58     display_current();
  59 }
  60
  61 function browser_href() {
  62     all = location.href.split("/");
  63     return all[all.length - 1];
  64 }
  65
  66 /* check URL for changes; allows the URL to reflect currently showed image */
  67 var currentURL = '';
  68 function checkURL() {
  69     if (currentURL == 'ignore1') {
  70         // do nothing
  71     } else if (currentURL == 'ignore2') {
  72         currentURL = browser_href();
  73     } else {
  74         href = browser_href();
  75         if (href != currentURL) {
  76             currentURL = href;
  77             img = getparam('current');
  78             loadcurrent(img);
  79         }
  80     }
  81     setTimeout("checkURL()", 50);
  82 }
  83
  84 function preload() {
  85
  86     /* favor current image, if user clicked on `last' or something */
  87     load(current);
  88
  89     /* don't blindly preload all images at the beginning,
  90      * but rather load them one by one, in order to get
  91      * next ones faster, beginning with next to current
  92      */
  93     if (current + 1 < images.length && load(current + 1) == 0) {
  94         setTimeout("preload()", 50);
  95         return;
  96     }
  97     if (current - 1 >= 0 && load(current - 1) == 0) {
  98         setTimeout("preload()", 50);
  99         return;
 100     }
 101
 102     for (i = current + 2; i < images.length && i <= current + 5; i++) {
 103         if (load(i) == 0) {
 104             setTimeout("preload()", 50);
 105             return;
 106         }
 107     }
 108     for (i = current - 2; i >= current - 3; i--) {
 109         if (i >= 0) {
 110             if (load(i) == 0) {
 111                 setTimeout("preload()", 50);
 112                 return;
 113             }
 114         }
 115     }
 116
 117     setTimeout("preload()", 50);
 118 }
 119
 120 function add_cookie(val) {
 121     var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
 122     document.cookie = val
 123                       + '; expires=' + expires.toGMTString()
 124                       + '; path=/';
 125 }
 126
 127 function get_cookie(key) {
 128     if (document.cookie) {
 129         var index = document.cookie.indexOf(key);
 130         if (index != -1) {
 131             var oleft = (document.cookie.indexOf('=', index) + 1);
 132             var oright = document.cookie.indexOf(';', index);
 133             if (oright == -1) {
 134                 oright = document.cookie.length;
 135             }
 136             return document.cookie.substring(oleft, oright);
 137         }
 138     }
 139     return null;
 140 }
 141
 142 function init() {
 143
 144     preferred_pause = get_cookie('booh-slideshow-pause-' + dbltilda_theme);
 145     if (preferred_pause != null) {
 146         document.getElementById('secs').value = preferred_pause;
 147     }
 148
 149     if (getparam('run_slideshow')) {
 150         toggle_slideshow();
 151     }
 152
 153     checkURL();
 154
 155     preload();
 156
 157     if (images.length == 1) {
 158         document.getElementById("b_slideshow").disabled = true;
 159         document.getElementById("b_slideshow").setAttribute("class", "disabled");
 160     }
 161
 162     if (navigator.userAgent.indexOf('Opera') == -1) {
 163         document.onkeydown = keyDownEvent;
 164     }
 165 }
 166
 167 function change_basename(input, newend) {
 168     position = input.lastIndexOf('/');
 169     if (position == -1) {
 170         return newend;
 171     } else {
 172         return input.substring(0, position + 1).concat(newend);
 173     }
 174 }
 175
 176 function update_sensibilities() {
 177     var img_first = document.getElementById("img_first");
 178     var img_previous = document.getElementById("img_previous");
 179     if (current == 0) {
 180         img_first.src = change_basename(img_first.src, 'go-first-dark.png');
 181         img_previous.src = change_basename(img_previous.src, 'go-previous-dark.png');
 182         img_first.style['cursor'] = 'default';
 183         img_previous.style['cursor'] = 'default';
 184         img_first.setAttribute("class", "disabled");
 185         img_previous.setAttribute("class", "disabled");
 186     } else {
 187         img_first.src = change_basename(img_first.src, 'go-first.png');
 188         img_previous.src = change_basename(img_previous.src, 'go-previous.png');
 189         img_first.style['cursor'] = 'pointer';  // to work on IE and FF, but warns on FF :/
 190         img_first.style['cursor'] = 'hand';
 191         img_previous.style['cursor'] = 'pointer';
 192         img_previous.style['cursor'] = 'hand';
 193         img_first.setAttribute("class", "enabled");
 194         img_previous.setAttribute("class", "enabled");
 195     }
 196
 197     var img_next = document.getElementById("img_next");
 198     var img_last = document.getElementById("img_last");
 199     if (current == images.length - 1) {
 200         img_next.src = change_basename(img_next.src, 'go-next-dark.png');
 201         img_last.src = change_basename(img_last.src, 'go-last-dark.png');
 202         img_next.style['cursor'] = 'default';
 203         img_last.style['cursor'] = 'default';
 204         img_next.setAttribute("class", "disabled");
 205         img_last.setAttribute("class", "disabled");
 206     } else {
 207         img_next.src = change_basename(img_next.src, 'go-next.png');
 208         img_last.src = change_basename(img_last.src, 'go-last.png');
 209         img_next.style['cursor'] = 'pointer';
 210         img_next.style['cursor'] = 'hand';
 211         img_last.style['cursor'] = 'pointer';
 212         img_last.style['cursor'] = 'hand';
 213         img_next.setAttribute("class", "enabled");
 214         img_last.setAttribute("class", "enabled");
 215     }
 216 }
 217
 218 function set_cursor_(value, element) {
 219
 220     if (!element || !element.style) {
 221         return;
 222     }
 223
 224     element.style.cursor = value;
 225
 226     children = element.childNodes;
 227     for (i = 0; i < children.length; i++) {
 228         set_cursor_(value, children.item[i]);
 229     }
 230 }
 231
 232 function set_cursor(value) {
 233     set_cursor_(value, document.getElementById('body'));
 234 }
 235
 236 function show_current_text() {
 237     /* don't show text if image not yet loaded because navigator
 238      * won't refresh it during load */
 239     if (images_loaded[current] == 2) {
 240         document.getElementById('image_counter').innerHTML = ( current + 1 ) + "/" + images.length;
 241         document.getElementById('main_text').innerHTML = captions[current];
 242         for (i = 0; i < other_sizes.length; i++) {
 243             if (other_sizes[i] == "original") {
 244                 var original = eval("elements_" + other_sizes[i] + "[current]");
 245                 if (original != undefined) {
 246                     document.getElementById('link' + other_sizes[i]).href = original;
 247                     document.getElementById('link' + other_sizes[i]).style.display = '';
 248                 } else {
 249                     document.getElementById('link' + other_sizes[i]).style.display = 'none';
 250                 }
 251             } else {
 252                 document.getElementById('link' + other_sizes[i]).href = 'image-' + other_sizes[i] + dbltilda_htmlsuffix + '#current=' + eval("elements_" + other_sizes[i] + "[current]");
 253             }
 254         }
 255         document.getElementById('thumbnails').href = 'thumbnails-' + dbltilda_current_size + '-' + thumbnailspages[current] + dbltilda_htmlsuffix + '#' + images[current];
 256         set_cursor("default");
 257     } else {
 258         setTimeout("show_current_text()", 50);
 259         set_cursor("wait");
 260     }
 261 }
 262
 263 function display_current() {
 264     var main_img = document.getElementById('main_img');
 265     if (types[current] == 'image') {
 266         main_img.innerHTML = '<div class="fullscreen_image"><img style="width:' + widths[current] + 'px;height:' + heights[current] + 'px" src="' + images[current] + '"/></div>';
 267     } else {
 268         main_img.innerHTML = '<a class="fullscreenvideolink" href="' + videos[current] + '" '
 269                            + '   style="display:block;width:' + widths[current] + 'px;height:' + (heights[current] + 24) + 'px" id="player">'
 270                            + '  <div class="fullscreen_video"><img src="' + images[current] + '"/></div>'
 271                            + '  <img src="' + dbltilda_pathtobase + 'play_video.png" style="position:relative;top:-' + (heights[current] + 48)/2 + 'px;border:0;background-color:transparent"/>'
 272                            + '</a>';
 273         if (dbltilda_flowplayer_active == 'true') {
 274             flowplayer("player", dbltilda_pathtobase + "flowplayer-3.2.16.swf");
 275         }
 276     }
 277     oldhref = browser_href();
 278     newhref = 'image-' + dbltilda_current_size + dbltilda_htmlsuffix + '#current=' + images[current];
 279     if (oldhref != newhref) {
 280         currentURL = 'ignore1';
 281         location.href = newhref;
 282         currentURL = 'ignore2';
 283     }
 284     show_current_text();
 285     update_sensibilities();
 286 }
 287
 288 function first() {
 289     if (slideshow == 1) {
 290         toggle_slideshow(true);
 291     }
 292
 293     current = 0;
 294     display_current();
 295 }
 296
 297 function next() {
 298     if (slideshow == 1) {
 299         toggle_slideshow(true);
 300     }
 301
 302     if (current < images.length - 1) {
 303         current++;
 304         display_current();
 305     }
 306 }
 307
 308 function next10() {
 309     if (slideshow == 1) {
 310         toggle_slideshow(true);
 311     }
 312
 313     if (current < images.length - 11) {
 314         current += 10;
 315     } else {
 316         current = images.length - 1;
 317     }
 318     display_current();
 319 }
 320
 321 function previous() {
 322     if (slideshow == 1) {
 323         toggle_slideshow(true);
 324     }
 325
 326     if (current > 0) {
 327         current--;
 328         display_current();
 329     }
 330 }
 331
 332 function previous10() {
 333     if (slideshow == 1) {
 334         toggle_slideshow(true);
 335     }
 336
 337     if (current > 10) {
 338         current -= 10;
 339     } else {
 340         current = 0;
 341     }
 342     display_current();
 343 }
 344
 345 function last() {
 346     if (slideshow == 1) {
 347         toggle_slideshow(true);
 348     }
 349
 350     current = images.length - 1;
 351     display_current();
 352 }
 353
 354 function toggle_video() {
 355     if (types[current] == 'video' && dbltilda_flowplayer_active == 'true') {
 356         var player = flowplayer('player');
 357         if (player.isLoaded()) {
 358             player.toggle();
 359         } else {
 360             player.play();
 361         }
 362     }
 363 }
 364
 365 function keyDownEvent(key) {
 366     if (!key) {
 367         key = event;
 368         key.which = key.keyCode;
 369     }
 370     if (key.altKey || key.ctrlKey || key.shiftKey) {
 371         return;
 372     }
 373     switch (key.which) {
 374       case 32: // space
 375         toggle_video();
 376         break;
 377       case 36: // home
 378         first();
 379         break;
 380       case 35: // end
 381         last();
 382         break;
 383       case 37: // left
 384         previous();
 385         break;
 386       case 39: // right
 387         next();
 388         break;
 389       case 38: // up
 390         previous10();
 391         break;
 392       case 40: // down
 393         next10();
 394         break;
 395     }
 396 }
 397
 398 function toggle_slideshow(now) {
 399     if (slideshow == 0) {
 400         slideshow_pause = document.getElementById('secs').value;
 401         add_cookie('booh-slideshow-pause-' + dbltilda_theme + '=' + slideshow_pause)
 402         document.getElementById("b_slideshow").value = dbltilda_stop_slideshow;
 403         slideshow = 1;
 404         if (current == images.length - 1) {
 405             current = -1;
 406         }
 407         if (now) {
 408             run_slideshow();
 409         } else {
 410             setTimeout("run_slideshow()", slideshow_pause * 1000);
 411         }
 412     } else {
 413         clearTimeout(slideshow_timer);
 414         document.getElementById("b_slideshow").value = dbltilda_run_slideshow;
 415         slideshow = 0;
 416     }
 417 }
 418
 419 function run_slideshow() {
 420     if (slideshow == 0) {
 421         return;
 422     }
 423
 424     if (images_loaded[current + 1] == 2) {
 425         current++;
 426         display_current();
 427         slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
 428     } else {
 429         slideshow_timer = setTimeout("run_slideshow()", 50);
 430     }
 431
 432     if (current == images.length - 1) {
 433         toggle_slideshow(true);
 434     }
 435 }
 436
 437 function set_preferred_size(val) {
 438     var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
 439     document.cookie = 'booh-preferred-size-' + dbltilda_theme + '='
 440                       + val
 441                       + '; expires=' + expires.toGMTString()
 442                       + '; path=/';
 443 }
 444