var StartPageCounter=new $class(dPage, { name: 'StartPageCounter', width: 8, digitsEl:null, digitsValues:null, destDigits:null, digitsState:null, value:0, ts:0, init: function() { var counterEl=$('counter'); if (!counterEl) return; var digitsEl=$q.select(counterEl, '.mp_cnt_d_o'), digitsValues=[]; for (var i=0, n=digitsEl.length; i < n; i++) { var el=digitsEl[i]; digitsEl[i]=el.parentNode; digitsValues[digitsValues.length]=Number(el.innerHTML); } var value=Number(digitsValues.join('')); this.width=digitsValues.length, this.digitsValues=digitsValues, this.digitsEl=digitsEl, this.digitsState=[], this.value=value; this.updateTS=setInterval(this.update.bind(this), 3007); this.update(); }, update: function() { this.swith2Value(this.value + Math.round(Math.random() * 2)); }, destroy: function() { clearInterval(this.updateTS); this.digitsEl=null; }, swith2Value: function (v) { this.value=v; this.destDigits=this.getDigits(v); }, getClassName: function (v, state) { var className='mp_cnt_d_' + v; if (state) className+='_' + state; return className; }, step: function (v) { var numChangies=0, digitsEl=this.digitsEl, destDigits=this.destDigits, digitsValues=this.digitsValues, digitsState=this.digitsState; if (!destDigits) return; for (var i=0, n=digitsValues.length; i < n; i++) { if (destDigits[i] != digitsValues[i]) { if (!digitsState[i]) digitsState[i]=0; var el=digitsEl[i]; digitsState[i]++; if (digitsState[i] > 2) { digitsState[i]=0; digitsValues[i]++; } if (digitsValues[i] > 9) digitsValues[i]=0; el.className="mp_cnt_d " + this.getClassName(digitsValues[i], digitsState[i]); numChangies++; } else digitsState[i]=0; } }, getDigits: function (v) { var digits=[], v=v; for (var i=0, width=this.width; i < width; i++) { digits[i]=v % 10; v=Math.floor(v / 10); } digits.reverse(); return digits; } }); var StartPageAnimation=new $class(dPage, { name: 'StartPageAnimation', cellArr: null, numCells: 33, numColorCells: 0, numImgCells: 0, normNumColorCells: 8, numProcessedCells: 6, cellSwitchDuration: 1000, nextCellSwitchTimeout: 150, applyTimeout: 40, minTimeout: 15, prevApplyTime: 0, prevCellSwitchTime:0, prevCellSwitchTime:0, counterApplyTimeout: 35, prevCounterApplyTime: 0, preloadedUsers: {all: [], img32: [], img48: [], img72: [], img120: []}, numUnusedImgs: 0, userArr: null, showedImgs: {}, numShowedImgs:0, preloadTimeout: 2000, prevPreloadTime: 0, numImgsInPreload: 4, preloadIndex: 0, minNumUnusedImgs: 10, ws: '/index-ws.phtml', initComplete: false, init: function() { this.counter=window.StartPageCounter; this.ts=setInterval(this.step.bind(this), this.minTimeout); this.step(); }, fullInit: function() { var cellArr=[]; for (var i=0, numCells=this.numCells; i < numCells; i++) { var cell=$('mp_c' + (i + 1)); if (!cell) return; var el=$q.down(cell, 'div'); cellArr[i]=new StartPageCell({currentCell: el, alpha: 100, owner:this}); } $e.add($('mp_canvas'), 'mouseover',this.cellMouseOver,this); $e.add($('mp_canvas'), 'mouseout',this.cellMouseOut,this); for (var i=0; i < numCells; i++) { var cell=cellArr[i]; cell.createElements(i); } for (var i=0; i < numCells; i++) { var cell=cellArr[i]; cell.createDOMLinks(); } this.nextCellSwitchTimeout= Math.floor(this.cellSwitchDuration / this.numProcessedCells); this.cellArr=cellArr; this.initComplete=true; }, dataReady: function(r) { if (!r) return; this.userArr=r; this.imgOnload_fn=this.imgOnload.bind(this); this.startNextPortionPreload(); this.prevApplyTime=new Date().getTime(); this.prevCellSwitchTime=this.prevApplyTime - this.nextCellSwitchTimeout; }, destroy: function() { clearInterval(this.ts); if (this.cellArr) { for (var cellArr=this.cellArr, i=0, n=cellArr.length; i < n; i++) { var cell=cellArr[i]; cell.destroy(); } this.cellArr=null; } }, cellMouseOut: function(el) { var cellIndex=this.getCellIndex(el); if (cellIndex < 0) return true; var cell=this.cellArr[cellIndex]; cell.mouseOutHandler(); return true; }, cellMouseOver: function(el) { var cellIndex=this.getCellIndex(el); if (cellIndex < 0) return true; var cell=this.cellArr[cellIndex]; cell.mouseOverHandler(); return true; }, getCellIndex: function(el) { var n=0, el=el; while (el && n++ < 7) { if (typeof el.cellIndex != "undefined") return el.cellIndex; el=el.parentNode; } return -1; }, step: function() { var time=new Date().getTime(); if (this.counter && time - this.prevCounterApplyTime > this.counterApplyTimeout) { this.counter.step(); this.prevCounterApplyTime=time; } if (this.userArr && this.initComplete) { if (time - this.prevCellSwitchTime >= this.nextCellSwitchTimeout) { var cell=this.getNextCell(); if (cell) cell.startSwitch(time); this.prevCellSwitchTime = new Date().getTime(); } if (time - this.prevApplyTime >= this.applyTimeout) this.apply(); } if (this.userArr && time - this.prevPreloadTime > this.preloadTimeout) this.startNextPortionPreload(); }, apply: function() { var n=0; var time=new Date().getTime(); for (var i=0, numCells=this.numCells, cellArr=this.cellArr; i < numCells; i++) { var cell=cellArr[i]; if (cell.animatedCell) { cell.step(time); n++; } } this.prevApplyTime=new Date().getTime(); }, getNextCell: function() { if (this.numUnusedImgs <= 0) return this.getNextCell4ColorFromColor(); if (Math.random() > this.normNumColorCells / this.numCells) { var item=this.getNextItem(); var cell=this.getNextCell4Item(item); if (!cell) { var item=this.getNextItem(); var cell=this.getNextCell4Item(item); if (!cell) { var item=this.getNextItem(); var cell=this.getNextCell4Item(item); } } if (!cell) return this.getNextCell4ColorFromColor(); cell.switch2Item=item; return cell; } else return this.getNextCell4Color(); }, getNextCell4ColorFromColor: function() { for (var i=0, arr=this.cellArr, n=arr.length, a=[]; i<n; i++) { var cell=arr[i]; if (cell.currentColorClass && !cell.animatedCell && !cell.mouseOver) a[a.length]=cell; } if (!a.length) { return null; } var cell=a[Math.round( Math.random() * (a.length -1))]; return cell; }, getNextCell4Color: function() { var n=0; while (true) { var cell=this.cellArr[Math.round( Math.random() * (this.numCells -1))]; if (!cell.animatedCell && !cell.mouseOver) return cell; } }, getNextCell4Item: function(item) { var n=0; while (n < 10) { var cell=this.cellArr[Math.round( Math.random() * (this.numCells -1))]; if (!cell.animatedCell && cell.size==item.size && !cell.mouseOver) return cell; n++; } return null; }, getNextItem: function() { var all=this.preloadedUsers.all; var n=all.length-1; var k=0; while (true) { var i=Math.round(Math.random() * n); var item=all[i]; if (!this.showedImgs[item.i]) return item; } }, startNextPortionPreload: function() { if (!this.userArr) return; var n=0; for (var key in this.userArr) { var arr = this.userArr[key]; this.startNextPortionPreload2(arr); } this.preloadIndex += this.numImgsInPreload; this.prevPreloadTime=new Date().getTime(); }, startNextPortionPreload2: function(arr) { for (var i=0; i < this.numImgsInPreload; i++) { if (this.preloadIndex + i < arr.length) { var item=arr[this.preloadIndex + i]; if (!item.wait && !item.img) this.preloadImg(item); } } }, preloadImg: function(item) { item.wait=1; item.img=new Image; item.img.onload = this.imgOnload_fn; item.img.src=item.i; }, imgOnload: function() { this.numUnusedImgs++; if (!this.initComplete && this.numUnusedImgs==this.minNumUnusedImgs) this.fullInit(); var all=this.preloadedUsers.all; var item=this.imgOnloadCheck(this.userArr.img32, this.preloadedUsers.img32); if (item) { item.size=32; all[all.length]=item; return; }; var item=this.imgOnloadCheck(this.userArr.img48, this.preloadedUsers.img48); if (item) { item.size=48; all[all.length]=item; return; }; var item=this.imgOnloadCheck(this.userArr.img72, this.preloadedUsers.img72); if (item) { item.size=72; all[all.length]=item; return; }; var item=this.imgOnloadCheck(this.userArr.img120, this.preloadedUsers.img120); if (item) { item.size=120; all[all.length]=item; return; }; }, imgOnloadCheck: function(arr, preloadedArr) { for (var i=0; i < arr.length; i++) { var item=arr[i]; if (item.wait && !item.complete && item.img && item.img.complete) { item.wait=0; item.complete=1; preloadedArr[preloadedArr.length]=item; return item; } } } }); var StartPageCell=function (config) { $config(this, config); this.init(); }; StartPageCell.prototype={ owner: null, el: null, currentCell: null, animatedCell: null, currentCellClassName: "", animatedCellClassName: "", animatedCellIsActive: false, switch2Item: null, currentItem: null, alpha: 100, destAlpha: 100, startAlpha: 0, startTime:0, currentColorClass: null, animFixed: false, preloadedImg: null, tooltipUpdated: true, mouseOver:false, tooltipUpdateTemplate: '<div class="bp_ui"><a href="{profile_url}" class="bp_un" dir="ltr" target="_blank">{name}</a>, {age}, {location}</div>\ <p>{tiw_title}</p>\ <p class="bp_us"><small class="bp_uss">{photos}</small></p>', imgCellTemplate: '<div class="mp_c_ph" style="display:none;">\ <a href="#" class="mp_c_ph_l" target="_blank"><img alt="" width="{width}" height="{height}" class="mp_c_ph_img"></a>\ <div class="bp_tt" style="display:none;">\ <div class="pngbox bp_ttp">\ <div class="tpt">\ <div class="bpt">\ <div class="cont">\ </div>\ <div class="bpc"></div>\ </div>\ </div>\ <div class="tcn"></div>\ <div class="bcn"></div>\ </div>\ <div class="pngbox bp_ttp_tail"></div>\ </div>\ </div>', tooltipUpdated: false, colorCellTemplate: '<div class="mp_c_p" style="display:none;"></div>', colorCellClassNameTemplate: "mp_c_p", imgCellClassNameTemplate: "mp_c_ph", topCellClassName: "mp_c_tz", colorClasses: ['mp_c_p1', 'mp_c_p2', 'mp_c_p3', 'mp_c_p4', 'mp_c_p5', 'mp_c_p6', 'mp_c_p7', 'mp_c_p8', 'mp_c_p9'], colorCellArr: null, imgCellArr: null, imgCellLinkArr: null, size:32, init: function () { var className=this.currentCell.className; var a=className.split(' '); this.currentColorClass=a[0] != 'mp_c_ph' ? a[1] : null; if (this.currentColorClass) this.owner.numColorCells++; else this.owner.numImgCells++; this.el=this.currentCell.parentNode, this.currentHTML=this.el.innerHTML; var className=this.el.className; if (className.indexOf('32')!=-1) this.size=32; else if (className.indexOf('48')!=-1) this.size=48; else if (className.indexOf('72')!=-1) this.size=72; else if (className.indexOf('120')!=-1) this.size=120; }, createElements: function(index) { var imgCellTemplate = $u.tpl(this.imgCellTemplate, {width: this.size, height: this.size}); this.el.cellIndex=index; if (this.currentColorClass) this.el.innerHTML= this.currentHTML + this.colorCellTemplate + imgCellTemplate + imgCellTemplate; else this.el.innerHTML= this.currentHTML + this.colorCellTemplate + this.colorCellTemplate + imgCellTemplate; }, createDOMLinks: function() { this.colorCellArr=[], this.imgCellArr=[]; this.imgCellLinkArr=[]; for (var i=0, el=this.el, childNodes=el.childNodes, n=childNodes.length; i < n; i++) { var cell=childNodes[i]; if (cell.nodeType == 1) { var a=cell.className.split(' '); if (a[0]=='mp_c_ph') { this.imgCellArr[this.imgCellArr.length]=cell; this.imgCellLinkArr[this.imgCellLinkArr.length] = { img: $q.down(cell, 'img'), anchor: $q.down(cell, 'a'), tooltip: $q.down(cell, '.bp_tt'), cont: $q.down(cell, '.cont') }; } else this.colorCellArr[this.colorCellArr.length]=cell; } } if (this.currentColorClass) this.currentCell=this.colorCellArr[0]; else this.currentCell=this.imgCellArr[0]; }, destroy: function() { this.animatedCell=this.imgCellLinkArr=this.colorCellArr=this.imgCellArr=this.owner=this.currentCell=this.el=null; }, startSwitch: function(time) { this.animatedCell=this.switch2Item ? this.imgCellArr[1] : this.colorCellArr[1]; this.tooltipUpdated=false; this.alpha=0; this.startAlpha=0; this.destAlpha=100; this.animatedCellIsActive=false; this.startTime=time; if (this.currentColorClass) this.owner.numColorCells--; else this.owner.numImgCells--; if (this.currentItem) { this.owner.showedImgs[this.currentItem.i]=0; this.owner.numShowedImgs--; this.owner.numUnusedImgs++; this.currentItem=null; } if (this.switch2Item) { this.owner.showedImgs[this.switch2Item.i]=1; this.owner.numUnusedImgs--; this.owner.numShowedImgs++; this.owner.numImgCells++; } else this.owner.numColorCells++; }, getNextColor: function() { var n=0; while (true) { var colorIndex = Math.round((Math.random() * (this.colorClasses.length-1))); var color=this.colorClasses[colorIndex]; if (color != this.currentColorClass) return color; } }, setupOpacity: function(el, op) { if(/*@cc_on!@*/false) { el.filters[0].opacity=op; } else el.style.opacity=op/100; }, setupAnimCellOpacity: function(op) { if (this.currentColorClass) { this.setupOpacity(this.animatedCell, op); } else { var cellLink=this.imgCellLinkArr[1]; this.setupOpacity(cellLink.img, op); } }, activateAnimCell: function() { this.animatedCellIsActive=true; if (this.currentColorClass) this.currentCell.className=this.colorCellClassNameTemplate + ' ' + this.currentColorClass; else { this.currentCell.className=this.imgCellClassNameTemplate; var cellLink=this.imgCellLinkArr[0]; cellLink.tooltip.style.display='none'; } if (!this.switch2Item) { this.currentColorClass=this.getNextColor(); this.animatedCell.className = this.colorCellClassNameTemplate + ' ' + this.currentColorClass + ' ' + this.topCellClassName; } else { this.currentColorClass=null; this.animatedCell.className=this.imgCellClassNameTemplate + ' ' + this.topCellClassName; var cellLink=this.imgCellLinkArr[1]; var item= this.switch2Item; this.currentItem=item; this.switch2Item=null; cellLink.img.src=item.i; cellLink.anchor.href=item.u; } this.animatedCell.style.display=''; this.setupAnimCellOpacity(this.alpha); }, step: function(time) { if (!this.animatedCell) return; if (!this.animatedCellIsActive) this.activateAnimCell(); this.alpha=this.valueByTime(time -this.startTime, this.startAlpha, this.destAlpha, this.owner.cellSwitchDuration); if (this.alpha < 0) this.alpha=0; if (this.alpha > 100) this.alpha=100; this.setupAnimCellOpacity(this.alpha); if (this.alpha==this.destAlpha) this.finishAnim(); }, finishAnim: function() { this.currentCell.style.display='none'; this.currentCell=this.animatedCell; this.animatedCell=null; this.animatedCellIsActive=false; if (this.currentItem) { this.imgCellArr.reverse(); this.imgCellLinkArr.reverse(); } else this.colorCellArr.reverse(); }, mouseOutHandler: function() { this.mouseOver=false; }, mouseOverHandler: function() { this.mouseOver=true; if (!this.currentItem) return; if (this.animatedCell) { this.alpha=100; this.setupAnimCellOpacity(this.alpha); this.finishAnim(); } if (!this.tooltipUpdated) this.updateTooltip(); }, updateTooltip: function(time) { if (this.tooltipUpdated) return; if (this.currentItem) { var item= this.currentItem; var cellLink=this.imgCellLinkArr[0]; cellLink.tooltip.style.display=''; cellLink.cont.innerHTML=$u.tpl(this.tooltipUpdateTemplate, { profile_url: item.u, name: item.t.n, age: item.t.a, location: item.t.c, tiw_title: item.t.t, photos: item.t.p }); } this.tooltipUpdated=true; }, valueByTime: function(time,beginValue,endValue,duration) { return Math.round((endValue - beginValue) * time / duration + beginValue); }, valueByTime2: function(time,beginValue,endValue,duration) { return Math.round( (endValue - beginValue) *((time=time/duration-1)*time*time+1)+beginValue); } };