// tile demo by qFox // this script is minified. but if you were looking for the source, check the source of the html document :) var CDE=function(dom){if(dom)this._id=CDE._getId(dom);dom._id=this._id;};CDE.prototype.toString=function(){return"[CDE "+this._id+" ("+this._strId+")]";};CDE.wrap=function(mix,boolPlaceholder){var bool=true;if(!mix)bool=false;if(bool&&mix.isCde)return mix;if(bool&&typeof mix=='string')mix=document.getElementById(mix);if(!mix)bool=false;if(bool)return new CDE(mix);if(boolPlaceholder)return new CDE();return null;};CDE.toDom=function(mix){if(!mix)return null;if(typeof(mix)=='string')return document.getElementById(mix);if(mix.isCde)return mix.dom();return mix;};CDE._getId=function(dom){var id;if(!dom){debug("CDE._getId: element is falsy");return 0;} if(!CDE._doms){CDE._doms=[0];CDE._cacheSize=0;} id=dom._id;if(!id||!CDE._doms[id]){CDE._doms[id=CDE._doms.length]=dom;++CDE._cacheSize;CDE.debug('cacheSize');} return id;};CDE.uncache=function(dom,boolAndChilderen,boolSkipDom){var i;if(!dom)return;if(!boolSkipDom)CDE._uncache(dom,true);if(boolAndChilderen){i=dom.childNodes.length;while(i--)CDE.uncache(dom.childNodes[i],true);} return null;};CDE._uncache=function(id,boolIdIsDom){if(boolIdIsDom&&id)id=id._id;if(id&&CDE._doms&&CDE._doms[id]){delete CDE._doms[id];--CDE._cacheSize;CDE.debug('cacheSize');}};CDE._gcAdd=function(cde,target){if(!target)target='standard';if(!CDE._arrGc)CDE._arrGc={};if(!CDE._arrGc[target])CDE._arrGc[target]=[cde];else CDE._arrGc[target].push(cde);return cde;};CDE.gc=function(target){var cde,a;if(CDE._arrGc){if(target){a=CDE._arrGc[target];}else{a=CDE._arrGc.standard;} try{if(a){while(cde=a.pop()){cde.uncache();}}}catch(er){debug("CDE.gc("+target+") error:"+target+":"+er.message);}}};CDE.prototype.isCde=true;CDE.prototype._boolFailProof=false;CDE.prototype.dom=function(){var e=CDE._doms[this._id];if(!e)debug("Error: CDE.prototype.dom("+this._id+") "+(this._strId?"["+this._strId+"] ":"")+"is empty. Most likely it was deleted (from another object?)...");return e;};CDE.prototype.add=function(){var i,e=this.dom();if(arguments.length==0||(this._boolFailProof&&!e))return this;for(i=0;i0){while(i--){if(arr[i])clearInterval(arr[i].timer);}} CDE.uncache(this.dom(),boolChilderenToo);return null;};CDE.prototype.gc=function(target){return CDE._gcAdd(this,target);};CDE.prototype.atr=function(mix,mixValue){if(!mix||(this._boolFailProof&&!this.dom()))return this;var that=this;var f=function(dom,name,value){if(name=='id')that._strId=value;try{dom[name]=value;}catch(er){if(window.debug)debug('CDE.atr fail: e:['+dom+'], key:['+name+'], val:['+value+'], err:['+er.description+']');}};if(arguments.length==2)f(this.dom(),mix,mixValue);else if(typeof mix==='string')f(this.dom(),'className',mix);else for(var key in mix)f(this.dom(),key,mix[key]);return this;};CDE.prototype.css=function(mix,mixValue){var s;if(!mix||(this._boolFailProof&&!this.dom()))return this;if(this._boolTextNode){debug("Error: Unable to apply .css to a text node... "+this+".css("+mix+","+mixValue+")");return;} s=this.dom().style;if(arguments.length==2)this._css(mix,arguments[1],s);else if(typeof mix==='string')this.atr('className',mix);else for(var key in mix)this._css(key,mix[key],s);return this;};CDE.prototype._css=function(name,value,s){var key=name;if(name=='float')key='cssFloat';if(name=='opacity'){if(typeof value!=='number'){if(window.debug)window.debug("cde._css("+name+","+value+","+s+"): Error: invalid opacity value: "+value+" (not a number)");return;} if(value<0||value>1){if(window.debug)window.debug("cde._css("+name+","+value+","+s+"): Error: Invalid value for opacity: use 0..1 ("+value+")");if(value<0)value=0;if(value>1)value=1;}} try{if(key=='opacity'){if(typeof(s.filter)!='undefined')s.filter="alpha(opacity="+Math.round(value*100)+")";try{s[key]=value;}catch(er){if(window.debug)window.debug("cde._css("+name+","+value+","+s+"): "+er.message);}} else if(key=='cssFloat'&&document.all)s.styleFloat=value;else s[key]=value;}catch(er){if(key=='overflow'&&value=='-moz-scrollbars-vertical'){}else if(window.debug)debug('CDE._css fail: Tried setting ['+key+'] to ['+value+'] on ['+s+']. '+er);}};CDE.prototype.ease=function(targets,options){var that,atr,stepTime,easeTime,startTime,currentDisplay,currentVis,obj,arr,oldTargets,i,cb,bool,_;if(this._boolFailProof&&!this.dom())return this;if(!targets)return this;if(!options)options={};that=this;for(atr in targets){if(atr=='margin'||atr=='padding'){targets[atr+'Top']=targets[atr];targets[atr+'Right']=targets[atr];targets[atr+'Bottom']=targets[atr];targets[atr+'Left']=targets[atr];delete targets[atr];}else if(atr=='border'){}} if(!options.boolIgnoreRunningEase&&(arr=this.dom().arrEaseObjects)&&(i=arr.length)){while(i--){if(!arr[i])continue;oldTargets=arr[i].targets;for(atr in oldTargets){if(atr in targets){delete oldTargets[atr];}} bool=false;for(_ in oldTargets){bool=true;break;};if(bool)continue;clearInterval(arr[i].timer);cb=arr[i].options.callback;arr[i].options._that.uncache();oldTargets=arr[i]=arr[i].options=arr[i].targets=arr[i].timer=null;if(!options.boolCancelOldCallback&&cb){if(cb.constructor==Function)cb();else debug("CDE.ease(): old callback was not a function... ["+cb+"]");}}} stepTime=options.intStepTime||10;easeTime=options.intEaseTime||1000;startTime=(new Date()).getTime();for(atr in targets){obj=targets[atr]={target:targets[atr],suffix:'px'};if(atr=='opacity'){obj.noRound=true;obj.suffix=0;currentDisplay=this.getStl('display');currentVis=this.getStl('visibility');obj.current=parseFloat(currentDisplay==='none'||currentVis==='hidden'?0:this.getStl('opacity'))||0;if(currentDisplay==='none'){this.o(0);if(options.boolDisplayInline)this.di();else this.db();} if(currentVis==='hidden')this.o(0).vv();}else{if(atr=='top'||atr=='left'){if(atr=='left')obj.current=this.pos(true).x;else obj.current=this.pos(true).y;}else{obj.current=this.getStl(atr);} if(atr=='color'||atr=='backgroundColor'){obj.isColor=true;obj.suffix='';obj.noRound=true;obj.current=CDE.nColor(obj.current);obj.currentRgb=CDE.rgb(obj.current);obj.target=CDE.nColor(obj.target);obj.targetRgb=CDE.rgb(obj.target);}else{obj.current=parseFloat(obj.current)||0;obj.target=parseFloat(obj.target)||0;}}} obj={targets:targets,options:options};obj.timer=setInterval(function(){var timeNow,pos,newValue;timeNow=(new Date()).getTime();pos=(timeNow-startTime)/easeTime;pos=pos<0?0:(pos>1?1:pos);if(!options.boolEase)pos=(-Math.cos(pos*Math.PI)/2)+0.5;if(pos>=1){for(atr in targets)that.css(atr,targets[atr].target+targets[atr].suffix);clearInterval(that.dom().arrEaseObjects[i].timer);if(atr=='opacity'&&targets[atr].target==0&&!options.boolNoDisplayChange)that.dn();that.dom().arrEaseObjects[i]=that.dom().arrEaseObjects[i].timer=null;if(options.callback){if(options.callback.constructor==Function)options.callback();else debug("CDE.ease(): options.callback was not a function...["+options.callback+"]");options.callback=null;} if(options.boolAfterFadeDelete)that.del();if(options.boolAfterEaseUncacheCompletely)that.uncache(true);else if(options.boolAfterEaseUncache)that.uncache;}else{for(atr in targets){obj=targets[atr];if(obj.isColor)newValue=CDE.rgb(Math.round(obj.currentRgb.r+((obj.targetRgb.r-obj.currentRgb.r)*pos)),Math.round(obj.currentRgb.g+((obj.targetRgb.g-obj.currentRgb.g)*pos)),Math.round(obj.currentRgb.b+((obj.targetRgb.b-obj.currentRgb.b)*pos)));else newValue=obj.current+((obj.target-obj.current)*pos);if(!obj.noRound)newValue=Math.round(newValue);that.css(atr,newValue+obj.suffix);}}},stepTime);if(!this.dom().arrEaseObjects)this.dom().arrEaseObjects=[];i=this.dom().arrEaseObjects.length;this.dom().arrEaseObjects[i]=obj;return this;};CDE.prototype.pos=function(boolToParent,boolInner){var w,h,e=this.dom(),intTotalTop=0,intTotalLeft=0;if(this._boolFailProof&&!e)return{x:0,y:0,w:0,h:0};if(boolInner){w=e.clientWidth;h=e.clientHeight;}else{w=e.offsetWidth;h=e.offsetHeight;} do{intTotalTop+=e.offsetTop;intTotalLeft+=e.offsetLeft;e=e.offsetParent;}while(!boolToParent&&e&&e.nodeName&&e.nodeName.toUpperCase()!='BODY');return{x:intTotalLeft,y:intTotalTop,w:w,h:h};};CDE.prototype.qpos=function(boolInner){var e=this.dom();if(this._boolFailProof&&!e)return{x:0,y:0,w:0,h:0};if(boolInner){return{x:e.clientLeft,y:e.clientTop,w:e.clientWidth,h:e.clientHeight};} return{x:e.offsetLeft,y:e.offsetTop,w:e.offsetWidth,h:e.offsetHeight};};CDE.prototype.dba=function(){if(this._boolFailProof&&!this.dom())return this;return CDE.dba(this);};CDE.prototype.on=function(strEvent,func,mixType){var that,cdeTarget,e=this.dom();if(this._boolFailProof&&!e)return this;that=this;if(mixType&&typeof mixType!='string'){if(mixType.isCde)cdeTarget=mixType;else cdeTarget=mixType;mixType='element';} if(!cdeTarget)cdeTarget=that;if(!func&&window.debug)debug("CDE.on: no function passed on...");if(!func)return;if(e.addEventListener)e.addEventListener(strEvent,CDE._onFx(mixType,func,cdeTarget,that),false);else e.attachEvent('on'+strEvent,CDE._onIe(mixType,func,cdeTarget,that));return this;};CDE._onFx=function(mixType,func,cdeTarget,cdeOrg){return function(evt){var intButton=(evt.which<2)?CDE.BUTTON_LEFT:((evt.which==2)?CDE.BUTTON_MIDDLE:CDE.BUTTON_RIGHT);switch(mixType){case'screen':func.call(cdeTarget.dom(),evt,evt.screenX,evt.screenY,cdeOrg.dom(),intButton);break;case'viewport':func.call(cdeTarget.dom(),evt,evt.clientX,evt.clientY,cdeOrg.dom(),intButton);break;case'element':var pos=cdeTarget.pos();func.call(cdeTarget.dom(),evt,evt.pageX-pos.x,evt.pageY-pos.y,cdeOrg.dom(),intButton);break;case'body':func.call(cdeTarget.dom(),evt,evt.pageX,evt.pageY,cdeOrg.dom(),intButton);break;case'keyboard':func.call(cdeTarget.dom(),evt,evt.keyCode,cdeOrg.dom());break;default:func.call(cdeTarget.dom(),evt,cdeOrg.dom());}};};CDE._onIe=function(mixType,func,cdeTarget,cdeOrg){return function(){var intButton=(event.button<2)?CDE.BUTTON_LEFT:((event.button==4)?CDE.BUTTON_MIDDLE:CDE.BUTTON_RIGHT);switch(mixType){case'screen':func.call(cdeTarget.dom(),event,event.screenX,event.screenY,cdeOrg.dom(),intButton);break;case'viewport':func.call(cdeTarget.dom(),event,event.clientX,event.clientY,cdeOrg.dom(),intButton);break;case'element':case'body':var d=(document.documentElement&&document.documentElement.scrollLeft!=null)?document.documentElement:document.body;var pageX=event.clientX+d.scrollLeft;var pageY=event.clientY+d.scrollTop;if(mixType=='element'){var pos=cdeTarget.pos();func.call(cdeTarget.dom(),event,pageX-pos.x,pageY-pos.y,cdeOrg.dom(),intButton);}else{func.call(cdeTarget.dom(),event,pageX,pageY,cdeOrg.dom(),intButton);} break;case'keyboard':func.call(cdeTarget.dom(),event,event.keyCode,cdeOrg.dom());break;default:func.call(cdeTarget.dom(),event,cdeOrg.dom());}};};CDE.BUTTON_LEFT=1;CDE.BUTTON_MIDDLE=2;CDE.BUTTON_RIGHT=3;CDE.prototype.empty=function(){var f,e=this.dom();if(this._boolFailProof&&!e)return this;this.html('');while(f=e.firstChild)e.removeChild(f);return this;};CDE.prototype.getStl=function(strName,boolNormColor){var a,b,e=this.dom();if(this._boolFailProof&&!e)return this;if(window.getComputedStyle){strName=CDE.jsToCss(strName);if(strName=='float'||strName=='styleFloat')strName='cssFloat';if((a=document.defaultView)&&(b=a.getComputedStyle(e,null))){if(boolNormColor)return CDE.nColor(b.getPropertyValue(strName));return b.getPropertyValue(strName);}}else if(e.currentStyle){if(strName=='opacity'){try{return e.filters.item("DXImageTransform.Microsoft.Alpha").opacity/100;}catch(er){try{return e.filters('alpha').opacity/100;}catch(er2){return 1;}}}else{strName=CDE.cssToJs(strName);if(strName=='float'||strName=='cssFloat')strName='styleFloat';if(boolNormColor)return CDE.nColor(e.currentStyle[strName]);return e.currentStyle[strName];}} if(window.debug)debug("CDE.getStl: Did not know what to do... [strName]");return NaN;};CDE.prototype.addCss=function(str){return this.add(CDE.css(str));};CDE.prototype.ifExists=function(){this._boolFailProof=true;return this;};CDE.prototype.ifDom=function(){this._boolFailProof=true;return this;};CDE.prototype.endIf=function(){this._boolFailProof=false;return this;};CDE.prototype.focus=function(){if(this._boolFailProof&&!this.dom())return this;this.dom().focus();return this;};CDE.prototype.blur=function(){if(this._boolFailProof&&!this.dom())return this;this.dom().blur();return this;};CDE.prototype.clone=function(boolDeep){var dom=this.dom().cloneNode(boolDeep||false);delete(dom._id);dom.id='';return CDE.wrap(dom);};CDE.dom=function(strType){var dom=document.createElement(strType);return CDE.wrap(dom);};CDE.html=function(str){return CDE.span(str);};CDE.txt=function(str){debug("CDE.txt is depricated. Use CDE.html instead.");return CDE.span(str);};CDE.text=function(str){var cde=CDE.wrap(document.createTextNode(str));cde._boolTextNode=true;return cde;};CDE.div=function(str){var cde=CDE.dom('div');if(typeof str!='undefined')cde.html(str);return cde;};CDE.span=function(str){var cde=CDE.dom('span');if(typeof str!='undefined')cde.html(str);return cde;};CDE.img=function(src,alt){if(typeof src=='undefined')src='';return CDE.dom('img').atr({src:src,alt:alt||'',title:alt||''});};CDE.inp=function(strType,name,value,bool){var cde,e;if(!strType)strType='text';if(strType=='radio'){cde=CDE.html('');e=cde.dom().firstChild;while(e&&e.nextSibling)e=e.nextSibling;cde=CDE.wrap(e);}else{cde=CDE.dom('input').atr({type:strType});} if(typeof name!='undefined')cde.name(name);if(typeof value!='undefined')cde.val(value);if(bool&&strType=='option')cde.sel(true);else if(bool)cde.chk(true);return cde;};CDE.lnk=function(txt,funcOnclick,boolNoLine){if(typeof txt=='undefined')txt='';var cde=CDE.span(txt).ns().cp();if(funcOnclick)cde.on('click',funcOnclick);if(!boolNoLine)cde.on('mouseover',CDE._tdu).on('mouseout',CDE._tdn);return cde;};CDE._tdu=function(){this.style.textDecoration='underline';};CDE._tdn=function(){this.style.textDecoration='none';};CDE.btn=function(txt,funcOnclick){if(typeof txt=='undefined')txt='';if(!funcOnclick)funcOnclick=function(){};return CDE.dom("button").on('click',funcOnclick).html(txt);};CDE.a=function(txt,url,boolTb){if(typeof txt=='undefined')txt='';var obj={href:url};if(boolTb)obj.target='_blank';return CDE.dom('a').html(txt).atr(obj);};CDE.br=function(n){if(typeof n!=='number'||n<=0)n=1;if(n===1)return CDE.dom('br');var brs=[];for(var i=0;i=0)url+='&'+Math.random();else url+='?'+Math.random();} if(window.debug&&!boolSilent){strUrl=url.substring(0,20);debug('Importing '+strUrl+"...");funcDebugDone=function(){window.debug("Imported "+strUrl+"...");};} funcCallback=function(){if(boolLoaded)return;boolLoaded=true;if(funcDebugDone)funcDebugDone();if(funcOnload)funcOnload();cde.del(true);cde=null;};cde=CDE.dom('script').on('load',funcCallback).on('readystatechange',function(){if(this.readyState==='loaded'||this.readyState==='complete')funcCallback();}).atr({type:'text/javascript',language:'javascript',src:url}).dba();};CDE.th=function(txt){if(typeof txt=='undefined')txt='';return CDE.dom('th').html(txt);};CDE.td=function(txt){if(typeof txt=='undefined')txt='';return CDE.dom('td').html(txt);};CDE.table=function(arrArrMix,stl,atr,tdStl,tdAtr,thStl,thAtr){if(arrArrMix){var th,td,tr,i=0,j,cdeTbody,cdeTable;cdeTable=CDE.dom('table').css(stl).atr(atr).add(CDE.dom('thead'),cdeTbody=CDE.dom('tbody'));if(arrArrMix.length>0){tr=CDE.dom('tr');for(j=0;j=2)obj.backgroundPosition=(intPosX||0)+'px '+(intPosY||0)+'px';return this.css(obj);};CDE.prototype.bgpos=function(intPosX,intPosY){return this.css('backgroundPosition','-'+(intPosX||0)+'px -'+(intPosY||0)+'px');};CDE.prototype.sprite=function(sprite,x,y){return this.bg(sprite,'no-repeat',-x||0,-y||0);};CDE.prototype.spriteTo=function(x,y,tw,th,ow,oh){var w,h,dw,dh,img,dom;dom=this.dom().getElementsByTagName('img')[0];img=new Image();img.src=dom.src;dw=tw/ow;dh=th/oh;w=img.width*dw;h=img.height*dh;x*=dw;y*=dh;CDE.wrap(dom).abs(-(~~x)+'px',-(~~y)+'px',~~w,~~h);};CDE.prototype.bgc=function(strColor){return this.css('backgroundColor',strColor);};CDE.prototype.bold=function(){debug("cde.bold is depricated. Please use cde.fwb");return this.css('fontWeight','bolder');};CDE.prototype.unbold=function(){debug("cde.unbold is depricated. Please use cde.fwn");return this.css('fontWeight','normal');};CDE.prototype.sb=function(strColor,px){return this.css('border',(px||1)+'px solid '+(strColor||'black'));};CDE.prototype.bb=function(w,c,s){return this._setBorder('Bottom',w,c,s);};CDE.prototype.bl=function(w,c,s){return this._setBorder('Left',w,c,s);};CDE.prototype.br=function(w,c,s){return this._setBorder('Right',w,c,s);};CDE.prototype.bt=function(w,c,s){return this._setBorder('Top',w,c,s);};CDE.prototype._setBorder=function(d,w,c,s){if(w===false)w=1;if(c===false)c='black';if(s===false)s='solid';if(typeof w!='undefined')this.css('border'+d+'Width',w+(typeof w=='number'?'px':''));if(typeof c!='undefined')this.css('border'+d+'Color',c);if(typeof s!='undefined')this.css('border'+d+'Style',s);return this;};CDE.prototype.b3d=function(strColorTopLeft,strColorBottomRight,px){return this.sb(strColorTopLeft,px).css({borderRight:(px||1)+'px solid '+strColorBottomRight,borderBottom:(px||1)+'px solid '+strColorBottomRight});};CDE.prototype.c=function(str){return this.css('color',str);};CDE.prototype.center=function(boolNotHor,boolNotVer){if(boolNotHor&&boolNotVer)return this;var cp=CDE.scrollPos();var vp=CDE.viewportSize();this.abs();var pos=this.pos();if(!boolNotHor)this.x(Math.round((cp.x+(vp.w/2))-(pos.w/2)));if(!boolNotVer)this.y(Math.round((cp.y+(vp.h/2))-(pos.h/2)));vp=pos=null;return this;};CDE.prototype.cl=function(){return this.css('clear','left');};CDE.prototype.cr=function(){return this.css('clear','right');};CDE.prototype.cb=function(){return this.css('clear','both');};CDE.prototype.cc=function(){return this.css('cursor','crosshair');};CDE.prototype.cd=function(){return this.css('cursor','default');};CDE.prototype.cp=function(){return this.css('cursor','pointer');};CDE.prototype.cm=function(){return this.css('cursor','move');};CDE.prototype.dn=function(){return this.css('display','none');};CDE.prototype.di=function(){return this.css('display','inline');};CDE.prototype.db=function(){return this.css('display','block');};CDE.prototype.fl=function(){return this.css('cssFloat','left');};CDE.prototype.fr=function(){return this.css('cssFloat','right');};CDE.prototype.fs=function(px){return this.css('fontSize',(px||1)+'px');};CDE.prototype.fwb=function(){return this.css('fontWeight','bolder');};CDE.prototype.fwn=function(){return this.css('fontWeight','normal');};CDE.prototype.hover=function(on,off){var that=this;return CDE.on('mouseover',function(){that.css(on);}).on('mouseout',function(){that.css(off);});};CDE.prototype.lh=function(px){return this.css('lineHeight',(px||1)+'px');};CDE.prototype.m=function(px){return this.css('margin',px+(typeof px=='number'?'px':''));};CDE.prototype.mt=function(px){return this.css('marginTop',px+(typeof px!='string'?'px':''));};CDE.prototype.mr=function(px){return this.css('marginRight',px+(typeof px!='string'?'px':''));};CDE.prototype.mb=function(px){return this.css('marginBottom',px+(typeof px!='string'?'px':''));};CDE.prototype.ml=function(px){return this.css('marginLeft',px+(typeof px!='string'?'px':''));};CDE.prototype.ns=function(){this.dom().onmousedown=function(){return false;};this.dom().onselectstart=function(){return false;};this.dom().ondragstart=function(){return false;};return this.css({MozUserSelect:'none'});};CDE.prototype.o=function(value){return this.css('opacity',value);};CDE.prototype.oh=function(){return this.css('overflow','hidden');};CDE.prototype.ov=function(){return this.css('overflow','visible');};CDE.prototype.p=function(px){return this.css('padding',px+(typeof px=='number'?'px':''));};CDE.prototype.pt=function(px){return this.css('paddingTop',px+(typeof px!='string'?'px':''));};CDE.prototype.pr=function(px){return this.css('paddingRight',px+(typeof px!='string'?'px':''));};CDE.prototype.pb=function(px){return this.css('paddingBottom',px+(typeof px!='string'?'px':''));};CDE.prototype.pl=function(px){return this.css('paddingLeft',px+(typeof px!='string'?'px':''));};CDE.prototype.rel=function(){return this.css('position','relative');};CDE.prototype.strike=function(){return this.css('textDecoration','line-through');};CDE.prototype.tac=function(){return this.css('textAlign','center');};CDE.prototype.tal=function(){return this.css('textAlign','left');};CDE.prototype.tar=function(){return this.css('textAlign','right');};CDE.prototype.taj=function(){return this.css('textAlign','justify');};CDE.prototype.tdn=function(){return this.css('textDecoration','none');};CDE.prototype.vh=function(){return this.css('visibility','hidden');};CDE.prototype.vv=function(){return this.css('visibility','visible');};CDE.prototype.vam=function(){return this.css('verticalAlign','middle');};CDE.prototype.wsn=function(){return this.css('whiteSpace','normal');};CDE.prototype.wsnw=function(){return this.css('whiteSpace','nowrap');};CDE.prototype.wsp=function(){return this.css('whiteSpace','pre');};CDE.prototype.wspl=function(){return this.css('whiteSpace','pre-line');};CDE.prototype.wspw=function(){return this.css('whiteSpace','pre-wrap');};CDE.prototype.z=function(z){return this.css('zIndex',z);};CDE.clearLeft=function(){return CDE.div().cl();};CDE.clearRight=function(){return CDE.div().cr();};CDE.clearBoth=function(){return CDE.div().cb();};CDE.prototype.fadeDel=function(cb,options){if(!options)options={};options.boolAfterFadeDelete=true;options.callback=cb;return this.ease({opacity:0},options);};CDE.prototype.fadeDelUncache=function(cb,options){if(!options)options={};options.boolAfterEaseUncacheCompletely=true;return this.fadeDel(cb,options);};CDE.prototype.fadeIn=function(func,options,max){if(!options)options={};if(func)options.callback=func;return this.ease({opacity:max||1},options);};CDE.prototype.fadeOut=function(func,options,min){if(!options)options={};if(func)options.callback=func;return this.ease({opacity:min>0?min:0},options);};CDE.prototype.centerFade=function(options,max){return this.o(0).dba().center().fadeIn(false,options,max);};CDE.prototype.addToFading=function(cde,options,max){return this.o(0).addTo(cde).fadeIn(false,options,max);};CDE.prototype.draggable=function(parent,options){var that=this;if(!options)options={};if(!parent)parent=document.body;if(parent===true)parent=this;else parent=CDE.wrap(parent);this.ns().on('mousedown',function(_,x,y,_,btn){var bool,pos=that.pos(true);CDE.move={cde:that,options:options,parent:parent,cdeX:pos.x,cdeY:pos.y,mouseX:x,mouseY:y,ondrag:options.ondrag,onstop:options.onstop};if(options.onstart){bool=options.onstart.call(that,x,y,btn);if(bool===false)CDE.move=false;}},parent);if(!parent.dom()._boolDraggable){CDE.wrap(parent).on('mousemove',function(_,x,y){var dx,dy,tx,ty;if(!CDE.move)return;if(this!=CDE.move.parent.dom())return;dx=x-CDE.move.mouseX;dy=y-CDE.move.mouseY;tx=CDE.move.cdeX+dx;ty=CDE.move.cdeY+dy;if((typeof options.intMinX)=='number')tx=Math.max(tx,options.intMinX);if((typeof options.intMinY)=='number')ty=Math.max(ty,options.intMinY);if((typeof options.intMaxX)=='number')tx=Math.min(tx,options.intMaxX);if((typeof options.intMaxY)=='number')ty=Math.min(ty,options.intMaxY);if(!options.boolNoMove)CDE.move.cde.xy(tx+"px",ty+"px");if(CDE.move.ondrag)CDE.move.ondrag.call(CDE.move.cde,x,y,dx,dy,tx,ty);},parent).on('mouseup',function(_,x,y){if(!CDE.move)return;if(this!=CDE.move.parent.dom())return;if(CDE.move.onstop)CDE.move.onstop.call(CDE.move.cde,x,y);CDE.move=false;},parent);parent.dom()._boolDraggable=true;} return this;};CDE.docSize=function(){return{w:document.documentElement.scrollWidth,h:document.documentElement.scrollHeight};};CDE.viewportSize=function(){var size={w:0,h:0};if(window.innerWidth){size.w=window.innerWidth;size.h=window.innerHeight;}else if(document.documentElement&&document.documentElement.clientHeight){size.w=document.documentElement&&document.documentElement.clientWidth;size.h=document.documentElement&&document.documentElement.clientHeight;}else if(document.body&&document.body.offsetWidth){size.w=document.body.offsetWidth;size.h=document.body.offsetHeight;} return size;};CDE.scrollPos=function(){var pos={x:0,y:0};if(typeof(window.pageYOffset)=='number'){pos.x=window.pageXOffset;pos.y=window.pageYOffset;}else if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){pos.x=document.body.scrollLeft;pos.y=document.body.scrollTop;}else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){pos.x=document.documentElement.scrollLeft;pos.y=document.documentElement.scrollTop;} return pos;};CDE.disablePage=function(id,trans,z){var size=CDE.docSize();return CDE.div().z(z||1000).bgc('black').id(id).abs(0,0,size.w,size.h).o(0).dba().ease({'opacity':trans||0.5});};CDE.popup=function(strTitle,content,funcOk,options){var cdeBlack,cdeButtons,cdePopup,boolClosed,boolCancelButton,cdeOk,cdeCancel,funcs;if(!options)options={};if(!options.boolNoDisable)cdeBlack=CDE.disablePage();boolClosed=false;funcs={};funcs.ok=function(){boolClosed=true;cdePopup.fadeDelUncache(options.funcAfterFade);if(cdeBlack)cdeBlack.fadeDelUncache();if(funcOk)funcOk();};funcs.cancel=function(){boolClosed=true;cdePopup.fadeDelUncache(options.funcAfterFade);if(cdeBlack)cdeBlack.fadeDelUncache(false,true,true);if(options.funcCancel)options.funcCancel();};funcs.center=function(){cdePopup.center();};if(typeof content=='string')content=CDE.html(content);else content=CDE.wrap(content);boolCancelButton=!!(!options.boolNoCancel&&(funcOk||options.funcCancel));cdePopup=CDE.div().cd().z(1001).abs(0,0).o(0).css(options.objPopupStyles).add(CDE.div().p(2).bgc('blue').c('white').css(options.objHeadStyles).rel().add(CDE.div().w(100).h(1),CDE.lnk('X',boolCancelButton?funcs.cancel:funcs.ok).abs().r(5).ns(),CDE.html(strTitle||'')),CDE.div().br(1,'black').bb(1,'black','solid').p(3).bgc('white').css(options.objBodyStyles).rel().add(content,cdeButtons=CDE.div().cb().add(cdeOk=CDE.lnk(options.strOk||'Ok',funcs.ok).c('blue'),(boolCancelButton?[CDE.html('  '),cdeCancel=CDE.lnk(options.strCancel||'Cancel',funcs.cancel).c('blue')]:null)))).dba();if(!options.boolNoFocus&&boolCancelButton&&!options.boolFocusOk)cdeCancel.dom().focus();else if(!options.boolNoFocus)cdeOk.dom().focus();funcs.hideButtons=function(boolFade){if(boolFade)cdeButtons.ease({opacity:0});else cdeButtons.dn();};funcs.showButtons=function(boolFade){if(boolFade)cdeButtons.ease({opacity:1});else cdeButtons.o(1).db();};funcs.show=function(){cdePopup.ease({opacity:1});};funcs.hide=function(){cdePopup.ease({opacity:0});};funcs.cde=cdePopup;funcs.center();funcs.show();return funcs;};CDE.nColor=function(str,noHash){var r,m,obj,hash=(noHash?'':'#');str=(str+'').toLowerCase();r=/^#?([0-9a-f]{6})$/;if(m=r.exec(str))return hash+m[1];r=/^#?([0-9a-f])([0-9a-f])([0-9a-f])$/;if(m=r.exec(str))return hash+m[1]+m[1]+m[2]+m[2]+m[3]+m[3];r=/^#?[0-9a-f]{2}([0-9a-f]{6})$/;if(m=r.exec(str))return hash+m[1];r=/^rgb\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)$/;m=r.exec(str);if(m&&m.index==0){return hash+ (m[1]%256<16?'0':'')+(parseInt(m[1],10)%256).toString(16)+(m[2]%256<16?'0':'')+(parseInt(m[2],10)%256).toString(16)+(m[3]%256<16?'0':'')+(parseInt(m[3],10)%256).toString(16);} r=/^rgba\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3}), ?(?:1|(?:0(?:\.\d*)))\)$/;m=r.exec(str);if(m&&m.index==0){return hash+(m[1]%256<16?'0':'')+(parseInt(m[1],10)%256).toString(16)+(m[2]%256<16?'0':'')+(parseInt(m[2],10)%256).toString(16)+(m[3]%256<16?'0':'')+(parseInt(m[3],10)%256).toString(16);} obj={black:'000000',blue:'0000ff',brown:'a52a2a',cyan:'00ffff',gray:'808080',green:'008000',lime:'00ff00',magenta:'ff00ff',orange:'ffa500',pink:'ffc0cb',purple:'800080',red:'ff0000',turquoise:'40e0d0',violet:'ee82ee',white:'ffffff',yellow:'ffff00'};if(obj[str])return hash+obj[str];return hash+'ffffff';};CDE.rgb=function(color,g,b,noHash){if(arguments.length>=3){return CDE.nColor("rgb("+color+","+g+","+b+")",noHash);} color=CDE.nColor(color,true);return{r:parseInt(color.substring(0,2),16),g:parseInt(color.substring(2,4),16),b:parseInt(color.substring(4,6),16)};};CDE.enableActiveElement=function(){document.body.focus();if(typeof document.enableActiveElement!=='undefined'||!document.addEventListener)return;var trackOn=function(evt){if(evt&&evt.target){document.activeElement=evt.target==document?null:evt.target;}};var trackOff=function(evt){document.activeElement=null;};document.addEventListener("focus",trackOn,true);document.addEventListener("blur",trackOff,true);};CDE.stopEvent=function(evt){if(evt.stopPropagation)evt.stopPropagation();if(evt.preventDefault)evt.preventDefault();evt.cancelBubble=true;evt.returnValue=false;return false;};CDE.cssToJs=function(str){return str.replace(/(-.)/g,function(c){return c.substring(1,2).toUpperCase();});};CDE.jsToCss=function(str){return str.replace(/([A-Z])/g,function(c){return'-'+c.toLowerCase();});};CDE.escapeHtml=function(s){if(typeof s=='undefined')s='';return s.replace(/&/g,'&').replace(//g,'>');};CDE.escapeUrl=function(s){if(typeof s!=='string')return s;return s.replace(/%/g,'%25').replace(/&/g,'%26');};CDE.prototype.getCaretPos=function(){var e=this.dom();if(this._boolFailProof&&!e)return;if("selectionStart"in e)return e.selectionStart;var bookmark=document.selection.createRange().getBookmark();var selection=e.createTextRange();selection.moveToBookmark(bookmark);var before=e.createTextRange();before.collapse(true);before.setEndPoint("EndToStart",selection);return before.text.length;};CDE.prototype.setCaretPos=function(pos){var e=this.dom();if(this._boolFailProof&&!e)return this;if(e.createTextRange){var range=e.createTextRange();range.move('character',pos);range.select();}else if(e.selectionStart){e.focus();e.setSelectionRange(pos,pos);} return this;};CDE.prototype.putCaretPos=function(str){var old,e=this.dom(),before='',after='',pos;if(this._boolFailProof&&!e)return this;this.focus();pos=this.getCaretPos();old=this.val();if(pos>0)before=old.substring(0,pos);if(pos")).id("debugtext"+Math.random()).addTo(cde).uncache();cde.db();return str;};} if(CDE._debugInit&&CDE._debugInit.length){window.debug("Pre debug messages:");for(i=0;i"+i+" = ["+CDE._doms[i]+"]"+(CDE._doms[i]?" ("+CDE._doms[i].id+")":"")+"";}} debug(s,true);}};CDE._unload=function(){CDE._doms=null;};CDE.wrap(window).on('unload',CDE._unload);CDE.ColorPicker={hsv:[0,0,1],rgb:[1,1,1],strCurBg:'',cdeCp:null,cdeTarget:null,cdeX:null,cdePnt:null,cdeVal:null,cdePrv:null,cdeTxt:null,settings:{mixTarget:false,boolNoAutoUpdate:false,intZ:2,intOffsetX:0,intOffsetY:0,strStartColor:false,strStartBg:false,onChangeColor:null,onChangeBg:null,onClose:null,spriteUrl:'sprite.png',boolColorBoxes:false,strColor0:'#ffffff',strColor1:'#000000',strColor2:'#ffff00',strColor3:'#00ff00',strColor4:'#00ffff',strColor5:'#0000ff',strColor6:'#800080',strColor7:'#a52a2a',strColor8:'#ff0000',strColor9:'#ffaa00',boolBackgrounds:false,strBg0:'http://qfox.nl/img/bg1.png',strBg1:'http://qfox.nl/img/bg2.png',strBg2:'http://qfox.nl/img/bg3.png',strBg3:'http://qfox.nl/img/bg4.png',strBg4:'http://qfox.nl/img/bg5.png',_:0},show:function(dom,ops){if(this.cdeCp)this.remove();if(!ops)ops={};var that=this,strStartColor,strStartBg,boolDown,pos,key;for(key in ops)this.settings[key]=ops[key];this.cdeTarget=CDE.wrap(this.settings.mixTarget||dom);strStartColor=that.settings.strStartColor||this.cdeTarget.getStl('backgroundColor',true);strStartBg=that.settings.strStartBg||this.cdeTarget.getStl('backgroundImage');if(strStartBg&&strStartBg.substring(0,4)=='url(')strStartBg=strStartBg.substring(4,strStartBg.length-1);pos=CDE.wrap(dom).pos();dom=null;var onLeftMove=function(_,x,y){if(!boolDown)return;if(x>180)x=180;if(y>101)y=101;if(x<0)x=0;if(y<0)y=0;that.setHsv((x-1)*2,101-y);return CDE.stopEvent(_);};var onRightMove=function(_,x,y){if(!boolDown)return boolDown;that.setHsv(false,false,101-y);return CDE.stopEvent(_);};var onLeftDown=function(_,x,y){boolDown=true;onLeftMove(_,x,y);};var onRightDown=function(_,x,y){boolDown=true;onRightMove(_,_,y);};var onUp=function(_){boolDown=false;};this.cdeCp=CDE.div().bgc('#ccc').z(that.settings.intZ).abs(pos.x+parseInt(that.settings.intOffsetX),pos.y+parseInt(that.settings.intOffsetY),270,135+(that.settings.boolColorBoxes?25:0)+(this.settings.boolBackgrounds?48:0)).sb('black').on('mouseup',onUp).add(CDE.lnk('close',function(){that.remove();}).c('black').fr().mr(5),that.cdeTxt=CDE.div().c('black').txt(strStartColor+' bg: '+strStartBg).ml(5),CDE.div().css({cursor:'crosshair'}).oh().fl().sprite(that.settings.spriteUrl).wh(181,101).m(5).ml(that.settings.boolColorBoxes||this.settings.boolBackgrounds?9:5).rel().on('mousemove',onLeftMove,'element').on('mousedown',onLeftDown,'element').on('mouseup',onUp).add(that.cdeX=CDE.div().sprite(that.settings.spriteUrl,206,0).abs(0,0,11,11).ns()),this.cdeVal=CDE.div().css('color').fl().rel().wh(25,101).m(5).sprite(that.settings.spriteUrl,181).on('mousemove',onRightMove,'element').on('mousedown',onRightDown,'element').on('mouseup',onUp).add(that.cdePnt=CDE.div().sprite(that.settings.spriteUrl,206,12).abs("-7px","-3px",5,9).ns()),that.cdePrv=CDE.div().fl().wh(25,101).m(5).ns()).o(0).dba().draggable();if(this.settings.boolColorBoxes){var onExampleColor=function(){var c=CDE.wrap(this).getStl('background-color',true);that.setRgb(c);};this.cdeCp.add(CDE.clearLeft(),CDE.div().ml(3).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor0).gc('_cp'),CDE.div().ml(5).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor1).gc('_cp'),CDE.div().ml(5).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor2).gc('_cp'),CDE.div().ml(5).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor3).gc('_cp'),CDE.div().ml(5).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor4).gc('_cp'),CDE.div().ml(5).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor5).gc('_cp'),CDE.div().ml(5).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor6).gc('_cp'),CDE.div().ml(5).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor7).gc('_cp'),CDE.div().ml(5).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor8).gc('_cp'),CDE.div().ml(5).fl().wh(20,20).sb('black').cp().ns().on('click',onExampleColor).bgc(this.settings.strColor9).gc('_cp'),CDE.clearLeft());} if(this.settings.boolBackgrounds){var onExampleBg=function(){that.setBg(that.getBg(CDE.wrap(this)));};this.cdeCp.add(this.cdeBg1=CDE.div().ml(3).mt(3).fl().wh(47,47).sb('black').cp().ns().on('click',onExampleBg).bg(this.settings.strBg0).cl().gc('_cp'),this.cdeBg2=CDE.div().ml(5).mt(3).fl().wh(47,47).sb('black').cp().ns().on('click',onExampleBg).bg(this.settings.strBg1).gc('_cp'),this.cdeBg3=CDE.div().ml(5).mt(3).fl().wh(47,47).sb('black').cp().ns().on('click',onExampleBg).bg(this.settings.strBg2).gc('_cp'),this.cdeBg4=CDE.div().ml(5).mt(3).fl().wh(47,47).sb('black').cp().ns().on('click',onExampleBg).bg(this.settings.strBg3).gc('_cp'),this.cdeBg5=CDE.div().ml(5).mt(3).fl().wh(47,47).sb('black').cp().ns().on('click',onExampleBg).bg(this.settings.strBg4).gc('_cp'));} this.setRgb(strStartColor);if(this.settings.boolBackgrounds)this.setBg(strStartBg,true);this.cdeCp.fadeIn();},setRgb:function(str){if(!this.cdeCp){if(window.debug)debug("CDE.ColorPicker.setRgb: no panel...");return;} this.hexToRgb(str);this.rgbToHsv();},setHsv:function(h,s,v){if(typeof h=='number')this.hsv[0]=Math.max(Math.min(parseInt(h),360),0);if(typeof s=='number')this.hsv[1]=Math.max(Math.min(parseInt(s),100),0)/100;if(typeof v=='number')this.hsv[2]=Math.max(Math.min(parseInt(v),100),0)/100;this.hsvToRgb(false,false,1);this.cdeVal.bgc(this.rgbToHex());this.hsvToRgb();this.cdePrv.bgc(this.rgbToHex());if(!this.settings.boolNoAutoUpdate)this.cdeTarget.bgc(this.rgbToHex());this.cdeX.xy(Math.floor(this.hsv[0]/2)-5,99-Math.floor(this.hsv[1]*100)-4);this.cdePnt.y(100-Math.floor(this.hsv[2]*100)-6);this.updateTxt();if(this.settings.onChangeColor)this.settings.onChangeColor(this.rgbToHex());},remove:function(){if(this.cdeCp){this.cdeCp.fadeDel(false,true,true);CDE.gc('_cp');this.cdeBg1=this.cdeBg2=this.cdeBg3=this.cdeBg4=this.cdeBg5=this.cdeCp=this.cdeTarget=this.cdeX=this.cdePnt=this.cdeVal=this.cdePrv=this.cdeTxt=null;if(this.settings.onClose)this.settings.onClose(this.rgbToHex());}},rgbToHsv:function(r,g,b){if(typeof r!='number')r=this.rgb[0];if(typeof g!='number')g=this.rgb[1];if(typeof b!='number')b=this.rgb[2];r/=255;g/=255;b/=255;var min=Math.min(Math.min(r,g),b);var max=Math.max(Math.max(r,g),b);var h,s,v;s=max==0?0:(max-min)/max;v=max;if(max==min)h=0;else if(r>g&&r>b)h=((((g-b)/(max-min))*60)+360)%360;else if(g>b)h=(((b-r)/(max-min))*60)+120;else h=(((r-g)/(max-min))*60)+240;this.setHsv(h,s*100,v*100);},hsvToRgb:function(h,s,v){if(typeof h!='number')h=this.hsv[0];if(typeof s!='number')s=this.hsv[1];if(typeof v!='number')v=this.hsv[2];var hi=Math.floor(h/60)%6;var f=(h/60)-hi;var p=v*(1-s);var q=v*(1-s*f);var t=v*(1-(1-f)*s);var r;switch(hi){case 0:r=[v,t,p];break;case 1:r=[q,v,p];break;case 2:r=[p,v,t];break;case 3:r=[p,q,v];break;case 4:r=[t,p,v];break;case 5:r=[v,p,q];break;} this.rgb=[Math.floor(r[0]*255),Math.floor(r[1]*255),Math.floor(r[2]*255)];return this.rgb;},rgbToHex:function(){return CDE.rgb(this.rgb[0],this.rgb[1],this.rgb[2]);},hexToRgb:function(str){var rgb=CDE.rgb(str);this.rgb=[rgb.r,rgb.g,rgb.b];return this.rgb;},setBg:function(url,boolStart){if(url==this.strCurBg&&!boolStart){url='none';} this.strCurBg=url;if(this.settings.onChangeBg)this.settings.onChangeBg(url);this.cdeBg1.sb(this.settings.strBg0==url?'red':'black');this.cdeBg2.sb(this.settings.strBg1==url?'red':'black');this.cdeBg3.sb(this.settings.strBg2==url?'red':'black');this.cdeBg4.sb(this.settings.strBg3==url?'red':'black');this.cdeBg5.sb(this.settings.strBg4==url?'red':'black');this.cdePrv.bg(url);if(!this.settings.boolNoAutoUpdate)this.cdeTarget.bg(url);},getBg:function(cde){var c=cde.getStl('background-image');if(c=='none'||c.substring(0,3)!='url')return'none';return(new RegExp('url\\((\'|\")?([^)\'\"]*)(\'|\")?\\)')).exec(c)[2];},updateTxt:function(){if(!this.cdeCp){if(window.debug)debug("CDE.ColorPicker.setRgb: no panel...");return;} this.cdeTxt.txt(this.rgbToHex());},_:0};var Grid=function(tileSize,tileWidth,tileHeight){this.intTileSize=tileSize;this.intTileWidth=tileWidth;this.intTileHeight=tileHeight;this.intW=tileSize*tileWidth;this.intH=tileSize*tileHeight;this.intX=0;this.intY=0;this.intBeforeBounds={x1:200,y1:200,x2:300,y2:300};};Grid.prototype.getTileSize=function(){return this.intTileSize;};Grid.prototype.x=function(x){if(arguments.length==1)this.intX=x;return this.intX;};Grid.prototype.y=function(y){if(arguments.length==1)this.intY=y;return this.intY;};Grid.prototype.addX=function(x){this.intX+=x;return this.intX;};Grid.prototype.addY=function(y){this.intY+=y;return this.intY;};Grid.prototype.w=function(){return this.intW;};Grid.prototype.h=function(){return this.intH;};Grid.prototype.toString=function(){return"[Grid: "+this.x+"x"+this.y+", "+this.w+" "+this.h+"]";};var Player=function(x,y){this.health=100;this.vpPos={x:x,y:y};};Player.prototype.x=function(x){if(arguments.length==1)this.vpPos.x=x;return this.vpPos.x;};Player.prototype.y=function(y){if(arguments.length==1)this.vpPos.y=y;return this.vpPos.y;};Player.prototype.addX=function(x){this.vpPos.x+=x;return this.vpPos.x;};Player.prototype.addY=function(y){this.vpPos.y+=y;return this.vpPos.y;};var Timer=function(f,t){this.f=f;this.t=t;this.timer=setInterval(f,t);};Timer.prototype.changeTime=function(t){t=~~t;this.t=t;clearInterval(this.timer);this.timer=setInterval(this.f,t);};Timer.prototype.stop=function(){clearInterval(this.timer);};Timer.prototype.start=function(){this.changeTime(this.t);};var TileEditor={factor:6,size:4,img:new Image(),offset:0};TileEditor.plot=function(_,x,y){x=~~(x/TileEditor.factor);y=~~(y/TileEditor.factor);if(x==100||y==100)return;x-=~~((TileEditor.size-1)/2);y-=~~((TileEditor.size-1)/2);TileEditor.cdeCoord.txt(~~(x/TileEditor.factor)+"x"+~~(y/TileEditor.factor));TileEditor.cvs.fillRect(x*TileEditor.factor,y*TileEditor.factor,TileEditor.size*TileEditor.factor,TileEditor.size*TileEditor.factor);if(TileEditor.plotTimer)clearTimeout(TileEditor.plotTimer);TileEditor.plotTimer=setTimeout(function(){TileEditor.arrPreview[4].atr('src',TileEditor.cdeCanvas.dom().toDataURL());TileEditor.plotTimer=0;},100);};TileEditor.dragStart=function(x,y,btn){if(btn!=CDE.BUTTON_LEFT)return false;x-=25;y-=25;CDE.move.cde=this.clone().ns().o(0.5).abs(x,y).dba();CDE.move.cdeX=x;CDE.move.cdeY=y;};TileEditor.dragStop=function(x,y){var drag,prev,tx,ty;drag=this.pos();drag.x+=25;drag.y+=25;prev=TileEditor.arrPreview[0].pos();tx=~~((drag.x-prev.x)/100);ty=~~((drag.y-prev.y)/100);if(tx>=0&&tx<3&&ty>=0&&ty<3&&!(tx==1&&ty==1)){TileEditor.arrPreview[(ty*3)+tx].src(this.src());}else{prev=TileEditor.cdeCanvas.pos();if(drag.x>=0&&drag.y>0&&drag.x");var cde,url;TileEditor.img.src=TileEditor.cdeCanvas.dom().toDataURL();cde=CDE.dom('canvas').atr('width',100).atr('height',100);cde.dom().getContext('2d').drawImage(TileEditor.img,0,0,100,100);url=cde.dom().toDataURL();debug(url);}).id('uri').fr().mr(5),TileEditor.cdeCoord=CDE.html().id('tilecoords').mr(5).fr(),CDE.lnk('',function(){CDE.ColorPicker.show(this,{intZ:1050,boolColorBoxes:true,spriteUrl:'colorpicker_sprite.png',onChangeColor:function(c){TileEditor.cvs.fillStyle=TileEditor.cvs.strokeStyle=c;}});}).fl().wh(16,16).bgc('black').sb('black').mr(5).mt(1),CDE.text('['),CDE.lnk('-',function(){cdeSize.txt(TileEditor.size=Math.max(1,TileEditor.size-1));}).id('smaller').ml(5).mr(5),cdeSize=CDE.html(TileEditor.size).id('size').mr(5),CDE.lnk('+',function(){cdeSize.txt(TileEditor.size=Math.min(20,TileEditor.size+1));}).id('larger').mr(5),CDE.text(']'),CDE.lnk('rect',function(){TileEditor.boolRect=!TileEditor.boolRect;this.style.fontWeight=TileEditor.boolRect?'bolder':'normal';}).id('rect').ml(5).mr(20),CDE.lnk('save',function(){var cde,url;TileEditor.img.src=TileEditor.cdeCanvas.dom().toDataURL();cde=CDE.dom('canvas').atr('width',100).atr('height',100);cde.dom().getContext('2d').drawImage(TileEditor.img,0,0,100,100);url=cde.dom().toDataURL();TileEditor.arrTiles.push(url);TileEditor.updateList();setKey(TileEditor.arrTiles,'tiles');}).id('save').mr(5),CDE.lnk('clear',function(){TileEditor.cvs.fillStyle='white';TileEditor.cvs.fillRect(0,0,TileEditor.factor*100,TileEditor.factor*100);TileEditor.cvs.fillStyle='black';}).id('clear').mr(5),CDE.lnk('help',function(){CDE.popup("Tile editor help","This is the tile editor. You can add new tiles here.
"+"Start drawing from scratch or drag an existing tile from the bottom-right to the center. You can
"+"also drag a tile to the top-right to check border-connections. The center will automatically show
"+"your current creation when you start drawing.
"+"The pen-size can be changed by pressing + or -.
"+"The color can be changed by clicking on the colored square.
"+"There are two drawing modes; regular and rectangle. Clicking on 'rectangle' will toggle this.
"+"Pressing save will add your current painting to the list. Tiles are saved using sessionStorage
"+"which is NOT supported by Chrome. There is no server interaction.
"+"You can use created tiles immediately in the grid editor.
"+"Additionally there's a method to print the dataUrl for the current painting and for all tiles.
"+"I know the paint methods are very simple (probably still an understatement) but this is just
"+"a proof of concept... :)
"+"I might add the importing of images from a local computer (using HTML5 File API) some day...

");}).id('help').ml(50)),TileEditor.cdeCanvas=CDE.dom('canvas').atr('cursor','crosshair').wh(TileEditor.factor*100,TileEditor.factor*100).atr('width',TileEditor.factor*100).atr('height',TileEditor.factor*100).fl().sb('black').bgc('white').cc().css('image-rendering','optimizeQuality').on('click',TileEditor.onCanvasClick,'element').on('mousedown',TileEditor.onCanvasMouseDown,'element').on('mousemove',TileEditor.onCanvasMouseMove,'element').on('mouseup',TileEditor.onCanvasMouseUp,'element')).dba().centerFade();TileEditor.cvs=TileEditor.cdeCanvas.dom().getContext('2d');TileEditor.cvs.fillStyle="white";TileEditor.cvs.fillRect(0,0,TileEditor.factor*100,TileEditor.factor*100);TileEditor.cvs.fillStyle="black";};GridEditor={empty:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAJYCAYAAAC+ZpjcAAAKqElEQVR4nO3WQQkAMAzAwPo3vZoIDMqdgjwzDwCA1PwOAAC4xmABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAzGABAMQMFgBAbAFY5E9dFFEQ0wAAAABJRU5ErkJggg==',gridX:0,gridY:0,width:5,height:5,size:10,listPos:0};GridEditor.wh=GridEditor.width*GridEditor.height;GridEditor.createGrid=function(cdeGrid){var i,j,t,x,y;GridEditor.arrGridCde=[];for(i=0;i=GridEditor.arrGrid.length)t=GridEditor.empty;else t=TileEditor.arrTiles[GridEditor.arrGrid[x+(y*GridEditor.size)]]||GridEditor.empty;GridEditor.arrGridCde[i]=CDE.img(t).abs(x*100,y*100,100,100).addTo(cdeGrid);}};GridEditor.updateGrid=function(x,y){var i,n,t;GridEditor.gridX=x;GridEditor.gridY=y;for(i=0;i=GridEditor.arrGrid.length)t=GridEditor.empty;else t=TileEditor.arrTiles[GridEditor.arrGrid[n]]||GridEditor.empty;GridEditor.arrGridCde[i].src(t);}};GridEditor.createList=function(cdeList){var i;GridEditor.arrCdeImg=[];for(i=0;i<20;++i){CDE.div().abs((i%2)*51,~~(i/2)*51,50,50).bb(1,false,false).br(1,false,false).add(GridEditor.arrCdeImg[i]=CDE.img(TileEditor.arrTiles[i]).abs(0,0,50,50).cm().draggable(false,{onstop:(function(i){return function(x,y){var pos=GridEditor.arrGridCde[0].pos();if(x>pos.x&&x<(pos.x+500)&&y>pos.y&&y<(pos.y+500)){x=~~((x-pos.x)/100);y=~~((y-pos.y)/100);GridEditor.arrGridCde[x+(y*GridEditor.width)].src(TileEditor.arrTiles[i+GridEditor.listPos]);GridEditor.arrGrid[(x+GridEditor.gridX)+((y+GridEditor.gridY)*GridEditor.size)]=i+GridEditor.listPos;setKey(GridEditor.arrGrid,'grid');} this.xy(0,0);};})(i)})).addTo(cdeList);}};GridEditor.updateList=function(){var i;for(i=0;i<20;++i){GridEditor.arrCdeImg[i].src(TileEditor.arrTiles[i+GridEditor.listPos]);}};GridEditor.start=function(){var cdeBlack,cdeEditor,cdeGrid,cdeList,startX,startY,i,j,n;Game.objTimer.stop();cdeBlack=CDE.disablePage();cdeEditor=CDE.div().wh(630,540).z(1000).o(0).bgc('white').add(CDE.div().add(CDE.lnk('down',function(){GridEditor.listPos+=2;GridEditor.updateList();}).fr().mr(10),CDE.lnk('up',function(){GridEditor.listPos-=2;GridEditor.updateList();}).fr().mr(50),CDE.lnk('close',function(){cdeEditor.fadeDelUncache();cdeBlack.fadeDelUncache();Gui.updateTiles();}).ml(10).mr(10),CDE.lnk('show',function(){debug(GridEditor.arrGrid);}).mr(50),CDE.lnk('help',function(){CDE.popup('Grid editor help',"This editor allows you to change the grid used in the back of the demo.
"+"You can drag tiles from the list on the right to the grid to change
"+"the tile facing. Changes are saved immediately, to sessionStorage (not
"+"supported by Chrome right now!), there is no server interaction.
"+"You can drag the grid to see more of it.
"+"You can see more tiles (if you have them) by clicking up and down.
"+"Right now, changes to the grid are only visible on reload.
"+"(So that won't work on Chrome, no)

");})),CDE.div().rel().add(cdeGrid=CDE.div().abs(10,10,500,500).sb('black').add(CDE.div().id('eventLayer').abs(0,0,500,500).z(5).cm().draggable(true,{boolNoMove:true,onstart:function(x,y){startX=GridEditor.gridX;startY=GridEditor.gridY;},ondrag:function(_,_,dx,dy){x=~~(-dx/100)+startX;y=~~(-dy/100)+startY;x=Math.max(0,Math.min(GridEditor.size-GridEditor.width,x));y=Math.max(0,Math.min(GridEditor.size-GridEditor.height,y));if(GridEditor.gridX!=x||GridEditor.gridY!=y){GridEditor.updateGrid(x,y);}}}))),cdeList=CDE.div().abs(520,20,101,510).sb('black').bb(0).br(0)).centerFade();GridEditor.createGrid(cdeGrid);GridEditor.createList(cdeList);};var Game={};var Gui={keys:{}};Gui.addTilesToGrid=function(){var x,y,tx,ty,rcolor,arr,tile;Gui.arrTiles=arr=[];for(x=0;x"+"You can move around by the directional keys (left, up, etc).
"+"The background is a grid of tiles. You can create your own
"+"tiles using the tile editor and you can change the layout
"+"of the grid using the grid editor.
"+"The entire thing is created using Javascript. The tile
"+"editor uses canvas for drawing. The result is refreshed
"+"using a Javascript timer. This timer executes the function
"+"every 1000/fps miliseconds. Various browsers give various
"+"results. The displayed fps is literal.
"+"It will not work on IE. Chrome does not support sessionData
"+"but gets by far the most fps.
"+"The entire application does not communicate with the server.
"+"SessionData (html5) is used for storage, canvas (html5) is used
"+"for drawing. DataUrls are used to the max :).
"+"See credits for author details. The editors have their own help.

");}).mr(5),CDE.lnk('Author',function(){CDE.popup("About the author","Created by Peter van der Zee (qFox), January 2010

"+"It was meant as a scroll demo. The red 'player' will move only
"+"in the center part of the viewport. Otherwise the grid in the
"+"back will move, until a border is reached. This gives you a
"+"very natural movement using Javascript.

"+"Of course, I figured why not create some tiles to actually have
"+"a background to scroll. And then I added a grid editor and the
"+"whole thing just got out of hand :)

"+"Anyways, I'm quite content with the results and I'll probably
"+"continue working on it. Maybe even build it up to a platform.

"+"The whole thing took less than a week (about 50 hours, I'd say)

"+"Improvements: Importing local files to tiles (html5 file api),
"+"being able to mark areas as forbidden (and collision detection),
"+"adding enemies and enemy behaviour (through scripting), being
"+"able to model the player (and other actors), improving the tile
"+"editor (more brushes, copy, spriting, undo, etc.) and more... :)

"+"You can visit my site here: qfox.nl.
"+"Or follow me as @kuvos on twitter :)

");})),Gui.cdeViewport=CDE.div().rel().oh().id('viewport').wh(Gui.intViewportWidth+2,Gui.intViewportHeight+2)).dba().center();};Gui.listenToKeyboard=function(){CDE.wrap(window).on('keydown',function(evt,key){if(key>=37&&key<=40){switch(key){case 37:Gui.keys.left=true;break;case 38:Gui.keys.up=true;break;case 39:Gui.keys.right=true;break;case 40:Gui.keys.down=true;break;} return CDE.stopEvent(evt);}},'keyboard').on('keyup',function(evt,key){if(key>=37&&key<=40){switch(key){case 37:Gui.keys.left=false;break;case 38:Gui.keys.up=false;break;case 39:Gui.keys.right=false;break;case 40:Gui.keys.down=false;break;} return CDE.stopEvent(evt);}},'keyboard').on('keypress',function(evt,key){if(key>=37&&key<=40){return CDE.stopEvent(evt);}},'keyboard');};Gui.init=function(){Gui.center={x:0,y:0};Gui.intTileSize=100;Gui.intTileWidth=10;Gui.intTileHeight=10;Gui.intViewportWidth=500;Gui.intViewportHeight=500;Game.objGrid=new Grid(Gui.intTileSize,Gui.intTileWidth,Gui.intTileHeight);Game.objPlayer=new Player(45,180);Gui.showViewport();Gui.cdeGrid=CDE.div().z(1).id('gridLayer').abs(0,0,Gui.intTileWidth*Gui.intTileSize,Gui.intTileHeight*Gui.intTileSize);Gui.addTilesToGrid();Gui.cdeGrid.addTo(Gui.cdeViewport);Gui.cdePlayer=CDE.div().id('player').sprite('player.png',0,0).z(10).abs(30,30,20,20).addTo(Gui.cdeViewport);CDE.div().id('wire').z(2).abs(0,0,Gui.intViewportWidth,Gui.intViewportHeight).sb('red').addTo(Gui.cdeViewport).uncache();Gui.listenToKeyboard();CDE.gc('main');};Gui.start=function(){var lastGrid,lastPlayer,secondNow,lastSecond,frames;lastGrid={};lastPlayer={};secondNow=lastSecond=0;frames=0;Game.objTimer=new Timer(function(){var moved,t=CDE.now()*1000;secondNow=~~(t/1000)%10;if(secondNow!=lastSecond){lastSecond=secondNow;Gui.cdeFps.txt(frames+" fps");frames=1;}else{++frames;} moved=(Game.objGrid.x()!=lastGrid.x||Game.objGrid.y()!=lastGrid.y);if(moved){lastGrid.x=Game.objGrid.x();lastGrid.y=Game.objGrid.y();Gui.cdeGrid.xy(-lastGrid.x+'px',-lastGrid.y+'px');} if(Gui.keys.left){if(Game.objPlayer.x()=0)Game.objGrid.addX(-1);else if(Game.objPlayer.x()>0)Game.objPlayer.addX(-1);} if(Gui.keys.up){if(Game.objPlayer.y()=0)Game.objGrid.addY(-1);else if(Game.objPlayer.y()>0)Game.objPlayer.addY(-1);} if(Gui.keys.right){if(Game.objPlayer.x()>=Game.objGrid.intBeforeBounds.x2&&Game.objGrid.x()<=(Game.objGrid.w()-Gui.intViewportWidth-2))Game.objGrid.addX(1);else if(Game.objPlayer.x()<=(Gui.intViewportWidth-20))Game.objPlayer.addX(1);} if(Gui.keys.down){if(Game.objPlayer.y()>=Game.objGrid.intBeforeBounds.y2&&Game.objGrid.y()<=(Game.objGrid.h()-Gui.intViewportHeight-2))Game.objGrid.addY(1);else if(Game.objPlayer.y()<=(Gui.intViewportHeight-20))Game.objPlayer.addY(1);} moved=(Game.objPlayer.x()!=lastPlayer.x||Game.objPlayer.y()!=lastPlayer.y);if(moved){lastPlayer.x=Game.objPlayer.x();lastPlayer.y=Game.objPlayer.y();Gui.cdePlayer.xy(lastPlayer.x+'px',lastPlayer.y+'px');}},~~(1000/60));};