var config={loadingIcon:'js/common/popup_image/loader.gif',padding:{top:50,right:50,bottom:50,left:50}} window.addEvent('domready',function(){var popups=$$('.popupImage');popups.each(function(element){element.addEvent('click',function(event){var event=new Event(event).stop();if(null==element.popup){element.popup=new Popup(element);}else{element.popup.close();element.popup=new Popup(element);}});});});function Popup(link){this.wrapper=null;this.elements={};this.link=null;this.thumb=null;this.image=null;var _popup=this;var _body=$(document.body);var _wrapper=null;var _wrapperSize=null;var _wrapperMorph=null;this.create=function(){this.link=link;this.thumb=link.getChildren('img')[0];this.thumb.coordinates=this.thumb.getCoordinates(_body);this.wrapper=new Element('div');this.wrapper.set('class','popupWrapper');this.wrapper.setStyles({height:this.thumb.coordinates.height,left:this.thumb.coordinates.left,opacity:0,padding:0,position:'absolute',top:this.thumb.coordinates.top,width:this.thumb.coordinates.width});this.wrapper.coordinates=this.thumb.coordinates;this.wrapper.inject(_body);_wrapper=this.wrapper;this.elements.background=new Element('div');this.elements.background.set('class','popupBackground');this.elements.background.setStyles({height:'100%',opacity:0.7,width:'100%'});this.elements.background.inject(this.wrapper);this.elements.imageContainer=new Element('div');this.elements.imageContainer.set('class','popupImageContainer');this.elements.imageContainer.setStyles({left:0,position:'absolute',top:0});this.elements.imageContainer.inject(this.wrapper);this.wrapper.tween('opacity',1);this.loadImage();} this.loadImage=function(){if(null!=this.image){this.unloadImage();} var _loading=new Asset.image(config.loadingIcon,{'class':'popupLoadingIcon','onload':function(){_loading.setStyle('opacity',0);_loading.inject(_wrapper);var _loadingSize=_loading.getSize();_loading.setStyles({left:(_wrapper.coordinates.width/2)-(_loadingSize.x/2),opacity:1,position:'absolute',top:(_wrapper.coordinates.height/2)-(_loadingSize.y/2)});_loading._visible=true;}});this.elements.loadingIcon=_loading;var _image=new Asset.image(this.link.get('href'),{'class':'popupImage','onload':function(){_image.setStyles({cursor:'pointer',left:config.padding.left,opacity:0,position:'absolute',top:config.padding.top});_image.inject(_wrapper);_image._size=_image.getSize();if(true==_loading._visible){_loading.setStyle('opacity',0);_loading._visible=false;} var _screenSize=window.getSize();var _scroll=document.getScroll();_wrapperSize={x:_image._size.x+config.padding.left+config.padding.right,y:_image._size.y+config.padding.top+config.padding.bottom};_wrapperMorph=new Fx.Morph(_wrapper);_wrapperMorph.start({left:_scroll.x+((_screenSize.x/2)-(_wrapperSize.x/2)),height:_wrapperSize.y,width:_wrapperSize.x,top:_scroll.y+((_screenSize.y/2)-(_wrapperSize.y/2))}).chain(function(){_image.tween('opacity',1);});_image.addEvent('click',close);}});this.image=_image;window.addEvent('scroll',this.moveToCenter);} this.moveToCenter=function(){if(_wrapperSize){var _screenSize=window.getSize();var _scroll=document.getScroll();_wrapperMorph.start({left:_scroll.x+((_screenSize.x/2)-(_wrapperSize.x/2)),top:_scroll.y+((_screenSize.y/2)-(_wrapperSize.y/2))});}} this.showImage=function(){if(null==this.image){this.loadImage();}} this.close=close;function close(){var closeTween=new Fx.Tween(_wrapper);closeTween.start('opacity',0).chain(function(){_wrapper.destroy();});} this.create();}