raphael - working with Javascript object model -

what trying achieve creating objects following better pattern. using raphael.js library creation of graphical shapes.

problem @ line:

x: "" + this.canvas_x + this.paper["width"]/2 - self.width/4, 

the error getting :

uncaught typeerror: cannot read property 'width' of undefined 

i figured out error @ this.paper["width"]/2. new using javascript , not able understand error doing

var graphics={         create_canvas: function(){                 $("#canvasdiv").append("<div id='id1' width='80px' height='50px'></div>");         },         canvas_x:get_left_top("canvasdiv")[0],         canvas_y:get_left_top("canvasdiv")[1],         canvas_width:function(){return $("#canvasdiv").width()},         canvas_height:function(){return $("#canvasdiv").height()},         paper:{             width:900,             height:700,             create: function(){                 return new raphael(document.getelementbyid('canvasdiv'),this.width,this.height);             }         },         vswitch:{             color:"black",             text:"vswitch",             width:"150",             height:"150",             x: "" + this.canvas_x + this.paper["width"]/2 - self.width/4,             y: graphics.canvas_y,             delay:"2000",             create: function(paper){                 settimeout(function(){                         paper.rect(x,y,width,height).attr({fill : "black"})                         },delay);             }         }, } 

this way call being made:

 graphics.create_canvas();     p=graphics.paper.create();     graphics.vswitch.create(p); 

after enter code, try: graphics.paper shouldn't throw errors. this.paper["width"] doesn't have paper property. in case this refers object being created known vswitch.

check out code:

var obj = { x: 0, y: this.x } 

the browser doesn't complain, y undefined. based on rules of creating objects, when goes create y, doesn't know x exists on this or obj.

the following works:

var obj = { x: 0 } obj.y = obj.x 

tips: you're using this @ wrong time, i'd suggest exploring this means. ill give rundown.

open console , enter:

this // window -> blah blah  var f = function() {     console.log(this); } f() // window -> blah blah  var me = {} me.f = f me.f() // object { f: f() } 

in short, this refers owner of function. otherwise refers window, , if you're creating object this isn't bound until object finished (i.e. @ end of brackets).