changeset 1444:167873cd35c5

Merge
author wycc
date Mon, 11 Apr 2011 13:17:05 +0800
parents 2f8e9d66c4c1 (diff) 6fa411fd9549 (current diff)
children ee3e4c996a51
files nodejs/examples/mce/main.svg nodejs/examples/mce/mainmenu.js nodejs/mbapp.js nodejs/svg.js
diffstat 18 files changed, 1341 insertions(+), 90 deletions(-) [+]
line wrap: on
line diff
--- a/configure.ac	Wed Apr 06 21:35:21 2011 +0800
+++ b/configure.ac	Mon Apr 11 13:17:05 2011 +0800
@@ -5,7 +5,8 @@
 AC_INIT([MadButterfly],[0.0],[http://www.assembla.com/spaces/MadButterfly])
 AC_CONFIG_SRCDIR([README.h])
 AC_CONFIG_HEADER([config.h include/mb_config.h])
-AM_INIT_AUTOMAKE([foreign])
+AM_INIT_AUTOMAKE([foreign silent-rules])
+AM_SILENT_RULES([yes])
 
 # Checks for programs.
 AC_PROG_CC
--- a/nodejs/animate.js	Wed Apr 06 21:35:21 2011 +0800
+++ b/nodejs/animate.js	Mon Apr 11 13:17:05 2011 +0800
@@ -11,11 +11,9 @@
 
 function shift_draw(percent) {
     var x, y;
-    
     x = (this.targetx - this.startposx) * percent + this.startposx;
     y = (this.targety - this.startposy) * percent + this.startposy;
     this.obj.center.move(x, y);
-    this._app.refresh();
 }
 
 function shift(app,obj,shiftx,shifty) {
@@ -120,6 +118,7 @@
 	    
     }
 
+
     bbox = obj.bbox;
     bbox.update();
     obj.animated_scale = this;
@@ -211,6 +210,9 @@
 {
     var now = Date.now();
     var i;
+
+    //now = this.lasttime + 300;
+    //this.lasttime += 300;
     
     if (now >= this.end) {
         this.timer.stop();
@@ -223,7 +225,13 @@
     if (now < this.startmove) return;
     var per = (now-this.startmove)/this.duration/1000;
     if (per > 1) per = 1;
-    this.action.draw(per);
+    try {
+	for(a in this.action) {
+	    this.action[a].draw(per);
+	}
+    } catch(e) {
+	sys.puts(e);
+    }
 }
 
 function linear_start()
@@ -231,9 +239,20 @@
     var self = this;
     if (this.timer)
         this.timer.stop();
-    this.timer = setInterval(function() { self.update();}, frame_interval);
+    this.timer = setInterval(function() {
+	var n = Date.now();
+	try {
+            self.update();
+	    self._app.refresh();
+	} catch(e) {
+	    sys.puts("libnear: "+e);
+	}
+
+	//while( Date.now() - n < 1000);
+    }, frame_interval);
     this.startmove = Date.now()+this.starttime*1000;
     this.end = this.startmove+this.duration*1000;
+    this.lasttime = this.startmove;
 }
 function linear_stop() 
 {
@@ -245,19 +264,21 @@
 
 function linear_finish()
 {
-    this.action.draw(1);
+    for(a in this.action)
+	this.action[a].draw(1);
     if (this.callback_end) {
         this.callback_end();
 	this.callback_end=null;
     }
 }
-function linear(action,start, duration) 
+function linear(app,action,start, duration) 
 {
     this.action = action;
     this.duration = duration;
     this.starttime = start;
     this.callback_end = null;
     this.timer=null;
+    this._app =app;
 }
 
 function linear_callback(cb)
@@ -344,12 +365,10 @@
     }
 }
 
-exports.run = function(actions,start,duration,cb) {
+exports.run = function(app,actions,start,duration,cb) {
     var li;
-    for(a in actions) {
-        li = new linear(actions[a],start,duration);
-	li.start();
-    }
+    li = new linear(app,actions,start,duration);
+    li.start();
     li.callbackAtEnd(cb);
 }
 exports.runexp=function(actions,start,exp) {
--- a/nodejs/component.js	Wed Apr 06 21:35:21 2011 +0800
+++ b/nodejs/component.js	Mon Apr 11 13:17:05 2011 +0800
@@ -73,9 +73,13 @@
 }
 
 Component.prototype.toCoord=function() {
-   return this.coord; 
+    return this.realize();
 }
 
+Component.prototype.set_text=function(text) {
+	this.realize();
+	this.coord.set_text("asdsad");
+}
 
 function ComponentManager(app)
 {
--- a/nodejs/coord.cc	Wed Apr 06 21:35:21 2011 +0800
+++ b/nodejs/coord.cc	Mon Apr 11 13:17:05 2011 +0800
@@ -8,6 +8,7 @@
 #include "mb_X_supp.h"
 #include "mb_tools.h"
 #include "njs_mb_supp.h"
+#include <string.h>
 }
 
 #include "mbfly_njs.h"
@@ -15,7 +16,6 @@
 #ifndef ASSERT
 #define ASSERT(x)
 #endif
-
 #define OK 0
 
 /*! \page jsgc How to Manage Life-cycle of Objects for Javascript.
@@ -81,7 +81,14 @@
     FOR_COORDS_PREORDER(coord, child) {
 	child_hdl = (Persistent<Object> *)mb_prop_get(&child->obj.props,
 						      PROP_JSOBJ);
-	if (child_hdl == NULL) continue;
+	/* There is no associated JS object.  Perhaps, it is created
+	 * by xnjsmb_coord_clone_from_subtree().
+	 */
+	if(child_hdl == NULL) {
+	    preorder_coord_skip_subtree(child);
+	    continue;
+	}
+	
 	SET(*child_hdl, "valid", _false);
 	WRAP(*child_hdl, NULL);
 	child_hdl->Dispose();
@@ -91,7 +98,12 @@
 	FOR_COORD_SHAPES(child, mem) {
 	    mem_hdl = (Persistent<Object> *)mb_prop_get(&mem->obj.props,
 							PROP_JSOBJ);
-	    if (mem_hdl == NULL) continue;							
+	    /* There is no associated JS object.  Perhaps, it is
+	     * created by xnjsmb_coord_clone_from_subtree().
+	     */
+	    if(mem_hdl == NULL)
+		continue;
+	    
 	    SET(*mem_hdl, "valid", _false);
 	    WRAP(*mem_hdl, NULL);
 	    mem_hdl->Dispose();
@@ -189,6 +201,8 @@
         return 0;
     }
 
+    if (coord_get_matrix(coord)[idx] == v) return v;
+
     coord_get_matrix(coord)[idx] = v;
 
     js_rt = GET(self, "mbrt")->ToObject();
@@ -238,9 +252,20 @@
 _xnjsmb_coord_clone_from_subtree_mod(Handle<Object> src, Handle<Value> ret) {
     Handle<Object> js_rt;
     Handle<Object> ret_obj = ret->ToObject();
+    coord_t *ret_coord, *child;
+    Handle<Object> child_obj;
 
     js_rt = GET(src, "mbrt")->ToObject();
     SET(ret_obj, "mbrt", js_rt);
+
+    /* Only root of the subtree is warpped.  Descendants of subtree
+     * are not wrapped by JS object.  We have no any method to access
+     * children and members of a coord, now.  So, it is fine.  But,
+     * sometime later, we will provide APIs for traveling a tree.  At
+     * that time, we need to create wrappers for all descendants.
+     */
+    ret_coord = (coord_t *)UNWRAP(ret_obj);
+    xnjsmb_coord_mod(ret_obj, ret_coord);
 }
 
 static coord_t *
@@ -259,6 +284,7 @@
 	*err = "can not clone a subtree (allocate memory)";
 	return NULL;
     }
+    rdman_coord_changed(rdman, cloning);
 
     return cloning;
 }
@@ -271,7 +297,7 @@
     js_rt = GET(self, "mbrt")->ToObject();
     ASSERT(js_rt != NULL);
     rdman = xnjsmb_rt_rdman(js_rt);
-
+    if ((coord->flags & COF_HIDDEN) == 0) return;
     coord_show(coord);
     rdman_coord_changed(rdman, coord);
 }
@@ -285,6 +311,7 @@
     ASSERT(js_rt != NULL);
     rdman = xnjsmb_rt_rdman(js_rt);
 
+    if ((coord->flags & COF_HIDDEN) != 0) return;
     coord_hide(coord);
     rdman_coord_changed(rdman, coord);
 }
@@ -299,6 +326,7 @@
     ASSERT(js_rt != NULL);
     rdman = xnjsmb_rt_rdman(js_rt);
 
+    if (coord_get_opacity(coord) == value->NumberValue()) return;
     
     coord_set_opacity(coord, value->NumberValue());
     rdman_coord_changed(rdman, coord);
@@ -379,6 +407,50 @@
     x = cc(0)*xx+cc(1)*yy+cc(2);
     return Number::New(x);
 }
+
+static int
+xnjsmb_coord_set_text_recursive(coord_t *coord, Handle<Object> self,
+				const char *txt) {
+    shape_t *sh;
+    coord_t *child;
+    Handle<Object> rt;
+    redraw_man_t *rdman;
+
+    FOR_COORD_SHAPES(coord, sh) {
+	printf("shape type %d\n",sh->obj.obj_type);
+	if (sh->obj.obj_type == MBO_STEXT) {
+	    sh_stext_set_text(sh, txt);
+	    /*
+	     * Mark changed.
+	     */
+	    rt = GET(self, "mbrt")->ToObject();
+	    ASSERT(rt != NULL);
+	    rdman = xnjsmb_rt_rdman(rt);
+
+	    if(sh_get_coord(sh))
+		rdman_shape_changed(rdman, sh);
+	    return 1;
+	}
+    }
+    for((child) = STAILQ_HEAD((coord)->children);
+        (child) != NULL;
+        (child) = STAILQ_NEXT(coord_t, sibling, (child))) {
+	/* Invalidate members of a coord */
+	if ( xnjsmb_coord_set_text_recursive(child, self, txt))
+	    return 1;
+    }
+    return 0;
+    
+}
+
+static void
+xnjsmb_coord_set_text(coord_t *coord, Handle<Object> self,
+			 const char *txt) {
+    printf("text=%s\n",txt);
+    xnjsmb_coord_set_text_recursive(coord,self,txt);
+}
+
+
 #undef m
 
 #include "coord-inc.h"
--- a/nodejs/coord.m4	Wed Apr 06 21:35:21 2011 +0800
+++ b/nodejs/coord.m4	Mon Apr 11 13:17:05 2011 +0800
@@ -7,6 +7,9 @@
 	],
 	[METHOD([add_shape], [xnjsmb_coord_add_shape],
 		(SELF, OBJ([shape], [shape], [shape_t]), ERR), 1, []),
+
+	 METHOD([set_text], [xnjsmb_coord_set_text],
+       			    (SELF, STR([txt])), 1, []),
 	 METHOD([remove], [xnjsmb_coord_remove], (SELF), 0, []),
 	 METHOD([clone_from_subtree], [xnjsmb_coord_clone_from_subtree],
 	 	(SELF, OBJ([src], [coord], [coord_t]), ERR), 1,
--- a/nodejs/examples/mce/epg.js	Wed Apr 06 21:35:21 2011 +0800
+++ b/nodejs/examples/mce/epg.js	Mon Apr 11 13:17:05 2011 +0800
@@ -170,28 +170,32 @@
 
 EPG.prototype.getList=function(item,func) {
     var epgsrv = http.createClient(8080, '211.23.50.144');
-    var cmd = '{"Protocol":"EPG-CSP","Command":"SearchRequest","ProgramSub":"'+item.Category+'"}';
+    for (k in this.maincat[item]) {
+	sys.puts(k+"--->"+this.maincat[item][k]);
+    }
+    var catID = this.maincat[item]['Category'];
+    sys.puts(catID);
+    var cmd = '{"Protocol":"EPG-CSP","Command":"SearchRequest","ProgramSub":"'+catID+'"}';
     var headers={
         'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
         'Host':'211.23.50.144:8080',
         'User-Agent':'MadButterfly',
-        'Content-Type':'application/x-www-form-urlencoded'
+        'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'
     };
-    headers['Content-Length'] = cmd.length;
+    //headers['Content-Length'] = cmd.length;
     var request = epgsrv.request('POST', '/IPTV_EPG/EPGService.do?timestamp='+new Date().getTime(),headers);
     var self = this;
-    sys.puts("aaaa");
     var js = '';
-    request.write(cmd);
+    request.write(cmd,encoding='utf-8');
     request.end();
     request.on('response', function(res) {
-        sys.puts("connected");
  	res.on('data',function (data) {
 		js = js + data;
 	});
 	res.on('end', function () {
-		res = JSON.parse(js);
+		res = JSON.parse(unescape(js));
 		sys.puts("parsed");
+		sys.puts(js);
 		func();
 
 	});
--- a/nodejs/examples/mce/main.svg	Wed Apr 06 21:35:21 2011 +0800
+++ b/nodejs/examples/mce/main.svg	Mon Apr 11 13:17:05 2011 +0800
@@ -1,19 +1,41 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg:svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="744.09448" height="1052.3622" id="svg2" version="1.1" inkscape:version="0.48+devel r9798 custom" sodipodi:docname="main.svg" style="display:inline" inkscape:dataloss="true">
+<svg:svg xmlns:dc="http://purl.org/dc/elements/1.1/"
+xmlns:cc="http://creativecommons.org/ns#"
+xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+xmlns:svg="http://www.w3.org/2000/svg"
+xmlns:ns0="http://madbutterfly.sourceforge.net/DTD/madbutterfly.dtd"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+width="744.09448"
+height="1052.3622"
+id="svg2"
+version="1.1"
+inkscape:version="0.48+devel r9799 custom"
+sodipodi:docname="main.svg"
+style="display:inline"
+inkscape:dataloss="true">
     <svg:defs id="defs4">
         <inkscape:perspective sodipodi:type="inkscape:persp3d" inkscape:vp_x="0 : 526.18109 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_z="744.09448 : 526.18109 : 1" inkscape:persp3d-origin="372.04724 : 350.78739 : 1" id="perspective13"/>
         <inkscape:perspective id="perspective2973" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
         <inkscape:perspective id="perspective2975" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
         <inkscape:perspective id="perspective2993" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
     </svg:defs>
-    <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="-28.732419" inkscape:cy="483.73232" inkscape:document-units="px" inkscape:current-layer="s19539" showgrid="false" inkscape:window-width="1680" inkscape:window-height="975" inkscape:window-x="0" inkscape:window-y="25" inkscape:window-maximized="1"/>
+    <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.7" inkscape:cx="450.40502" inkscape:cy="698.63527" inkscape:document-units="px" inkscape:current-layer="s19539" showgrid="false" inkscape:window-width="1680" inkscape:window-height="975" inkscape:window-x="0" inkscape:window-y="25" inkscape:window-maximized="1"/>
     <svg:metadata id="metadata7">
         <rdf:RDF>
             <cc:Work rdf:about="">
                 <dc:format>
                     
+                    
+                    
+                    
                     image/svg+xml
                 
+                
+                
+                
                 </dc:format>
                 <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
                 <dc:title/>
@@ -28,43 +50,131 @@
             <ns0:scene start="79" type="scale" ref="s46101" end="94"/>
             <ns0:scene start="95" type="normal" ref="s78836"/>
             <ns0:scene start="98" type="normal" ref="s19539"/>
+            <ns0:scene start="0" type="normal" ref="s38172" end="94"/>
+            <ns0:scene start="95" type="normal" ref="s21782"/>
         </ns0:scenes>
         <ns0:components/>
     </svg:metadata>
-    <svg:g inkscape:groupmode="layer" id="layer2" inkscape:label="Background" style="display:inline">
-        <svg:image y="-27.637817" x="0" id="image2977" height="1080" width="1920" xlink:href="file:///home/wycc/devel/md6/MadButterfly/nodejs/examples/mce/background.png" inkscape:bbox-x="0.000000" inkscape:bbox-y="0.000000" inkscape:bbox-width="1920.000000" inkscape:bbox-height="1080.000000"/>
-        <svg:g id="s39685" inkscape:label="dup" sodipodi:insensitive="true" style="display: none" inkscape:bbox-x="0.000000" inkscape:bbox-y="0.000000" inkscape:bbox-width="-0.096194" inkscape:bbox-height="-0.000000"/>
+    <svg:g inkscape:groupmode="layer"
+id="layer2"
+inkscape:label="Background"
+style="display:inline">
+        <svg:g id="s39685" inkscape:label="dup" sodipodi:insensitive="true" style="display: none" inkscape:bbox-x="0.000000" inkscape:bbox-y="0.000000" inkscape:bbox-width="-0.112650" inkscape:bbox-height="-0.000000"/>
+        <svg:g id="s38172"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="0.000000"
+inkscape:bbox-y="0.000000"
+inkscape:bbox-width="1920.000000"
+inkscape:bbox-height="1080.000000">
+            <svg:image style="display:inline" y="-27.637817" x="0" id="image2977" height="1080" width="1920" xlink:href="file:///home/wycc/devel/md6/MadButterfly/nodejs/examples/mce/background.png" saved_id="image2977" inkscape:bbox-x="0.000000" inkscape:bbox-y="0.000000" inkscape:bbox-width="1920.000000" inkscape:bbox-height="1080.000000"/>
+        </svg:g>
+        <svg:g id="s21782"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="0.000000"
+inkscape:bbox-y="0.000000"
+inkscape:bbox-width="1920.000000"
+inkscape:bbox-height="1080.000000">
+            <svg:use id="s90444" xlink:href="#image2977" ns0:duplicate-src="image2977" x="0" y="0" width="1" height="1" inkscape:bbox-x="0.000000" inkscape:bbox-y="0.000000" inkscape:bbox-width="1920.000000" inkscape:bbox-height="1080.000000"/>
+        </svg:g>
     </svg:g>
-    <svg:g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" style="display:inline">
-        <svg:g id="Layer 1s1841" inkscape:groupmode="layer" style="display: none" inkscape:bbox-x="24.106397" inkscape:bbox-y="41.428564" inkscape:bbox-width="1871.787214" inkscape:bbox-height="865.714294">
-            <svg:g transform="translate(7.14163,8.5714057)" id="g2999" inkscape:label="lightbar" inkscape:bbox-x="114.284498" inkscape:bbox-y="41.428564" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294">
+    <svg:g inkscape:label="Layer 1"
+inkscape:groupmode="layer"
+id="layer1"
+style="display:inline">
+        <svg:g id="Layer 1s1841"
+inkscape:groupmode="layer"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="41.428564"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
+            <svg:g transform="translate(7.14163,8.5714057)"
+id="g2999"
+inkscape:label="lightbar"
+inkscape:bbox-x="114.284498"
+inkscape:bbox-y="41.428564"
+inkscape:bbox-width="228.571442"
+inkscape:bbox-height="865.714294">
                 <svg:image xlink:href="file:///home/wycc/devel/md6/MadButterfly/nodejs/examples/mce/vod1-select.png" width="228.57144" height="865.71429" id="image2995" x="107.14287" y="136.64792" inkscape:bbox-x="114.284498" inkscape:bbox-y="41.428564" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
             </svg:g>
-            <svg:g transform="matrix(1,0,0,1.4982517,7.14163,-142.33937)" id="g2922" inkscape:label="cat0" inkscape:bbox-x="124.784483" inkscape:bbox-y="311.336273" inkscape:bbox-width="200.000000" inkscape:bbox-height="429.573928">
+            <svg:g transform="matrix(1,0,0,1.4982517,7.14163,-142.33937)"
+id="g2922"
+inkscape:label="cat0"
+inkscape:bbox-x="124.784483"
+inkscape:bbox-y="311.336273"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="429.573928">
                 <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat0.jpg" xlink:href="./cat0.jpg" inkscape:label="" width="200" height="286.7168" id="image3058" x="117.64285" y="302.88058" inkscape:bbox-x="124.784483" inkscape:bbox-y="311.336273" inkscape:bbox-width="200.000000" inkscape:bbox-height="429.573928"/>
             </svg:g>
-            <svg:g transform="translate(7.14163,8.5714057)" id="g2923" inkscape:label="cat1" inkscape:bbox-x="366.355955" inkscape:bbox-y="446.857153" inkscape:bbox-width="200.000000" inkscape:bbox-height="291.094147">
+            <svg:g transform="translate(7.14163,8.5714057)"
+id="g2923"
+inkscape:label="cat1"
+inkscape:bbox-x="366.355955"
+inkscape:bbox-y="446.857153"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="291.094147">
                 <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat1.jpg" xlink:href="./cat1.jpg" inkscape:label="" width="200" height="291.09415" id="image3116" x="359.21432" y="305.83948" inkscape:bbox-x="366.355955" inkscape:bbox-y="446.857153" inkscape:bbox-width="200.000000" inkscape:bbox-height="291.094147"/>
             </svg:g>
-            <svg:g transform="translate(7.14163,8.571406)" id="g2926" inkscape:label="cat2" inkscape:bbox-x="606.213041" inkscape:bbox-y="449.714300" inkscape:bbox-width="200.000000" inkscape:bbox-height="286.716797">
+            <svg:g transform="translate(7.14163,8.571406)"
+id="g2926"
+inkscape:label="cat2"
+inkscape:bbox-x="606.213041"
+inkscape:bbox-y="449.714300"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="286.716797">
                 <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat2.jpg" xlink:href="./cat2.jpg" inkscape:label="" width="200" height="286.7168" id="image3174" x="599.07141" y="307.35968" inkscape:bbox-x="606.213041" inkscape:bbox-y="449.714300" inkscape:bbox-width="200.000000" inkscape:bbox-height="286.716797"/>
             </svg:g>
-            <svg:g transform="translate(7.14163,8.5714057)" id="g2929" inkscape:label="cat3" inkscape:bbox-x="828.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917">
+            <svg:g transform="translate(7.14163,8.5714057)"
+id="g2929"
+inkscape:label="cat3"
+inkscape:bbox-x="828.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
                 <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat3.jpg" xlink:href="./cat3.jpg" inkscape:label="" width="200" height="289.10892" id="image3232" x="821.35712" y="306.539" inkscape:bbox-x="828.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
             </svg:g>
             <svg:path sodipodi:type="star" style="fill:#00c280;fill-opacity:1" id="path3235" sodipodi:sides="3" sodipodi:cx="-171.42857" sodipodi:cy="186.6479" sodipodi:r1="48.760139" sodipodi:r2="24.38007" sodipodi:arg1="1.0153026" sodipodi:arg2="2.0625001" inkscape:flatsided="false" inkscape:rounded="0" inkscape:randomized="0" d="m -145.71429,228.07648 -37.22481,-19.93682 -37.22481,-19.93682 35.87819,-22.26922 35.8782,-22.26923 1.34662,42.20604 z" inkscape:transform-center-x="11.746635" inkscape:transform-center-y="-0.50892793" transform="matrix(0.9999393,0.01101845,-0.01101845,0.9999393,246.33065,273.32876)" inkscape:label="leftarrow" inkscape:bbox-x="24.106397" inkscape:bbox-y="552.576336" inkscape:bbox-width="74.005762" inkscape:bbox-height="84.436636"/>
             <svg:path transform="matrix(-0.99874276,-0.05012887,0.05012887,-0.99874276,1666.5721,621.61046)" inkscape:transform-center-y="-0.445031" inkscape:transform-center-x="-11.802598" d="m -145.71429,228.07648 -37.22481,-19.93682 -37.22481,-19.93682 35.87819,-22.26922 35.8782,-22.26923 1.34662,42.20604 z" inkscape:randomized="0" inkscape:rounded="0" inkscape:flatsided="false" sodipodi:arg2="2.0625001" sodipodi:arg1="1.0153026" sodipodi:r2="24.38007" sodipodi:r1="48.760139" sodipodi:cy="186.6479" sodipodi:cx="-171.42857" sodipodi:sides="3" id="path4005" style="fill:#00c280;fill-opacity:1" sodipodi:type="star" inkscape:label="rightarrow" inkscape:bbox-x="1821.994770" inkscape:bbox-y="566.795992" inkscape:bbox-width="73.898841" inkscape:bbox-height="84.440967"/>
-            <svg:g inkscape:label="cat4" id="g2931" transform="translate(221.14163,8.5714057)" inkscape:bbox-x="1042.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917">
+            <svg:g inkscape:label="cat4"
+id="g2931"
+transform="translate(221.14163,8.5714057)"
+inkscape:bbox-x="1042.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
                 <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat4.jpg" xlink:href="./cat4.jpg" y="306.539" x="821.35712" id="image2933" height="289.10892" width="200" inkscape:label="" inkscape:bbox-x="1042.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
             </svg:g>
-            <svg:g transform="translate(445.14163,8.5714057)" id="g2935" inkscape:label="cat5" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917">
+            <svg:g transform="translate(445.14163,8.5714057)"
+id="g2935"
+inkscape:label="cat5"
+inkscape:bbox-x="1266.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
                 <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat5.jpg" xlink:href="./cat5.jpg" inkscape:label="" width="200" height="289.10892" id="image2937" x="821.35712" y="306.539" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
             </svg:g>
-            <svg:g inkscape:label="cat6" id="g2939" transform="translate(661.14163,8.5714057)" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917">
+            <svg:g inkscape:label="cat6"
+id="g2939"
+transform="translate(661.14163,8.5714057)"
+inkscape:bbox-x="1482.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
                 <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat6.jpg" xlink:href="./cat6.jpg" y="306.539" x="821.35712" id="image2941" height="289.10892" width="200" inkscape:label="" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
             </svg:g>
         </svg:g>
-        <svg:g id="s55849" inkscape:groupmode="layer" scene_group="true" style="display: none" inkscape:bbox-x="24.106397" inkscape:bbox-y="41.428564" inkscape:bbox-width="1871.787214" inkscape:bbox-height="888.053078">
+        <svg:g id="s55849"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="41.428564"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="888.053078">
             <svg:use id="s60171" xlink:href="#g2999" ns0:duplicate-src="g2999" x="0" y="0" width="1" height="1" transform="translate(237.14286,0)" inkscape:bbox-x="351.427358" inkscape:bbox-y="41.428564" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
             <svg:use id="s85547" xlink:href="#g2922" ns0:duplicate-src="g2922" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,0.67694445,8.5714286,-87.955149)" inkscape:bbox-x="133.355911" inkscape:bbox-y="638.683955" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
             <svg:use id="s67576" xlink:href="#g2923" ns0:duplicate-src="g2923" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,1.3926074,0,-123.44004)" inkscape:bbox-x="366.355955" inkscape:bbox-y="332.571437" inkscape:bbox-width="200.000000" inkscape:bbox-height="405.379863"/>
@@ -76,7 +186,14 @@
             <svg:use id="s65737" xlink:href="#g2935" ns0:duplicate-src="g2935" x="0" y="0" width="1" height="1" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
             <svg:use id="s26407" xlink:href="#g2939" ns0:duplicate-src="g2939" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
         </svg:g>
-        <svg:g id="s75117" inkscape:groupmode="layer" scene_group="true" style="display: none" inkscape:bbox-x="24.106397" inkscape:bbox-y="69.999993" inkscape:bbox-width="1871.787214" inkscape:bbox-height="865.714294">
+        <svg:g id="s75117"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="69.999993"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
             <svg:use id="s75819" xlink:href="#s60171" ns0:duplicate-src="s60171" x="0" y="0" width="1" height="1" transform="translate(240,-28.571429)" inkscape:bbox-x="591.427358" inkscape:bbox-y="69.999993" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
             <svg:use id="s17255" xlink:href="#s85547" ns0:duplicate-src="s85547" x="0" y="0" width="1" height="1" transform="translate(-8.5714286,188.57143)" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
             <svg:use id="s98116" xlink:href="#s67576" ns0:duplicate-src="s67576" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,0.72512554,0,86.423522)" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
@@ -88,7 +205,14 @@
             <svg:use id="s8065" xlink:href="#s65737" ns0:duplicate-src="s65737" x="0" y="0" width="1" height="1" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
             <svg:use id="s48773" xlink:href="#s26407" ns0:duplicate-src="s26407" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
         </svg:g>
-        <svg:g id="s36543" inkscape:groupmode="layer" scene_group="true" style="display: none" inkscape:bbox-x="24.106397" inkscape:bbox-y="98.571422" inkscape:bbox-width="1871.787214" inkscape:bbox-height="865.714294">
+        <svg:g id="s36543"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="98.571422"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
             <svg:use id="s25123" xlink:href="#s75819" ns0:duplicate-src="s75819" x="0" y="0" width="1" height="1" transform="translate(222.85714,-28.571429)" inkscape:bbox-x="814.284498" inkscape:bbox-y="98.571422" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
             <svg:use id="s66394" xlink:href="#s17255" ns0:duplicate-src="s17255" x="0" y="0" width="1" height="1" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
             <svg:use id="s35701" xlink:href="#s98116" ns0:duplicate-src="s98116" x="0" y="0" width="1" height="1" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
@@ -100,7 +224,14 @@
             <svg:use id="s90551" xlink:href="#s8065" ns0:duplicate-src="s8065" x="0" y="0" width="1" height="1" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
             <svg:use id="s56729" xlink:href="#s48773" ns0:duplicate-src="s48773" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
         </svg:g>
-        <svg:g id="s60342" inkscape:groupmode="layer" scene_group="true" style="display: none" inkscape:bbox-x="24.106397" inkscape:bbox-y="107.142850" inkscape:bbox-width="1871.787214" inkscape:bbox-height="865.714294">
+        <svg:g id="s60342"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="107.142850"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
             <svg:use id="s76549" xlink:href="#s25123" ns0:duplicate-src="s25123" x="0" y="0" width="1" height="1" transform="translate(217.14286,-8.5714286)" inkscape:bbox-x="1031.427358" inkscape:bbox-y="107.142850" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
             <svg:use id="s89971" xlink:href="#s66394" ns0:duplicate-src="s66394" x="0" y="0" width="1" height="1" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
             <svg:use id="s51134" xlink:href="#s35701" ns0:duplicate-src="s35701" x="0" y="0" width="1" height="1" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
@@ -112,7 +243,14 @@
             <svg:use id="s25037" xlink:href="#s90551" ns0:duplicate-src="s90551" x="0" y="0" width="1" height="1" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
             <svg:use id="s56894" xlink:href="#s56729" ns0:duplicate-src="s56729" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
         </svg:g>
-        <svg:g id="s33699" inkscape:label="dup" sodipodi:insensitive="true" style="display: none" inkscape:bbox-x="24.106397" inkscape:bbox-y="107.142850" inkscape:bbox-width="1871.787214" inkscape:bbox-height="865.714294">
+        <svg:g id="s33699"
+inkscape:label="dup"
+sodipodi:insensitive="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="107.142850"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
             <svg:use transform="matrix(1.0,0.0,0.0,1.0,329.0,0.0)" height="1" width="1" y="0" x="0" ns0:duplicate-src="s76549" xlink:href="#s76549" id="use483" ref="s46783" inkscape:bbox-x="1360.427358" inkscape:bbox-y="107.142850" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
             <svg:use height="1" width="1" y="0" x="0" ns0:duplicate-src="s89971" xlink:href="#s89971" id="use485" ref="s9254" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
             <svg:use height="1" width="1" y="0" x="0" ns0:duplicate-src="s51134" xlink:href="#s51134" id="use487" ref="s64160" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
@@ -124,7 +262,14 @@
             <svg:use transform="matrix(1.0,0.0,0.0,1.27177106649,0.0,-85.6378756687)" height="1" width="1" y="0" x="0" ns0:duplicate-src="s25037" xlink:href="#s25037" id="use499" ref="s80471" inkscape:bbox-x="1266.498747" inkscape:bbox-y="369.571404" inkscape:bbox-width="200.000000" inkscape:bbox-height="367.680356"/>
             <svg:use height="1" width="1" y="0" x="0" ns0:duplicate-src="s56894" xlink:href="#s56894" id="use501" ref="s41223" transform="matrix(1.0,0.0,0.0,1.30636005,0.0,-96.5372503254)" inkscape:bbox-x="1482.498747" inkscape:bbox-y="359.571446" inkscape:bbox-width="200.000000" inkscape:bbox-height="377.680340"/>
         </svg:g>
-        <svg:g id="s46101" inkscape:groupmode="layer" scene_group="true" style="display: none" inkscape:bbox-x="24.106397" inkscape:bbox-y="107.142850" inkscape:bbox-width="1871.787214" inkscape:bbox-height="865.714294">
+        <svg:g id="s46101"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="107.142850"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
             <svg:use id="s46783" xlink:href="#s76549" ns0:duplicate-src="s76549" x="0" y="0" width="1" height="1" transform="translate(218,0)" inkscape:bbox-x="1249.427358" inkscape:bbox-y="107.142850" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
             <svg:use id="s9254" xlink:href="#s89971" ns0:duplicate-src="s89971" x="0" y="0" width="1" height="1" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
             <svg:use id="s64160" xlink:href="#s51134" ns0:duplicate-src="s51134" x="0" y="0" width="1" height="1" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
@@ -136,7 +281,14 @@
             <svg:use id="s80471" xlink:href="#s25037" ns0:duplicate-src="s25037" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,1.4842466,0,-152.59113)" inkscape:bbox-x="1266.498747" inkscape:bbox-y="308.142835" inkscape:bbox-width="200.000000" inkscape:bbox-height="429.108927"/>
             <svg:use id="s41223" xlink:href="#s56894" ns0:duplicate-src="s56894" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
         </svg:g>
-        <svg:g id="s78836" inkscape:groupmode="layer" scene_group="true" style="display: none" inkscape:bbox-x="24.106397" inkscape:bbox-y="107.142850" inkscape:bbox-width="1871.787214" inkscape:bbox-height="865.714294">
+        <svg:g id="s78836"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="107.142850"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
             <svg:use id="s39744" xlink:href="#s46783" ns0:duplicate-src="s46783" x="0" y="0" width="1" height="1" transform="translate(222,0)" inkscape:bbox-x="1471.427358" inkscape:bbox-y="107.142850" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
             <svg:use id="s58261" xlink:href="#s9254" ns0:duplicate-src="s9254" x="0" y="0" width="1" height="1" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
             <svg:use id="s82698" xlink:href="#s64160" ns0:duplicate-src="s64160" x="0" y="0" width="1" height="1" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
@@ -148,9 +300,148 @@
             <svg:use id="s92098" xlink:href="#s80471" ns0:duplicate-src="s80471" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,0.71369241,0,90.218505)" inkscape:bbox-x="1266.498747" inkscape:bbox-y="430.999978" inkscape:bbox-width="200.000000" inkscape:bbox-height="306.251785"/>
             <svg:use id="s11142" xlink:href="#s41223" ns0:duplicate-src="s41223" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,1.6127201,0,-193.07449)" inkscape:bbox-x="1482.498747" inkscape:bbox-y="271.000023" inkscape:bbox-width="200.000000" inkscape:bbox-height="466.251762"/>
         </svg:g>
-        <svg:g id="s19539" inkscape:groupmode="layer" scene_group="true" style="display:inline" inkscape:bbox-x="45.714287" inkscape:bbox-y="234.285713" inkscape:bbox-width="328.571442" inkscape:bbox-height="700.000000">
-            <svg:rect style="opacity:0.75800003;fill:#ff0000;fill-opacity:1;stroke:none" id="rect113" saved_id="rect113" width="328.57144" height="700" x="45.714287" y="118.07647" inkscape:bbox-x="45.714287" inkscape:bbox-y="234.285713" inkscape:bbox-width="328.571442" inkscape:bbox-height="700.000000"/>
-            <svg:use style="display:inline" id="s58261-1" xlink:href="#s9254" ns0:duplicate-src="s9254" x="0" y="0" width="1" height="1" transform="translate(-10.49877,-124.48863)" inkscape:bbox-x="114.285713" inkscape:bbox-y="574.601155" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
+        <svg:g id="s19539"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display:inline"
+inkscape:bbox-x="-0.000035"
+inkscape:bbox-y="-28.571433"
+inkscape:bbox-width="1920.000000"
+inkscape:bbox-height="1080.000000">
+            <svg:image y="0.93361557" x="-3.4877234e-05" id="image175" xlink:href="file:///home/wycc/devel/md6/MadButterfly/nodejs/examples/mce/background2.png" height="1080" width="1920" saved_id="image175" inkscape:bbox-x="-0.000035" inkscape:bbox-y="-28.571433" inkscape:bbox-width="1920.000000" inkscape:bbox-height="1080.000000"/>
+            <svg:g inkscape:label="cat0"
+id="s58261-1"
+transform="matrix(1,0,0,1.0142332,19.500003,-54.51391)"
+saved_id="s58261-1"
+inkscape:bbox-x="137.142856"
+inkscape:bbox-y="508.886854"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="290.797694">
+                <svg:image y="302.88058" x="117.64285" id="image133" height="286.7168" width="200" inkscape:label="" xlink:href="./cat0.jpg" sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat0.jpg" saved_id="image133" inkscape:bbox-x="137.142856" inkscape:bbox-y="508.886854" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797694"/>
+            </svg:g>
+            <svg:text xml:space="preserve"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+x="44.285713"
+y="653.79077"
+id="text145"
+saved_id="text145"
+sodipodi:linespacing="125%"
+inkscape:label="line1"
+inkscape:bbox-x="48.680244"
+inkscape:bbox-y="398.571411"
+inkscape:bbox-width="772.402344"
+inkscape:bbox-height="29.160156">
+                <svg:tspan sodipodi:role="line"
+id="tspan147"
+saved_id="tspan147"
+x="44.285713"
+y="653.79077">
+                    1111111111111111                              
+                </svg:tspan>
+            </svg:text>
+            <svg:text inkscape:label="line2"
+sodipodi:linespacing="125%"
+saved_id="text149"
+id="text149"
+y="715.79077"
+x="44.285713"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+xml:space="preserve"
+ns0:duplicate-src="text145"
+inkscape:bbox-x="48.680244"
+inkscape:bbox-y="336.571411"
+inkscape:bbox-width="772.402344"
+inkscape:bbox-height="29.160156">
+                <svg:tspan y="715.79077"
+x="44.285713"
+saved_id="tspan151"
+id="tspan151"
+sodipodi:role="line"
+ns0:duplicate-src="tspan147">
+                    1111111111111111                              
+                </svg:tspan>
+            </svg:text>
+            <svg:text ns0:duplicate-src="text149"
+xml:space="preserve"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+x="44.285713"
+y="777.79077"
+id="text153"
+saved_id="text153"
+sodipodi:linespacing="125%"
+inkscape:label="line3"
+inkscape:bbox-x="48.680244"
+inkscape:bbox-y="274.571411"
+inkscape:bbox-width="403.105469"
+inkscape:bbox-height="29.160156">
+                <svg:tspan ns0:duplicate-src="tspan151"
+sodipodi:role="line"
+id="tspan155"
+saved_id="tspan155"
+x="44.285713"
+y="777.79077">
+                    1111111111111111 
+                </svg:tspan>
+            </svg:text>
+            <svg:text inkscape:label="line4"
+sodipodi:linespacing="125%"
+saved_id="text157"
+id="text157"
+y="845.79077"
+x="44.285713"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+xml:space="preserve"
+ns0:duplicate-src="text153"
+inkscape:bbox-x="44.285713"
+inkscape:bbox-y="206.571411"
+inkscape:bbox-width="407.500000"
+inkscape:bbox-height="29.160156">
+                                  1111111 
+            </svg:text>
+            <svg:text ns0:duplicate-src="text157"
+xml:space="preserve"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+x="44.285713"
+y="845.79077"
+id="text161"
+saved_id="text161"
+sodipodi:linespacing="125%"
+inkscape:label="line4"
+inkscape:bbox-x="48.680244"
+inkscape:bbox-y="206.571411"
+inkscape:bbox-width="772.402344"
+inkscape:bbox-height="29.160156">
+                <svg:tspan ns0:duplicate-src="tspan159"
+sodipodi:role="line"
+id="tspan163"
+saved_id="tspan163"
+x="44.285713"
+y="845.79077">
+                    1111111111111111                              
+                </svg:tspan>
+            </svg:text>
+            <svg:text inkscape:label="line5"
+sodipodi:linespacing="125%"
+saved_id="text165"
+id="text165"
+y="913.79077"
+x="44.285713"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+xml:space="preserve"
+ns0:duplicate-src="text161"
+inkscape:bbox-x="48.680244"
+inkscape:bbox-y="138.571411"
+inkscape:bbox-width="772.402344"
+inkscape:bbox-height="29.160156">
+                <svg:tspan y="913.79077"
+x="44.285713"
+saved_id="tspan167"
+id="tspan167"
+sodipodi:role="line"
+ns0:duplicate-src="tspan163">
+                    1111111111111111                              
+                </svg:tspan>
+            </svg:text>
         </svg:g>
     </svg:g>
     <svg:g inkscape:label="components" id="s49280"/>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/nodejs/examples/mce/main1.svg	Mon Apr 11 13:17:05 2011 +0800
@@ -0,0 +1,576 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg:svg xmlns:dc="http://purl.org/dc/elements/1.1/"
+xmlns:cc="http://creativecommons.org/ns#"
+xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+xmlns:svg="http://www.w3.org/2000/svg"
+xmlns:ns0="http://madbutterfly.sourceforge.net/DTD/madbutterfly.dtd"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+width="744.09448"
+height="1052.3622"
+id="svg2"
+version="1.1"
+inkscape:version="0.48+devel r9799 custom"
+sodipodi:docname="main1.svg"
+style="display:inline"
+inkscape:dataloss="true">
+    <svg:defs id="defs4">
+        <inkscape:perspective sodipodi:type="inkscape:persp3d" inkscape:vp_x="0 : 526.18109 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_z="744.09448 : 526.18109 : 1" inkscape:persp3d-origin="372.04724 : 350.78739 : 1" id="perspective13"/>
+        <inkscape:perspective id="perspective2973" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
+        <inkscape:perspective id="perspective2975" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
+        <inkscape:perspective id="perspective2993" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
+    </svg:defs>
+    <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.7" inkscape:cx="346.17187" inkscape:cy="355.77813" inkscape:document-units="px" inkscape:current-layer="s19539" showgrid="false" inkscape:window-width="1680" inkscape:window-height="975" inkscape:window-x="0" inkscape:window-y="25" inkscape:window-maximized="1"/>
+    <svg:metadata id="metadata7">
+        <rdf:RDF>
+            <cc:Work rdf:about="">
+                <dc:format>
+                    
+                    
+                    
+                    
+                    
+                    image/svg+xml
+                
+                
+                
+                
+                
+                </dc:format>
+                <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+                <dc:title/>
+            </cc:Work>
+        </rdf:RDF>
+        <ns0:scenes>
+            <ns0:scene start="0" ref="Layer 1s1841" end="14" type="scale"/>
+            <ns0:scene start="15" type="scale" ref="s55849" end="30"/>
+            <ns0:scene start="31" type="scale" ref="s75117" end="46"/>
+            <ns0:scene start="47" type="scale" ref="s36543" end="62"/>
+            <ns0:scene start="63" type="scale" ref="s60342" end="78"/>
+            <ns0:scene start="79" type="scale" ref="s46101" end="94"/>
+            <ns0:scene start="95" type="normal" ref="s78836"/>
+            <ns0:scene start="97" type="scale" ref="s19539" end="98"/>
+            <ns0:scene start="99" type="normal" ref="s53522"/>
+            <ns0:scene start="0" type="normal" ref="s38172" end="94"/>
+            <ns0:scene start="95" type="normal" ref="s21782"/>
+        </ns0:scenes>
+        <ns0:components/>
+    </svg:metadata>
+    <svg:g inkscape:groupmode="layer"
+id="layer2"
+inkscape:label="Background"
+style="display:inline">
+        <svg:g id="s39685"
+inkscape:label="dup"
+sodipodi:insensitive="true"
+style="display: none"
+inkscape:bbox-x="0.000000"
+inkscape:bbox-y="0.000000"
+inkscape:bbox-width="1920.000000"
+inkscape:bbox-height="1080.000000">
+            <svg:image saved_id="image2977" xlink:href="file:///home/wycc/devel/md6/MadButterfly/nodejs/examples/mce/background.png" width="1920" height="1080" id="image318" x="0" y="-27.637817" style="display:inline" ref="image2977" inkscape:bbox-x="0.000000" inkscape:bbox-y="0.000000" inkscape:bbox-width="1920.000000" inkscape:bbox-height="1080.000000"/>
+        </svg:g>
+        <svg:g id="s38172"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="0.000000"
+inkscape:bbox-y="0.000000"
+inkscape:bbox-width="1920.000000"
+inkscape:bbox-height="1080.000000">
+            <svg:image style="display:inline" y="-27.637817" x="0" id="image2977" height="1080" width="1920" xlink:href="file:///home/wycc/devel/md6/MadButterfly/nodejs/examples/mce/background.png" saved_id="image2977" inkscape:bbox-x="0.000000" inkscape:bbox-y="0.000000" inkscape:bbox-width="1920.000000" inkscape:bbox-height="1080.000000"/>
+            <svg:text xml:space="preserve"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+x="604.28571"
+y="33.790752"
+id="text360"
+saved_id="text360"
+sodipodi:linespacing="125%"
+inkscape:bbox-x="604.285706"
+inkscape:bbox-y="1018.005024"
+inkscape:bbox-width="972.031250"
+inkscape:bbox-height="29.726562">
+                
+                
+                <svg:tspan sodipodi:role="line"
+id="tspan362"
+saved_id="tspan362"
+x="604.28571"
+y="33.790752">
+                    
+                    Demo
+                
+                </svg:tspan>
+                
+            
+            </svg:text>
+        </svg:g>
+        <svg:g id="s21782"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="0.000000"
+inkscape:bbox-y="0.000000"
+inkscape:bbox-width="1920.000000"
+inkscape:bbox-height="1080.000000">
+            <svg:use id="s90444" xlink:href="#image2977" ns0:duplicate-src="image2977" x="0" y="0" width="1" height="1" inkscape:bbox-x="0.000000" inkscape:bbox-y="0.000000" inkscape:bbox-width="1920.000000" inkscape:bbox-height="1080.000000"/>
+        </svg:g>
+    </svg:g>
+    <svg:g inkscape:label="Layer 1"
+inkscape:groupmode="layer"
+id="layer1"
+style="display:inline">
+        <svg:g id="Layer 1s1841"
+inkscape:groupmode="layer"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="41.428564"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
+            <svg:g transform="translate(7.14163,8.5714057)"
+id="g2999"
+inkscape:label="lightbar"
+inkscape:bbox-x="114.284498"
+inkscape:bbox-y="41.428564"
+inkscape:bbox-width="228.571442"
+inkscape:bbox-height="865.714294">
+                <svg:image xlink:href="file:///home/wycc/devel/md6/MadButterfly/nodejs/examples/mce/vod1-select.png" width="228.57144" height="865.71429" id="image2995" x="107.14287" y="136.64792" inkscape:bbox-x="114.284498" inkscape:bbox-y="41.428564" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
+            </svg:g>
+            <svg:g transform="matrix(1,0,0,1.4982517,7.14163,-142.33937)"
+id="g2922"
+inkscape:label="cat0"
+inkscape:bbox-x="124.784483"
+inkscape:bbox-y="311.336273"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="429.573928">
+                <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat0.jpg" xlink:href="./cat0.jpg" inkscape:label="" width="200" height="286.7168" id="image3058" x="117.64285" y="302.88058" inkscape:bbox-x="124.784483" inkscape:bbox-y="311.336273" inkscape:bbox-width="200.000000" inkscape:bbox-height="429.573928"/>
+            </svg:g>
+            <svg:g transform="translate(7.14163,8.5714057)"
+id="g2923"
+inkscape:label="cat1"
+inkscape:bbox-x="366.355955"
+inkscape:bbox-y="446.857153"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="291.094147">
+                <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat1.jpg" xlink:href="./cat1.jpg" inkscape:label="" width="200" height="291.09415" id="image3116" x="359.21432" y="305.83948" inkscape:bbox-x="366.355955" inkscape:bbox-y="446.857153" inkscape:bbox-width="200.000000" inkscape:bbox-height="291.094147"/>
+            </svg:g>
+            <svg:g transform="translate(7.14163,8.571406)"
+id="g2926"
+inkscape:label="cat2"
+inkscape:bbox-x="606.213041"
+inkscape:bbox-y="449.714300"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="286.716797">
+                <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat2.jpg" xlink:href="./cat2.jpg" inkscape:label="" width="200" height="286.7168" id="image3174" x="599.07141" y="307.35968" inkscape:bbox-x="606.213041" inkscape:bbox-y="449.714300" inkscape:bbox-width="200.000000" inkscape:bbox-height="286.716797"/>
+            </svg:g>
+            <svg:g transform="translate(7.14163,8.5714057)"
+id="g2929"
+inkscape:label="cat3"
+inkscape:bbox-x="828.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
+                <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat3.jpg" xlink:href="./cat3.jpg" inkscape:label="" width="200" height="289.10892" id="image3232" x="821.35712" y="306.539" inkscape:bbox-x="828.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            </svg:g>
+            <svg:path sodipodi:type="star" style="fill:#00c280;fill-opacity:1" id="path3235" sodipodi:sides="3" sodipodi:cx="-171.42857" sodipodi:cy="186.6479" sodipodi:r1="48.760139" sodipodi:r2="24.38007" sodipodi:arg1="1.0153026" sodipodi:arg2="2.0625001" inkscape:flatsided="false" inkscape:rounded="0" inkscape:randomized="0" d="m -145.71429,228.07648 -37.22481,-19.93682 -37.22481,-19.93682 35.87819,-22.26922 35.8782,-22.26923 1.34662,42.20604 z" inkscape:transform-center-x="11.746635" inkscape:transform-center-y="-0.50892793" transform="matrix(0.9999393,0.01101845,-0.01101845,0.9999393,246.33065,273.32876)" inkscape:label="leftarrow" inkscape:bbox-x="24.106397" inkscape:bbox-y="552.576336" inkscape:bbox-width="74.005762" inkscape:bbox-height="84.436636"/>
+            <svg:path transform="matrix(-0.99874276,-0.05012887,0.05012887,-0.99874276,1666.5721,621.61046)" inkscape:transform-center-y="-0.445031" inkscape:transform-center-x="-11.802598" d="m -145.71429,228.07648 -37.22481,-19.93682 -37.22481,-19.93682 35.87819,-22.26922 35.8782,-22.26923 1.34662,42.20604 z" inkscape:randomized="0" inkscape:rounded="0" inkscape:flatsided="false" sodipodi:arg2="2.0625001" sodipodi:arg1="1.0153026" sodipodi:r2="24.38007" sodipodi:r1="48.760139" sodipodi:cy="186.6479" sodipodi:cx="-171.42857" sodipodi:sides="3" id="path4005" style="fill:#00c280;fill-opacity:1" sodipodi:type="star" inkscape:label="rightarrow" inkscape:bbox-x="1821.994770" inkscape:bbox-y="566.795992" inkscape:bbox-width="73.898841" inkscape:bbox-height="84.440967"/>
+            <svg:g inkscape:label="cat4"
+id="g2931"
+transform="translate(221.14163,8.5714057)"
+inkscape:bbox-x="1042.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
+                <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat4.jpg" xlink:href="./cat4.jpg" y="306.539" x="821.35712" id="image2933" height="289.10892" width="200" inkscape:label="" inkscape:bbox-x="1042.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            </svg:g>
+            <svg:g transform="translate(445.14163,8.5714057)"
+id="g2935"
+inkscape:label="cat5"
+inkscape:bbox-x="1266.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
+                <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat5.jpg" xlink:href="./cat5.jpg" inkscape:label="" width="200" height="289.10892" id="image2937" x="821.35712" y="306.539" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            </svg:g>
+            <svg:g inkscape:label="cat6"
+id="g2939"
+transform="translate(661.14163,8.5714057)"
+inkscape:bbox-x="1482.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
+                <svg:image sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat6.jpg" xlink:href="./cat6.jpg" y="306.539" x="821.35712" id="image2941" height="289.10892" width="200" inkscape:label="" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            </svg:g>
+        </svg:g>
+        <svg:g id="s55849"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="41.428564"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="888.053078">
+            <svg:use id="s60171" xlink:href="#g2999" ns0:duplicate-src="g2999" x="0" y="0" width="1" height="1" transform="translate(237.14286,0)" inkscape:bbox-x="351.427358" inkscape:bbox-y="41.428564" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
+            <svg:use id="s85547" xlink:href="#g2922" ns0:duplicate-src="g2922" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,0.67694445,8.5714286,-87.955149)" inkscape:bbox-x="133.355911" inkscape:bbox-y="638.683955" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
+            <svg:use id="s67576" xlink:href="#g2923" ns0:duplicate-src="g2923" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,1.3926074,0,-123.44004)" inkscape:bbox-x="366.355955" inkscape:bbox-y="332.571437" inkscape:bbox-width="200.000000" inkscape:bbox-height="405.379863"/>
+            <svg:use id="s26403" xlink:href="#g2926" ns0:duplicate-src="g2926" x="0" y="0" width="1" height="1" inkscape:bbox-x="606.213041" inkscape:bbox-y="449.714300" inkscape:bbox-width="200.000000" inkscape:bbox-height="286.716797"/>
+            <svg:use id="s25527" xlink:href="#g2929" ns0:duplicate-src="g2929" x="0" y="0" width="1" height="1" inkscape:bbox-x="828.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            <svg:use id="s55231" xlink:href="#path3235" ns0:duplicate-src="path3235" x="0" y="0" width="1" height="1" inkscape:bbox-x="24.106397" inkscape:bbox-y="552.576336" inkscape:bbox-width="74.005762" inkscape:bbox-height="84.436636"/>
+            <svg:use id="s10123" xlink:href="#path4005" ns0:duplicate-src="path4005" x="0" y="0" width="1" height="1" inkscape:bbox-x="1821.994770" inkscape:bbox-y="566.795992" inkscape:bbox-width="73.898841" inkscape:bbox-height="84.440967"/>
+            <svg:use id="s2449" xlink:href="#g2931" ns0:duplicate-src="g2931" x="0" y="0" width="1" height="1" inkscape:bbox-x="1042.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            <svg:use id="s65737" xlink:href="#g2935" ns0:duplicate-src="g2935" x="0" y="0" width="1" height="1" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            <svg:use id="s26407" xlink:href="#g2939" ns0:duplicate-src="g2939" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+        </svg:g>
+        <svg:g id="s75117"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="69.999993"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
+            <svg:use id="s75819" xlink:href="#s60171" ns0:duplicate-src="s60171" x="0" y="0" width="1" height="1" transform="translate(240,-28.571429)" inkscape:bbox-x="591.427358" inkscape:bbox-y="69.999993" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
+            <svg:use id="s17255" xlink:href="#s85547" ns0:duplicate-src="s85547" x="0" y="0" width="1" height="1" transform="translate(-8.5714286,188.57143)" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
+            <svg:use id="s98116" xlink:href="#s67576" ns0:duplicate-src="s67576" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,0.72512554,0,86.423522)" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
+            <svg:use id="s25163" xlink:href="#s26403" ns0:duplicate-src="s26403" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,1.5281468,0,-166.85801)" inkscape:bbox-x="606.213041" inkscape:bbox-y="298.285759" inkscape:bbox-width="200.000000" inkscape:bbox-height="438.145356"/>
+            <svg:use id="s79688" xlink:href="#s25527" ns0:duplicate-src="s25527" x="0" y="0" width="1" height="1" inkscape:bbox-x="828.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            <svg:use id="s52635" xlink:href="#s55231" ns0:duplicate-src="s55231" x="0" y="0" width="1" height="1" inkscape:bbox-x="24.106397" inkscape:bbox-y="552.576336" inkscape:bbox-width="74.005762" inkscape:bbox-height="84.436636"/>
+            <svg:use id="s63895" xlink:href="#s10123" ns0:duplicate-src="s10123" x="0" y="0" width="1" height="1" inkscape:bbox-x="1821.994770" inkscape:bbox-y="566.795992" inkscape:bbox-width="73.898841" inkscape:bbox-height="84.440967"/>
+            <svg:use id="s81039" xlink:href="#s2449" ns0:duplicate-src="s2449" x="0" y="0" width="1" height="1" inkscape:bbox-x="1042.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            <svg:use id="s8065" xlink:href="#s65737" ns0:duplicate-src="s65737" x="0" y="0" width="1" height="1" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            <svg:use id="s48773" xlink:href="#s26407" ns0:duplicate-src="s26407" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+        </svg:g>
+        <svg:g id="s36543"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="98.571422"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
+            <svg:use id="s25123" xlink:href="#s75819" ns0:duplicate-src="s75819" x="0" y="0" width="1" height="1" transform="translate(222.85714,-28.571429)" inkscape:bbox-x="814.284498" inkscape:bbox-y="98.571422" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
+            <svg:use id="s66394" xlink:href="#s17255" ns0:duplicate-src="s17255" x="0" y="0" width="1" height="1" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
+            <svg:use id="s35701" xlink:href="#s98116" ns0:duplicate-src="s98116" x="0" y="0" width="1" height="1" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
+            <svg:use id="s22394" xlink:href="#s25163" ns0:duplicate-src="s25163" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,0.68047134,0,100.94903)" inkscape:bbox-x="606.213041" inkscape:bbox-y="438.285758" inkscape:bbox-width="200.000000" inkscape:bbox-height="298.145357"/>
+            <svg:use id="s6489" xlink:href="#s79688" ns0:duplicate-src="s79688" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,1.5830724,0,-183.73218)" inkscape:bbox-x="828.498747" inkscape:bbox-y="279.571427" inkscape:bbox-width="200.000000" inkscape:bbox-height="457.680347"/>
+            <svg:use id="s44817" xlink:href="#s52635" ns0:duplicate-src="s52635" x="0" y="0" width="1" height="1" inkscape:bbox-x="24.106397" inkscape:bbox-y="552.576336" inkscape:bbox-width="74.005762" inkscape:bbox-height="84.436636"/>
+            <svg:use id="s31228" xlink:href="#s63895" ns0:duplicate-src="s63895" x="0" y="0" width="1" height="1" inkscape:bbox-x="1821.994770" inkscape:bbox-y="566.795992" inkscape:bbox-width="73.898841" inkscape:bbox-height="84.440967"/>
+            <svg:use id="s6027" xlink:href="#s81039" ns0:duplicate-src="s81039" x="0" y="0" width="1" height="1" inkscape:bbox-x="1042.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            <svg:use id="s90551" xlink:href="#s8065" ns0:duplicate-src="s8065" x="0" y="0" width="1" height="1" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            <svg:use id="s56729" xlink:href="#s48773" ns0:duplicate-src="s48773" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+        </svg:g>
+        <svg:g id="s60342"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="107.142850"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
+            <svg:use id="s76549" xlink:href="#s25123" ns0:duplicate-src="s25123" x="0" y="0" width="1" height="1" transform="translate(217.14286,-8.5714286)" inkscape:bbox-x="1031.427358" inkscape:bbox-y="107.142850" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
+            <svg:use id="s89971" xlink:href="#s66394" ns0:duplicate-src="s66394" x="0" y="0" width="1" height="1" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
+            <svg:use id="s51134" xlink:href="#s35701" ns0:duplicate-src="s35701" x="0" y="0" width="1" height="1" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
+            <svg:use id="s33981" xlink:href="#s22394" ns0:duplicate-src="s22394" x="0" y="0" width="1" height="1" inkscape:bbox-x="606.213041" inkscape:bbox-y="438.285758" inkscape:bbox-width="200.000000" inkscape:bbox-height="298.145357"/>
+            <svg:use id="s96513" xlink:href="#s6489" ns0:duplicate-src="s6489" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,0.65665369,0,108.192)" inkscape:bbox-x="828.498747" inkscape:bbox-y="436.714281" inkscape:bbox-width="200.000000" inkscape:bbox-height="300.537489"/>
+            <svg:use id="s7826" xlink:href="#s44817" ns0:duplicate-src="s44817" x="0" y="0" width="1" height="1" inkscape:bbox-x="24.106397" inkscape:bbox-y="552.576336" inkscape:bbox-width="74.005762" inkscape:bbox-height="84.436636"/>
+            <svg:use id="s78357" xlink:href="#s31228" ns0:duplicate-src="s31228" x="0" y="0" width="1" height="1" inkscape:bbox-x="1821.994770" inkscape:bbox-y="566.795992" inkscape:bbox-width="73.898841" inkscape:bbox-height="84.440967"/>
+            <svg:use id="s785" xlink:href="#s6027" ns0:duplicate-src="s6027" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,1.5237769,0,-165.04755)" inkscape:bbox-x="1042.498747" inkscape:bbox-y="296.714284" inkscape:bbox-width="200.000000" inkscape:bbox-height="440.537490"/>
+            <svg:use id="s25037" xlink:href="#s90551" ns0:duplicate-src="s90551" x="0" y="0" width="1" height="1" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            <svg:use id="s56894" xlink:href="#s56729" ns0:duplicate-src="s56729" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+        </svg:g>
+        <svg:g id="s33699"
+inkscape:label="dup"
+sodipodi:insensitive="true"
+style="display: none"
+inkscape:bbox-x="18.624634"
+inkscape:bbox-y="41.428564"
+inkscape:bbox-width="1882.776856"
+inkscape:bbox-height="865.714294">
+            <svg:g inkscape:label="lightbar"
+id="g320"
+transform="matrix(1.0,0.0,0.0,1.0,117.808298,8.5714057)"
+ref="g2999"
+inkscape:bbox-x="224.951166"
+inkscape:bbox-y="41.428564"
+inkscape:bbox-width="228.571442"
+inkscape:bbox-height="865.714294">
+                <svg:image y="136.64792" x="107.14287" id="image322" height="865.71429" width="228.57144" xlink:href="file:///home/wycc/devel/md6/MadButterfly/nodejs/examples/mce/vod1-select.png" inkscape:bbox-x="224.951166" inkscape:bbox-y="41.428564" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
+            </svg:g>
+            <svg:g inkscape:label="cat0"
+id="g324"
+transform="matrix(1.0,0.0,0.0,1.27237638741,11.1416300133,-161.926125964)"
+ref="g2922"
+inkscape:bbox-x="128.784483"
+inkscape:bbox-y="464.098522"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="364.811682">
+                <svg:image y="302.88058" x="117.64285" id="image326" height="286.7168" width="200" inkscape:label="" xlink:href="./cat0.jpg" sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat0.jpg" inkscape:bbox-x="128.784483" inkscape:bbox-y="464.098522" inkscape:bbox-width="200.000000" inkscape:bbox-height="364.811682"/>
+            </svg:g>
+            <svg:g inkscape:label="cat1"
+id="g328"
+transform="matrix(1.0,0.0,0.0,1.18321678667,7.14163,-47.4635240753)"
+ref="g2923"
+inkscape:bbox-x="366.355955"
+inkscape:bbox-y="393.523822"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="344.427481">
+                <svg:image y="305.83948" x="359.21432" id="image330" height="291.09415" width="200" inkscape:label="" xlink:href="./cat1.jpg" sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat1.jpg" inkscape:bbox-x="366.355955" inkscape:bbox-y="393.523822" inkscape:bbox-width="200.000000" inkscape:bbox-height="344.427481"/>
+            </svg:g>
+            <svg:g inkscape:label="cat2"
+id="g332"
+transform="matrix(1.0,0.0,0.0,1.0,7.14163,8.571406)"
+ref="g2926"
+inkscape:bbox-x="606.213041"
+inkscape:bbox-y="449.714300"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="286.716797">
+                <svg:image y="307.35968" x="599.07141" id="image334" height="286.7168" width="200" inkscape:label="" xlink:href="./cat2.jpg" sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat2.jpg" inkscape:bbox-x="606.213041" inkscape:bbox-y="449.714300" inkscape:bbox-width="200.000000" inkscape:bbox-height="286.716797"/>
+            </svg:g>
+            <svg:g inkscape:label="cat3"
+id="g336"
+transform="matrix(1.0,0.0,0.0,1.0,7.14163,8.5714057)"
+ref="g2929"
+inkscape:bbox-x="828.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
+                <svg:image y="306.539" x="821.35712" id="image338" height="289.10892" width="200" inkscape:label="" xlink:href="./cat3.jpg" sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat3.jpg" inkscape:bbox-x="828.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            </svg:g>
+            <svg:path inkscape:label="leftarrow" transform="matrix(0.9999393,0.01101845,-0.01101845,0.9999393,240.848887,273.091260299)" inkscape:transform-center-y="-0.50892793" inkscape:transform-center-x="11.746635" d="m -145.71429,228.07648 -37.22481,-19.93682 -37.22481,-19.93682 35.87819,-22.26922 35.8782,-22.26923 1.34662,42.20604 z" inkscape:randomized="0" inkscape:rounded="0" inkscape:flatsided="false" sodipodi:arg2="2.0625001" sodipodi:arg1="1.0153026" sodipodi:r2="24.38007" sodipodi:r1="48.760139" sodipodi:cy="186.6479" sodipodi:cx="-171.42857" sodipodi:sides="3" id="path340" style="fill:#00c280;fill-opacity:1" sodipodi:type="star" ref="path3235" inkscape:bbox-x="18.624634" inkscape:bbox-y="552.813835" inkscape:bbox-width="74.005762" inkscape:bbox-height="84.436636"/>
+            <svg:path inkscape:label="rightarrow" sodipodi:type="star" style="fill:#00c280;fill-opacity:1" id="path342" sodipodi:sides="3" sodipodi:cx="-171.42857" sodipodi:cy="186.6479" sodipodi:r1="48.760139" sodipodi:r2="24.38007" sodipodi:arg1="1.0153026" sodipodi:arg2="2.0625001" inkscape:flatsided="false" inkscape:rounded="0" inkscape:randomized="0" d="m -145.71429,228.07648 -37.22481,-19.93682 -37.22481,-19.93682 35.87819,-22.26922 35.8782,-22.26923 1.34662,42.20604 z" inkscape:transform-center-x="-11.802598" inkscape:transform-center-y="-0.445031" transform="matrix(-0.99874276,-0.05012887,0.05012887,-0.99874276,1672.07997907,621.402778867)" ref="path4005" inkscape:bbox-x="1827.502649" inkscape:bbox-y="567.003673" inkscape:bbox-width="73.898841" inkscape:bbox-height="84.440967"/>
+            <svg:g transform="matrix(1.0,0.0,0.0,1.0,221.14163,8.5714057)"
+id="g344"
+inkscape:label="cat4"
+ref="g2931"
+inkscape:bbox-x="1042.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
+                <svg:image inkscape:label="" width="200" height="289.10892" id="image346" x="821.35712" y="306.539" xlink:href="./cat4.jpg" sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat4.jpg" inkscape:bbox-x="1042.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            </svg:g>
+            <svg:g inkscape:label="cat5"
+id="g348"
+transform="matrix(1.0,0.0,0.0,1.0,445.14163,8.5714057)"
+ref="g2935"
+inkscape:bbox-x="1266.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
+                <svg:image y="306.539" x="821.35712" id="image350" height="289.10892" width="200" inkscape:label="" xlink:href="./cat5.jpg" sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat5.jpg" inkscape:bbox-x="1266.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            </svg:g>
+            <svg:g transform="matrix(1.0,0.0,0.0,1.0,661.14163,8.5714057)"
+id="g352"
+inkscape:label="cat6"
+ref="g2939"
+inkscape:bbox-x="1482.498747"
+inkscape:bbox-y="448.142858"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="289.108917">
+                <svg:image inkscape:label="" width="200" height="289.10892" id="image354" x="821.35712" y="306.539" xlink:href="./cat6.jpg" sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat6.jpg" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+            </svg:g>
+        </svg:g>
+        <svg:g id="s46101"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="107.142850"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
+            <svg:use id="s46783" xlink:href="#s76549" ns0:duplicate-src="s76549" x="0" y="0" width="1" height="1" transform="translate(218,0)" inkscape:bbox-x="1249.427358" inkscape:bbox-y="107.142850" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
+            <svg:use id="s9254" xlink:href="#s89971" ns0:duplicate-src="s89971" x="0" y="0" width="1" height="1" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
+            <svg:use id="s64160" xlink:href="#s51134" ns0:duplicate-src="s51134" x="0" y="0" width="1" height="1" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
+            <svg:use id="s30363" xlink:href="#s33981" ns0:duplicate-src="s33981" x="0" y="0" width="1" height="1" inkscape:bbox-x="606.213041" inkscape:bbox-y="438.285758" inkscape:bbox-width="200.000000" inkscape:bbox-height="298.145357"/>
+            <svg:use id="s8103" xlink:href="#s96513" ns0:duplicate-src="s96513" x="0" y="0" width="1" height="1" inkscape:bbox-x="828.498747" inkscape:bbox-y="436.714281" inkscape:bbox-width="200.000000" inkscape:bbox-height="300.537489"/>
+            <svg:use id="s60974" xlink:href="#s7826" ns0:duplicate-src="s7826" x="0" y="0" width="1" height="1" inkscape:bbox-x="24.106397" inkscape:bbox-y="552.576336" inkscape:bbox-width="74.005762" inkscape:bbox-height="84.436636"/>
+            <svg:use id="s1545" xlink:href="#s78357" ns0:duplicate-src="s78357" x="0" y="0" width="1" height="1" inkscape:bbox-x="1821.994770" inkscape:bbox-y="566.795992" inkscape:bbox-width="73.898841" inkscape:bbox-height="84.440967"/>
+            <svg:use id="s49240" xlink:href="#s785" ns0:duplicate-src="s785" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,0.68869197,0,98.0964)" inkscape:bbox-x="1042.498747" inkscape:bbox-y="433.857142" inkscape:bbox-width="200.000000" inkscape:bbox-height="303.394632"/>
+            <svg:use id="s80471" xlink:href="#s25037" ns0:duplicate-src="s25037" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,1.4842466,0,-152.59113)" inkscape:bbox-x="1266.498747" inkscape:bbox-y="308.142835" inkscape:bbox-width="200.000000" inkscape:bbox-height="429.108927"/>
+            <svg:use id="s41223" xlink:href="#s56894" ns0:duplicate-src="s56894" x="0" y="0" width="1" height="1" inkscape:bbox-x="1482.498747" inkscape:bbox-y="448.142858" inkscape:bbox-width="200.000000" inkscape:bbox-height="289.108917"/>
+        </svg:g>
+        <svg:g id="s78836"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="24.106397"
+inkscape:bbox-y="107.142850"
+inkscape:bbox-width="1871.787214"
+inkscape:bbox-height="865.714294">
+            <svg:use id="s39744" xlink:href="#s46783" ns0:duplicate-src="s46783" x="0" y="0" width="1" height="1" transform="translate(222,0)" inkscape:bbox-x="1471.427358" inkscape:bbox-y="107.142850" inkscape:bbox-width="228.571442" inkscape:bbox-height="865.714294"/>
+            <svg:use id="s58261" xlink:href="#s9254" ns0:duplicate-src="s9254" x="0" y="0" width="1" height="1" inkscape:bbox-x="124.784483" inkscape:bbox-y="450.112525" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797687"/>
+            <svg:use id="s82698" xlink:href="#s64160" ns0:duplicate-src="s64160" x="0" y="0" width="1" height="1" inkscape:bbox-x="366.355955" inkscape:bbox-y="444.000008" inkscape:bbox-width="200.000000" inkscape:bbox-height="293.951292"/>
+            <svg:use id="s87837" xlink:href="#s30363" ns0:duplicate-src="s30363" x="0" y="0" width="1" height="1" inkscape:bbox-x="606.213041" inkscape:bbox-y="438.285758" inkscape:bbox-width="200.000000" inkscape:bbox-height="298.145357"/>
+            <svg:use id="s65619" xlink:href="#s8103" ns0:duplicate-src="s8103" x="0" y="0" width="1" height="1" inkscape:bbox-x="828.498747" inkscape:bbox-y="436.714281" inkscape:bbox-width="200.000000" inkscape:bbox-height="300.537489"/>
+            <svg:use id="s97994" xlink:href="#s60974" ns0:duplicate-src="s60974" x="0" y="0" width="1" height="1" inkscape:bbox-x="24.106397" inkscape:bbox-y="552.576336" inkscape:bbox-width="74.005762" inkscape:bbox-height="84.436636"/>
+            <svg:use id="s29117" xlink:href="#s1545" ns0:duplicate-src="s1545" x="0" y="0" width="1" height="1" inkscape:bbox-x="1821.994770" inkscape:bbox-y="566.795992" inkscape:bbox-width="73.898841" inkscape:bbox-height="84.440967"/>
+            <svg:use id="s46682" xlink:href="#s49240" ns0:duplicate-src="s49240" x="0" y="0" width="1" height="1" inkscape:bbox-x="1042.498747" inkscape:bbox-y="433.857142" inkscape:bbox-width="200.000000" inkscape:bbox-height="303.394632"/>
+            <svg:use id="s92098" xlink:href="#s80471" ns0:duplicate-src="s80471" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,0.71369241,0,90.218505)" inkscape:bbox-x="1266.498747" inkscape:bbox-y="430.999978" inkscape:bbox-width="200.000000" inkscape:bbox-height="306.251785"/>
+            <svg:use id="s11142" xlink:href="#s41223" ns0:duplicate-src="s41223" x="0" y="0" width="1" height="1" transform="matrix(1,0,0,1.6127201,0,-193.07449)" inkscape:bbox-x="1482.498747" inkscape:bbox-y="271.000023" inkscape:bbox-width="200.000000" inkscape:bbox-height="466.251762"/>
+        </svg:g>
+        <svg:g id="s19539"
+inkscape:groupmode="layer"
+scene_group="true"
+style=""
+inkscape:bbox-x="-0.000035"
+inkscape:bbox-y="-28.571433"
+inkscape:bbox-width="1920.000000"
+inkscape:bbox-height="1080.000000">
+            <svg:image y="0.93361557" x="-3.4877234e-05" id="image175" xlink:href="file:///home/wycc/devel/md6/MadButterfly/nodejs/examples/mce/background2.png" height="1080" width="1920" saved_id="image175" inkscape:bbox-x="-0.000035" inkscape:bbox-y="-28.571433" inkscape:bbox-width="1920.000000" inkscape:bbox-height="1080.000000"/>
+            <svg:g inkscape:label="cat0"
+id="s58261-1"
+transform="matrix(1,0,0,1.0142332,19.500003,-54.51391)"
+saved_id="s58261-1"
+inkscape:bbox-x="137.142856"
+inkscape:bbox-y="508.886854"
+inkscape:bbox-width="200.000000"
+inkscape:bbox-height="290.797694">
+                <svg:image y="302.88058" x="117.64285" id="image133" height="286.7168" width="200" inkscape:label="" xlink:href="./cat0.jpg" sodipodi:absref="/home/wycc/devel/md8/MadButterfly/nodejs/examples/mce/./cat0.jpg" saved_id="image133" inkscape:bbox-x="137.142856" inkscape:bbox-y="508.886854" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797694"/>
+            </svg:g>
+            <svg:text xml:space="preserve"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+x="44.285713"
+y="653.79077"
+id="text145"
+saved_id="text145"
+sodipodi:linespacing="125%"
+inkscape:label="line1"
+inkscape:bbox-x="48.680244"
+inkscape:bbox-y="398.571411"
+inkscape:bbox-width="1154.433594"
+inkscape:bbox-height="29.160156">
+                <svg:tspan sodipodi:role="line"
+id="tspan147"
+saved_id="tspan147"
+x="44.285713"
+y="653.79077">
+                    1111111111111111                                                            
+                </svg:tspan>
+            </svg:text>
+            <svg:text inkscape:label="line2"
+sodipodi:linespacing="125%"
+saved_id="text149"
+id="text149"
+y="715.79077"
+x="44.285713"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+xml:space="preserve"
+ns0:duplicate-src="text145"
+inkscape:bbox-x="47.215401"
+inkscape:bbox-y="336.571411"
+inkscape:bbox-width="1155.898438"
+inkscape:bbox-height="29.687500">
+                <svg:tspan y="715.79077"
+x="44.285713"
+saved_id="tspan151"
+id="tspan151"
+sodipodi:role="line"
+ns0:duplicate-src="tspan147">
+                    2222222222222222                                                            
+                </svg:tspan>
+            </svg:text>
+            <svg:text ns0:duplicate-src="text153"
+xml:space="preserve"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+x="41.42857"
+y="772.07648"
+id="text153"
+saved_id="text153"
+sodipodi:linespacing="125%"
+inkscape:label="line3"
+inkscape:bbox-x="44.475445"
+inkscape:bbox-y="279.719299"
+inkscape:bbox-width="786.484375"
+inkscape:bbox-height="30.253906">
+                <svg:tspan ns0:duplicate-src="tspan155"
+sodipodi:role="line"
+id="tspan155"
+saved_id="tspan155"
+x="41.42857"
+y="772.07648">
+                    3333333333333333                               
+                </svg:tspan>
+            </svg:text>
+            <svg:text inkscape:label="line4"
+sodipodi:linespacing="125%"
+saved_id="text157"
+id="text157"
+y="845.79077"
+x="44.285713"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+xml:space="preserve"
+ns0:duplicate-src="text153"
+inkscape:bbox-x="44.285713"
+inkscape:bbox-y="206.571411"
+inkscape:bbox-width="585.781250"
+inkscape:bbox-height="0.000000">
+                
+                                 
+            
+            </svg:text>
+            <svg:text ns0:duplicate-src="text157"
+xml:space="preserve"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+x="45.714283"
+y="824.36218"
+id="text161"
+saved_id="text161"
+sodipodi:linespacing="125%"
+inkscape:label="line4"
+inkscape:bbox-x="47.667408"
+inkscape:bbox-y="228.000000"
+inkscape:bbox-width="940.390625"
+inkscape:bbox-height="29.160156">
+                <svg:tspan ns0:duplicate-src="tspan159"
+sodipodi:role="line"
+id="tspan163"
+saved_id="tspan163"
+x="45.714283"
+y="824.36218">
+                    44444444                                                           
+                </svg:tspan>
+            </svg:text>
+            <svg:text inkscape:label="line5"
+sodipodi:linespacing="125%"
+saved_id="text165"
+id="text165"
+y="878.07648"
+x="47.142857"
+style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+xml:space="preserve"
+ns0:duplicate-src="text161"
+inkscape:bbox-x="50.228794"
+inkscape:bbox-y="173.719299"
+inkscape:bbox-width="1155.742188"
+inkscape:bbox-height="29.726562">
+                <svg:tspan y="878.07648"
+x="47.142857"
+saved_id="tspan167"
+id="tspan167"
+sodipodi:role="line"
+ns0:duplicate-src="tspan163">
+                    5555555555555555                                                            
+                </svg:tspan>
+            </svg:text>
+        </svg:g>
+        <svg:g id="s53522"
+inkscape:groupmode="layer"
+scene_group="true"
+style="display: none"
+inkscape:bbox-x="-0.000035"
+inkscape:bbox-y="-28.571433"
+inkscape:bbox-width="1920.000000"
+inkscape:bbox-height="1080.000000">
+            <svg:use id="s16141" xlink:href="#image175" ns0:duplicate-src="image175" x="0" y="0" width="1" height="1" inkscape:bbox-x="-0.000035" inkscape:bbox-y="-28.571433" inkscape:bbox-width="1920.000000" inkscape:bbox-height="1080.000000"/>
+            <svg:use id="s16104" xlink:href="#s58261-1" ns0:duplicate-src="s58261-1" x="0" y="0" width="1" height="1" inkscape:bbox-x="137.142856" inkscape:bbox-y="508.886854" inkscape:bbox-width="200.000000" inkscape:bbox-height="290.797694"/>
+            <svg:use id="s85459" xlink:href="#text145" ns0:duplicate-src="text145" x="0" y="0" width="1" height="1" inkscape:bbox-x="48.680244" inkscape:bbox-y="398.571411" inkscape:bbox-width="1154.433594" inkscape:bbox-height="29.160156"/>
+            <svg:use id="s49328" xlink:href="#text149" ns0:duplicate-src="text149" x="0" y="0" width="1" height="1" inkscape:bbox-x="47.215401" inkscape:bbox-y="336.571411" inkscape:bbox-width="1155.898438" inkscape:bbox-height="29.687500"/>
+            <svg:use id="s53390" xlink:href="#text153" ns0:duplicate-src="text153" x="0" y="0" width="1" height="1" transform="translate(2.8571429,5.7142857)" inkscape:bbox-x="47.332588" inkscape:bbox-y="274.005014" inkscape:bbox-width="786.484375" inkscape:bbox-height="30.253906"/>
+            <svg:use id="s81494" xlink:href="#text157" ns0:duplicate-src="text157" x="0" y="0" width="1" height="1" inkscape:bbox-x="44.285713" inkscape:bbox-y="206.571411" inkscape:bbox-width="585.781250" inkscape:bbox-height="0.000000"/>
+            <svg:use id="s73284" xlink:href="#text161" ns0:duplicate-src="text161" x="0" y="0" width="1" height="1" transform="translate(-1.4285714,21.428571)" inkscape:bbox-x="46.238837" inkscape:bbox-y="206.571429" inkscape:bbox-width="940.390625" inkscape:bbox-height="29.160156"/>
+            <svg:use id="s93680" xlink:href="#text165" ns0:duplicate-src="text165" x="0" y="0" width="1" height="1" transform="translate(-2.8571429,35.714286)" inkscape:bbox-x="47.371651" inkscape:bbox-y="138.005013" inkscape:bbox-width="1155.742188" inkscape:bbox-height="29.726562"/>
+        </svg:g>
+    </svg:g>
+    <svg:g inkscape:label="components" id="s49280"/>
+</svg:svg>
--- a/nodejs/examples/mce/mainmenu.js	Wed Apr 06 21:35:21 2011 +0800
+++ b/nodejs/examples/mce/mainmenu.js	Mon Apr 11 13:17:05 2011 +0800
@@ -28,20 +28,30 @@
     var self = this;
     this.items=[];
     for(i=0;i<8;i++) {
-	this.items.push(app.get("cat"+i));
+	this.items.push(app.getComponent("cat"+i));
     }
     this.app = app;
 
-    this.lightbar = app.get("lightbar");
     this.lines = [];
-    for(i = 0; i < 5; i++) {
-        var line = app.get("line" + (i + 1));
-        this.lines.push(line);
-    }
     this.line=0;
     this.item = 0;
     this.itemToScene=[0,15,31,47,63,79,95];
 
+    app.addKeyListener(mbapp.KEY_UP, function() { 
+	var target = self.items[self.item].toCoord();
+	sys.puts(target);
+	target.center.move(target.center.x, target.center.y-50);
+	sys.puts(target.center.y);
+	self.app.refresh();
+    });
+    app.addKeyListener(mbapp.KEY_DOWN, function() { 
+	var target = self.items[self.item].toCoord();
+	target.center.move(target.center.x, target.center.y+50);
+	sys.puts("move "+target.center.owner.id);
+	sys.puts(target.center.y);
+	self.app.refresh();
+    });
+
     app.addKeyListener(mbapp.KEY_LEFT, function() { 
         self.item = self.item - 1;
         if (self.item == -1) {
@@ -59,7 +69,15 @@
         self.app.runToScene(self.itemToScene[self.item]);
     });
     app.addKeyListener(mbapp.KEY_ENTER, function() {
-        self.key_enter();
+        try {
+            //self.app.runToScene(self.itemToScene[self.item]);
+            self.key_enter();
+	} catch(e) {
+	    sys.puts("aaa"+e.stack);
+	    for(k in e) {
+	        sys.puts(k+"="+e[k]);
+	    }
+	}
     });
 }
 
@@ -67,33 +85,59 @@
 MainMenu.prototype.key_enter=function() 
 {
     var self = this;
-    var target = this.items[this.item];
+    var target = this.items[this.item].toCoord();
     var an = new animate.scale(this.app, target, 1, 1/1.5);
-    animate.run([an], 0, 0.3,function() {
+
+    this.changePage(self.item);
+    /*
+    animate.run(this.app,[an], 0, 0.3,function() {
         var sx = 259 - target.center.x;
         var sy = 355 - target.center.y;
+	sys.puts("target="+target.id);
 	var an1 = new animate.shift(self.app,target,sx,sy);
-	animate.run([an1],0,1,function() {
+	animate.run(self.app, [an1],0,1,function() {
 	    self.changePage(self.item);
 	});
     });
+    */
+    return;
+    var list=[];
     for(i=0;i<this.items.length;i++) {
 	if (i == this.item) continue;
+	var obj = this.items[i].toCoord();
+	sys.puts(obj);
+	if (obj == undefined) continue;
 	if (i > this.item) {
-	    sx = 1920 - this.items[i].center.x;
+	    sx = 1920 - this.items[i].toCoord().center.x;
 	    sy = 0;
 	} else {
-	    sx =  -this.items[i].center.x*2;
+	    sx =  -this.items[i].toCoord().center.x;
 	    sy = 0;
 	}
 	//alpha = new animate.alpha(this.app,this.items[i], 0);
-	an = new animate.shift(this.app,this.items[i], sx,sy);
-	animate.run([an], 0, 1);
+	sys.puts("111");
+	an = new animate.shift(this.app,this.items[i].toCoord(), sx,sy);
+	list.push(an);
     }
+    animate.run(this.app,list, 0, 1);
+    sys.puts("enter");
 }
 
 MainMenu.prototype.onNextPage=function() {
+    sys.puts("aaaaaaaaaaaaaaaaaaaaaa");
     this.app.changeScene(97);
+    var l = this.app.getComponent('line2');
+    var coord = l.toCoord();
+    if (coord == undefined) return;
+    sys.puts(coord.isdup);
+    sys.puts(coord.id);
+    sys.puts(coord.refid);
+    try {
+        l.set_text('aaaaaaqa');
+    } catch(e) {
+	sys.puts(e);
+    }
+    this.app.refresh();
 }
 MainMenu.prototype.changePage=function(item) {
     this.app.epg.getList(item,this.onNextPage);
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/nodejs/examples/simple/test-translate.js	Mon Apr 11 13:17:05 2011 +0800
@@ -0,0 +1,27 @@
+// -*- indent-tabs-mode: t; tab-width: 8; c-basic-offset: 4; -*-
+// vim: sw=4:ts=8:sts=4
+var svg = require("svg");
+var mbapp = require("mbapp");
+var sys=require("sys");
+var animate=require("animate");
+
+app = new mbapp.app();
+
+coord_parent = app.mb_rt.coord_new(app.mb_rt.root);
+coord = app.mb_rt.coord_new(coord_parent)
+data=mbapp.ldr.load("sample.png");
+paint = app.mb_rt.paint_image_new(data);
+img = app.mb_rt.image_new(10,10,50,50);
+paint.fill(img);
+coord.add_shape(img);
+
+var shift = 0;
+function translate_handler() {
+    coord_parent[2] = shift;
+    app.refresh();
+    setTimeout(translate_handler, 100);
+    shift = shift + 10;
+}
+
+translate_handler();
+app.loop()
--- a/nodejs/mbapp.js	Wed Apr 06 21:35:21 2011 +0800
+++ b/nodejs/mbapp.js	Mon Apr 11 13:17:05 2011 +0800
@@ -124,7 +124,7 @@
     this.keymap={};
     this.onKeyPress = null;
     this.svg = new svg.loadSVG(this.mb_rt,this.mb_rt.root,null);
-    this.frame_interval = 1000/30; // 12 frame per second
+    this.frame_interval = 1000/12; // 12 frame per second
     this.timer = null;
     this._time = Date.now();
     this._componentmanager = new component.ComponentManager(this);
@@ -207,11 +207,23 @@
         var dup = this.mb_rt.coord_new(src.parent);
 	for (i in nodes) {
 	    var c = nodes[i];
-	    var ng = this.mb_rt.coord_new(dup);
 	    var k = dup.clone_from_subtree(c);
 	    c.dup = k;
 	    c.dup.id = c.id;
 	    c.dup.refid = c.refid;
+	    // The following code should be relocated to the javascript wrapper 
+	    // the clone_from_subtree in the future.
+	    try {
+		k.bbox = c.bbox;
+		k.bbox.owner = k;
+	    } catch(e) {
+	    }
+
+	    try {
+		k.center = c.center;
+		k.center.owner = c.owner;
+	    } catch(e) {
+	    }
 	}
 	src.dup = dup;
     } else {
@@ -225,8 +237,8 @@
     for(i in nodes) {
         coord= nodes[i];
 	if (coord.target) {
+	    this._componentmanager.add(coord,coord.dup);
 	    this.generateScaleTweenObject(coord.dup,coord,coord.target,p,'');
-	    this._componentmanager.add(coord,coord.dup);
 	} else {
 	    sys.puts(coord.id);
 	    sys.puts(coord[0]);
@@ -315,7 +327,7 @@
         try {
             this.get(scenes[i].ref).hide();
             if (nth >=scenes[i].start && nth <=scenes[i].end) {
-	        this.get(scenes[i].ref).show();
+	        //this.get(scenes[i].ref).show();
 	        if (this.get(scenes[i].ref).dup)
                     this.get(scenes[i].ref).dup.show();
 		if (scenes[i].type == 'normal' || i == scenes.length-1) {
@@ -328,7 +340,7 @@
 		        // If there is no second key frame defined, fall back to the normal
 	                this.get(scenes[i].ref).show();
 		    }
-		    this.get(scenes[i+1].ref).hide();
+		    //this.get(scenes[i+1].ref).hide();
 		}
 
 	    } else {
@@ -386,20 +398,17 @@
 	    if (nextframe < this.targetScene)
 	        nextframe = this.targetScene;
 	}
+        this.changeScene(nextframe);
 	if (nextframe != this.targetScene) {
-	    var timegap = (nextframe-this.startScene)*this.skipdir*this.frame_interval+this.starttime - Date.now();
-	    sys.puts("goto "+timegap);
-	    if (timegap <200) {
-	        timegap = 0;
-	    } else {
-	    }
+	    var timegap = this.frame_interval - (Date.now()-now);
+	    if (timegap < 0) timegap = 0;
+	    
             this.timer = setTimeout(function() {
    	        self.skipFrame()
-	    }, timegap);
+	    }, timegap );
 	} else {
 	    this.timer = null;
 	}
-        this.changeScene(nextframe);
 	now = Date.now();
 	this.ts("goto end");
     }
--- a/nodejs/svg.js	Wed Apr 06 21:35:21 2011 +0800
+++ b/nodejs/svg.js	Mon Apr 11 13:17:05 2011 +0800
@@ -78,10 +78,34 @@
             this.parseGroup(accu,coord,'root_coord',nodes[k]);
         } 
     }
+
+    this.sortScene();
 }
 
 
 
+loadSVG.prototype.sortScene=function()
+{
+    for(i=0;i<this.scenes.length;i++) {
+	sys.puts(this._groupMap[this.scenes[i].ref]);
+	sys.puts(this._groupMap[this.scenes[i].ref].layer);
+	this.scenes[i].layer = this._groupMap[this.scenes[i].ref].layer;
+    }
+    this.scenes.sort(function(a,b) {
+	if (a.layer > b.layer) return 1;
+	if (a.layer < b.layer) return -1;
+	if (a.start > b.start) return 1;
+	if (a.start < b.start) return -1;
+	return 0;
+    });
+    sys.puts("scenes");
+    for(i=0;i<this.scenes.length;i++) {
+	var s = this.scenes[i];
+        sys.puts(s.layer+": start="+s.start+" end="+s.end+" ref="+s.ref);
+    }
+
+}
+
 loadSVG.prototype.leaveSVG=function()
 {
     var p = this.pgstack.pop();
@@ -105,6 +129,7 @@
     mbname = n.attr("label");
     if(mbname&&(mbname.value()!="")) {
 	name = mbname.value();
+        sys.puts("defone object "+ name);
 	mb_rt.mbnames[name] = obj;
     }
     try {
@@ -213,6 +238,7 @@
 }
 function tspan_set_text(text)
 {
+    sys.puts("kkkkk "+text);
     this.text.set_text(text); 
 }
 
@@ -240,8 +266,14 @@
     var sz = 10;
     var face;
     var k;
-    var obj = this.mb_rt.stext_new(n.text(),x,y);
+    if (x == 0) x = coord.text_x;
+    if (y == 0) y = coord.text_y;
+    var obj = this.mb_rt.stext_new(n.text().trim(),x,y);
+    sys.puts("get text "+n.text().trim() +"at "+x+","+y);
     
+    tcoord.node = n;
+    n.coord = tcoord;
+    this._check_duplicate_src(n,tcoord);
     style = parse_style(n);
     for(k in pstyle) {
 	if(k in style)
@@ -637,9 +669,16 @@
 
     a = node.attr("bbox-x");
     if(!a) {
+	sys.puts("No bbox: "+node);
 	tgt.center = new Object();
 	tgt.center.x=0;
 	tgt.center.y=0;
+	tgt.center.rel = new Object();
+	tgt.center.rel.x=0;
+	tgt.center.rel.y=0;
+	tgt.bbox = new Object();
+        tgt.center.__proto__ = _center_proto;
+        tgt.center.owner = tgt;
 	return 0;
     }
     
@@ -813,6 +852,66 @@
     make_mbnames(this.mb_rt, n, pcoord);
 };
 
+loadSVG.prototype.parseFlowRegion=function(coord, n,style)
+{
+    var nodes = n.childNodes();
+
+    var k;
+
+    for(k in nodes) {
+	var c= nodes[k].name();
+	if (c == "rect") {
+	    // We support rectangle only for now. The x,y,w,h are extrcated and use by the flowPara latter.
+	    coord.text_x = getInteger(nodes[k],'x');
+	    coord.text_y = getInteger(nodes[k],'y');
+	    coord.text_w = getInteger(nodes[k],'width');
+	    coord.text_h = getInteger(nodes[k],'height');
+	}
+    }
+}
+loadSVG.prototype.parseFlowRoot=function(accu,coord, id, n) {
+    var nodes = n.childNodes();
+    var tcoord = this.mb_rt.coord_new(coord);
+    var trans = n.attr('transform');
+
+
+
+    tcoord.node = n;
+    n.coord = tcoord;
+    this._check_duplicate_src(n,tcoord);
+
+    if (trans)
+        parseTransform(tcoord,trans.value());
+    else {
+        tcoord.sx = 1;
+	tcoord.sy = 1;
+	tcoord.r = 0;
+	tcoord.tx = 0;
+	tcoord.ty = 0;
+    }
+    style = parse_style(n);
+    var nodes = n.childNodes();
+    var k;
+    for(k in nodes) {
+	var c= nodes[k].name();
+	if (c == "flowRegion") {
+	    this.parseFlowRegion(tcoord,nodes[k],style);
+	} else if (c == "flowPara") {
+	    this.parseTSpan(tcoord,nodes[k],style);
+	} else if (c == "flowDiv") {
+	}
+    }
+    var nx = coord[0]*tcoord.text_x+coord[1]*tcoord.text_y+coord[2];
+    if (coord.center.x > nx)
+        coord.center.x = nx;
+    var ny = coord[3]*tcoord.text_x+coord[4]*tcoord.text_y+coord[5];
+    if (coord.center.y > ny)
+        coord.center.y = ny;
+    this._set_bbox(n, tcoord);
+	
+    make_mbnames(this.mb_rt, n, tcoord);
+}
+
 loadSVG.prototype.parseText=function(accu,coord,id, n)
 {
     var nodes = n.childNodes();
@@ -826,6 +925,11 @@
     n.coord = tcoord;
     this._check_duplicate_src(n,tcoord);
 
+    tcoord.sx = 1;
+    tcoord.sy = 1;
+    tcoord.r = 0;
+    tcoord.tx = 0;
+    tcoord.ty = 0;
     if (n.attr('x')) {
 	var nx = coord[0]*x+coord[1]*y+coord[2];
 	if (coord.center.x > nx)
@@ -836,6 +940,7 @@
 	if (coord.center.y > ny)
 	    coord.center.y = ny;
     }
+
     style = parse_style(n);
     var nodes = n.childNodes();
     var k;
@@ -976,9 +1081,10 @@
     attr = n.attr('duplicate-src');
     if (attr) {
         var id = attr.value();
-	var coord = this.mb_rt.mbnames[id];
-	if (coord) {
-            var orign = this.mb_rt.mbnames[id].node;
+        var src = this.mb_rt.mbnames[id];
+	if (src != null) {
+            var orign = src.node;
+            sys.puts("xxxxxxxxxxxxxx");
             var nw = getInteger(orign,'width');
             var nh = getInteger(orign,'height');
 	    tcoord.sx *= w/nw;
@@ -1075,7 +1181,12 @@
     } else {
         n.coord.isuse = false;
     }
-    var attr = n.attr('duplicate-src');
+
+    // A workaround, should be removed.
+    var attr = n.attr('saved_id');
+    if (attr) return;
+
+    attr = n.attr('duplicate-src');
     if (attr == null) {
         sys.puts("no duplicated" + n);
         return;
@@ -1087,6 +1198,7 @@
 	}
         this.mb_rt.mbnames[id].target = coord;
 	coord.refid = this.mb_rt.mbnames[id].id;
+	sys.puts("set the refid of "+id+" to be "+coord.refid);
     } catch(e) {
         sys.puts("id "+id+" is not defined");
     }
@@ -1105,6 +1217,7 @@
     
     n.coord = coord;
     coord.node = n;
+    n.layer = root.id;
     this._check_duplicate_src(n,coord);
 
     coord.center= new Object();
@@ -1141,6 +1254,8 @@
 	    this.parsePath(accu,coord, id, nodes[k]);
 	} else if (c == "text") {
 	    this.parseText(accu,coord, id, nodes[k]);
+	} else if (c == "flowRoot") {
+	    this.parseFlowRoot(accu, coord, id, nodes[k]);
 	} else if (c == "rect") {
 	    this.parseRect(accu_matrix,coord, id, nodes[k]);
 	} else if (c == "image") {
--- a/pyink/MBScene.py	Wed Apr 06 21:35:21 2011 +0800
+++ b/pyink/MBScene.py	Mon Apr 11 13:17:05 2011 +0800
@@ -232,6 +232,7 @@
     def do_CellClick(self, layer_idx, frame_idx):
 	self._director.show_scene(frame_idx)
 	self.selectSceneObject(layer_idx, frame_idx)
+	self._domviewui.remember_current_frame(layer_idx, frame_idx)
         pass
 
     def doInsertKeyScene(self,w):
--- a/pyink/comp_dock.py	Wed Apr 06 21:35:21 2011 +0800
+++ b/pyink/comp_dock.py	Mon Apr 11 13:17:05 2011 +0800
@@ -120,7 +120,7 @@
                 model.remove(itr)
                 return
             
-            itr = itr.iter_next()
+            itr = model.iter_next(itr)
             pass
         
         raise ValueError, 'unknown component name - %s' % (name)
--- a/pyink/domview.py	Wed Apr 06 21:35:21 2011 +0800
+++ b/pyink/domview.py	Mon Apr 11 13:17:05 2011 +0800
@@ -94,7 +94,6 @@
         return names
 
     def parse_timelines(self):
-        print 'parse timelines fro component ' + self.name()
         self.timelines[:] = []
         
         if self.node:
@@ -279,9 +278,11 @@
         comp_names = self._comp_names
         components_node = self._components_node
         for child in components_node.childList():
-            child_name = child.name()
-            if child_name != 'ns0:component':
+            child_node_name = child.name()
+            if child_node_name != 'ns0:component':
                 continue
+            
+            child_name = child.getAttribute('name')
             if child_name in comp_names:
                 raise ValueError, 'duplicate component name %s' % (child_name)
 
@@ -289,6 +290,7 @@
             comp.parse_timelines()
             
             self._components.append(comp)
+            
             comp_names.add(child_name)
             pass
         pass
@@ -322,7 +324,7 @@
             except:
                 continue
             if nlabel == 'components':
-                self._components_group
+                self._components_group = n
                 break
             pass
         else:                   # no components group
@@ -472,10 +474,19 @@
         self._layers_parent = \
             self._get_layers_group_of_component(comp_name)
         
-        first_name = comp.all_timeline_names()[0]
-        self.switch_timeline(first_name)
+        self.make_sure_timeline()
 
-        self.hide_component(old_comp.name())
+        try:
+            comp_grp = self.get_component_group(old_comp.name())
+            old_comp_existed = True
+        except ValueError:
+            old_comp_existed = False
+            pass
+        
+        if old_comp_existed:
+            self.hide_component(old_comp.name())
+            pass
+        
         self.show_component(comp.name())
         pass
 
@@ -573,6 +584,22 @@
 
         # Make domview to rescan layers and scenes.
         self.reset()            # from domview
+
+        cur_comp_name = self.get_current_component()
+        cur_comp_node = self.get_component_group(cur_comp_name)
+        cur_comp_node.setAttribute("cur_timeline", timeline_name)
+        pass
+
+    def make_sure_timeline(self):
+        cur_comp_name = self.get_current_component()
+        cur_comp_node = self.get_component_group(cur_comp_name)
+        try:
+            timeline_name = cur_comp_node.getAttribute("cur_timeline")
+        except KeyError:
+            timeline_name = self.all_timeline_names()[0]
+            pass
+        self._cur_timeline = None
+        self.switch_timeline(timeline_name)
         pass
 
     def add_timeline(self, timeline_name):
@@ -637,6 +664,44 @@
         parent_group.appendChild(use_node)
         
         return use_node
+
+    ## \brief Remember current frame and layer on the scenes node.
+    #
+    def remember_current_frame(self, layer_idx, frame_idx):
+        if not isinstance(layer_idx, int):
+            raise TypeError, 'layer index should be a integer'
+        if not isinstance(frame_idx, int):
+            raise TypeError, 'frame index should be a integer'
+        
+        timeline_name = self.get_current_timeline()
+        timeline = self._cur_comp.get_timeline(timeline_name)
+        timeline_scenes = timeline.scenes_node
+        timeline_scenes.setAttribute('cur_layer', str(layer_idx))
+        timeline_scenes.setAttribute('cur_frame', str(frame_idx))
+        pass
+
+    ## \brief Get current frame and layer from the scenes node.
+    #
+    def get_current_frame(self):
+        timeline_name = self.get_current_timeline()
+        timeline = self._cur_comp.get_timeline(timeline_name)
+        timeline_scenes = timeline.scenes_node
+        try:
+            cur_layer = timeline_scenes.getAttribute('cur_layer')
+        except KeyError:
+            cur_layer_idx = 0
+        else:
+            cur_layer_idx = int(cur_layer)
+            pass
+        try:
+            cur_frame = timeline_scenes.getAttribute('cur_frame')
+        except KeyError:
+            cur_frame_idx = 0
+        else:
+            cur_frame_idx = int(cur_frame)
+            pass
+
+        return cur_layer_idx, cur_frame_idx
     pass
 
 
--- a/pyink/domview_ui.py	Wed Apr 06 21:35:21 2011 +0800
+++ b/pyink/domview_ui.py	Mon Apr 11 13:17:05 2011 +0800
@@ -424,6 +424,9 @@
         self._dom.switch_component(name)
         self._framelines_refresh() # from domview_ui
         self._comp_dock.refresh_timelines()
+        
+        cur_layer_idx, cur_frame_idx = self._dom.get_current_frame()
+        self._fl_stack.active_frame(cur_layer_idx, cur_frame_idx)
         pass
 
     def all_comp_names(self):
@@ -450,6 +453,9 @@
     def switch_timeline(self, name):
         self._dom.switch_timeline(name)
         self._framelines_refresh() # from domview_ui
+        
+        cur_layer_idx, cur_frame_idx = self._dom.get_current_frame()
+        self._fl_stack.active_frame(cur_layer_idx, cur_frame_idx)
         pass
 
     def all_timeline_names(self):
@@ -876,6 +882,17 @@
 	max_frame = self._dom.get_max_frame()
 	return max_frame
 
+    ## \brief Remember current frame and layer on the scenes node.
+    #
+    def remember_current_frame(self, layer_idx, frame_idx):
+        self._dom.remember_current_frame(layer_idx, frame_idx)
+        pass
+
+    ## \brief Get current frame and layer from the scenes node.
+    #
+    def get_current_frame(self):
+        return self._dom.get_current_frame()
+
     ## \brief add the current position to the undo buffer.
     #
     #  The msg will be displayed in the UI to indicate the undo set.
--- a/src/X_supp.c	Wed Apr 06 21:35:21 2011 +0800
+++ b/src/X_supp.c	Mon Apr 11 13:17:05 2011 +0800
@@ -849,9 +849,9 @@
     xmb_rt->backend_cr = mbe_create(xmb_rt->backend_surface);
     
     xmb_rt->rdman = (redraw_man_t *)malloc(sizeof(redraw_man_t));
+    redraw_man_init(xmb_rt->rdman, xmb_rt->cr, xmb_rt->backend_cr);
     xmb_rt->rdman->w = w;
     xmb_rt->rdman->h = h;
-    redraw_man_init(xmb_rt->rdman, xmb_rt->cr, xmb_rt->backend_cr);
     /* FIXME: This is a wired loopback reference. This is inly
      *        required when we need to get the xmb_rt->tman for the
      *        animation. We should relocate the tman to the
--- a/src/redraw_man.c	Wed Apr 06 21:35:21 2011 +0800
+++ b/src/redraw_man.c	Mon Apr 11 13:17:05 2011 +0800
@@ -2554,6 +2554,9 @@
     if(r != OK)
 	return ERR;
 
+    //mbe_clear(rdman->cr);
+    //mbe_copy_source(rdman->cr, rdman->backend);
+    //printf("clear\n");
     if(rdman->n_dirty_areas > 0) {
 	/*! \brief Draw shapes in preorder of coord tree and support opacity
 	 * rules.