Tn.Class({Class:"Tn.Ui.ImagePanel",Extends:"Tn.Ui.Element",_element:EMPTY,_loadingIndicator:EMPTY,_nextImageSrc:EMPTY,_currentImageSrc:EMPTY,_pendingImageSrc:EMPTY,_currentImage:EMPTY,_nextImage:EMPTY,$event$OnImageLoaded:EMPTY,initialize:function _(a){try{arguments.callee.$super.apply(this,[a])}catch(b){alert(b)}this._imageContainer.css({position:"absolute",left:0,top:0,width:"100%",height:"100%","z-index":1});this._imageOverlay.css({position:"absolute",left:0,top:0,width:"100%",height:"100%","z-index":2,opacity:1});this._element.css({position:"relative",left:0,top:0,overflow:"hidden",border:"1px solid rgb(120,120,120)"});this._imageElement.css({position:"absolute",left:0,top:0});this._imageElement.remove();this._loadingElement.css({opacity:0.8,padding:10,border:"1px solid rgb(120,120,120)",position:"absolute","background-color":"black","z-index":4,"font-size":10,"text-align":"center",color:"white",width:30});this._loadingIndicator=new Tn.Ui.LoadingIndicator({width:30,height:30,delay:0.08,duration:0.3,pause:0.2});this._loadingIndicator.getElement().css({margin:"auto"});this._loadingElement.append(this._loadingIndicator.getElement());this._loadingElement.append("<br/>loading ...");this._loadingElement.hide();this._updateImageDimension()},setPosition:function _(b,a){this._element.css({position:"absolute",left:b,top:a})},setSize:function _(b,a){this._element.css({width:b,height:a});this._updateImageDimension()},loadImage:function _(a){if(a===null){if(this._currentImage!==EMPTY){this._currentImage.html.remove()}this._nextImageSrc=EMPTY,this._currentImageSrc=EMPTY,this._pendingImageSrc=EMPTY,this._currentImage=EMPTY}else{if(this._currentImageSrc!==a&&this._nextImageSrc!==a){if(this._inTransition){this._pendingImageSrc=a}else{this._loadImage(a)}}else{this.OnImageLoaded.trigger(new Tn.Event())}}},_loadImage:function _(b){var a=this;this._loadingElement.stop(true);this._loadingElement.delay(600).fadeIn(300);this._nextImageSrc=b;this._nextImageImg=new Image();this._nextImageImg.onload=function(){if(a._nextImageSrc===b){a._imageLoaded(b)}};this._nextImageImg.src=b},_imageLoaded:function _(b){this.OnImageLoaded.trigger(new Tn.Event());this._loadingElement.stop(true).fadeOut(300);var a={html:this._imageElement.clone(),src:b,orgWidth:this._nextImageImg.width,orgHeight:this._nextImageImg.height,width:this._nextImageImg.width,height:this._nextImageImg.height};if(this._currentImage===EMPTY){this._currentImage=a;this._currentImage.html.css({"z-index":1})}else{this._nextImage=a;this._nextImage.html.css({"z-index":2,opacity:1});this._nextImage.html.hide()}a.html.find("img").attr({src:a.src,width:a.width,height:a.height});this._imageContainer.append(a.html);if(this._nextImage!==EMPTY){this._beginTransition()}else{this._updateImageDimension()}},_beginTransition:function _(){var a=this;this._inTransition=YES;this._currentImage.html.fadeOut(500);this._nextImage.html.fadeIn(500,$j.proxy(this,"_transitionFinished"))},_transitionFinished:function _(){var a=this._pendingImageSrc;this._pendingImageSrc=EMPTY;this._nextImage.html.css({"z-index":1,opacity:1});this._currentImage.html.remove();this._currentImage=this._nextImage;this._nextImage=EMPTY;this._inTransition=NO;if(a!==EMPTY){this.loadImage(a)}},_updateImageDimension:function _(){var b,a;a=(this._imageContainer.innerHeight()-this._loadingElement.outerHeight())/2;b=(this._imageContainer.innerWidth()-this._loadingElement.outerWidth())/2;this._loadingElement.css({left:b,top:a});if(this._nextImage!==EMPTY){this._updateImageElementDimension(this._nextImage)}if(this._currentImage!==EMPTY){this._updateImageElementDimension(this._currentImage)}},_updateImageElementDimension:function _(c){var h,f,i,e,g,d,b,a;h=this._imageContainer.innerWidth();f=this._imageContainer.innerHeight();i=h/f;e=c.width/c.height;g=e*f;if(g>h){g=h}if(g>c.orgWidth){g=c.orgWidth}d=g/e;a=(f-d)/2;b=(h-g)/2;c.html.css({top:a,left:b});c.html.find("img").css({width:g,height:d})}});Tn._addTemplate("Tn.Ui.ImagePanel",'<div>  <div tn:Name="_imageContainer">   <div tn:Name="_imageElement">    <img class="img-element" />   </div>  </div>  <div tn:Name="_imageOverlay">  </div>  <div tn:Name="_loadingElement">  </div> </div>');