Template:THD-ad-gallery

     this.image_wrapper.append(this.next_link);
     this.image_wrapper.append(this.prev_link);
     var context = this;
     this.prev_link.add(this.next_link).mouseover(
       function(e) {
         // IE 6 hides the wrapper div, so we have to set it's width
         $(this).css('height', context.image_wrapper_height);
         $(this).find('div').show();
       }
     ).mouseout(
       function(e) {
         $(this).find('div').hide();
       }
     ).click(
       function() {
         if($(this).is('.ad-next')) {
           context.nextImage();
           context.slideshow.stop();
         } else {
           context.prevImage();
           context.slideshow.stop();
         };
       }
     ).find('div').css('opacity', 0.7);
   },
   initBackAndForward: function() {
     var context = this;

     this.nav.append(this.scroll_forward);
     this.nav.prepend(this.scroll_back);
     var has_scrolled = 0;
     var thumbs_scroll_interval = false;
     $(this.scroll_back).add(this.scroll_forward).click(
       function() {
         // We don't want to jump the whole width, since an image
         // might be cut at the edge
         var width = context.nav_display_width - 50;
         if(context.settings.scroll_jump > 0) {
           var width = context.settings.scroll_jump;
         };
         if($(this).is('.ad-forward')) {
           var left = context.thumbs_wrapper.scrollLeft() + width;
         } else {
           var left = context.thumbs_wrapper.scrollLeft() - width;
         };
         if(context.settings.slideshow.stop_on_scroll) {
           context.slideshow.stop();
         };
         context.thumbs_wrapper.animate({scrollLeft: left +'px'});
         return false;
       }
     ).css('opacity', 0.6).hover(
       function() {
         var direction = 'left';
         if($(this).is('.ad-forward')) {
           direction = 'right';
         };
         thumbs_scroll_interval = setInterval(
           function() {
             has_scrolled++;
             // Don't want to stop the slideshow just because we scrolled a pixel or two
             if(has_scrolled > 30 && context.settings.slideshow.stop_on_scroll) {
               context.slideshow.stop();
             };
             var left = context.thumbs_wrapper.scrollLeft() + 1;
             if(direction == 'left') {
               left = context.thumbs_wrapper.scrollLeft() - 1;
             };
             context.thumbs_wrapper.scrollLeft(left);
           },
           10
         );
         $(this).css('opacity', 1);
       },
       function() {
         has_scrolled = 0;
         clearInterval(thumbs_scroll_interval);
         $(this).css('opacity', 0.6);
       }
     );
   },
   _afterShow: function() {
     this.gallery_info.html((this.current_index + 1) +' / '+ this.images.length);
     if(!this.settings.cycle) {
       // Needed for IE
       this.prev_link.show().css('height', this.image_wrapper_height);
       this.next_link.show().css('height', this.image_wrapper_height);
       if(this.current_index == (this.images.length - 1)) {
         this.next_link.hide();
       };
       if(this.current_index == 0) {
         this.prev_link.hide();
       };
     };
     if(this.settings.update_window_hash) {
       var thumb_link = this.images[this.current_index].thumb_link;
       if (thumb_link.attr("id")) {
         window.location.hash = "#ad-image-"+ thumb_link.attr("id");
       } else {
         window.location.hash = "#ad-image-"+ this.current_index;
       };
     };
     this.fireCallback(this.settings.callbacks.afterImageVisible);
   },
   /**
    * Checks if the image is small enough to fit inside the container
    * If it's not, shrink it proportionally
    */
   _getContainedImageSize: function(image_width, image_height) {
     if(image_height > this.image_wrapper_height) {
       var ratio = image_width / image_height;
       image_height = this.image_wrapper_height;
       image_width = this.image_wrapper_height * ratio;
     };
     if(image_width > this.image_wrapper_width) {
 	    var ratio = image_height / image_width;
 	    image_width = this.image_wrapper_width;
 	    image_height = this.image_wrapper_width * ratio;
 	  };
     return {width: image_width, height: image_height};
   },
   /**
    * If the image dimensions are smaller than the wrapper, we position
    * it in the middle anyway
    */
   _centerImage: function(img_container, image_width, image_height) {
     img_container.css('top', '0px');
     if(image_height < this.image_wrapper_height) {
       var dif = this.image_wrapper_height - image_height;
       img_container.css('top', (dif / 2) +'px');
     };
     img_container.css('left', '0px');
     if(image_width < this.image_wrapper_width) {
       var dif = this.image_wrapper_width - image_width;
       img_container.css('left', (dif / 2) +'px');
     };
   },
   _getDescription: function(image) {
     var desc = false;
     if(image.desc.length || image.title.length) {
       var title = ;
       if(image.title.length) {
         title = ''+ image.title +'';
       };
       var desc = ;
       if(image.desc.length) {
         desc = ''+ image.desc +'';
       };

'+ title + desc +'

     };
     return desc;
   },
   /**
    * @param function callback Gets fired when the image has loaded, is displaying
    *                          and it's animation has finished
    */
   showImage: function(index, callback) {
     if(this.images[index] && !this.in_transition && index != this.current_index) {
       var context = this;
       var image = this.images[index];
       this.in_transition = true;
       if(!image.preloaded) {
         this.loading(true);
         this.preloadImage(index, function() {
           context.loading(false);
           context._showWhenLoaded(index, callback);
         });
       } else {
         this._showWhenLoaded(index, callback);
       };
     };
   },
   /**
    * @param function callback Gets fired when the image has loaded, is displaying
    *                          and it's animation has finished
    */
   _showWhenLoaded: function(index, callback) {
     if(this.images[index]) {
       var context = this;
       var image = this.images[index];
       var img_container = $(document.createElement('div')).addClass('ad-image');
       var img = $(new Image()).attr('src', image.image);
       if(image.link) {
         var link = $('<a href="'+ image.link +'" target="_blank"></a>');
         link.append(img);
         img_container.append(link);
       } else {
         img_container.append(img);
       };
       this.image_wrapper.prepend(img_container);
       var size = this._getContainedImageSize(image.size.width, image.size.height);
       img.attr('width', size.width);
       img.attr('height', size.height);
       img_container.css({width: size.width +'px', height: size.height +'px'});
       this._centerImage(img_container, size.width, size.height);
       var desc = this._getDescription(image);
       if(desc) {
         if(!this.settings.description_wrapper && !this.settings.hooks.displayDescription) {
           img_container.append(desc);
           var width = size.width - parseInt(desc.css('padding-left'), 10) - parseInt(desc.css('padding-right'), 10);
           desc.css('width', width +'px');
         } else if(this.settings.hooks.displayDescription) {
           this.settings.hooks.displayDescription.call(this, image);
         } else {
           var wrapper = this.settings.description_wrapper;
           wrapper.append(desc);
         };
       };
       this.highLightThumb(this.images[index].thumb_link);
       
       var direction = 'right';
       if(this.current_index < index) {
         direction = 'left';
       };
       this.fireCallback(this.settings.callbacks.beforeImageVisible);
       if(this.current_image || this.settings.animate_first_image) {
         var animation_speed = this.settings.animation_speed;
         var easing = 'swing';
         var animation = this.animations[this.settings.effect].call(this, img_container, direction, desc);
         if(typeof animation.speed != 'undefined') {
           animation_speed = animation.speed;
         };
         if(typeof animation.easing != 'undefined') {
           easing = animation.easing;
         };
         if(this.current_image) {
           var old_image = this.current_image;
           var old_description = this.current_description;
           old_image.animate(animation.old_image, animation_speed, easing,
             function() {
               old_image.remove();
               if(old_description) old_description.remove();
             }
           );
         };
         img_container.animate(animation.new_image, animation_speed, easing,
           function() {
             context.current_index = index;
             context.current_image = img_container;
             context.current_description = desc;
             context.in_transition = false;
             context._afterShow();
             context.fireCallback(callback);
           }
         );
       } else {
         this.current_index = index;
         this.current_image = img_container;
         context.current_description = desc;
         this.in_transition = false;
         context._afterShow();
         this.fireCallback(callback);
       };
     };
   },
   nextIndex: function() {
     if(this.current_index == (this.images.length - 1)) {
       if(!this.settings.cycle) {
         return false;
       };
       var next = 0;
     } else {
       var next = this.current_index + 1;
     };
     return next;
   },
   nextImage: function(callback) {
     var next = this.nextIndex();
     if(next === false) return false;
     this.preloadImage(next + 1);
     this.showImage(next, callback);
     return true;
   },
   prevIndex: function() {
     if(this.current_index == 0) {
       if(!this.settings.cycle) {
         return false;
       };
       var prev = this.images.length - 1;
     } else {
       var prev = this.current_index - 1;
     };
     return prev;
   },
   prevImage: function(callback) {
     var prev = this.prevIndex();
     if(prev === false) return false;
     this.preloadImage(prev - 1);
     this.showImage(prev, callback);
     return true;
   },
   preloadAll: function() {
     var context = this;
     var i = 0;
     function preloadNext() {
       if(i < context.images.length) {
         i++;
         context.preloadImage(i, preloadNext);
       };
     };
     context.preloadImage(i, preloadNext);
   },
   preloadImage: function(index, callback) {
     if(this.images[index]) {
       var image = this.images[index];
       if(!this.images[index].preloaded) {
         var img = $(new Image());
         img.attr('src', image.image);
         if(!this.isImageLoaded(img[0])) {
           this.preloads.append(img);
           var context = this;
           img.load(
             function() {
               image.preloaded = true;
               image.size = { width: this.width, height: this.height };
               context.fireCallback(callback);
             }
           ).error(
             function() {
               image.error = true;
               image.preloaded = false;
               image.size = false;
             }
           );
         } else {
           image.preloaded = true;
           image.size = { width: img[0].width, height: img[0].height };
           this.fireCallback(callback);
         };
       } else {
         this.fireCallback(callback);
       };
     };
   },
   whenImageLoaded: function(img, callback) {
     if (this.isImageLoaded(img)) {
       callback && callback();
     } else {
       $(img).load(callback);
     };
   },
   isImageLoaded: function(img) {
     if(typeof img.complete != 'undefined' && !img.complete) {
       return false;
     };
     if(typeof img.naturalWidth != 'undefined' && img.naturalWidth == 0) {
       return false;
     };
     return true;
   },
   highLightThumb: function(thumb) {
     this.thumbs_wrapper.find('.ad-active').removeClass('ad-active');
     thumb.addClass('ad-active');
     if(this.settings.thumb_opacity < 1) {
       this.thumbs_wrapper.find('a:not(.ad-active) img').fadeTo(300, this.settings.thumb_opacity);
       thumb.find('img').fadeTo(300, 1);
     };
     var left = thumb[0].parentNode.offsetLeft;
     left -= (this.nav_display_width / 2) - (thumb[0].offsetWidth / 2);
     this.thumbs_wrapper.animate({scrollLeft: left +'px'});
   },
   fireCallback: function(fn) {
     if($.isFunction(fn)) {
       fn.call(this);
     };
   }
 };

 function AdGallerySlideshow(nextimage_callback, settings) {
   this.init(nextimage_callback, settings);
 };
 AdGallerySlideshow.prototype = {
   start_link: false,
   stop_link: false,
   countdown: false,
   controls: false,

   settings: false,
   nextimage_callback: false,
   enabled: false,
   running: false,
   countdown_interval: false,
   init: function(nextimage_callback, settings) {
     var context = this;
     this.nextimage_callback = nextimage_callback;
     this.settings = settings;
   },
   create: function() {
     this.start_link = $(''+ this.settings.start_label +'');
     this.stop_link = $(''+ this.settings.stop_label +'');
     this.countdown = $('');

     this.controls.append(this.start_link).append(this.stop_link).append(this.countdown);
     this.countdown.hide();

     var context = this;
     this.start_link.click(
       function() {
         context.start();
       }
     );
     this.stop_link.click(
       function() {
         context.stop();
       }
     );
     $(document).keydown(
       function(e) {
         if(e.keyCode == 83) {
           // 's'
           if(context.running) {
             context.stop();
           } else {
             context.start();
           };
         };
       }
     );
     return this.controls;
   },
   disable: function() {
     this.enabled = false;
     this.stop();
     this.controls.hide();
   },
   enable: function() {
     this.enabled = true;
     this.controls.show();
   },
   toggle: function() {
     if(this.enabled) {
       this.disable();
     } else {
       this.enable();
     };
   },
   start: function() {
     if(this.running || !this.enabled) return false;
     var context = this;
     this.running = true;
     this.controls.addClass('ad-slideshow-running');
     this._next();
     this.fireCallback(this.settings.onStart);
     return true;
   },
   stop: function() {
     if(!this.running) return false;
     this.running = false;
     this.countdown.hide();
     this.controls.removeClass('ad-slideshow-running');
     clearInterval(this.countdown_interval);
     this.fireCallback(this.settings.onStop);
     return true;
   },
   _next: function() {
     var context = this;
     var pre = this.settings.countdown_prefix;
     var su = this.settings.countdown_sufix;
     clearInterval(context.countdown_interval);
     this.countdown.show().html(pre + (this.settings.speed / 1000) + su);
     var slide_timer = 0;
     this.countdown_interval = setInterval(
       function() {
         slide_timer += 1000;
         if(slide_timer >= context.settings.speed) {
           var whenNextIsShown = function() {
             // A check so the user hasn't stoped the slideshow during the
             // animation
             if(context.running) {
               context._next();
             };
             slide_timer = 0;
           };
           if(!context.nextimage_callback(whenNextIsShown)) {
             context.stop();
           };
           slide_timer = 0;
         };
         var sec = parseInt(context.countdown.text().replace(/[^0-9]/g, ), 10);
         sec--;
         if(sec > 0) {
           context.countdown.html(pre + sec + su);
         };
       },
       1000
     );
   },
   fireCallback: function(fn) {
     if($.isFunction(fn)) {
       fn.call(this);
     };
   }
 };

})(jQuery); </script>