var popupImage=null;var config={loadingIcon:'js/common/popup_image/loader.gif',padding:{top:50,right:50,bottom:50,left:50}} window.addEvent('domready',function(){var popups=$$('[class^=popupImage]');popups.each(function(element){element.addEvent('click',function(event){var event=new Event(event).stop();if(popupImage==null){popupImage=true;Popup(element);}else{popupImage.reload(this);}});});});function Popup(link){popupImage=this;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;var _imageDescription=null;var _next=null;var _prev=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.elements.imageDescription=new Element('div');this.elements.imageDescription.set('class','popupImageDescription');this.elements.imageDescription.setStyles({left:0,position:'absolute',top:0});this.elements.imageDescription.inject(this.wrapper);if(this.thumb.get('title')&&this.thumb.get('title').length>0){this.elements.imageDescription.set('html',this.thumb.get('title'));} _imageDescription=this.elements.imageDescription;this.elements.next=new Element('div');this.elements.next.setStyles({left:'50px',position:'absolute',top:0,cursor:'pointer','z-index':1});this.elements.next.set('html','');_next=this.elements.next;this.elements.prev=new Element('div');this.elements.prev.setStyles({left:0,position:'absolute',top:0,cursor:'pointer','z-index':1});this.elements.prev.set('html','');_prev=this.elements.prev;this.elements.next.inject(this.wrapper);this.elements.prev.inject(this.wrapper);this.elements.next.addEvent('click',function(event){var eleme=$$('a[class="'+link.get('class')+'"]');for(i=0;i0){popupImage.reload(eleme[i-1]);return true;}}}});this.wrapper.tween('opacity',1);this.loadImage();} this.unloadImage=function(){if(popupImage._imageDescription){popupImage._imageDescription.tween('opacity',0);} this.image.tween('opacity',0);} this.reload=function(newLink){if(newLink){this.link=newLink;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(_imageDescription){_imageDescription.setStyles({cursor:'pointer',background:'#ffffff',color:'#7189A5',left:config.padding.left,opacity:0,position:'absolute',top:config.padding.top+_image._size.y,width:_image._size.x-10,padding:'5px'});_imageDescription._size=_imageDescription.getSize();} var text=popupImage.link.getElement('img').get('title');if(text&&text.length>0){_imageDescription.setStyle('visibility','visible');_imageDescription.set('html',text);}else{_imageDescription.setStyle('visibility','hidden');_imageDescription.set('html','');} 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};var showNext=false;var showPrev=false;var eleme=$$('a[class="'+link.get('class')+'"]');for(i=0;i0){showPrev=true;}else{showPrev=false;} break;}} if(showNext&&_next){_next.setStyle('visibility','visible');_next.morph({left:_wrapperSize.x-_next.getElement('img').getSize().x,top:config.padding.top+(_image._size.y/2)});}else{_next.setStyle('visibility','hidden');} if(showPrev&&_prev){_prev.setStyle('visibility','visible');_prev.morph({left:0,top:config.padding.top+(_image._size.y/2)});}else{_prev.setStyle('visibility','hidden');} if(_imageDescription&&_imageDescription.get('html').length>0){_wrapperSize.y+=_imageDescription._size.y;} _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);if(_imageDescription&&_imageDescription.get('html').length>0){_imageDescription.tween('opacity',1);}});_image.addEvent('click',close);if(_imageDescription){_imageDescription.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();popupImage=null;});} this.create();}