Hi,

I have the following script:
Code:
Effect.Operators.Zoom = Class.create(Effect.Operators.Style, {
  initialize: function($super, object, options) {
    var viewport = { width: 980, height: 300 };
    var offsets = { left: 0, top: 0 };
    var dims = object.getDimensions();

    var f = Effect.Helpers.fitIntoRectangle(dims.width, dims.height, 
      viewport.width - (options.borderWidth || 0)*2, 
      viewport.height - (options.borderWidth || 0)*2);
    
    Object.extend(options, { style: {
      left: f[0] + (options.borderWidth || 0) + offsets.left + 'px', 
      top: f[1] + (options.borderWidth || 0) + offsets.top + 'px',
      width: f[2] + 'px', height: f[3] + 'px',
      marginTop: '0px'
    }});
    $super(object, options);
  }
});

Effect.PhotoZoom = Class.create(Effect.Element, {
  setup: function() {
    var currentHeight = $('text').getHeight();     
    var newHTML = this.element.next('div.text').innerHTML;
    
    var left =  Thomas.photos.indexOf(this.element)*120 + 90;
    var color = $w('ffa ffa ffa ffa ffa')[Thomas.photos.indexOf(this.element)];
     
    $('text_contents').show().update(newHTML).setStyle({height:'auto'});
    var newHeight = $('text_contents').getHeight()+22;
    
    Thomas.clearTextBox();
    $('text').setStyle({height:currentHeight+'px'});
    
    $('text').morph('left:'+left+'px;height:'+newHeight+'px;background-color:#'+color,{
      duration: 1.2,
      transition: 'linear',
      propertyTransitions: {
        left: 'bouncePast',
        height: 'bouncePast',
        backgroundColor: 'sinusoidal'
      },
      after: function(){
        $('text_contents').show();
        Element.update.defer('text_contents', newHTML);
        Thomas.animation = false;    
      }
    });
    
    this.animate('zoom', this.element, {
      propertyTransitions: this.options.propertyTransitions || { }
    });
  }
});

var Thomas = {
  initialized: false,
  showQuotes: true,
  
  // workaround a IE6 CSS Bug
  FIRST_MARGIN: navigator.userAgent.indexOf('MSIE 6') > -1 ? ['95px', '62px'] : ['190px', '125px'],
  
  show: function(photo, event){
    if(Thomas.animation || photo.zoomed) {
      event.stop();
      return;
    }
    Thomas.zoomOutAllPhotos();
    Thomas.hideHoverLabels();  
    if(Thomas.copyrightShown) Thomas.hideCopyright();
    if(!Thomas.initialized) {
      $$('#photos div.photo.first').first().morph('margin-left:'+Thomas.FIRST_MARGIN[1],{ duration: .4 });
      Thomas.initialized = true;
      $('quotes').hide();
      $('text').show();
    }
    Thomas.animation = true;
    photo.zoomed = true;
    new Effect.PhotoZoom(photo, {
      duration: .7, transition: 'bouncePast', after: function(){
        $$('#text div.border').invoke('show');
      }
    }).play();
    Thomas.zoomInLabel(photo.next('div.label'));    
    if(event) event.stop();
  },
  zoomInLabel: function(label){
    if(label.zoomed) return;
    label.zoomed = true;
    label.morph('width:180px;height:40px;bottom:23px;left:33px',{duration: .7, transition: 'bouncePast'});
    label.down('img').morph('width:180px;height:40px',{duration: .7, transition: 'bouncePast'});
  },
  zoomOutLabel: function(label){
    if(!label.zoomed) return;
    label.zoomed = false;
    label.morph('width:90px;height:20px;bottom:46px;left:13px',{ duration: .4 });
    label.down('img').morph('width:90px;height:20px',{ duration: .4 });
  },
  zoomOutAllPhotos: function() {
    Thomas.photos.each(function(photo){
      photo.morph('margin-top:120px;width:120px;height:143px;bottom:0px',{duration: .4});
      photo.zoomed = false;
      Thomas.zoomOutLabel(photo.next('div.label'));
    });
  },
  hideAllPhotos: function() {
    Thomas.zoomOutAllPhotos();
    $$('#photos div.photo.first').first().morph('margin-left:'+Thomas.FIRST_MARGIN[0],{ duration: .4 });
    Thomas.clearTextBox();
    $('text').morph('background-color:#fff; height:20px', { duration: .4 });
    $$('#text div.border').invoke('hide');
    
    if(Thomas.showQuotes) Element.show.delay(.5, 'quotes');
    Element.hide.delay(.5, 'text');
    Thomas.hideAllLabels.delay(.5);
    Thomas.initialized = false;
  },
  clearTextBox: function(){
    $('text_contents').update();
  },
  showLabel: function(photo, event){
    var label = photo.next('.label');
    if(Thomas.activeLabel == label) return;
    Thomas.activeLabel = label;  
    Thomas.hideHoverLabels();
    if(!label.zoomed) label.setStyle({width:'0px',display:'block'}).morph('width:90px',{duration:.3});
    event.stop();
  },
  hideHoverLabels: function(){
    if(!Thomas.activeLabel) return;
    $$('#photos div.label').reject(function(label){ return label.zoomed })
    .without(Thomas.activeLabel).invoke('setStyle',{display:'none', width:'0'});
  },
  hideAllLabels: function(){
    Thomas.activeLabel = false;
    $$('#photos div.label').reject(function(label){ return label.zoomed })
      .invoke('setStyle',{display:'none', width:'0'});
  },
  showCopyright: function(event){
    if(Thomas.copyrightShown) return;
    Thomas.copyrightShown = true;
    $('copyright').setStyle({left:((document.viewport.getDimensions().width-300)/2).round()+'px'});
    
    $('copyright').setStyle({height:0,top:'525px'}).show().morph('top:225px;height:300px',{
      transition: 'bouncePast',
      after: Element.show.curry($('copyright').down('div.contents'))
    });
    Thomas.hideAllPhotos();
    event.stop();
  },
  hideCopyright: function(){
    if(!Thomas.copyrightShown) return;
    Thomas.copyrightShown = false;
    ['copyright', $('copyright').down('div.contents')].each(Element.hide);
  }
};

var Asset = {
  assets: [],
  load: function(url, load){
    var image = new Image();
    image.src = url;
    this.assets.push({image: image, load: load || Prototype.emptyFunction});
    this.wait();
  },
  wait: function(){
    if(this.interval) return;
    this.interval = setInterval(this.check.bind(this), 10);
  },
  check: function(){
    this.assets = this.assets.map(function(asset){
      if(asset.image.complete){
        if(asset.load) asset.load(asset.image.src);
        return null;
      } else {
        return asset;
      }
    }).compact();
    if(this.assets.length == 0) {
      clearInterval(this.interval);
      this.interval = null;
    }
  }
};

// load stuff and initialize events. do it right here so 
// GA can continue to load in background

Thomas.photos = $$('#photos div.photo img[src$=gif]');

Thomas.photos.each(function(photo){
  Asset.load('images/polaroid_'+photo.id+'.jpg', function(url){
    photo.setStyle({opacity:0});
    photo.src = url;
    photo.morph('opacity: 1',{duration: .4});
    
    photo.insert({
      after: (new Element('div', { className: 'label' }).insert(new Element('img',{ 
          src:'images/label_'+photo.id+'.png'
        }))).observe('mouseover', function(event){event.stop()})
          .observe('click', Thomas.show.curry(photo))
    });
  });
  
  photo.observe('click', Thomas.show.curry(photo))
    .observe('mouseover', Thomas.showLabel.curry(photo));
});

$('footer').down('div.header').observe('click', Thomas.showCopyright.bind(Thomas));

if(navigator.userAgent.indexOf('MSIE 6') > -1)
  $$('#copyright img').first().src = 'images/empty.gif';

document.observe('mouseover', Thomas.hideAllLabels);
$$('body')[0].observe('click', function(){
  Thomas.hideAllPhotos();
  Thomas.hideCopyright();
});
In a nutschell, it zooms pictures when clicked and minimalize (hide) it when clicked another. Now I am troubled with this last part in the script:
Code:
document.observe('mouseover', Thomas.hideAllLabels);
$$('body')[0].observe('click', function(){
  Thomas.hideAllPhotos();
  Thomas.hideCopyright();
});
It hides all zoomed pictures when I click anywhere in the browser. How to change this that it wont hide a picture when I click in the browser, but only does this when I click the zoomed picture?

Many thanks