var ImageViewer = {
    config: {
        max_Width: 480,
        max_Index: 100,
        div_Id: 'overlayer'
    },

    _inited: false,
    _overlayer: null,
    _imagelayer: null,
    _curImage: null,

    // initialize
    initialize: function() {
        var size = $(document).getScrollSize();
        this._overlayer = new Element('div', {
            'id': this.config.div_Id,
            'styles': {
                'position': 'absolute',
                'z-index': this.config.max_Index - 1,
                'width': size.x,
                'height': size.y,
                'background': '#000',
                'display': 'none',
                'text-align': 'center',
                'opacity': 0
            },
            'events': {
                'click': function() {
                    ImageViewer.hideOriginal();
                }
            }
        }).inject($(document.body));

        this._inited = true;
    },

    // preprocess image
    preProcess: function(img) {
        var image = $(img);
        if (!image) {
            return;
        }

        var w = image.offsetWidth;
        var h = image.offsetHeight;
        //image.store('size', { 'width': w, 'height': h });
        image.setProperties({'w': w, 'h': h});
        if (w > this.config.max_Width) {
            image.width = this.config.max_Width;
            image.height = this.config.max_Width * h / w;
            image.style.cursor = 'pointer';
            image.setProperty('alt', '点击查看大图');
            image.addEvents({
                'click': function() {
                    this.blur();
                    ImageViewer.showOriginal(image);
                    return false;
                }
            });
        }
    },

    // show large image
    showOriginal: function(image) {
        if (!this._inited) {
            this.initialize();
        }

        //var size = image.retrieve('size');
        this._curImage = image;
        var size = {
            'width': image.getProperty('w'),
            'height': image.getProperty('h')
        };
        var wsize = {
            x: document.documentElement.clientWidth,
            y: document.documentElement.clientHeight
        };
        var width = wsize.x;
        var height = wsize.y;
        width = size.width > width ? size.width : width;
        height = size.height > height ? size.height : height;
        var dsize = $(document).getScrollSize();
        width = dsize.x > width ? dsize.x : width;
        height = dsize.y > height ? dsize.y : height;

        this._overlayer.setStyles({ 'width': width, 'height': height, 'display': 'block', 'opacity': 0 });
        this._overlayer.morph({ 'opacity': 0.8 });

        var ws = window.getScroll();
        var sx = ws.x + wsize.x / 2;
        var sy = ws.y + wsize.y / 2;
        var ex = ws.x + (wsize.x - size.width) / 2;
        var ey = ws.y + (wsize.y - size.height) / 2;

        var spos = image.getCoordinates();
        this._imagelayer = new Element('img', {
            'src': image.src,
            'styles': {
                'position': 'absolute',
                'display': 'block',
                'z-index': this.config.max_Index,
                'background': '#ccc',
                'padding': 0,
                'left': spos.left,
                'top': spos.top,
                'width': spos.width,
                'height': spos.height
                //'left': sx,
                //'top': sy,
                //'width': 1,
                //'height': 1
            },
            'events': {
                'click': function() {
                    ImageViewer.hideOriginal();
                }
            }
        }).inject($(document.body));
        var imageMorph = new Fx.Morph(this._imagelayer).start({ 'left': ex, 'top': ey, 'width': size.width, 'height': size.height, 'padding': 8 });
        //this._imagelayer.morph({ 'left': ex, 'top': ey, 'width': size.width, 'height': size.height, 'padding': 8 });
        //this._imagelayer.morph({ 'width': size.width, 'height': size.height });
    },

    // hide large image
    hideOriginal: function() {
        //this._imagelayer.destroy();
        //alert(this._imagelayer.get('src'));
        this._overlayer.morph({ 'opacity': 0 });
        
        var pos = this._curImage.getCoordinates();
        var pad = this._curImage.getStyle('padding');
        var imageMorph = new Fx.Morph(this._imagelayer, {
            'onComplete': function(){
                ImageViewer._imagelayer.destroy();
            }
        }).start({ 
            'left': pos.left, 
            'top': pos.top, 
            'width': pos.width, 
            'height': pos.height, 
            'padding': pad 
        });
    }
};