1.- Copiar y ejecutar esto en la consola
-------------- [copiar debajo ]-----------
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, vars: null, params:{}, timeout: 8000, update_ts:0, profileUrl: '', secondUrl: '/sl/list-ws-json/', firstUrl: '/sl/ws/', init: function() { if(!this.vars) return; var params=this.params= this.vars.params; this.items = this.vars.items ? this.vars.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() { 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.slLine.updateLayout(this.items); this.timerInt = setTimeout(this.firstRequest_fn, this.timeout); } }, setupId: function(id, ts) { if (this.requestParams.spotlight_id==id && this.update_ts==ts) return; if (this._t1) this._t1.abort(); if (this._t2) this._t2.abort(); clearTimeout(this.timerInt); this.requestParams.spotlight_id=id; this.update_ts=ts; this.request2(ts); } }; var SLTooltip = $class(dTooltip,{ spotlight: null, html_tpl: '<a href="{user_url}">{user_name}</a> <span class="location">{location}</span><p>{text}</p>', 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 tl=$el.cumulativeOffset(this.el); return { html: html.replace('<mask>', userUrl), left: tl.left+x+110, top: tl.top+60 }; }, formatByJSON: function(userUrl, config, x) { var tl=$el.cumulativeOffset(this.el); return { html: $u.tpl(this.html_tpl, config), left: tl.left+x+110, top: tl.top+60 }; }, mouseOutHandler: function() { this.spotlight.slLine.mouseOut(); }, show: function(x, tooltip, user_url) { if (typeof(tooltip)=='string') var config=this.format(user_url, tooltip, x); else { tooltip.user_url=user_url; var config=this.formatByJSON(user_url, tooltip, x); } this._cont.innerHTML=config.html; this._wrap.className=this.type; this.fit(config); this._wrap.style.left=config.left+'px', this._wrap.style.top=config.top+'px'; }, fit:function(config) { var tl=$el.cumulativeOffset(this.el), t=tl.left+this.spotlight.slLine.spWidth-(config.left+this._wrap.offsetWidth) + 110; if(t<20) config.left=config.left+t-60; }, hide:function() { this._wrap.style.top='-1000px'; }, attachEventHandlers : function() { $e.add(this._wrap,'mouseout',this.mouseOutHandler,this); }, detachEventHandlers :function() { $e.del(this._wrap,'mouseout',this.mouseOutHandler,this); } }); var SLLine=function(config) { $config(this, config); this.init(); }; SLLine.prototype={ spotlight: null, scrollBtn:null, mainWrap:null, cnvs: null, cnvs_wrap: null, items: [], profileURL: "", imgs: [], imgNum: 15, minImgNum: 15, intrv: 3, min: 69, max: 98, timeOut: 15, timerInt: -1, sp: null, slline: null, focI: -1, lastFocI: -1, spWidth: 800, spHeight: 105, canvasImgTop: 15, vmlImgTop: 15, imgTop: 15, firstImgLeft: 15, scrollLeft:0, scrollImgStep: 6, maxImgNum: 15, applyTimeoutInt:0, applyTimeout: 15, zoomDuration: 250, zoomOutDuration: 250, opacityDuration: 300, updateDuration: 1000, startAlpha: 100, tooltipImgIndex: -1, need2ShowTooltip: -1, need2RemovePreviousItems: false, updateIsAvailable:true, delayedUpdateItems: null, canvasImgBackground: "rgb(228,217,255)", ofsAnimationMode: false, ie6Mode: false, 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({'#sp_scroll': this.scroll}, this); this.mainWrap=$('spotlightWrap'), this.scrollBtn=$('sp_scroll'), this.slline=$('slline'); this.updateWidth(true); this.imgNum = this.items.length; $e.add(this.mainWrap, 'mouseover', this.mouseOver, this); $e.add(this.mainWrap, 'mouseout', this.mouseOut, this); if(/*@cc_on!@*/false) { this.zoomDuration = 350; this.zoomOutDuration = 400; this.applyTimeout=10, this.timeOut=10, this.imgTop=this.vmlImgTop, this.applyChanges=this.applyChangesIE; $e.add(window, 'resize', this.resizeIE, this); this.initIE(); } 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); $e.del(this.mainWrap, 'mouseover', this.mouseOver, this); $e.del(this.mainWrap, 'mouseout', this.mouseOut, this); if(/*@cc_on!@*/false) { $e.del(window, 'resize', this.resizeIE, this); } else { $e.del(window, 'resize', this.resize, this); $e.del(this.cnvs_wrap, 'mousemove', this.mouseMove, this); $e.del(this.cnvs_wrap, 'click', this.canvasClickHandler, this); } var imgs=this.imgs; if (imgs) { for (var i=0, imgNum=this.imgNum; i < imgNum; i++) { var d=imgs[i]; d.destroy(); } } this.slline=this.mainWrap=this.imgs=this.scrollBtn=this.ieImgPattern=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; 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 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, 'click', this.canvasClickHandler, this); }, initIE: function () { var sp=$("slline"); this.sp=sp, this.ie6Mode=_ua=='ie6'; 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, vml_img.index=i, anchor.index=i, anchor.title=''; var d=this.newImg(ofs, anchor, img, vml_img); d.sp=this, this.imgs[this.imgs.length]=d, d.anchor=anchor; d.draw4IEDirect(); ofs += this.min + this.intrv; } this.ieImgPattern = $('sl_ie_pattern'); }, resizeIEInt: 0, resizeIE: function() { if (this.resizeIEInt) clearInterval(this.resizeIEInt); this.resizeIEInt=setTimeout(this.resize_binded, 20); }, domReadyHandler: function() { if(/*@cc_on!@*/true) this.spTL=$el.cumulativeOffset(this.slline.parentNode); }, resize: function() { this.updateWidth(); }, scrollFwd: function() { this.scroll(this.scrollImgStep); }, scrollBwd: function() { var rightBorderImgIndex=Math.floor((-this.scrollLeft+this.spWidth-this.firstImgLeft) / (this.min+this.intrv)); this.scrollLeft=this.spWidth-this.firstImgLeft - (rightBorderImgIndex - this.scrollImgStep) * (this.min+this.intrv); if (-this.scrollLeft < this.min+this.intrv) this.scrollLeft=0; if (this.scrollLeft >= 0) this.scrollLeft=0; this.setupDestSize(-1000, this.min, 650); }, scroll: function(imgStep) { var rightBorderImgIndex=Math.ceil((-this.scrollLeft+this.spWidth-this.firstImgLeft) / (this.min+this.intrv)) + imgStep; if (rightBorderImgIndex > this.maxImgNum) rightBorderImgIndex =this.maxImgNum; var imgs=this.imgs; if (imgs.length < rightBorderImgIndex) { var d=imgs[imgs.length-1], ofs=d.left.v +this.min+this.intrv; for (var i=imgs.length; i < rightBorderImgIndex; i++) { var d=this.getImage4Update(0, '', ''); d.left.v=ofs; imgs[imgs.length]=d; ofs+=this.min+this.intrv; this.items[this.items.length]={}; d.image.index=i; if(/*@cc_on!@*/false) { if (d.vml_image) d.vml_image.index=i; d.anchor.index=i; } } this.imgNum=imgs.length; } var newScrollLeft= this.spWidth - this.firstImgLeft - (rightBorderImgIndex) * (this.min+this.intrv); if (-newScrollLeft < this.min+this.intrv) newScrollLeft=0; if (newScrollLeft < this.scrollLeft) { this.scrollLeft=newScrollLeft; this.setupDestSize(-1000, this.min, 650); } }, updateWidth: function(skipImageUpdate) { var sllineParentNode=this.slline.parentNode; this.spWidth=parseInt(sllineParentNode.offsetWidth); this.spTL=$el.cumulativeOffset(sllineParentNode); if (!skipImageUpdate && this.imgs && this.imgs.length > 0) this.setupDestSize(-1000, this.min, 250, true); }, 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; }, setFocI: function(v) { if (v < 0 && this.focI >=0) this.lastFocI=this.focI; this.focI=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.imgs, imgNum=this.imgNum; for (var i=0; i < imgNum; i++) { var d=imgs[i]; sum += d.w.d; } var firstImgLeft = this.scrollLeft + this.firstImgLeft, rightBorderImgIndex=Math.floor((-this.scrollLeft+this.spWidth-this.firstImgLeft) / (this.min+this.intrv)), curTime=new Date().getTime(), focI=this.focI; if (rightBorderImgIndex >= imgs.length) rightBorderImgIndex = imgs.length -1; if (sum > minSum && focI >= 0 && focI < imgs.length) { var d=imgs[focI]; if (this.scrollLeft && focI == rightBorderImgIndex) { var focusedPos= firstImgLeft + focI * (this.min + this.intrv)-Math.round( (d.w.d-this.min)); } else { var 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, imgs=[].concat(this.imgs), numChanges=0; var wSum=0; var corruptIntvl=false; 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 (!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; if (!this.items[simIndex]) return; this.need2ShowTooltip=-1; this.tooltipImgIndex=simIndex; var sim=this.imgs [simIndex], item=this.items[simIndex], userUrl=this.profileURL.replace('{login}', item.login), leftOfs=sim.left.elV; var tooltip=item.tooltip ? item.tooltip : item; this.spotlight.slTooltip.show(leftOfs, tooltip, userUrl); }, hideTooltip: function() { this.setFocI(-1); this.tooltipImgIndex=-1; this.spotlight.slTooltip.hide(); }, applyChangesCanvas: function () { 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(); } } }, 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(); } }, applyChangesIE: function () { var imgs=this.imgs; if (!imgs) return; 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); }, stopApplyChangesTimer: function () { clearInterval(this.applyTimeoutInt); this.applyTimeoutInt=0; }, getImageIndex: function (clientX, clientY) { var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft, clientX=clientX - this.spTL.left + scrollLeft, clientY=clientY - this.spTL.top; 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; } } return -1; }, openWizard: function () { Spotlight.ovlOpen(); }, spMouseOver: false, imageMouseOverIndex: -1, canvasClickHandler: function () { this.mouseMove(); if (this.focI >= 0 && this.focI < this.items.length) { var item=this.items[this.focI]; window.location.href=this.profileURL.replace('{login}', item.login); } }, mouseMove: function () { var event=$e.e, clientX=event.clientX, clientY=event.clientY; if (clientX >= this.spTL.left && clientX < this.spTL.left + this.spWidth) { this.spMouseOver=true; var imageIndex =this.getImageIndex(clientX, clientY); if (imageIndex == -1 && this.imageMouseOverIndex != -1) { this.imageMouseOverIndex=-1; this.setupCursorStyle('default'); 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.setupCursorStyle('default'); this.cnvs_wrap.href="#"; } } }, mouseOver: function (event) { var event=$e.e, el=event.target || event.srcElement; this.updateIsAvailable=false; if (typeof el.index != "undefined") 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.imgs.length) return; if (this.cnvs) { this.setupCursorStyle('pointer'); if (el.index >=0) { var item=this.items[el.index]; if (item && item.login) this.cnvs_wrap.href=this.profileURL.replace('{login}', item.login); else this.cnvs_wrap.href='#'; } else this.cnvs_wrap.href='#'; } this.setFocI(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; }, mouseOut: function (el) { var event=$e.e, toElement=event.relatedTarget || event.toElement; if(/*@cc_on!@*/false) this.mouseOutIE(toElement); else this.mouseOutCnvs(toElement); }, mouseOutIE: function (toElement) { if (!toElement || typeof toElement.index!="undefined") return; if (this.mouseOut2Tooltip(toElement)) return; if (!this.hasAsParent(toElement, this.mainWrap)) { this.hideTooltip(); this.updateIsAvailable=true; if (this.delayedUpdateItems) this.processDelayedUpdate(); else this.setupDestSize(-1000, this.min, this.zoomOutDuration); return; } if (!this.hasAsParent(toElement, this.slline.parentNode)) { this.hideTooltip(); this.setupDestSize(-1000, this.min, this.zoomOutDuration); } }, mouseOutCnvs: function (toElement) { if (!toElement || typeof toElement.index=="undefined") { this.setupCursorStyle('default'); } if (this.mouseOut2Tooltip(toElement)) return; if (!this.hasAsParent(toElement, this.mainWrap)) { this.hideTooltip(); this.updateIsAvailable=true; if (this.delayedUpdateItems) this.processDelayedUpdate(); else this.setupDestSize(-1000, this.min, this.zoomOutDuration); return; } if (!this.hasAsParent(toElement, this.slline)) { this.hideTooltip(); this.setupDestSize(-1000, this.min, this.zoomOutDuration); } }, mouseOut2Tooltip : function (toElement) { return this.hasAsParent(toElement, this.spotlight.slTooltip._wrap); }, 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, forceRedraw) { this.stopTimer(); if (this.zoomOutInt) { clearInterval(this.zoomOutInt); this.zoomOutInt=0; } var dur=dur || this.zoomDuration; if (imgIndex < 0 && size == this.min) { this.imageMouseOverIndex=-1, this.spMouseOver=false, this.setFocI(-1); } var imgs=[].concat(this.imgs); if (!imgs) return; var curTime=new Date().getTime(), focI=this.focI; for (var i=0, imgNum=this.imgNum; i < imgNum; i++) { var d =imgs[i]; if (forceRedraw) d.changed=true; 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.delayedUpdateItems=sljson; return; } if (sljson instanceof Array) var newItems = [].concat(sljson); else { var newItems=[]; 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.updateWidth(true); this.removePreviousItems (); if ((!this.items || this.items.length == 0) && (!newItems || newItems.length > 0)) this.redrawViaOfsAnimation (newItems, newItems.length); else { var ofsIndex=this.getOffsetIndex (newItems); if (ofsIndex >= newItems.length || ofsIndex == 0 || !this.items || this.items.length == 0) this.redrawFullReplace(newItems, ofsIndex); else this.redrawViaOfsAnimation (newItems, ofsIndex); } }, getIEElem: function () { var el=this.ieImgPattern.cloneNode(true); el.style.display="block"; return el; }, getImage4Update: function (ofs, imgSrc, profileURL) { if(/*@cc_on!@*/false) { var newEl=this.getIEElem(); if (this.imgs.length > 0) { var curFirstElem= this.imgs[0].anchor; this.sp.insertBefore(newEl, curFirstElem); } else { this.sp.appendChild(newEl); } var img=newEl.firstChild, vml_img=newEl.lastChild; newEl.href=profileURL, 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.ofsAnimationMode = true; }, stopOfsAnimationEvent: function () { this.ofsAnimationMode = false; if (this.need2RemovePreviousItems) { this.removePreviousItems(); if(/*@cc_on!@*/true) this.fullCanvasRedraw(); } }, redrawViaOfsAnimation: function (newItems, ofsIndex) { 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; if(/*@cc_on!@*/false) { if (d.vml_image) d.vml_image.index=i; d.anchor.index=i; } } 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; if(/*@cc_on!@*/false) { d.image.filters[0].opacity=0; if (d.vml_image) d.vml_image.index=i; d.anchor.index=i; } 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 () { if (!this.d4FullUpdate) return; 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.draw4IEDirect(); } } 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(); this.startTimer(); if (this.imgWaveIndex > 0) { this.imgWaveIndex--; } else { clearInterval(this.opacityWaveInt); if (this.hideBeforeUpdate) { this.fullUpdateStartInt=setTimeout(this.fullUpdateStart_binded, 500); } } }, processDelayedUpdate: function() { this.updateIsAvailable=true; if (this.need2ProcessMore || this.focI >= 0) return; if (!this.delayedUpdateItems) return; var newItems=this.delayedUpdateItems; this.delayedUpdateItems=null; this.updateLayout(newItems); }, removePreviousItems: function () { var imgs=this.imgs; if (!imgs) return; for (var i=this.maxImgNum, 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=imgs.length; 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) { var n= a.length > this.minImgNum ? this.minImgNum : a.length; for (var i=0; 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; var n= newItemsArr.length > this.minImgNum ? this.minImgNum : newItemsArr.length; for (var i=0; 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, visible: true, elVisible: true, init: function () { if(/*@cc_on!@*/false) { this.ie6Mode=_ua=='ie6'; this.draw=this.draw4IE; 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.draw4IEDirect(); return true; }, initUploadHandler: function (src) { var scope=this; this.image.onload=function() { scope.imageComplete = true; if(/*@cc_on!@*/false) scope.draw4IEDirect(); else scope.drawViaCanvas(); this.onload=null; } }, drawViaCanvas: function () { 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; }, draw4IE: function () { var img=this.image, vml_image=this.vml_image, anchor=this.anchor; this.checkupVisibility(); if (this.elVisible!=this.visible) { anchor.style.display=this.visible ? 'block': 'none'; this.elVisible=this.visible; } 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; }, checkupVisibility: function () { this.visible= (this.left.v > - 120) && (this.left.v <= this.sp.spWidth); }, draw4IEDirect: function () { 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; this.checkupVisibility(); anchor.style.display=this.visible ? 'block': 'none'; this.elVisible=this.visible; 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', vars: null, slLine: null, updater: null, slTooltip: null, init: function() { if(!$('slline') || !this.vars) return; this.updater = new SLUpdater({ vars: this.vars, spotlight: this }); this.slLine = new SLLine({ spotlight: this, items: this.updater.items, profileURL: this.updater.getProfileUrl() }); this.slTooltip = new SLTooltip({ el: $('spotlightWrap'), spotlight: this, type: 'spotbox', target: 'spotlight-line_ur_2' }); $e.add(window,'beforeunload',this.destroy, this); }, 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; }, setupId: function(id, ts) { this.updater.setupId (id, ts); } }; var SpotlightDOMReadySupply=new $class(dPage, { name: 'SpotlightDOMReadySupply', init: function () { if (window.Spotlight && Spotlight.slTooltip) { Spotlight.slTooltip.delayedDOMChange(); Spotlight.slLine.domReadyHandler(); } } }); if(Flash.init(9)){ try{ document.documentElement.className+=' flash_upload '; }catch(e){} } var MsgClose={ init:function() { $e.on('.msg-close', this.msg_close, this); }, msg_close:function(el) { el=$q.up(el,'.container_confirmation'); if(!el) return; new $fx.effect({ wait:false, duration:300, items:[ new $fx.style({ el:el, prop:'height', start:function() { this.from=this.el.offsetHeight; this.el.style.overflow='hidden'; }, end:function() { this.el.parentNode.removeChild(this.el); } }) ] }); } }; MsgClose=new $class(dPage,MsgClose); var Tooltip=$class( { el:null, tooltip:null, maxWidth:350, tpl:'<div id="clipboard_title" style="display:none"><div class="bln_info pngbox">\ <div class="tpt">\ <div class="bpt">\ <div class="cont">\ {content}\ </div>\ <div class="bpc"></div>\ </div>\ </div>\ <div class="tcn"></div>\ <div class="bcn"></div>\ </div></div>', constructor:function(el) { if(!el) return; this.el=el; $e.add(el, 'mouseover', this.show, this); $e.add(el, 'mouseout', this.hide, this); this.content=el.title; this.el.title=''; }, remove:function() { this.hide(); $e.del(this.el, 'mouseover', this.show, this); $e.del(this.el, 'mouseout', this.hide, this); this.el=null; }, show:function(el) { var t=this.tooltip=$u.tpl2el(this.tpl,{content:this.content}); document.body.appendChild(t); var width=$el.dimensions(t).width; if(width>this.maxWidth) width=this.maxWidth; var xy=$e.pointerXY($e.e); $config(t.style,{ width:width+'px', left:xy.x-7+'px', top:xy.y+12+'px', display:'block' }); }, hide:function() { $el.remove(this.tooltip); this.tooltip=null; } }); Tooltip.init=function(wrap, css) { if(!css) return; var ar=[], els=(css instanceof Array) ? css : $q.select(wrap, css); for(var i=0, n=els.length; i<n; i++) ar[ar.length]=new Tooltip(els[i]); return ar; }; Tooltip.destroy=function(tooltips) { if(!tooltips || !(tooltips instanceof Array)) return; while(tooltips.length){ tooltips[0].remove(); tooltips.splice(0,1); } }; var EncountersByWish = new $class(dPage, { name: 'Search', dropdownVisible: false, dLabel: null, ideaText: '', params: null, maxLength: 32, defaultValues:null, form:null, init: function() { $e.on({ '.jst_edit': this.edit, '#i_want_more_ideas': this.moreIdeas, '.dropdownBtn': this.dropdownBtn, '.ti': this.itemClick, '.close_criteria': this.reset_gr, '#cutout_state': this.ext_search, '.jst_criteria': this.add_criteria }, this); this.form=$('encounters_search_form'); this.text=$('to_full'); $u.textarea_count('to_full',this.maxLength); if(!this.form) return; $e.add(this.form,'submit',this.submit,this); Search.xhr.on({ 'ready':this.ready, 'error':this.error, 'state':this.state }, this); }, submit: function (el) { var to_id_field = $("to_id_field"); if (to_id_field.value) { if (this.ideaText != this.text.value) to_id_field.value = ''; } var els=this.form.elements; for(var i=0, n=els.length; i<n; i++){ if(els[i].name in this.params) delete this.params[els[i].name]; } $config(this.params,$r.serialize(this.form)); var res=Search.update($r.toQueryString(this.params)); if(!res) return; $el.addClassName(this.form,'el-loading'); $u.scroll(75); }, ready:function(res) { $el.removeClassName(this.form,'el-loading'); if('is_extended' in res && $('is_extended').value != res.is_extended) $el.toggleClassName(this.form,'extended_state'); if(res.form) $('ext_form_w').innerHTML=res.form; if(res.form_basic) this.reset_blk($('basic_form_w'), res.form_basic); }, error:function() { $el.removeClassName(this.form,'el-loading'); }, itemClick: function (el) { this.dropdownHide(); if(!el) return; this.text.value = el.textContent||el.innerText; this.text._textarea_count(); this.text.focus(); if(el.rel) $('to_id_field').value = el.rel; }, dropdownBtn: function () { if (this.dropdownVisible) this.dropdownHide(); else this.dropdownShow(); }, dropdownHide: function (e) { if (e) { var el = e.srcElement || e.target; var btn = $q.up(el, '.dropdownBtn'); if (btn) return; } this.dropdownVisible = false; $el.removeClassName($('full_box'), 'show_dropdown_tiw'); $e.un('__all__',this.dropdownHide,this); }, dropdownShow: function () { this.dropdownVisible = true; $el.addClassName($('full_box'), 'show_dropdown_tiw'); $e.on('__all__',this.dropdownHide,this); }, edit:function(el) { $u.toggle.toggle(el); this.text.focus(); this.text.select(); }, moreIdeas: function (el) { $el.addClassName($('ideas'), 'el-loading'); new $r(el.rel,{ method:'post', params:{ws:1}, ready:this.loaded, error: this.error },this); }, error: function () { $el.removeClassName($('ideas'), 'el-loading'); }, loaded: function (res) { $el.removeClassName($('ideas'), 'el-loading'); if (res.html) { $('i_want_ideas').innerHTML = res.html; } if (res.url) $('i_want_more_ideas').rel = res.url; }, reset_gr:function(el) { this.reset_blk(el.parentNode, this.defaultValues); $u.toggle.toggle(el); }, reset_blk:function(w, vals) { var els=$q.select(w, 'input,select'); els: for(var i=0, n=els.length, v, el; i<n; i++){ el=els[i], v=vals[el.name]; if(v===undefined) continue; if(v instanceof Array && el.type=='checkbox'){ for(var j=0, m=v.length; j<m; j++){ if(el.value===v[j]){ el.checked=true; continue els; } } el.checked=false; } else if(el.type=='checkbox' || el.type=='radio') el.checked=(el.value===v); else els[i].value=v; } }, ext_search:function(el) { var res=$el.toggleClassName(this.form,'extended_state'); if(res) $u.scroll(75); $('is_extended').value=+!res; if(res) this.submit(); }, add_criteria:function(el) { var w=$('stabs'), b=$q.down(w, '.'+el.rel.replace('s_','b_')); if(!w||!b) return; w.appendChild(b); $u.toggle.toggle(el); } }); var MeetMe=new $class(dPage, { name: 'MeetMe', central_column:null, following_el:null, transport:null, arrowsHolderW: 421, imgContainer: null, arrowsHolder: null, topImg: null, topPhotoInnerDiv:null, imgArr: null, focused: 0, scrollLeft: 0, photo_id: 0, ieAlphaFilterInit:0, blocked: false, blockOp:0, blockEf:null, topImageFadeOut:0, topImgOp:100, prealoadHash:null, init: function() { var meet_person = $('mm_cc'), following_el = $('following_photo_wrap'); if (meet_person) { this.central_column = meet_person.parentNode; this.following_el = following_el; this.initImgArr(); } $e.on({ '.hide_hint, .meet_yes, * .meet_yes, .meet_no, * .meet_no, .meet_maybe, * .meet_maybe, .find-out-link': this.blockAndVote, '.encMeetImg': this.topImgClick, '.show_pp, * .show_pp': this.vote, '.send_msg': this.sendMsg, '.show_msg_textarea': this.showMsgTextarea, '.encThumbImgA, * .encThumbImgA': this.imgClick, '#iceBreakerA': this.iceBreaker, '.larr': this.leftArrowClick, '.rarr': this.rightArrowClick }, this); this.topImageOnload_fn=this.topImageOnload.bind(this); }, iceBreaker: function(el) { if (this.iceBreakerR) return; var a=$('iceBreakerA'); if (!a || !a.href) return; $u.startWaiting(a); this.iceBreakerR= new $r(a.href,{ method: 'get', ready: this.iceBreakerResponse, error: this.iceBreakerResponse }, this); }, iceBreakerResponse: function(res) { delete this.iceBreakerR; $u.stopWaiting($('iceBreakerA')); if (res && res.message && $('msg_textarea')) $('msg_textarea').value=res.message; }, destroy: function() { this.topImageOnload_fn=null; this.mm_wu=this.mm_yw=this.mm_ma=this.central_column=this.following_el=null; this.imgContainer=this.arrowsHolder=this.topImg=this.imgArr=this.topPhotoInnerDiv=null; this.nextUpScrollEf=this.imgScrollEf=this.showEf=this.hideEf=this.topImg = null; if (this.blockEf) { this.blockEf.end(); this.blockEf=null; } if (this.iceBreakerR) { this.iceBreakerR.abort(); this.iceBreakerR = null; } if (this.transport) { this.transport.abort(); this.transport = null; } }, blockAndVote: function(el) { if (this.blocked) return; this.blocked=true; this.blockOp=0; this.fadeEl=[$('fade_el_0'), $('fade_el_1'), $('fade_el_2')]; if (this.blockEf) this.blockEf.end(); this.blockEf= new $fx.effect({ wait:false,duration:250,scope:this, items:[ new $fx.style({ mm:this,prop:'opacity',from: 0,to:50, step:this.opacityStep, start:function() { for (var i=0; i <this.mm.fadeEl.length; i++) { var el=this.mm.fadeEl[i]; if (el) el.style.display='block'; } }, end:function() { this.mm.fadeEl=this.mm.blockEf=this.mm=null; } }) ] }); this.vote(el); }, opacityStep:function(ct,d) { var op=this.mm.blockOp=this.fx(ct,this.from,this.to,d); var fadeEl=this.mm.fadeEl; for (var i=0; i <fadeEl.length; i++) { var el=fadeEl[i]; if (el) if(/*@cc_on!@*/false) el.filters[0].opacity=op; else el.style.opacity=op/100; } }, unblock: function() { if (this.blockEf) this.blockEf.end(); this.fadeEl=this.blockEf=null; this.blockOp=0; var fadeEl=[$('fade_el_0'), $('fade_el_1'), $('fade_el_2')]; for (var i=0; i < fadeEl.length; i++) { var el=fadeEl[i]; if (el) { el.style.display='none'; if(/*@cc_on!@*/false) el.filters[0].opacity=0; else el.style.opacity=0; } } this.blocked=false; }, vote: function(el) { if (!el) return true; var a = el.href ? el : $q.up(el,'a'); if (!a) return true; $el.addClassName($("person"), 'waiting_to_data'); if (!this.topImg && this.central_column) this.initImgArr(); var url = a.href; this.fallback_url = url; var transport = this.getTransport(); transport.url = url; transport.params = { photo_id: this.photo_id || 0}; transport.request(); }, getTransport: function(transport) { if (this.transport) return this.transport; this.transport = new $r(' ',{ method: 'post', auto:false, ready: this.update, error:this.error }, this); return this.transport; }, error: function() { this.destroy(); window.location.reload(); }, update_lc: function(res) { this.mm_wu=this.mm_wu ? this.mm_wu : $('mm_wu'); this.mm_yw=this.mm_yw ? this.mm_yw : $('mm_yw'); this.mm_ma=this.mm_ma ? this.mm_ma : $('mm_ma'); if (typeof res.lc.wu != "undefined" && this.mm_wu) this.mm_wu.innerHTML=res.lc.wu; if (typeof res.lc.yw != "undefined" && this.mm_yw) this.mm_yw.innerHTML=res.lc.yw; if (typeof res.lc.ma != "undefined" && this.mm_ma) this.mm_ma.innerHTML=res.lc.ma; }, update_rc: function(res) { if (this.nextUpScrollEf) this.nextUpScrollEf.end(); this.nextUpScrollEf=null; if (res.rc.form) { var mm_rc = $('mm_rc'); if (mm_rc) mm_rc.innerHTML = res.rc.form; this.following_el = $('following_photo_wrap'); return; } var following_el = this.following_el; var li_arr = $q.select(following_el, 'img'); var li_count = li_arr.length; if (following_el && res.rc.remove && li_count) { var removedImg=li_arr[li_count-1]; var scrollValue=removedImg.offsetWidth; following_el.style.marginRight='0px'; this.nextUpScrollEf=new $fx.effect({ wait:false,fps:50,duration:300, items:[ new $fx.style({ el:following_el, prop:'marginRight', from: 0, to: -scrollValue, end: function () { $el.remove(removedImg); following_el.style.marginRight='0px'; if (li_count==1) $el.addClassName($('meets_next_up'), 'hidden'); } }) ] }); } if (res.rc.next) { var newImg = $u.tpl2el(res.rc.next,{}); if (li_count) following_el.insertBefore(newImg, li_arr[0]); else following_el.appendChild(newImg); } }, update: function(res) { $el.removeClassName($("person"), 'waiting_to_data'); this.fallback_url = null; dOvlCongrat.close(); dOvlErr.close(); if(res.auth) { window.location=res.auth; return; } if (res.preload) $u.preloadImages(res.preload); if (res.lc) this.update_lc(res); if (this.central_column && res.cc && res.cc.html) this.update_cc(res); if (res.rc) this.update_rc(res); if (res.html) { if (res.pp_type == 'congrat') this.showCongrat(res); } if (this.blocked) this.unblock(); }, showCongrat: function (res) { dOvlCongrat.open({ html:res.html, onLoad: this.showCongratLoad, onUnLoad:this.showCongratUnload , scope: this }); }, checkMsg: function () { var el =$('msg_textarea'); if (!el) return; var empty=/^\s*$/.test(el.value); if (empty && !this.sendMsgDisabled) { this.sendMsgDisabled=true; $('sendMsg').title=this.sendMsgTitle; this.disableMsgTooltip=new Tooltip($('sendMsg')); $el.addClassName($('sendMsg'), 'disabled'); } else if (!empty && this.sendMsgDisabled) { this.sendMsgDisabled=false; this.disableMsgTooltip.hide(); this.disableMsgTooltip.remove(); this.disableMsgTooltip=null; $el.removeClassName($('sendMsg'), 'disabled'); } }, showCongratLoad: function () { var el=$('sendMsg'); if (!el) return; this.sendMsgTitle=el.title; this.sendMsgDisabled=false; el.title=''; this.checkMsgInt=setInterval(this.checkMsg.bind(this), 50); }, showCongratUnload: function () { clearInterval(this.checkMsgInt); if (this.sendMsgDisabled) { this.sendMsgDisabled=false; this.disableMsgTooltip.hide(); this.disableMsgTooltip.remove(); this.disableMsgTooltip=null; } }, update_cc: function (res) { if (this.imgScrollEf) this.imgScrollEf.end(); if (this.showEf) this.showEf.end(); if (this.hideEf) this.hideEf.end(); this.imgScrollEf=this.showEf=this.hideEf=this.topImg=this.topPhotoInnerDiv=null; this.photo_id=this.focused=this.scrollLeft=0; this.central_column.innerHTML=res.cc.html; this.initImgArr(); this.ieAlphaFilterInit=0; this.preloadNext(); }, showMsgTextarea: function (el) { $el.addClassName($('round_popup'), 'edit_message'); var textArea = $('msg_textarea'); if (textArea) textArea.select(); }, sendMsg: function (el) { if ($el.hasClassName($('sendMsg'), 'disabled')) return; $u.startWaiting(el); $el.addClassName($('round_popup'), 'el-loading'); var transport = this.getTransport(); transport.url = el.rev || el.href; transport.params = { msg: $('msg_textarea').value}; transport.request(); }, initImgArr: function () { var cc = this.central_column; this.topImageFadeOut=0, this.topImgOp=100, this.focused=0; this.topImg=$('topPhotoDiv'), this.topPhotoInnerDiv=$('topPhotoInnerDiv'); this.imgArr=[]; if (!this.topImg) return; this.imgContainer = $q.down(cc, '.band'), this.arrowsHolder = $q.down(cc, '.conveyer'); var imgArr = $q.select(cc, '.encThumbImg'); if (imgArr && imgArr.length) { for (var i=0, n = imgArr.length; i < n; i++) { var img = imgArr[i]; img.imgIndex = i, img.parentNode.imgIndex = i; if ($el.hasClassName(img.parentNode, 'active')) this.focused=i; } var img=imgArr[this.focused]; this.photo_id=img.getAttribute("photo_id"); } else this.photo_id=this.topImg.getAttribute("photo_id"); this['photo_id_0']=this.photo_id; this.prealoadHash={"photo_id_0": this.photo_id }; this.imgArr = imgArr || []; this.updateImgScrollPos(); this.arrowsActivityUpdate(); }, imgClick: function (el) { if (!this.topImg) this.initImgArr(); this.setupFocusedImage(el.imgIndex); }, topImgClick : function (el) { if (!this.topImg) this.initImgArr(); var nxt=this.focused < this.imgArr.length - 1 ? this.focused + 1 : 0; this.setupFocusedImage(nxt); }, leftArrowClick: function (el) { if (!this.topImg) this.initImgArr(); if (this.focused > 0) this.setupFocusedImage(this.focused - 1); }, rightArrowClick: function (el) { if (!this.topImg) this.initImgArr(); if (this.focused < this.imgArr.length - 1) this.setupFocusedImage(this.focused + 1); }, setupFocusedImage: function (newFoc) { if (this.imgArr.length < 2 || newFoc == this.focused) return; var prevImg = this.imgArr[this.focused]; $el.removeClassName(prevImg.parentNode, 'active'); var img = this.imgArr[newFoc]; this.photo_id=img.getAttribute("photo_id"); $el.addClassName(img.parentNode, 'active'); this.focused = newFoc; if(/*@cc_on!@*/false) if (!this.ieAlphaFilterInit) { this.topImg.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; this.ieAlphaFilterInit=1; } this.hideImg(); this.updateImgScrollPos(); this.arrowsActivityUpdate(); this.preloadNext(); }, updateImgScrollPos: function (noAnimation) { if (this.imgScrollEf) this.imgScrollEf.end(); if (!this.imgArr || !this.imgArr.length) return; var newFoc=this.focused; var img = this.imgArr[newFoc]; var imgOffsetLeft = parseInt(img.parentNode.offsetLeft); var imgW = parseInt(img.offsetWidth); var prevScrollLeft = this.scrollLeft; if (imgOffsetLeft < this.scrollLeft) { this.scrollLeft = imgOffsetLeft; } else if (imgOffsetLeft + imgW > this.scrollLeft + this.arrowsHolderW) { this.scrollLeft = imgOffsetLeft + imgW- this.arrowsHolderW + 4; } if (prevScrollLeft != this.scrollLeft) { if (noAnimation) { this.imgContainer.style.left=-this.scrollLeft + 'px'; return; } this.imgScrollEf=new $fx.effect({ wait:false,fps:50,duration:300, items:[ new $fx.style({ el:this.imgContainer, prop:'left', from: -prevScrollLeft, to: -this.scrollLeft }) ] }); } }, hideImg: function () { if (this.showEf) this.showEf.end(); if (this.topImageFadeOut) return; this.topImageFadeOut=true; if (this.topImgPreloader) this.topImgPreloader.onload=null; var newFoc=this.focused, img = this.imgArr[newFoc], src = img.parentNode.rev; this.hideEf=new $fx.effect({ wait:false, duration: 100, items:[ new $fx.style({ el:this.topImg,meetMePage:this, prop:'opacity',from: this.topImgOp,to: 0, step:function(ct,d){ var s=this.el.style, op=this.fx(ct,this.from,this.to,d); this.meetMePage.topImgOp=op; if(/*@cc_on!@*/false) this.el.filters[0].opacity=op; else this.el.style.opacity=op/100; }, end: function () { var meetMePage=this.meetMePage; if (meetMePage) { delete this.meetMePage; meetMePage.topImageFadeOut=0, meetMePage.topImg.style.backgroundImage=""; meetMePage.showImg(); } } }) ] }); $el.addClassName($("person"), 'waiting_to_data'); }, showImg: function () { var newFoc=this.focused, img = this.imgArr[newFoc], src = img.parentNode.rev; if (this.prealoadHash[src]) { this.topImageOnload(); return; } var prealoadHash=this.prealoadHash; var image=this.topImgPreloader=new Image; var fn=this.topImageOnload_fn; image.onload = function () { image.onload =null; prealoadHash[src]=image.width; fn(); }; image.src = src; }, preloadNext: function () { if (!this.imgArr || this.imgArr.length < 2) return; var nextInd=this.focused < this.imgArr.length - 1 ? this.focused+1: 0; var img = this.imgArr[nextInd], src = img.parentNode.rev; if (this.prealoadHash[src]) return; var image = new Image; var prealoadHash=this.prealoadHash; image.onload = function () { prealoadHash[src]=image.width, image.onload =null; } ; image.src = src; }, topImageOnload: function () { if (this['photo_id_0'] != this.prealoadHash['photo_id_0']) return; var newFoc=this.focused, img = this.imgArr[newFoc], src = img.parentNode.rev, topImg=this.topImg; var imgW=this.prealoadHash[src]; this.topImgPreloader=null, $('topPhotoInnerDiv').style.width=imgW+'px', topImg.style.backgroundImage="url(" + src + ")"; this.showEf=new $fx.effect({ wait:false, duration: 250,fps:50, items:[ new $fx.style({ el:topImg, prop:'opacity',from: this.topImgOp,to: 100,meetMePage:this, step:function(ct,d) { var s=this.el.style, op=this.fx(ct,this.from,this.to,d); this.meetMePage.topImgOp=op; if(/*@cc_on!@*/false) this.el.filters[0].opacity=op; else this.el.style.opacity=op/100; }, end: function () { if (this.meetMePage) delete this.meetMePage; } }) ] }); $el.removeClassName($("person"), 'waiting_to_data'); }, arrowsActivityUpdate: function () { if (!this.imgArr || !this.imgArr.length) return; var newFoc=this.focused; if (newFoc > 0 && newFoc < this.imgArr.length - 1) { $el.addClassName(this.arrowsHolder , 'arrows_active'); $el.removeClassName(this.arrowsHolder , 'larr_not_active'); $el.removeClassName(this.arrowsHolder, 'rarr_not_active'); } else { $el.removeClassName(this.arrowsHolder , 'arrows_active'); if (this.imgArr.length > 1) { if (newFoc == 0) $el.addClassName(this.arrowsHolder , 'larr_not_active'); else $el.removeClassName(this.arrowsHolder , 'larr_not_active'); if (newFoc == this.imgArr.length - 1) $el.addClassName(this.arrowsHolder , 'rarr_not_active'); else $el.removeClassName(this.arrowsHolder, 'rarr_not_active'); } } } }); var dOvlCongrat=$class(dOvlClass,{ _tpl:'<div class="round_popup-wrap">\ <div id="round_popup" class="bd">\ {html}\ </div>\ </div>\ <div class="round_popup-f"><div class="round_popup-br"></div></div>', init:function() { $e.on({ '.dOvl-close-congrat': this.closeCongrat }, this); this.prepare_tpl(); }, closeCongrat:function(el) { if (el) { var url=el.rev || el.href ; if (url) new $r(url,{ method:'get', params:{ws:1}}); } this.close(el); } }); var dOvlCongrat=new dOvlCongrat();
-------------- [copiar arriba ,hasta aqui ]-----------

2.- Copiar y ejecutar esto en la consola, 5000 son milisegundos, si se quiere mas velocidad (peligroso) se puede cambiar
------------------------------------------
function votar(){MeetMe.vote(document.getElementsByClassName("meet_yes")[0]); setTimeout("votar()",5000);};
------------------------------------------
3.- Escribir votar(); en la consola y a disfrutar