window.addEvent('domready', function() {
 // image hover - preview
	    // set variables
	    img_width = 250;
	    img_height = 250;
	    offset = 15;	    

	    $('square').setStyle('opacity',0);        
        $('square').setStyle('display','none');
        $$('.gallery_summary').addEvents({
            'mouseenter': function(){  
                here = this.getElement('img').getProperty('longDesc');
                $('square').set('html','<img src="' + here + '" alt="Preview" height="'+img_height+'" width="'+img_width+'" />');            
               myFirstElement  = new Element('div', {id: 'square'});
                $('square').setStyle('display','block');
                $('square').set('tween', {
							duration: 500,
							transition: Fx.Transitions.Quad.easeOut
				}).tween('opacity', 1);
            },           
            'mousemove': function(event){  
                body_width = document.window.getSize();           
                preview = ((event.client.x + offset) + img_width);
                if(body_width.x < preview){
                    x_amount = (body_width.x - img_width);
                }else{              
                    x_amount = (event.client.x + offset);           
                }
                y_amount = (event.client.y + offset);
                $('square').setStyle('left',x_amount);
                $('square').setStyle('top',y_amount); 
           },
           'mouseleave': function(){
                $('square').set('tween', {
							duration: 500,
							transition: Fx.Transitions.Quad.easeOut,
							onComplete: function(){
							                    $('square').set('html','');
							}
				}).tween('opacity', 0);                

           }         
        });   
           
	
	});