var Figure=new Class({initialize:function(a){this.element=($type(a)=="element")?a:$(a);this.width=this.element.getSize().x;this.height=this.element.getSize().y},setHeight:function(a){this.element.setStyle("height",a);this.height=this.element.getSize().y},setWidth:function(a){this.element.setStyle("width",a);this.width=this.element.getSize().x},setBackground:function(a){this.element.setStyle("background",a)},displayInfo:function(){console.log("element:",this.element);console.log("size: {x:",this.width,"y:",this.height,"}")}});var Shape=new Class({Extends:Figure,initialize:function(a,b){this.parent(a);this.owner=(b===undefined)?this.element.getParent():b;this.position=this.element.getPosition(this.owner);this.x=this.position.x;this.y=this.position.y},resize:function(a,b){this.setWidth(a);this.setHeight(b)},move:function(c,b,a){this.element.setPosition({x:c,y:b})},opacity:function(a){this.element.setStyle("opacity",a)},foreground:function(a){this.element.setStyle("z-index",a)},label:function(a,b){this.element.setProperty("text",a);this.element.setStyle("color",b)},displayInfo:function(){this.parent();console.log("owner:",this.owner);console.log("position: {x:",this.position.x,"y:",this.position.y,"}")}});var Rectangle=new Class({Extends:Shape,initialize:function(a){this.parent(a);shape:"rectangle"},displayInfo:function(){this.parent();console.log("shape:",this.shape)}});var Canvas=new Class({Extends:Figure,clear:function(){this.element.empty()},draw:function(b,c){var a=new Element("div",{"class":b,id:c,styles:{position:"absolute"}});a.inject(this.element);return new Rectangle(a)}});