First, don't use the "load" event if you don't know what you are doing. You should use the "domready" event instead:
http://mootools.net/docs/core/Utilities/DOMReady Any function that don't involve the DOM can be kept out of the "domready" event. Was it clear? If not, just tell us. Hope it helped. -- Fábio Miranda Costa front...@portalpadroes Globo.com *github:* fabiomcosta *twitter:* @fabiomiranda *ramal:* 6410 On Thu, Oct 21, 2010 at 7:58 AM, shouvik <[email protected]> wrote: > $(window).addEvent('load, function() { > CANVAS.init({ canvasElement : 'canvas', interactive : true }); > > var itemlayer = CANVAS.layers.add({ id : 'items' }); > > for(var j = 0; j < 5; j++) > { > for(var i = 0; i < 5; i++) > { > > itemlayer.add({ > > id : 'item-'+i + '-' + j, > x : 51 * i, > y : 51 * j, > w : 50, > h : 50, > state : 'normal', > interactive : true, //although they have no interactive > events! > colors : { normal : '#f00', hover : '#00f' }, > events : { > onDraw : function(ctx){ > > ctx.fillStyle = this.colors[this.state]; > ctx.fillRect(this.x,this.y,this.w,this.h); > > this.setDims(this.x,this.y,this.w,this.h); > } > } > > }); > > > } > > } > > > > > $('canvas').addEvents({ //adding native dom events to <canvas> element > > mousedown : function(e){ > this.store('down',true); > }, > > mousemove : function(e){ > > if(this.retrieve('down',false)){ > if( hoverItem = CANVAS.findTarget( CANVAS.getMouse(e) ) ) > { > hoverItem.state = 'hover'; //set items state to hover > if it is hit > } > } > > }, > > mouseup : function(e){ > this.store('down',false); > > CANVAS.layers.get('items').items.each(function(item){ > item.state = 'normal'; //reset all items' state! > }); > > } > > }).store('down',false); //flag wether mouse is down or not stored in > dom > > > > CANVAS.addThread(new Thread({ > id : 'myThread', > onExec : function(){ > CANVAS.clear().draw(); > } > })); > > }); > > > here is a jsfiddle implementation of the code... Any advice would be > very much appreciated! Thanks... > http://jsfiddle.net/WRRns/
