var EnlargeImage = new Class({
	initialize: function(element,options) {
        this.thumbnail = {};
		this.thumbnail.element = $(element);
        this.thumbnail.properties = {};

        $H(this.thumbnail.element.getCoordinates()).each(function(value, key){
            this.thumbnail.properties[key] = value;
        }, this);

		this.options = options;

        this.image = {};
        this.image.properties = {
            'width': this.thumbnail.element.getProperty('real_width'),
            'height': this.thumbnail.element.getProperty('real_height'),
            'src': this.thumbnail.element.getProperty('main')
        };
        this.image.element = new Asset.image(
            this.image.properties.src, {
            'styles': {
                'width':'0px',
                'height':'0px',
                'position': 'absolute',
                'top': '0px',
                'z-index': '0',
                'cursor': 'pointer'/*,
                'display':'none'*/
            },
            'id': 'EnlargedImage',
            'onload': this.zoomIn.bind(this)
            }
        );
        this.image.fx = new Fx.Morph(
            this.image.element,{
                duration: this.options.duration,
                transition:Fx.Transitions.Cubic.easeInOut
            }
        );

        this.overlay = {};
        this.overlay.element = new Element('div', {
            styles:{
                'width':this.thumbnail.properties.width  + 'px',
                'height':this.thumbnail.properties.height + 'px',
                'top':(this.thumbnail.properties.top - (($('pageToolbar'))?24:0)) + 'px',
                'left':this.thumbnail.properties.left + 'px',
                'position': 'absolute',
                'z-index': '100000',
                'background': '#fff url(images/image_loading.gif) 50% 50% no-repeat'
            }

        });
        this.overlay.fx = new Fx.Tween(this.overlay.element, {property: 'opacity'}).set(0.5);
        this.overlay.element.inject(document.body);
	},
    zoomIn: function(){

        //Удаляем оверлей

        this.overlay.fx.addEvent('complete', function(){
            this.overlay.element.dispose();
            delete this.overlay;
        }.bind(this));
        this.overlay.fx.start(0);


        //ПРисоединяем имидж
        if($(document.body).grab(this.image.element)){

            this.image.properties.startTop =
                this.thumbnail.properties.top
                + this.thumbnail.properties.height/2
                - (($('pageToolbar'))?24:0)
                /*+ Window.getScroll().y*/;
            this.image.properties.startLeft = (this.thumbnail.properties.left + this.thumbnail.properties.width/2);
//            this.image.properties.top = ((Window.getSize().y/2 - this.image.properties.height/2 ) + Window.getScroll().y) - 35 + 'px';
//            this.image.properties.left = ((Window.getSize().x/2)-(this.image.properties.width/2) - 60) + 'px';
			this.image.properties.left = jQuery('#wraper').offset().left + 40;
			this.image.properties.top = jQuery('#wraper').offset().top ;
			jQuery(this.image.element).attr('key', jQuery(this.thumbnail.element).attr('key'));

            this.image.element.setStyles({
                'top':this.image.properties.startTop  + 'px',
                'left':this.image.properties.startLeft  + 'px',
                'border': '0px solid silver',
                'z-index': '99'/*,
                'display': 'inline'*/
            });


            this.image.fx.start({
                'top':  [this.image.properties.startTop, this.image.properties.top],
                'left': [this.image.properties.startLeft, this.image.properties.left ],
                'width': [0, this.image.properties.width],
                'height': [0, this.image.properties.height]
            });
            this.image.element.addEvent('click', this.zoomOut.pass(false, this));

        }

    },
    zoomOut: function(onCompleteFunction){
            if(this.image.element){
                this.image.fx.addEvent('complete', function(){
                    this.image.element.dispose();
                    delete this.image.element;
                    if(onCompleteFunction)onCompleteFunction();
                }.bind(this));

                this.image.fx.start({
                    'top':  [this.image.properties.top , this.image.properties.startTop],
                    'left': [this.image.properties.left, this.image.properties.startLeft],
                    'width': [this.image.properties.width, 0],
                    'height': [this.image.properties.height, 0]
                });
            }
            currentImage = null;
    }
});