Tn.Class({Class:"Tn.Ui.ImagePanel",Extends:"Tn.Ui.Element",_element:EMPTY,_img:EMPTY,_lastImage:EMPTY,_lastImageElement:EMPTY,_imageElement:EMPTY,_loadingTimer:EMPTY,_loadingInfoVisible:NO,_nextImgSrc:EMPTY,_currentImgSrc:EMPTY,_inTransition:NO,$event$OnImageLoaded:EMPTY,initialize:function _(b){var a=this;this._element=$j("<div>");this._overlay=$j("<div>");this._element.css({position:"relative",left:0,top:0,overflow:"hidden",border:"1px solid rgb(120,120,120)"});this._overlay=$j("<div>").css({position:"absolute",left:0,top:0,width:"100%",height:"100%","z-index":6});this._loadingInfo=$j("<div>").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"});this._loadingInfo.html("<img src='http://api.artisticon.de/jslib/css/loader.light.gif' /><br/>Bild wird geladen...");this._loadingInfo.hide();this._element.append(this._loadingInfo);this._element.append(this._overlay)},loadImage:function _(b){var a=this;if(b!==this._currentImgSrc){if(!this._inTransition){if(!b){this._img=null;this._lastImage=null;if(this._lastImageElement!==EMPTY){this._lastImageElement.remove()}if(this._imageElement!==EMPTY){this._imageElement.remove()}this._lastImageElement=EMPTY;this._imageElement=EMPTY;this._currentImgSrc=EMPTY}else{this._currentImgSrc=b;this._nextImgSrc=EMPTY;this._lastImage=this._img;this._img=new Image();if(this._loadingTimer===EMPTY&&!this._loadingInfoVisible){this._loadingTimer=window.setTimeout(function(){a._showLoadingBox()},500)}this._img.onload=function(){a._imageLoaded(b)};this._img.src=b}}else{this._nextImgSrc=b}}},_showLoadingBox:function _(){this._updateImageDimension();this._loadingTimer=EMPTY;this._loadingInfoVisible=YES;this._loadingInfo.fadeIn(500)},_hideLoadingBox:function _(){this._loadingTimer=EMPTY;this._loadingInfoVisible=NO;this._loadingInfo.fadeOut(500)},_imageLoaded:function _(c){var b=this;if(c===this._currentImgSrc){var a=500;this.OnImageLoaded.trigger(new Tn.Event());this._inTransition=YES;if(this._loadingTimer){window.clearTimeout(this._loadingTimer);this._loadingTimer=EMPTY}if(this._loadingInfoVisible){this._hideLoadingBox()}this._lastImageElement=this._imageElement;if(this._lastImageElement!==EMPTY){this._lastImageElement.fadeOut(a)}this._imageElement=$j("<img>");this._imageElement.css({position:"absolute"});this._imageElement.attr("src",c);this._imageElement.hide();this._element.append(this._imageElement);this._imageElement.fadeIn(a,$j.proxy(this,"_transitionComplete"));this._updateImageDimension()}},_transitionComplete:function _(){this._inTransition=NO;this._lastImage=EMPTY;if(this._lastImageElement!==EMPTY){this._lastImageElement.remove()}if(this._nextImgSrc){this.loadImage(this._nextImgSrc)}},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()},_updateImageDimension:function _(){this._loadingInfo.css({left:(this._element.innerWidth()-this._loadingInfo.innerWidth())/2,top:(this._element.innerHeight()-this._loadingInfo.innerHeight())/2});this._updateImageDimension2(this._lastImageElement,this._lastImage);this._updateImageDimension2(this._imageElement,this._img)},_updateImageDimension2:function _(d,c){var i,g,j,f,h,e,b,a;i=this._element.innerWidth();g=this._element.innerHeight();if(d&&c&&c.width){j=i/g;f=c.width/c.height;h=f*g;if(h>i){h=i}e=h/f;a=(g-e)/2;b=(i-h)/2;d.css({top:a,left:b,width:h,height:e})}}});