var dTooltip=$class({ el:null, type:'', target:'', cel:null, x:0, y:0, html:'', images:[], scope:null, _re:null, _wrap:null, _cont:null, _tpl:'<div class="js_tooltip pngbox">\ <div class="tpt">\ <div class="bpt">\ <div class="cont">\ {html}\ </div>\ <div class="bpc"></div>\ </div>\ </div>\ <div class="tcn"></div>\ <div class="bcn"></div>\ </div>', constructor:function(config) { $config(this,config); this.init(); }, init:function() { if(!this.el) throw new Error('No element for dTooltip'); this._re=new RegExp('(^|\\s)'+this.target+'(\\s|$)'); this._wrap=$u.el('div',{ id:'dTooltipWrap', className:'hidden', innerHTML:this._tpl }); this._cont = $q.down(this._wrap, '.cont'); document.body.appendChild(this._wrap); this.attachEventHandlers(); if(this.images.length) $e.add(window,'load',$u.preloadImages.bind(null,this.images)); }, attachEventHandlers :function() { $e.add(this.el,'mouseover',this.test,this); $e.add(this.el,'mouseout',this.test,this); $e.add(this._wrap,'mouseout',this.test,this); }, detachEventHandlers :function() { $e.del(this.el,'mouseover',this.test,this); $e.del(this.el,'mouseout',this.test,this); $e.del(this._wrap,'mouseout',this.test,this); }, destroy:function() { this.detachEventHandlers (); $el.remove(this._wrap); this._wrap=null; this._cont=null; this.el=null; }, test:function(el) { var e=$e.e; if(e.type=='mouseout') el=e.relatedTarget||e.toElement; var p=el, cel=this.cel, w=this._wrap, b=document.body, re=this._re; if(el==cel) return; while(p && p!=cel && p!=w && !re.test(p.className) && p!=b) p=p.parentNode; if(!p || p==b) this.hide(); else if(p!=w && p!=cel) this.show(p); }, show:function(el) { this.cel=el; var config=this.format.call(this.scope || this,$(el)); if(el) el.title=''; this._cont.innerHTML=config.html; this._wrap.style.left=config.left+'px'; this._wrap.style.top=config.top+'px'; this._wrap.className=this.type; }, hide:function() { this._wrap.className='hidden'; this.cel=null; }, format:function(el) { var e=$e.e; var html=el.title; var xy=$e.pointerXY(e); return { left:xy.x, top:xy.y, html:html }; } }); var SLUpdater = function (config) { $config(this, config); this.init(); }; SLUpdater.prototype = { spotlight: null, spotlightVars: null, sls: {}, slp_id: -1, submit_bn:null, params:{}, timeout: 8000, update_ts:0, profileUrl: '', secondUrl: '/sl/list-ws-json/', firstUrl: '/sl/ws/', init: function() { if(!this.spotlightVars) return; this.sls = this.spotlightVars && this.spotlightVars.sls || {}; this.params = this.spotlightVars.params; if (this.spotlightVars.items) this.items = eval('('+this.spotlightVars.items+')'); else this.items = []; this.update_ts = this.params.ts; this.requestParams = { language_id: this.params.lid, spotlight_id: this.params.sid }; this.firstRequest_fn = this.request1.bind(this); this.timerInt = setTimeout(this.firstRequest_fn, this.timeout); }, destroy: function() { clearTimeout(this.timerInt); if (this._t1) { this._t1.abort(); this._t1 = null; } if (this._t2) { this._t2.abort(); this._t2 = null; } this.spotlight = null; }, getProfileUrl: function(r) { var url = window.location.protocol+'\/\/' + (this.params.b?('{login}.' + this.params.s) : (this.params.s + '/{login}')); return url; }, request1: function() { this.getRequest1Transport().request(); }, getRequest1Transport: function(transport) { if (this._t1) return this._t1; this._t1 = new $r(this.firstUrl,{ method: 'get', auto:false, params:this.requestParams, error:this.request1Error, readyEx: this.firstRequestHandler }, this); return this._t1; }, firstRequestHandler : function(transport) { var ts = transport.transport.responseText; if(ts != this.update_ts) { this.update_ts = ts; this.request2(ts); } else { this.runTimeout(); } }, request1Error: function() { this.runTimeout(); }, runTimeout: function() { this.timerInt = setTimeout(this.firstRequest_fn, this.timeout); }, request2: function(ts) { this.getRequest2Transport().request(); }, getRequest2Transport: function(ts) { if (this._t2) return this._t2; this._t2 = new $r (this.secondUrl,{ method: 'get', auto:false, params:this.requestParams, ready: this.secondRequestHandler }, this); return this._t2; }, secondRequestHandler: function(res) { this.items = res; if (this.spotlight) { this.spotlight.updateLayout(this.items); this.timerInt = setTimeout(this.firstRequest_fn, this.timeout); } } }; var SLTooltip = $class(dTooltip,{ tooltipHtmlContent: '', userUrl: '', leftOfs: 0, spotlight: null, visible: false, init:function() { if(!this.el) throw new Error('No element for dTooltip'); this._re=new RegExp('(^|\\s)'+this.target+'(\\s|$)'); this._wrap=$u.el('div',{ id:'dTooltipWrap', className:'hidden', innerHTML:this._tpl }); this._cont = $q.down(this._wrap, '.cont'); $e.add(window,'load',$u.preloadImages.bind(null,[JSRoot + 'i/box-spot.png'])); }, delayedDOMChange: function() { document.body.appendChild(this._wrap); this.attachEventHandlers(); }, format: function(userUrl, html, x) { var tooltipHtmlContent = html.replace('<mask>', userUrl), tl = $el.cumulativeOffset(this.el); return { html: tooltipHtmlContent, left: tl.left + 0 + x +40, top: tl.top + 82+ (this.is_wizard?(document.documentElement.scrollTop || document.body.scrollTop) - (document.documentElement.clientTop || 0):0) }; }, mouseOverHandler: function() { this.mouseOvered = true; }, mouseOutHandler: function() { var e = $e.e, el=e.relatedTarget||e.toElement; if (!el) { this.hide(); return; } var n = el; while (n && n != document.body) { if (n == this.el) { this.mouseOvered = false; return; } if (n == this._wrap) { this.mouseOvered = true; return; } try { n = n.parentNode; } catch (e) { n = null; } } this.hide(); }, show: function(x, tooltip_html, user_url) { var leftOfs = parseInt(x) - 25, config=this.format(user_url, tooltip_html, leftOfs); this._cont.innerHTML=config.html; var sl_add_btn_class = ''; try { if (Spotlight.slLine.focI == 0) sl_add_btn_class = ' sl_add_btn_tooltip'; } catch (e) { } this._wrap.className=this.type + sl_add_btn_class; this.fit(config); this._wrap.style.left=config.left+'px', this._wrap.style.top=config.top+'px', this.mouseOvered = false, this.visible = true; }, fit:function(config) { var tl=$el.cumulativeOffset(this.el), t=tl.left+this.el.offsetWidth-(config.left+this._wrap.offsetWidth); if(t<20) config.left=config.left+t-60; }, hide:function() { this.mouseOvered = false, this._wrap.style.top='-1000px', this.cel=null; if (this.visible) { this.visible = false; this.spotlight.checkFromTooltip(); } }, attachEventHandlers : function() { $e.add(this._wrap,'mouseout',this.mouseOutHandler,this); $e.add(this._wrap,'mouseover',this.mouseOverHandler,this); }, detachEventHandlers :function() { $e.del(this._wrap,'mouseout',this.mouseOutHandler,this); $e.del(this._wrap,'mouseover',this.mouseOverHandler,this); } }); var SLLine=function(config) { $config(this, config); this.init(); }; SLLine.prototype={ spotlight: null, rightBorderDiv:null, cnvs: null, cnvs_wrap: null, items: [], profileURL: "", imgs: [], addBtnImg: null, imgNum: 9, minImgNum: 9, intrv: 3, min: 83, max: 110, originMinSize: 83, originMaxSize: 110, timeOut: 15, timerInt: -1, sp: null, focI: -1, leftOfs: 10, spLeft: 230, spTop: 0, spWidth: 800, spHeight: 120, canvasImgTop: 15, vmlImgTop: 4, imgTop: 30, firstImgLeft: 17, addBtnLeft: 17, applyTimeoutInt:0, applyTimeout: 15, zoomDuration: 250, zoomOutDuration: 250, opacityDuration: 300, updateDuration: 1000, normalSize: 890, zoom: 1, startAlpha: 100, tooltipImgIndex: -1, need2ShowTooltip: -1, need2RemovePreviousItems: false, updateIsAvailable:true, tempUpdateLayoutParams: null, canvasImgBackground: "rgb(228,217,255)", ofsAnimationMode: false, ie6Mode: false, subscribedAnimQueue: [], init: function () { this.resize_binded=this.resize.bind(this), this.timer_binded=this.timer.bind(this), this.showTooltip2_binded=this.showTooltip2.bind(this), this.opacityWaveStep_binded=this.opacityWaveStep.bind(this), this.fullUpdateStart_binded=this.fullUpdateStart.bind(this); $e.on({ '.sl_add_btn, * .sl_add_btn_tooltip, .sl_add_btn_tooltip': this.openWizard }, this); this.rightBorderDiv = $('sl_plug'); this.imgNum = this.items.length < this.minImgNum ? this.items.length : this.minImgNum; this.updateImgLeft(); this.setupZoom(); if(/*@cc_on!@*/false) { this.zoomDuration = 350; this.zoomOutDuration = 400; this.applyTimeout=10, this.timeOut=10, this.imgTop=this.vmlImgTop, this.applyChanges=this.applyChangesVML; $e.add(window, 'resize', this.resizeIE, this); this.initVML(); } else { this.zoomDuration = 250; this.zoomOutDuration = 250; this.applyTimeout=20, this.timeOut=20; this.imgTop=this.canvasImgTop, this.applyChanges=this.applyChangesCanvas; $e.add(window, 'resize', this.resize, this); this.initCanvas(); } this.applyChanges_bind=this.applyChanges.bind(this); }, destroy: function () { this.stopTimer (); this.stopApplyChangesTimer (); clearInterval(this.showTooltipInt); clearInterval(this.resizeIEInt); clearInterval(this.zoomOutInt); clearInterval(this.showTooltipInt); clearInterval(this.fullUpdateStartInt); clearInterval(this.opacityWaveInt); if(/*@cc_on!@*/false) { $e.del(window, 'resize', this.resizeIE, this); $e.del(this.sp, 'mouseover', this.mouseOver, this); $e.del(this.sp, 'mouseout', this.mouseOut, this); } else { $e.del(window, 'resize', this.resize, this); $e.del(this.cnvs_wrap, 'mousemove', this.mouseMove, this); $e.del(this.cnvs_wrap, 'mouseout', this.cnvsMouseOut, this); $e.del(this.cnvs_wrap, 'click', this.canvasClickHandler, this); } var imgs=this.imgs; if (this.addBtnImg) { this.addBtnImg.destroy(); } if (imgs) { for (var i=0, imgNum=this.imgNum; i < imgNum; i++) { var d=imgs[i]; d.destroy(); } } this.addBtnImg=this.subscribedAnimQueue=this.imgs=this.rightBorderDiv=this.VMLPattern=this.cnvs=this.cnvs_wrap=this.sp=this.ctx=null; return true; }, initCanvas: function () { var cnvs_wrap=$("cnvs_wrap"), cnvs=$("cnvs"); this.cnvs_wrap =cnvs_wrap, this.cnvs=cnvs; var tl=$el.cumulativeOffset(cnvs_wrap); this.spLeft=tl.left, this.spTop=tl.top, this.spWidth=parseInt(cnvs_wrap.offsetWidth), this.spHeight=parseInt(cnvs_wrap.offsetHeight), cnvs.width=this.spWidth, cnvs.height=this.spHeight, this.sp=cnvs; var ctx=cnvs.getContext('2d'); this.ctx=ctx; ctx.fillStyle=this.canvasImgBackground, ctx.lineWidth=1, ctx.globalAlpha=this.startAlpha / 100, this.prevCtxAlpha=this.startAlpha / 100; var img=$("img_add_btn"); img.parentNode.style.display='none'; var d=this.newImg(this.addBtnLeft); d.sp=this; d.image=img; this.addBtnImg=d; d.draw(); var ofs=this.firstImgLeft; for (var i=0; i < this.imgNum; i++) { var img=$("img" + i); img.parentNode.style.display='none'; var d=this.newImg(ofs); d.sp=this, d.image=img, d.draw(), this.imgs[this.imgs.length]=d; ofs += this.min + this.intrv; } $e.add(cnvs_wrap, 'mousemove', this.mouseMove, this); $e.add(cnvs_wrap, 'mouseout', this.cnvsMouseOut, this); $e.add(cnvs_wrap, 'click', this.canvasClickHandler, this); }, initVML: function () { var sp=$("sp"), tl=$el.cumulativeOffset(sp); this.sp=sp, this.spLeft=tl.left, this.spTop=tl.top, this.spWidth=parseInt(sp.offsetWidth), this.spHeight=parseInt(sp.offsetHeight), this.ie6Mode=_ua=='ie6'; var img=$("img_add_btn"), vml_img=$("vml_img_add_btn"), anchor=img.parentNode; anchor.title='', img.index=0, vml_img.index=0, anchor.index=0; var d=this.newImg(this.addBtnLeft, anchor, img, vml_img); d.sp=this, this.addBtnImg=d, d.anchor=anchor; d.a.elV = 0; d.a.v = 100; d.drawVMLDirect(); var ofs=this.firstImgLeft; for (var i=0; i < this.imgNum; i++) { var img=$("img" + i), vml_img=$("vml_img" + i), anchor=img.parentNode; img.index=i+1, vml_img.index=i+1, anchor.index=i+1, anchor.title=''; var d=this.newImg(ofs, anchor, img, vml_img); d.sp=this, this.imgs[this.imgs.length]=d, d.anchor=anchor; d.drawVMLDirect(); ofs += this.min + this.intrv; } this.initVMLPattern(); $e.add(sp, 'mouseover', this.mouseOver, this); $e.add(sp, 'mouseout', this.mouseOut, this); }, resizeIEInt: 0, resizeIE: function() { if (this.resizeIEInt) clearInterval(this.resizeIEInt); this.resizeIEInt=setTimeout(this.resize_binded, 20); }, resize: function() { this.setupZoom(); }, updateImgLeft: function(skipImageUpdate) { this.firstImgLeft = this.addBtnLeft + this.min + this.intrv; }, updateRightBorder: function() { var rightBorder = this.firstImgLeft + (this.intrv + this.min) * this.minImgNum; var rightBorderW = this.spWidth - rightBorder + 10; this.rightBorderDiv.style.width = rightBorderW + 'px', this.rightBorderDiv.style.left = rightBorder + 'px'; }, setupZoom: function(skipImageUpdate) { var normalSize=this.normalSize; var slline=$('slline'); var tl=$el.cumulativeOffset(slline); this.spLeft=tl.left; this.spWidth=parseInt(slline.offsetWidth); var currentSize=this.spWidth > normalSize ? normalSize : this.spWidth; this.zoom=Math.round((currentSize * 100 / normalSize)) / 100; var newMinSize=Math.round( this.originMinSize * this.zoom), newMaxSize=Math.round( this.originMaxSize * this.zoom); if (newMinSize != this.min || newMaxSize != this.max) { this.min=newMinSize, this.max=newMaxSize; this.updateImgLeft(); if (skipImageUpdate) return; if (this.imgs && this.imgs.length > 0) { var imgNum=this.imgNum, imgs=this.imgs, ofs=this.firstImgLeft; for (var i=0; i < imgNum; i++) { var d=imgs[i]; d.left.v=ofs; ofs += this.min + this.intrv; } this.setupDestSize(-1000, this.min, 250); } } }, newImg: function(ofs, anchor, img, vml_img) { var d=new sIm ({ w: { elV: this.min,v: this.min,d: this.min,s: this.min,top: this.imgTop,elTop: this.imgTop,dur: this.zoomDuration }, a: {elV: this.startAlpha,d: this.startAlpha,s: this.startAlpha,v: this.startAlpha,dur: this.opacityDuration}, left: {elV: ofs,d: ofs,s: ofs,v: ofs,dur: this.zoomDuration }, anchor: anchor, image: img, vml_image: vml_img }); return d; }, valueByTime: function(t,b,c,d) { var v=Math.round( (c - b) *((t=t/d-1)*t*t+1)+b); if (b > c) { if (v < c ) v=c; } else { if (v > c) v=c; } return v; }, sizeByTime: function(t,b,c,d) { var v=Math.round( (c - b) *((t=t/d-1)*t*t+1)+b); if (b > c) { if (v < c ) v=c; } else { if (v > c) v=c; } if (v < this.min) { v=this.min; } if (v > this.max) { v=this.max; } return v; }, startTimer: function () { clearInterval(this.timerInt); this.timerInt=setInterval(this.timer_binded, this.timeOut); this.startApplyChangesTimer(); }, stopTimer: function () { clearInterval(this.timerInt); this.applyChanges(); this.stopApplyChangesTimer(); }, setupDestLeft: function (dur) { var dur=dur || this.zoomDuration, sum=0, minSum=this.min * this.imgNum, imgs=[this.addBtnImg].concat(this.imgs), imgNum=this.imgNum + 1; for (var i=0; i < imgNum; i++) { var d=imgs[i]; sum += d.w.d; } var firstImgLeft = this.addBtnLeft, curTime=new Date().getTime(), focI=this.focI; if (sum > minSum && focI >= 0 && focI < imgs.length) { var d=imgs[focI], focusedPos= firstImgLeft + focI * (this.min + this.intrv) - Math.round( (d.w.d - this.min)/ 2); d.left.d=focusedPos, d.left.startTime=curTime, d.left.s=d.left.v, d.left.dur=dur; var ofs= focusedPos + d.w.d + this.intrv; for (var i=focI + 1; i < imgNum; i++) { var d=imgs[i]; d.left.d =ofs, d.left.s=d.left.v, d.left.dur=dur, d.left.startTime=curTime; ofs += d.w.d + this.intrv; } var ofs=focusedPos; for (var i=focI - 1; i >= 0 ; i--) { var d=imgs[i]; ofs -= d.w.d + this.intrv; d.left.d =ofs, d.left.startTime=curTime, d.left.dur=dur, d.left.s=d.left.v; } } else { var ofs=0; for (var i=0; i < imgNum; i++) { var d=imgs[i]; d.left.d =ofs + firstImgLeft, d.left.startTime=curTime, d.left.dur=dur, d.left.s=d.left.v; ofs += d.w.d + this.intrv; } } }, opacityWaveDelay: 30, opacityWaveInt: -1, imgWaveIndex: 0, animStep: function () { var need2ProcessMore=false, curTime=new Date().getTime(), imgNum=this.imgNum+1, imgs=[this.addBtnImg].concat(this.imgs), numChanges=0; var wSum=0; for (var i=0; i < imgNum; i++) { var d=imgs[i], changed=false; if (d.a.startTime) { if (d.a.v != d.a.d) { var newAlpha=this.valueByTime(curTime -d.a.startTime,d.a.s, d.a.d, d.a.dur); if (d.a.v != newAlpha) { d.changed=true, d.a.v=newAlpha, changed=true; } if (newAlpha != d.a.d) need2ProcessMore=true; else d.a.startTime=0; } else d.a.startTime=0; } var need2Left = false; if (d.w.startTime) { if (d.w.v != d.w.d) { need2Left = true; var newSize=this.sizeByTime(curTime -d.w.startTime,d.w.s,d.w.d,d.w.dur); var newLeft=this.valueByTime(curTime -d.w.startTime,d.left.s,d.left.d,d.left.dur); if ((Math.abs(d.w.d - d.w.s) != this.max - this.min) || ((Math.abs(newSize - d.w.v) >=2) ) || ((Math.abs(d.left.d - d.left.s)) >= this.min) || (newSize == d.w.d)) { d.w.v=newSize, d.w.top=this.imgTop - Math.round((d.w.v - this.min) / 2), d.changed=true, changed=true; if (d.left.v != d.left.d ) { if (d.left.v != newLeft) { d.changed=true, d.left.v=newLeft, changed=true; } } } } if (d.left.startTime && !need2Left) { if (d.left.v != d.left.d ) { var newLeft=this.valueByTime(curTime -d.w.startTime,d.left.s,d.left.d,d.left.dur); if (d.left.v != newLeft) { d.changed=true, d.left.v=newLeft, changed=true; } if (newLeft != d.left.d) need2ProcessMore=true; else d.left.startTime=0; } } if (d.w.v == d.w.d && d.w.d == this.max && this.tooltipImgIndex != i) { this.need2ShowTooltip=i; } if (d.w.v != d.w.d || d.left.v != d.left.d) need2ProcessMore=true; else d.w.startTime=0; } wSum += d.w.v; if (changed) numChanges++; } this.numChanges=numChanges, this.need2ProcessMore=need2ProcessMore; if (numChanges > 0 && !need2ProcessMore && wSum == imgs.length * this.min) { if (!this.updateIsAvailable && !this.spotlight.slTooltip.visible) { this.processDelayedUpdate(); } } if (!need2ProcessMore && this.ofsAnimationMode) this.stopOfsAnimationEvent(); return need2ProcessMore; }, showTooltip: function() { if (this.need2ShowTooltip == -1) return; this.showTooltipInt=setTimeout(this.showTooltip2_binded, 150); }, showTooltip2: function() { if (!this.imgs || this.need2ShowTooltip == -1 || this.need2ProcessMore || this.need2ShowTooltip != this.focI) return; var simIndex=this.need2ShowTooltip; this.need2ShowTooltip=-1; this.tooltipImgIndex=simIndex; if (simIndex == 0) { var sim=this.addBtnImg; var tooltipStr=this.spotlight.addBtnToolip; var userUrl=''; } else { var sim=this.imgs [simIndex - 1]; var item=this.items[simIndex - 1]; var tooltipStr=item.tooltip; var userUrl=this.profileURL.replace('{login}', item.login); } var leftOfs=sim.left.elV; this.spotlight.tooltip(tooltipStr, leftOfs, userUrl); }, hideTooltip: function() { this.tooltipImgIndex=-1; this.spotlight.tooltip_hide(); }, applyChangesCanvas: function () { this.processSubscribedAnimQueue(); if (this.cnvs.width != this.spWidth) { this.cnvs.width=this.spWidth, this.ctx.fillStyle=this.canvasImgBackground; this.fullCanvasRedraw(); return; } if (this.numChanges == 0) return; if (this.numChanges <= 4) this.fullCanvasRedraw(); else this.fullCanvasRedraw(); this.numChanges=0; if (this.need2ShowTooltip >=0) this.showTooltip(); }, canvasRedrawByImages: function () { var imgs=this.imgs, ctx=this.ctx, changes=this.changes; for (var i=0, n= this.imgNum; i < n; i++) { var d=imgs[i]; if (d.changed) { ctx.clearRect(d.left.elV - 2, d.w.elTop - 2, d.w.elV + 4, d.w.elV + 4); d.w.elV=d.w.v, d.left.elV=d.left.v, d.w.elTop=d.w.top, d.a.elV=d.a.v; if (d.a.elV / 100 != this.prevCtxAlpha) { this.prevCtxAlpha=d.a.elV / 100; ctx.globalAlpha=this.prevCtxAlpha; } d.draw(); } } var d = this.addBtnImg; if (d.changed) { ctx.clearRect(d.left.elV - 2, d.w.elTop - 2, d.w.elV + 4, d.w.elV + 4); d.w.elV=d.w.v, d.left.elV=d.left.v, d.w.elTop=d.w.top, d.a.elV=d.a.v; if (d.a.elV / 100 != this.prevCtxAlpha) { this.prevCtxAlpha=d.a.elV / 100; ctx.globalAlpha=this.prevCtxAlpha; } } d.draw(); }, fullCanvasRedraw: function () { var imgs=this.imgs; var ctx=this.ctx; ctx.clearRect(0, 0, this.spWidth, this.spHeight); for (var i=0, n= this.imgNum; i < n; i++) { var d=imgs[i]; d.w.elV=d.w.v, d.left.elV=d.left.v, d.w.elTop=d.w.top, d.a.elV=d.a.v; d.elFocused= d.focused; if (d.a.elV / 100 != this.prevCtxAlpha) { this.prevCtxAlpha=d.a.elV / 100; ctx.globalAlpha=this.prevCtxAlpha; } d.draw(); } var d = this.addBtnImg; d.w.elV=d.w.v, d.left.elV=d.left.v, d.w.elTop=d.w.top, d.a.elV=d.a.v; d.elFocused= d.focused; if (d.a.elV / 100 != this.prevCtxAlpha) { this.prevCtxAlpha=d.a.elV / 100; ctx.globalAlpha=this.prevCtxAlpha; } this.addBtnImg.draw(); }, applyChangesVML: function () { this.processSubscribedAnimQueue(); var imgs=this.imgs; if (!imgs) return; var d = this.addBtnImg; if (d.changed) d.draw(); for (var i=0, n= this.imgNum; i < n; i++) { var d= imgs[i]; if (d.changed) d.draw(); } this.numChanges=0; if (this.need2ShowTooltip >=0) this.showTooltip(); }, timer: function () { var need2ProcessMore=this.animStep(); if (!need2ProcessMore) this.stopTimer(); }, startApplyChangesTimer: function () { clearInterval(this.applyTimeoutInt); this.applyTimeoutInt= setInterval(this.applyChanges_bind, this.applyTimeout); }, subscribeAnim: function (animDesr) { if (!this.applyTimeoutInt) return false; this.subscribedAnimQueue[this.subscribedAnimQueue.length]=animDesr; return false; }, processSubscribedAnimQueue: function () { var a=this.subscribedAnimQueue; var n=a.length; if (!n) return; for (var i=0;i<n;i++) { var d=a[i]; var d2=null; if (d) { for (var k=n-1;k>=i;k--) { if (d2) { var d3=a[k]; if (d3.func==d.func && d3.scope==d.scope) a[k]=null; } else { d2=a[k]; if (d2.func!=d.func || d2.scope!=d.scope) d2=null; } } } d = d2 || d; d.func.call(d.scope, d.argmts[0]); } this.subscribedAnimQueue=[]; }, stopApplyChangesTimer: function () { clearInterval(this.applyTimeoutInt); this.applyTimeoutInt=0; }, getImageIndex: function (clientX, clientY) { var clientX=clientX - this.spLeft; var clientY=clientY - this.spTop; var descr=this.addBtnImg; if (clientX >= descr.left.elV && clientX < descr.left.elV + descr.w.elV) return 0; for (var i=0, imgs=this.imgs, n=imgs.length; i < n; i++) { var descr= imgs[i]; if (clientX >= descr.left.elV && clientX < descr.left.elV + descr.w.elV) { return i+1; } } return -1; }, openWizard: function () { Spotlight.ovlOpen(); }, spMouseOver: false, imageMouseOverIndex: -1, canvasClickHandler: function () { this.mouseMove(); if (this.focI == 0) { this.openWizard (); } else if (this.focI > 0 && this.focI - 1 < this.items.length) { var item=this.items[this.focI-1]; window.location.href=this.profileURL.replace('{login}', item.login); } }, mouseMove: function () { var event=$e.e, clientX=event.clientX, clientY=event.clientY; if (clientX >= this.spLeft && clientX < this.spLeft + this.spWidth) { this.spMouseOver=true; var imageIndex =this.getImageIndex(clientX, clientY); if (imageIndex == -1 && this.imageMouseOverIndex != -1) { this.imageMouseOverIndex=-1; this.mouseOut({ toElement: this.sp}); this.cnvs_wrap.href="#"; } else if (imageIndex != -1 && imageIndex != this.imageMouseOverIndex) { this.imageMouseOverIndex=imageIndex; this.imageMouseOver({index : imageIndex}); } } else { if (this.spMouseOver) { this.imageMouseOverIndex=-1; this.spMouseOver=false; this.mouseOut({toElement: null}); this.cnvs_wrap.href="#"; } } }, mouseOver: function (event) { var event=$e.e, el=event.target || event.srcElement; if (el == this.sp) return; this.imageMouseOver(el); return true; }, _style_cursor: 'pointer', setupCursorStyle: function (v) { if (this._style_cursor != v) { this._style_cursor=v; this.cnvs_wrap.style.cursor=v; } }, imageMouseOver: function (el) { if (!el || el.index < 0 || el.index >= this.minImgNum+1) return; if (this.cnvs) { this.setupCursorStyle('pointer'); if (el.index >0) { var item=this.items[el.index-1]; this.cnvs_wrap.href=this.profileURL.replace('{login}', item.login); } else this.cnvs_wrap.href='#'; } this.focI=el.index; this.setupDestSize(this.focI, this.max); }, hasAsParent: function (el, parent) { var el=el; while (el && el != document.body) { if (el == parent) return true; try { el=el.parentNode; } catch (e) { return false; } } return false; }, cnvsMouseOut: function (event) { var event=$e.e; var toElement=event.relatedTarget || event.toElement; this.spMouseOver=false, this.imageMouseOverIndex=-1, this.focI=-1; var toTooltip = this.tooltipCheck(event); this.tooltipImgIndex=-1; if (!toTooltip) this.setupDestSize(-1000, this.min, this.zoomOutDuration); }, mouseOut: function (event) { if(/*@cc_on!@*/false) var event=$e.e; else { var event=event || $e.e; } var toElement=event.relatedTarget || event.toElement; if (this.cnvs && (!toElement || !toElement.index)) { this.setupCursorStyle('default'); } if (/*@cc_on!@*/true) { if (toElement == this.cnvs) { return; } } if (this.hasAsParent(toElement, this.sp) || (toElement && toElement.index)) return true; if (/*@cc_on!@*/false) { if (!toElement || (!toElement.index && toElement.index != 0)) { this.spMouseOver=false, this.imageMouseOverIndex=-1, this.focI=-1; var toTooltip = this.tooltipCheck(event); this.tooltipImgIndex=-1; if (!toTooltip) this.setupDestSize(-1000, this.min, this.zoomOutDuration); } } return true; }, tooltipCheck: function (e) { var el=e.relatedTarget || e.toElement; if (!el) { this.hideTooltip(); return false; } var tooltipF = this.hasAsParent(el, this.spotlight.slTooltip._wrap); if (!tooltipF) this.hideTooltip(); return tooltipF; }, zoomOutInt: 0, zoomOut: function (imgIndex, size, dur) { var imgIndex=imgIndex, size=size, dur= dur, scope=this; clearInterval(this.zoomOutInt); this.zoomOutInt=setTimeout(function () { scope.setupDestSize(imgIndex, size, dur); }, 500); }, setupDestSize: function (imgIndex, size, dur) { this.stopTimer(); if (this.zoomOutInt) { clearInterval(this.zoomOutInt); this.zoomOutInt=0; } var dur=dur || this.zoomDuration; var imgs=[this.addBtnImg].concat(this.imgs); if (!imgs) return; if (imgIndex >=0) { this.updateIsAvailable=false; } var curTime=new Date().getTime(), focI=this.focI; for (var i=0, imgNum=this.imgNum+1; i < imgNum; i++) { var d =imgs[i]; d.focused=focI == i, d.w.startTime=curTime, d.w.s=d.w.v, d.w.dur=dur; if (i != imgIndex) { d.w.d=this.min; if (d.w.d < this.min) d.w.d= this.min; } else d.w.d=size; } this.setupDestLeft(dur); this.startTimer(); }, identical: function (a) { for (var i=0, n=a.length; i < n; i++) { var item=a[i]; if (this.getItemIndexByValues(this.items, item) != i) { return false; } } return true; }, updateLayout: function (sljson) { if (!this.updateIsAvailable) { this.tempUpdateLayoutParams=sljson; return; } var newItems=[]; if (sljson instanceof Array) for(var i=0; i < sljson.length; i++){ var item=sljson[i]; newItems[newItems.length]=item; } else for(var itemKey in sljson) { var item=sljson[itemKey]; newItems[newItems.length]=item; } if (this.identical(newItems)) { return; } this.hideTooltip(); clearInterval(this.opacityWaveInt); this.imageMouseOverIndex=-1; if(/*@cc_on!@*/true) this.setupZoom(true); if (!this.items || this.items.length == 0 || newItems.length < this.minImgNum) { this.redrawFullReplace(newItems, 0); } else { this.removePreviousItems (); var ofsIndex=this.getOffsetIndex (newItems); if (ofsIndex >= newItems.length - 1 || ofsIndex == 0) this.redrawFullReplace(newItems, ofsIndex); else this.redrawViaOfsAnimation (newItems, ofsIndex); } }, initVMLPattern: function () { if (this.VMLPattern) return this.VMLPattern; var anchor = this.addBtnImg.anchor; var pattern=anchor.cloneNode(true); var img=pattern.firstChild, vml_img=pattern.lastChild; img.className = "sp_img", vml_img.className = "sp_vml_img", img.src=JSRoot + 'i/blank.gif', vml_img.src=JSRoot + 'i/blank.gif'; this.VMLPattern = pattern; }, getVMLElem: function () { if (!this.VMLPattern) this.initVMLPattern(); var pattern=this.VMLPattern.cloneNode(true); return pattern; }, getImage4Update: function (ofs, imgSrc, profileURL) { if(/*@cc_on!@*/false) { var newEl=this.getVMLElem(); var curFirstElem= this.imgs[0].anchor; this.sp.insertBefore(newEl, curFirstElem); var img=newEl.firstChild, vml_img=newEl.lastChild; newEl.href=profileURL, newEl.style.zIndex = 1000, img.src= imgSrc, newEl.style.left = -1000; if (this.ie6Mode) vml_img.src= imgSrc; var d=this.newImg(ofs, newEl, img, vml_img); d.w.elV=-1, d.sp=this; } else { var d=this.newImg(ofs); var newEl=new Image(); var img=newEl; d.sp=this, d.image=newEl; img.src= imgSrc; } return d; }, startOfsAnimationEvent: function () { this.rightBorderDiv.style.display = 'block'; this.ofsAnimationMode = true; }, stopOfsAnimationEvent: function () { this.rightBorderDiv.style.display = 'none'; this.ofsAnimationMode = false; if (this.need2RemovePreviousItems) { this.removePreviousItems(); if(/*@cc_on!@*/true) this.fullCanvasRedraw(); } }, redrawViaOfsAnimation: function (newItems, ofsIndex) { this.updateRightBorder(); this.startOfsAnimationEvent(); var finalItemsArr=[].concat(this.items); for (var i=ofsIndex - 1; i >= 0; i--) { var item=newItems[i]; finalItemsArr.unshift(item); } this.items=finalItemsArr, this.need2RemovePreviousItems=true, this.imgNum=this.items.length; var ofs=this.firstImgLeft; var startTime=new Date().getTime(); for (var i=ofsIndex - 1; i >= 0 ; i--) { var item=this.items[i]; ofs -= this.min + this.intrv; var profileURL=this.profileURL.replace('{login}', item.login); var d=this.getImage4Update(ofs, item.url, profileURL); if(/*@cc_on!@*/false) { d.image.filters[0].opacity=100; } d.a.elV=0,d.a.d=100,d.a.v=100,d.a.s=100,d.a.startTime=startTime,d.a.dur = 3000; this.imgs.unshift(d); } for (var i=0, n=this.imgs.length; i < n; i++) { var d=this.imgs[i]; d.image.index=i+1; if(/*@cc_on!@*/false) { if (d.vml_image) d.vml_image.index=i+1; d.anchor.index=i+1; } } var startTime=new Date().getTime(); this.zoomOut(-10000, this.min, this.updateDuration); }, redrawFullReplace: function (newItems, ofsIndex) { this.removePreviousItems (); this.items4FullUpdate=newItems, this.d4FullUpdate=[]; var ofs=this.firstImgLeft; var newItemsArrCount = newItems.length > this.minImgNum ? this.minImgNum : newItems.length; for (var i=0; i < newItemsArrCount; i++) { var item=newItems[i]; var profileURL=this.profileURL.replace('{login}', item.login); var d=this.getImage4Update(ofs, item.url, profileURL); d.image.index=i+1; if(/*@cc_on!@*/false) { d.image.filters[0].opacity=0; if (d.vml_image) d.vml_image.index=i+1; d.anchor.index=i+1; } ofs += this.min + this.intrv; d.a.elV=0,d.a.d=100,d.a.v=0,d.a.s=0; this.d4FullUpdate[this.d4FullUpdate.length]=d; } clearInterval(this.opacityWaveInt); this.imgNum = this.imgs.length; this.imgWaveIndex=this.imgNum - 1; this.hideBeforeUpdate=true; this.opacityWaveStep(); this.opacityWaveInt=setInterval(this.opacityWaveStep_binded, this.opacityWaveDelay); }, fullUpdateStart: function () { this.clear(); this.items=this.items4FullUpdate, this.items4FullUpdate=null, this.imgs=this.d4FullUpdate, this.d4FullUpdate=null, this.imgNum=this.items.length > this.minImgNum ? this.minImgNum : this.items.length; for (var i=0; i < this.imgNum; i++) { var item=this.items[i]; var d=this.imgs[i]; if(/*@cc_on!@*/false) { d.drawVMLDirect(); } } this.hideBeforeUpdate=false; clearInterval(this.opacityWaveInt); this.imgWaveIndex=this.imgNum - 1; this.opacityWaveStep(); this.opacityWaveInt=setInterval(this.opacityWaveStep_binded, this.opacityWaveDelay); }, fullUpdateStartInt: 0, opacityWaveStep: function () { var d=this.imgs[this.imgWaveIndex]; if (this.hideBeforeUpdate) { d.a.d=0, d.a.s=100; } else { d.a.d=100, d.a.s=0; } d.a.startTime=new Date().getTime(); if (this.imgWaveIndex > 0) { this.imgWaveIndex--; this.startTimer(); } else { clearInterval(this.opacityWaveInt); if (this.hideBeforeUpdate) { this.fullUpdateStartInt=setTimeout(this.fullUpdateStart_binded, 500); } } }, checkFromTooltip: function() { if (this.tempUpdateLayoutParams) this.processDelayedUpdate(); else this.setupDestSize(-1000, this.min, this.zoomOutDuration); }, processDelayedUpdate: function() { if (this.need2ProcessMore || this.focI >= 0) return; this.updateIsAvailable=true; if (!this.tempUpdateLayoutParams) return; var newItems=this.tempUpdateLayoutParams; this.tempUpdateLayoutParams=null; this.updateLayout(newItems); }, removePreviousItems: function () { var imgs=this.imgs; if (!imgs) return; for (var i=this.minImgNum, n=imgs.length; i < n; i++) { var d=imgs[i]; d.removeFromDOM(); d.destroy(); } this.items.splice (this.minImgNum, this.items.length - this.minImgNum); imgs.splice (this.minImgNum, imgs.length - this.minImgNum); this.imgNum=this.minImgNum; this.need2RemovePreviousItems=false; }, clear: function () { var imgs=this.imgs; for (var i=0, n=imgs.length; i < n; i++) { var d=imgs[i]; d.removeFromDOM(); d.destroy(); } this.imgs=[], this.imgNum=0; }, getItemIndexByValues: function (a, item) { for (var i=0, n=a.length; i < n; i++) { var v=a[i]; if (v.id == item.id) return i; } return -1; }, getOffsetIndex: function (newItemsArr) { var a=[]; var firstInd=-1; var newItemsArrCount = newItemsArr.length > this.minImgNum ? this.minImgNum : newItemsArr.length; for (var i=0, n=newItemsArr.length; i < n; i++) { var item=newItemsArr[i]; item.indexInCurrentItems=this.getItemIndexByValues(this.items, item); if (firstInd == -1 && item.indexInCurrentItems != -1) firstInd=i; } if (firstInd == -1) return this.items.length; for (var i=firstInd + 1, n=newItemsArr.length; i < n; i++) { var item=newItemsArr[i]; var prevItem=newItemsArr[i - 1]; if (prevItem.indexInCurrentItems != item.indexInCurrentItems - 1) return this.items.length; } return firstInd; } }; var sIm=function (config) { $config(this, config); this.init(); }; sIm.prototype={ changed: false, focused: false, elFocused: false, anchor: null, w: { elV: 0,v: 0, d: 0, s: 0, top: 0, elTop: 0, dur: 0, startTime: 0}, a: { elV: 0,d: 0, s: 0, v: 0, dur: 0, startTime: 0}, left: { elV:0,d: 0,s:0,v:0,dur:0,startTime: 0}, image: null, vml_image: null, imageComplete: false, sp: null, ie6Mode:false, init: function () { if(/*@cc_on!@*/false) { this.ie6Mode=_ua=='ie6'; this.draw=this.drawViaVML; if (this.ie6Mode) this.initVMLLoader(); } else { this.draw=this.drawViaCanvas; } }, destroy: function () { if(/*@cc_on!@*/false) { if (this.vml_image) { this.vml_image.onfilterchange = null; this.vml_image = null; } } this.image.onload=null; this.image=null; this.sp=null; this.vml_image=null; this.anchor=null; }, initVMLLoader: function () { var scope = this; this.vml_image.onfilterchange_count = 0; this.vml_image.onfilterchange = function (e) { this.onfilterchange_count++; if (this.onfilterchange_count <2) return; this.onfilterchange = null; setTimeout(function () { try { scope.switch2VML(); } catch (e) { ; } },750); } }, switch2VML: function () { this.vml_image.onfilterchange = null; if (this.imageComplete) return true; this.imageComplete = true; this.drawVMLDirect(); return true; }, initUploadHandler: function (src) { var scope=this; this.image.onload=function() { scope.imageComplete = true; if(/*@cc_on!@*/false) scope.drawVMLDirect(); else scope.drawViaCanvas(); this.onload=null; } }, drawViaCanvas: function () { if (this != this.sp.addBtnImg && this.left.v < this.sp.addBtnLeft) { return; } if (this.image.complete) { try { this.sp.ctx.drawImage(this.image, this.left.elV, this.w.elTop, this.w.elV, this.w.elV); this.imageComplete = true; } catch (e) { this.imageComplete = false; this.drawEmptyRect(); if (!this.image.onload) this.initUploadHandler(); } } else { if (!this.image.onload) this.initUploadHandler(); this.drawEmptyRect(); } this.changed=false; }, drawEmptyRect: function () { this.sp.ctx.fillRect(this.left.elV, this.w.elTop, this.w.elV, this.w.elV); this.changed=false; }, drawViaVML: function () { if (this != this.sp.addBtnImg && this.left.v < this.sp.addBtnLeft) { return; } var img=this.image, vml_image=this.vml_image, anchor=this.anchor; if (this.focused != this.elFocused) { this.elFocused=this.focused; } if (this.w.elV != this.w.v) { var w=this.w.v; img.style.width=w, img.style.height=w, anchor.style.width=w, anchor.style.height=w, anchor.style.top=this.w.top, this.w.elV=this.w.v, this.w.elTop=this.w.top; if (this.ie6Mode && this.imageComplete) { vml_image.style.width=w, vml_image.style.height=w; } } if (this.left.elV != this.left.v) { anchor.style.left=this.left.v, this.left.elV=this.left.v; } if (this.a.elV!= this.a.v) { img.filters[0].opacity=this.a.v; if (this.ie6Mode && this.imageComplete) { vml_image.filters[0].opacity=this.a.v; } this.a.elV=this.a.v; } this.changed=false; }, drawVMLDirect: function () { if (this != this.sp.addBtnImg && this.left.v < this.sp.addBtnLeft) { return; } var img=this.image, vml_image=this.vml_image, anchor=this.anchor; this.elFocused=this.focused; var w=this.w.v; img.style.width=w, img.style.height=w; if (this.ie6Mode && this.imageComplete) { vml_image.style.width=w, vml_image.style.height=w; } anchor.style.width=w, anchor.style.height=w, anchor.style.top=this.w.top, this.w.elV=this.w.v, this.w.elTop=this.w.top, anchor.style.left=this.left.v, this.left.elV=this.left.v; img.filters[0].opacity=this.a.v; if (this.ie6Mode && this.imageComplete) { vml_image.filters[0].opacity=this.a.v; } this.a.elV=this.a.v, this.changed=false; }, removeFromDOM: function () { if(/*@cc_on!@*/false) { this.anchor.parentNode.removeChild(this.anchor); } } }; var SpotlightClass =function(config) { $config(this, config); this.init(); }; SpotlightClass.prototype={ name: 'Spotlight', slLine: null, updater: null, slTooltip: null, init: function() { if(!$('slline') || !vars.Spotlight) return; this.updater = new SLUpdater({ spotlightVars: vars.Spotlight, spotlight: this }); this.slLine = new SLLine({ spotlight: this, items: this.updater.items, profileURL: this.updater.getProfileUrl() }); this.slTooltip = new SLTooltip({ el: this.slLine.sp, spotlight: this, type: 'spotbox', target: 'spotlight-line_ur_2' }); $u.app.on('spotlight', this.ovlOpen, this); $e.add(window,'beforeunload',this.destroy, this); }, ovlOpen: function() { var url = vars.SpotlightWizard && vars.SpotlightWizard.url; dOvl.open_ex({rev:url,rel:'sl_step'}); }, destroy: function() { if (this.slLine) { this.slLine.destroy (); this.slLine = null; } if (this.slTooltip) { this.slTooltip.destroy(); this.slTooltip = null; } if (this.updater) { this.updater.destroy (); this.updater = null; } return true; }, tooltip: function (tooltip_html, x, user_url, from_wizard, id) { this.slTooltip.show(x, tooltip_html, user_url); }, updateLayout: function (json) { this.slLine.updateLayout(json); }, tooltip_hide: function () { if (!this.slTooltip.mouseOvered) { this.slTooltip.hide(); } }, checkFromTooltip: function () { this.slLine.checkFromTooltip(); } }; var SpotlightDOMReadySupply=new $class(dPage, { name: 'SpotlightDOMReadySupply', init: function () { if (window.Spotlight && Spotlight.slTooltip) { Spotlight.slTooltip.delayedDOMChange(); } } });