var PhotoGallery = new Class({
    initialize: function(selector) {
        this.photos = $$(selector);
        this.photos.each(function(photo) { this._addEffect(photo) }, this);
    },
    
    _addEffect: function( photo ) {
        
        var t;
        var l;
        
        ////not IE6 Browser.Engine.trident4
        //if(!Browser.Engine.trident4) {
        //    t = photo.getPosition().y - 348;
        //    l = photo.getPosition().x - 255;
        //}
        //
        ////Safari 3
        //if(Browser.Engine.webkit420) {
        //    t+=3;
        //}
        //
        ////FFox 2
        //if(Browser.Engine.gecko) {
        //    //ff3 is 19?! so I assume 2 is less than 19
        //    if(Browser.Engine.version < 19) {
        //        t+=9
        //    }
        //}
        
        var olay = new Element('div',{ styles: {
            'position': 'absolute',
            'top': t,
            'left': l,
            'width': photo.getSize().x,
            'height': photo.getSize().y,
            'background-color': '#000',
            'z-index': 10000,
            'cursor': 'pointer'
        } });
        olay.set('morph', {
            duration: 400,
            link: 'cancel'
        });
        olay.set('opacity', .35);
        olay.addEvent('mouseenter', function() {
            this.setStyle('background-color', '#fff');
            this.set('opacity', .5);
            this.morph({
                opacity: .01
            });
        });
        olay.addEvent('mouseleave', function() {
            this.morph({
                opacity: .35
            });
            this.setStyle('background-color', '#000');
        });
        olay.inject(photo, 'before');
        photo.set('olay', olay);
    }
    
});

window.addEvent('domready', function() {
   var p = new PhotoGallery('.detail img'); 
});