Tn.Class({Class:"Tn.Ui.LoadingIndicator",Extends:"Tn.Ui.Element",_bar1:EMPTY,_bar2:EMPTY,_bar3:EMPTY,_options:EMPTY,_barAreaWidth:EMPTY,_barCount:3,_barWidth:EMPTY,_barHeight:EMPTY,_barGrowHeight:EMPTY,initialize:function _(a){try{arguments.callee.$super.apply(this,[])}catch(b){alert(b)}this._options=a;this._barList=$j([this._bar1.get(0),this._bar2.get(0),this._bar3.get(0)]);this._element.css({position:"relative",left:0,top:0,width:a.width,height:a.height,color:"white"});this._barAreaWidth=Math.floor(a.width/3);this._spacingWidth=Math.floor(this._barAreaWidth/2/2)*2;this._barGrowHeight=Math.floor(a.width/2/2);this._barHeight=a.height-this._barGrowHeight*2;this._barWidth=this._barAreaWidth-this._spacingWidth;this._barList.css({position:"absolute",top:this._barGrowHeight,border:"1px solid rgb(220,220,220)","background-color":"rgb(255,255,255)",width:this._barWidth,height:this._barHeight,"border-radius":(this._barWidth/2)+"px","font-size":0});this._barList.width(this._barWidth-2);this._bar1.css({left:this._spacingWidth/2});this._bar2.css({left:this._spacingWidth/2+this._barAreaWidth});this._bar3.css({left:this._spacingWidth/2+this._barAreaWidth*2});this._timer=window.setInterval($j.proxy(this,"_animate"),10);this._startTime=(new Date()).getTime();this._totalTime=(a.delay+a.duration*(this._barCount-1)+a.pause)*1000},_animate:function _(){var d,c,f,h,a,e,g,b;d=(new Date()).getTime();c=((d-this._startTime)%this._totalTime)/1000;f=0;h=0;for(e=0;e<this._barCount;e++){f+=this._options.delay;if(c>f&&c<f+this._options.duration){h=(c-f)/this._options.duration;a=Math.round((this._barHeight+this._barGrowHeight*(1-h)*2)/2)*2;g=70+Math.round(150*h);b=150+Math.round(100*h);this["_bar"+(e+1)].css({"border-color":"rgb("+g+","+g+","+g+")","background-color":"rgb("+b+","+b+","+b+")",top:(this._options.height-a)/2,height:a})}else{this["_bar"+(e+1)].css({"border-color":"rgb(220,220,220)","background-color":"rgb(255,255,255)",top:this._barGrowHeight,height:this._barHeight})}}}});Tn._addTemplate("Tn.Ui.LoadingIndicator",'<div>  <div tn:Name="_bar1">  </div>  <div tn:Name="_bar2">  </div>  <div tn:Name="_bar3">  </div> </div>');
