Zoomer = Class.create({
    initialize: function (element, options) {
        this.element    = $(element);
        this.image      = this.element.down('img');
        this.container  = $('gallery_container');
        this.largeImage = new Image();
        this.source     = {
            small: this.image.src,
            large: this.element.href
        }
        this.element.hover(this.start.bind(this), this.stop.bind(this));
        // Restart when small image fully loaded

        this.options = Object.extend({
            xzoom:    300,
            yzoom:    300,
            animation: 1
        }, options || {});
        
        this.position = this.container.cumulativeOffset();
        this.dimensions = {
            small: {
                width:  this.container.getWidth(),
                height: this.container.getHeight()
            }
        }        
        this.scaleReport = 1;
        // Large image preloading
        this.largeImage.src    = this.source.large;
        this.largeImage.onload = this.loaded.bind(this);        
        // Wrappers
        this.scroller = (new Element('div')).setStyle({
            overflow: 'hidden',
            display: 'none',
            position: 'absolute',
            zIndex: '1000',
            top: '0',
            left: this.dimensions.small.width + 20 + 'px',
            width:  this.options.xzoom ? this.options.xzoom + 'px' : this.dimensions.small.width + 40 + 'px',
            height: this.options.yzoom ? this.options.yzoom + 'px' : this.dimensions.small.height + 40 + 'px'
        });
        this.element.up().insert(this.scroller);
        this.iframe = (new Element('iframe')).setStyle({
            position: 'absolute',
            display: 'none',
            left: this.dimensions.small.width + 20 + 'px',
            width:  this.options.xzoom ? this.options.xzoom + 'px' : this.dimensions.small.width + 40 + 'px',
            height: this.options.yzoom ? this.options.yzoom + 'px' : this.dimensions.small.height + 40 + 'px'
        });
        this.iframe.frameBorder = 0;
        this.element.up().insert(this.iframe);
        this.scroller.insert(this.largeImage);
        this.scroller.down().setStyle({zIndex: '100000'});
        this.element.observe('click',       this.click.bindAsEventListener(this));
        this.element.observe('mousemove',   this.move.bindAsEventListener(this));
    },
    start: function (event) {
        if (this.element.loaded) {
            this.iframe.show();
            if (this.options.animation == 1) {
                new Effect.Appear(this.scroller, {to:1, duration:0.5});
            } else {
                this.scroller.show();
            }
            this.move(event);
        } else {
            // Periodically check if target image has loaded
            this.click.bind(this).delay(0.5, event);
        }
    },
    stop: function () {
        this.iframe.hide();
        if (this.options.animation == 1) {
            new Effect.Fade(this.scroller, {duration:0.25});
        } else {
            this.scroller.hide();
        }
    },
    click: function (event) {
        event.stop();
        if (!this.scroller.visible()) {
            this.start();
        } else {
            //this.stop();
        }
    },
    move: function (event) {
        if (typeof event == 'undefined') {
            return;
        }
        var x = event.pointerX() - this.position.left;
        var y = event.pointerY() - this.position.top;
        this.scroller.scrollLeft = x * (this.dimensions.large.width/this.dimensions.small.width) - x;
        this.scroller.scrollTop  = y * (this.dimensions.large.height/this.dimensions.small.height) - y;
    },
    loaded: function () {
        this.element.loaded = true;
        this.dimensions.large = {
            width:  this.largeImage.width,
            height: this.largeImage.height
        };
        //alert(this.largeImage.height);
        this.scaleReport = this.dimensions.large.width / this.dimensions.small.width;
    }
});

function pSelectImage(a, b) {
    var currentDiv = 'container' + a;
    var allDiv = $('gallery_container').select('div.image_container');
    for (var index = 0; index < allDiv.length; ++index) {
        if (allDiv[index].identify() == currentDiv) {
            allDiv[index].show();
        } else {
            allDiv[index].hide();
        }
    }
    
    
}