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, cells: { }, numCells: 33, numColorCells: 0, numImgCells: 0, normNumColorCells: 8, numProcessedCells: 1, cellSwitchDuration: 750, invisiblePhaseDuration: 1500, nextCellSwitchTimeout: 2000, cellBlockTimeout: 5000, applyTimeout: 40, minTimeout: 15, prevApplyTime: 0, prevCellSwitchTime:0, prevCellSwitchTime:0, counterApplyTimeout: 35, prevCounterApplyTime: 0, preloadedUsers: {all: [], hash:{}, img32: [], img48: [], img72: [], img120: []}, numUnusedImgs: 0, userArr: null, showedImgs: {}, numShowedImgs:0, preloadTimeout: 3000, prevPreloadTime: 0, minNumUnusedImgs: 3, ws: '/index-ws.phtml', initComplete: false, 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'], unusedColor: {'mp_c_p1': 1, 'mp_c_p2': 1, 'mp_c_p3': 1, 'mp_c_p4': 1, 'mp_c_p5': 1, 'mp_c_p6': 1, 'mp_c_p7': 1, 'mp_c_p8': 1, 'mp_c_p9': 1}, init: function() { this.counter=window.StartPageCounter; this.imgOnload_fn=this.imgOnload.bind(this); this.startNextPortionPreload(); this.prevApplyTime=new Date; this.prevCellSwitchTime=this.prevApplyTime - this.nextCellSwitchTimeout; this.ts=setInterval(this.step.bind(this), this.minTimeout); this.step(); }, fullInit: function() { var cellArr=[]; var cells=this.cells; var numCells=0; for (var cellIndex in cells) { var cell=$('c_0_' + cellIndex); if (!cell) return; cellArr[numCells]=new StartPageCell({currentCell: cell, alpha: 100, owner:this, info: cells[cellIndex], index: cellIndex}); numCells++; } this.numCells=numCells; $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(); } for (var i=0; i < numCells; i++) { var cell=cellArr[i]; cell.linkDOM(); } this.cellArr=cellArr; this.initComplete=true; }, 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 < 1) return true; var cell=this.cellArr[cellIndex-1]; cell.mouseOutHandler(); return true; }, cellMouseOver: function(el) { var cellIndex=this.getCellIndex(el); if (cellIndex < 1) return true; var cell=this.cellArr[cellIndex-1]; 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; if (this.userArr && this.initComplete) { if (time - this.prevCellSwitchTime >= this.nextCellSwitchTimeout) { var cell=this.getNextCell(); if (cell) cell.startSwitch(time); this.prevCellSwitchTime = new Date; } if (time - this.prevApplyTime >= this.applyTimeout) this.apply(); } if (this.counter && time - this.prevCounterApplyTime > this.counterApplyTimeout) { this.counter.step(); this.prevCounterApplyTime=time; } if (this.userArr && time - this.prevPreloadTime > this.preloadTimeout) this.startNextPortionPreload(); }, apply: function() { var n=0; var time=new Date; 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; }, getNextCell: function() { if (this.numUnusedImgs <= 3) return null; if (this.numColorCells > 8 || Math.random() > this.normNumColorCells / this.numCells) { var item=this.getNextItem(); if (item) { var cell=this.getNextCell4Item(item); if (cell) 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 && !cell.blocked) a[a.length]=cell; } if (!a.length) { return null; } var cell=a[Math.round( Math.random() * (a.length -1))]; cell.switch2Item=null; 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 && !cell.blocked) { cell.switch2Item=null; 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 && !cell.blocked) return cell; n++; } return null; }, getNextItem: function() { for (var all=this.preloadedUsers.all, n=all.length, i=0, a=[]; i < n; i++) { var item=all[i]; if (!this.showedImgs[item.i]) a[a.length]=item; } if (!a.length) return null; return a[Math.round(Math.random() * (a.length-1))]; }, startNextPortionPreload: function() { if (this.numUnusedImgs >=4) return; if (!this.userArr) return; var n=0, userArr=this.userArr; for (var key in userArr) { var item=this.getNextUnloadedItem(userArr[key]); if (item) this.preloadImg(item); } this.prevPreloadTime=new Date; }, getNextUnloadedItem: function(a) { for (var n=a.length, i=n-1; i >=0; i--) { var item=a[i]; if (!item.wait && !item.img) return item; } return null; }, preloadImg: function(item) { item.wait=1; item.img=new Image; item.img.onload = this.imgOnload_fn; item.img.src=item.i; }, imgOnload: function() { var all=this.preloadedUsers.all, used=false, showedImgs=this.showedImgs; var item=this.imgOnloadCheck(this.userArr.img32, this.preloadedUsers.img32); if (item) item.size=32; else { var item=this.imgOnloadCheck(this.userArr.img48, this.preloadedUsers.img48); if (item) item.size=48; else { var item=this.imgOnloadCheck(this.userArr.img72, this.preloadedUsers.img72); if (item) item.size=72; else { var item=this.imgOnloadCheck(this.userArr.img120, this.preloadedUsers.img120); if (item) item.size=120; } } } if (item) { used=showedImgs[item.i]; this.preloadedUsers.hash[item.i]=1; if (!used) this.numUnusedImgs++; all[all.length]=item; } if (!this.initComplete && this.numUnusedImgs==this.minNumUnusedImgs) this.fullInit(); }, 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; } } return null; } }); var StartPageCell=function (config) { $config(this, config); this.init(); }; StartPageCell.prototype={ owner: null, info: null, el: null, currentCell: null, animatedCell: null, index: 0, 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 id="c_{index0}_{index1}" class="mp_c_ph" style="display:none;">\ <a id="a_{index0}_{index1}" href="#" class="mp_c_ph_l" target="_blank"><img id="img_{index0}_{index1}" alt="" width="{width}" height="{height}" class="mp_c_ph_img"></a>\ <div id="t_{index0}_{index1}" class="bp_tt" style="display:none;">\ <div class="pngbox bp_ttp">\ <div class="tpt">\ <div class="bpt">\ <div id="tc_{index0}_{index1}" 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 id="c_{index0}_{index1}" class="mp_c_p {color}" style="{style}"></div>', colorCellClassNameTemplate: "mp_c_p", imgCellClassNameTemplate: "mp_c_ph", topCellClassName: "mp_c_tz", colorCellArr: null, imgCellArr: null, imgCellLinkArr: null, size:32, nextCellPhase: false, invisibleCellPhase: false, blocked: false, init: function () { this.size=+this.info.w; if (this.info.c) this.currentColorClass='mp_c_p' + this.info.c; if (this.currentColorClass) { this.owner.numColorCells++; this.owner.unusedColor[this.currentColorClass]=0; } else this.owner.numImgCells++; if (this.info.i) { this.currentItem=this.getItemByImg(this.info.i); this.owner.showedImgs[this.info.i]=1; } this.el=this.currentCell.parentNode, this.currentHTML=this.el.innerHTML; }, getItemByImg: function(imgSrc) { var key='img' + this.size; var a=this.owner.userArr[key]; for (var i=0, n=a.length; i < n; i++) if (a[i].i==imgSrc) return a[i]; return null; }, createElements: function() { if (this.currentColorClass) { var imgCellTemplate1 = $u.tpl(this.imgCellTemplate, {width: this.size, height: this.size, index1: this.index, index0: 0}), imgCellTemplate2 = $u.tpl(this.imgCellTemplate, {width: this.size, height: this.size, index1: this.index, index0: 1}), colorCellTemplate3 = $u.tpl(this.colorCellTemplate, {index1: this.index, index0: 2, color: this.currentColorClass + ' ' + this.topCellClassName, style: ''}), colorCellTemplate4 = $u.tpl(this.colorCellTemplate, {index1: this.index, index0: 3, color: this.currentColorClass, style: 'display:none;'}), html = imgCellTemplate1 + imgCellTemplate2 + colorCellTemplate3 + colorCellTemplate4; } else { var imgCellTemplate1 = $u.tpl(this.imgCellTemplate, {width: this.size, height: this.size, index1: this.index, index0: 1}), colorCellTemplate2 = $u.tpl(this.colorCellTemplate, {index1: this.index, index0: 2, style: 'display:none;'}), colorCellTemplate3 = $u.tpl(this.colorCellTemplate, {index1: this.index, index0: 3, style: 'display:none;'}), html = this.currentHTML + imgCellTemplate1 + colorCellTemplate2 + colorCellTemplate3; } this.el.cellIndex=+this.index, this.el.innerHTML=html; }, linkDOM: function() { this.colorCellArr=[], this.imgCellArr=[], this.imgCellLinkArr=[]; for (var i=0; i < 4; i++) { var cell=$('c_' + i + '_' + this.index); if (i < 2) { this.imgCellArr[this.imgCellArr.length]=cell; this.imgCellLinkArr[this.imgCellLinkArr.length] = { img: $('img_' + i + '_' + this.index), anchor: $('a_' + i + '_' + this.index), tooltip: $('t_' + i + '_' + this.index), cont: $('tc_' + i + '_' + this.index) }; } else { this.colorCellArr[this.colorCellArr.length]=cell; } } this.currentCell= this.currentColorClass ? this.colorCellArr[0] : this.imgCellArr[0]; }, destroy: function() { this.animatedCell=this.imgCellLinkArr=this.colorCellArr=this.imgCellArr=this.owner=this.currentCell=this.el=null; }, startSwitch: function(time) { this.newAnimatedCell=this.switch2Item ? this.imgCellArr[1] : this.colorCellArr[1]; this.tooltipUpdated=false; this.alpha=100; this.startAlpha=100; this.destAlpha=0; this.animatedCellIsActive=false; this.nextCellPhase=false; this.invisibleCellPhase=false; this.animatedCell=this.currentCell; this.startTime=time; if (this.currentColorClass) { this.owner.unusedColor[this.currentColorClass]=1; this.owner.numColorCells--; } else this.owner.numImgCells--; if (this.currentItem) { if (this.owner.showedImgs[this.currentItem.i]) { this.owner.numShowedImgs--; if (this.owner.preloadedUsers.hash[this.currentItem.i]) this.owner.numUnusedImgs++; this.owner.showedImgs[this.currentItem.i]=0; } this.currentItem=null; } if (this.switch2Item) { if (!this.owner.showedImgs[this.switch2Item.i]) { this.owner.showedImgs[this.switch2Item.i]=1; this.owner.numUnusedImgs--; this.owner.numShowedImgs++; this.owner.numImgCells++; } } else this.owner.numColorCells++; }, getNextColor: function() { var unusedColor=this.owner.unusedColor; for (var color in unusedColor) { if (unusedColor[color]) { unusedColor[color]=0; return color; } } while (true) { var colorIndex = Math.round((Math.random() * (this.owner.colorClasses.length-1))); var c=this.owner.colorClasses[colorIndex]; if (c != this.currentColorClass) return c; } }, 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); } }, setupAnimCellOpacity2: function(op) { if (this.currentColorClass) { this.setupOpacity(this.animatedCell, op); } else { var cellLink=this.imgCellLinkArr[0]; 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; } 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 || this.mouseOver) return; if (this.invisibleCellPhase) { if (time - this.startTime >= this.owner.invisiblePhaseDuration) { this.invisibleCellPhase=false; this.nextCellPhase=true; this.startAlpha=0; this.destAlpha=100; this.startTime=time; this.animatedCell=this.newAnimatedCell; this.newAnimatedCell=null; this.activateAnimCell(); } else return; } 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; if (this.alpha==0 && !this.nextCellPhase) { this.animatedCell.style.display='none'; this.invisibleCellPhase=true; this.startTime=time; return; } if (this.nextCellPhase) this.setupAnimCellOpacity(this.alpha); else this.setupAnimCellOpacity2(this.alpha); if (this.alpha==this.destAlpha && this.nextCellPhase) this.finishAnim(); }, finishAnim: function() { this.nextCellPhase=false; this.blocked=true; this.currentCell=this.animatedCell; this.animatedCell=null; this.animatedCellIsActive=false; if (this.currentItem) { this.imgCellArr.reverse(); this.imgCellLinkArr.reverse(); } else this.colorCellArr.reverse(); setTimeout(this.unblock.bind(this), this.owner.cellBlockTimeout); }, unblock: function() { this.blocked=false; }, animationPause: function() { this.stoppedAnim=true; this.alpha=100; this.setupAnimCellOpacity2(this.alpha); }, animationResume: function() { this.stoppedAnim=false; this.startAlpha=100; this.destAlpha=0; this.startTime=new Date; this.setupAnimCellOpacity2(this.alpha); }, mouseOutHandler: function() { this.mouseOver=false; if (this.stoppedAnim) this.animationResume(); }, mouseOverHandler: function() { this.mouseOver=true; if (this.newAnimatedCell) { this.animationPause(); } else if (this.animatedCell) { this.alpha=100; this.setupAnimCellOpacity(this.alpha); this.finishAnim(); if (!this.tooltipUpdated) this.updateTooltip(); } else 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); } }; var UploadFbc=new $class(dPage, { init:function() { $e.on('.fb_share_again', function(el){ this.fb_share(el.href); }, this); }, fb_ready:function(url) { setTimeout(function(){ dOvl.open_ex({type:'upload-import-fbc', url:url+'&ws=1'}); }, 100); }, fb_import_ready:function() { var form=$q.up($('fb_import_iframe'), 'form'); if(window.Import) Import._import_forms[1].submit() ; else if(window.UploadImport) UploadImport._import_forms[1].submit() ; }, fb_register:function(url) { window.location.href=url; }, fb_share:function(url) { new $r(url,{ ready:function(res){ dOvlErr.open({html:res.html}); } }); } }); $u.autofocus=function(w){ var el=$q.down(w,'.autofocus'); try{ el && el.focus(); }catch(er){} }; $e.onload($u.autofocus);