From 0d4a780c015a71a5a9aff4effd6d5db1de879646 Mon Sep 17 00:00:00 2001
From: itozyun <itozyun@user.sourceforge.jp>
Date: Mon, 4 Feb 2013 23:23:58 +0900
Subject: [PATCH] Client is version 0.5.46, fixed picture.id

---
 app/assets/javascripts/peta-apps.js   |  38 +-
 app/assets/javascripts/peta-common.js |   3 +-
 app/assets/javascripts/system.js      | 761 ++++++++++++++++++++++------------
 3 files changed, 505 insertions(+), 297 deletions(-)

diff --git a/app/assets/javascripts/peta-apps.js b/app/assets/javascripts/peta-apps.js
index 0b1a9310..8065af19 100644
--- a/app/assets/javascripts/peta-apps.js
+++ b/app/assets/javascripts/peta-apps.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.apps.js
- *   version 0.5.44
+ *   version 0.5.46
  *   
  * author:
  *   itozyun
@@ -447,6 +447,7 @@
 			this.viewerApplicationList = function( file ){
 				var data = FileAPI.getFileData( file ),
 					type = data !== null ? data.type : null;
+				if( data === FILE_DATA_MY_ORIGINAL_PICTURES_ROOT ) return [ PremiumSatge ];
 				switch( type ){
 					case FILE_TYPE.COMIC :
 					case FILE_TYPE.PANEL :
@@ -458,10 +459,7 @@
 						break;
 					case FILE_TYPE.ARTIST :
 						return [ PremiumSatge ];
-					default :
-						if( data === FILE_DATA_MY_ORIGINAL_PICTURES_ROOT ){
-							return [ PremiumSatge ];
-						};						
+					default :						
 				};
 				return [];
 			};
@@ -853,9 +851,9 @@ var PremiumSatge = gOS.registerApplication( function(){
 	var ImageGroupIconClass = function( index, data ){
 		var elmIconWrap     = elmIconOrigin.cloneNode( true ),
 			elmIconTitle    = Util.getElementsByClassName( elmIconWrap, 'image-group-item-title' )[ 0 ],
-			originalPicture = data.original_picture,
+			originalPicture = data.original_picture || data,
 			SRC             = [ BASE_PATH, data.id, '.', data.ext ].join( ''),
-			LOW_SRC         = originalPicture.filesize && originalPicture.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', originalPicture.ext ].join( '') : null,
+			LOW_SRC         = originalPicture.filesize && originalPicture.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext ].join( '' ) : null,
 			reversibleImage = null,
 			timer           = null,
 			onEnterFlag     = false,
@@ -3488,7 +3486,7 @@ var Editor = gOS.registerApplication( function(){
 		};
 		function change(){
 			if( currentElement === null ) return;
-			PremiumSatge.boot( currentElement.artistID, currentElement.resourcePicture, currentElement );
+			PremiumSatge.boot( currentElement.artistID, currentElement.realPicture, currentElement );
 		};
 
 		return {
@@ -3685,8 +3683,6 @@ var Editor = gOS.registerApplication( function(){
 		this.flipV    = data.height < 0 ? -1 : 1;
 		this.flipH    = data.width  < 0 ? -1 : 1;
 		this.rPicture = data.picture;
-		//this.oPicture = this.rPicture.original_picture;
-		//this.artistID = this.oPicture.artist.id || -1;
 		
 		var self = this;
 		function animeComplete(){
@@ -3712,7 +3708,7 @@ var Editor = gOS.registerApplication( function(){
 				this.flipV = updateV === true ? -this.flipV : this.flipV;
 				this.reversibleImage.resize( this.flipH * this.w, this.flipV * this.h );
 			},
-			resourcePicture : function( _rPicture ){
+			realPicture : function( _rPicture ){
 				if( _rPicture && _rPicture !== this.rPicture ){
 					HISTORY_CONTROL.saveState( this._updateResourcePicture, this.rPicture, _rPicture, this );
 					this._updateResourcePicture( _rPicture );
@@ -3757,7 +3753,7 @@ var Editor = gOS.registerApplication( function(){
 				this.actualH = this.oPicture.height;
 				
 				var _reversibleImage = pettanr.image.createReversibleImage( 
-						[ pettanr.CONST.RESOURCE_PICTURE_PATH, this.rPicture.id, '.', this.rPicture.ext ].join( '' ),
+						[ pettanr.CONST.PICTURE_PATH, this.rPicture.id, '.', this.rPicture.ext ].join( '' ),
 						this.flipH * this.w, this.flipV * this.h
 					);
 				if( this.reversibleImage !== null ){
@@ -4071,7 +4067,7 @@ var Editor = gOS.registerApplication( function(){
 				var _panelElement;
 				if( isPanelPictureData !== true ){
 					_panelElement = new ImageElementClass( {
-						picture : data,
+						picture : data.picture,
 						x       : Math.floor( panelW / 2 - data.width / 2 ),
 						y       : Math.floor( panelH / 2 - data.height / 2 ),
 						z       : -1,
@@ -5041,7 +5037,7 @@ var Model = ( function(){
 		function getPanelElementByTiming(){
 			var i, l = panelElementArray.length;
 			while( timing < l * 2 ){
-				for( i=0; i<l; ++i ){
+				for( i = 0; i < l; ++i ){
 					if( timing === panelElementArray[ i ].timing ){
 						// console.log( timing + ' , ' + panelElementArray[ i ].timing );
 						++timing;
@@ -5053,9 +5049,10 @@ var Model = ( function(){
 			return null;
 		};
 		function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){
-			var url;
+			var rPic, url;
 			if( _panelElement.type === 0 ){
-				url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' );
+				rPic = _panelElement.realPicture();
+				url  = [ pettanr.CONST.RESOURCE_PICTURE_PATH, rPic.id, '.', rPic.ext ].join( '' );
 				return [
 					'<img ',
 						'src="',        isAbsoluteUrl !== true ? url : Util.getAbsolutePath( url ), '" ',
@@ -5094,12 +5091,13 @@ var Model = ( function(){
 			};
 		};
 		function getImageJsonGET( _imageElement ){
-			var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
+			var cr = pettanr.LINE_FEED_CODE_TEXTAREA,
+				rPic = _imageElement.realPicture();
 			return [
 				'{', cr,
 					'"resource_picture": {', cr,
-						'"id": ',              _imageElement.resourcePicture().id, ',', cr,
-						'"ext": ',             '"',_imageElement.resourcePicture().ext, '"', cr,
+						'"id": ',              rPic.id, ',', cr,
+						'"ext": ',             '"', rPic.ext, '"', cr,
 					'},', cr,
 					'"x": ',                   _imageElement.x, ',', cr,
 					'"y": ',                   _imageElement.y, ',', cr,
@@ -5114,7 +5112,7 @@ var Model = ( function(){
 			var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
 			return [
 				'{', cr,
-					'"picture_id": ', _imageElement.resourcePicture().id, ',', cr,
+					'"picture_id": ', _imageElement.realPicture().id, ',', cr,
 					'"x": ',          _imageElement.x, ',', cr,
 					'"y": ',          _imageElement.y, ',', cr,
 					'"z": ',          _imageElement.z + 1, ',', cr,
diff --git a/app/assets/javascripts/peta-common.js b/app/assets/javascripts/peta-common.js
index ca18abd7..f8d2fe68 100644
--- a/app/assets/javascripts/peta-common.js
+++ b/app/assets/javascripts/peta-common.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.common.js
- *   version 0.5.45
+ *   version 0.5.46
  * 
  *   author:
  *     itozyun
@@ -96,6 +96,7 @@ pettanr.CONST = ( function(){
 		NS_PETTANR_COMIC              : 'pettanr-comic',
 		THUMBNAIL_PATH                : SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/thumbnail\/' : PETTANR_ROOT_PATH + 'resource_pictures\/',
 		RESOURCE_PICTURE_PATH         : SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/' : PETTANR_ROOT_PATH + 'resource_pictures\/full\/',
+		ORIGINAL_PICTURE_PATH         : SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/' : PETTANR_ROOT_PATH + 'original_pictures\/',
 		PICTURE_PATH                  : SERVER_SUPPORT === false ? RELATIVE + 'pictures\/' : PETTANR_ROOT_PATH + 'pictures\/',
 		SYSTEM_PICTURE_PATH           : ( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'system_pictures\/',
 		CREATE_COMIC_JS               : SERVER_SUPPORT === false ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',
diff --git a/app/assets/javascripts/system.js b/app/assets/javascripts/system.js
index 54cc8a09..d14200b9 100644
--- a/app/assets/javascripts/system.js
+++ b/app/assets/javascripts/system.js
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.5.44
+ *   version 0.5.46
  *
  * gadgetOS
  *   author:
@@ -135,8 +135,7 @@ var Class = ( function(){
 		dataUser           = null,
 		traits             = null,
 		f                  = true,
-		c                  = Util.copyArray,
-		a; /* arguments */
+		copyArray          = Util.copyArray;
 	
 	function getClass( instance ){
 		var cList    = CLASS_LIST,
@@ -186,7 +185,7 @@ var Class = ( function(){
 	 * http://d.hatena.ne.jp/m-hiyama/20051018/1129605002
 	 */
 	function inherits( /* displayName, classSetting, opt_PrivateClass, props */ ){
-		var args        = c( arguments ),
+		var args        = copyArray( arguments ),
 			params      = [],
 			Super       = this,
 			superDef    = getClassDef( Super ),
@@ -307,7 +306,7 @@ var Class = ( function(){
 
 	/* privateDataclass をもつクラスに追加されるメソッド */
 	function newPrivateData( /* instance, args */ ){
-		var args         = c( arguments ),
+		var args         = copyArray( arguments ),
 			user         = args.shift(),
 			def          = getClassDef( user ),
 			privateClass = def.privateClass,
@@ -361,7 +360,7 @@ var Class = ( function(){
 			userDef.userList.push( dataUser );
 		} else {
 			def.live && def.live.push( instance );
-			args = c( arguments );
+			args = copyArray( arguments );
 		};
 		def[ CONSTRUCTOR ] && def[ CONSTRUCTOR ].apply( instance, args );
 		return instance;
@@ -374,7 +373,7 @@ var Class = ( function(){
 		SUPER_ACCESS : 8,
 		PRIVATE_DATA : 16,
 		create : function( /* displayName, classSetting, opt_PrivateClass, props */ ){
-			var args        = c( arguments ),
+			var args        = copyArray( arguments ),
 				displayName = args[ 0 ],
 				classSetting,
 				opt_pool, opt_abstract, opt_final, opt_private,
@@ -417,7 +416,7 @@ var Class = ( function(){
 				classDef[ CONSTRUCTOR ] = props[ CONSTRUCTOR ];
 			};
 			
-			klass = function(){ a = arguments; if( f ) return C.apply( a.callee, c( a ) )};
+			klass = function(){ var a = arguments; if( f ) return C.apply( a.callee, a )};
 			klass.prototype = override( override( traits || {}, props, true ), CommonProps, false );
 			
 			if( opt_abstract === true ){
@@ -1112,30 +1111,30 @@ var File = ( function(){
 			// simpleDeepCopy
 			var driver = FILE_CONTROLER.getDriver( this ),
 				data;
-			if( Type.isFunction( driver.read ) === true　){
+			if( Type.isFunction( driver.read ) === true ){
 				 data = driver.read( this );
 			};
 			return BASE_DRIVER.read( data || this );
 		},
 		write: function( _newData, _onUpdateFunction ){
 			var driver = FILE_CONTROLER.getDriver( this );
-			if( typeof driver.write === 'function'){
+			if( typeof driver.write === 'function' ){
 				return driver.write( this, _newData, _onUpdateFunction );
-			}
+			};
 			return BASE_DRIVER.write( this, _newData, _onUpdateFunction );
 		},
 		viewerApplicationList: function(){
 			var driver = FILE_CONTROLER.getDriver( this );
-			if( typeof driver.viewerApplicationList === 'function'){
+			if( typeof driver.viewerApplicationList === 'function' ){
 				return driver.viewerApplicationList( this );
-			}
+			};
 			return BASE_DRIVER.viewerApplicationList( this );
 		},
 		editorApplicationList: function(){
 			var driver = FILE_CONTROLER.getDriver( this );
-			if( typeof driver.editorApplicationList === 'function'){
+			if( typeof driver.editorApplicationList === 'function' ){
 				return driver.editorApplicationList( this );
-			}
+			};
 			return BASE_DRIVER.viwerApps( this );
 		},
 		create: function(){
@@ -7167,41 +7166,289 @@ var XBrowserStyle = ( function(){
 
 var XDocument = ( function( window, document ){
 	
-	var getIndex = Util.getIndex;
+	var getIndex  = Util.getIndex;
+	var ROOT_LIST = [];
+	var DEF_ATTRS = {};
+	var AUTO      = undefined;
+	var FULL      = DEF_ATTRS; // something unigue value;
+	var FLOOR     = Math.floor;
 	
-	var DEF_ATTRS = [];
+	DEF_ATTRS.LENGTH            =  1;
+	DEF_ATTRS.PERCENT           =  2;
+	DEF_ATTRS.COLOR             =  4;
+	DEF_ATTRS.U_DECIMAL         =  8;
+	DEF_ATTRS.NUMERICAL         = 16;
+	DEF_ATTRS.BOOLEAN           = 32;
+	DEF_ATTRS.QUARTET           = 64;
+	DEF_ATTRS.URL               = 128;
+	DEF_ATTRS.FONT_NAME         = 256;
+	DEF_ATTRS.LIST              = 512;
+	DEF_ATTRS.AUTO              = 1024;
+	DEF_ATTRS.COMBI             = 2048;
+	DEF_ATTRS.BORDER_STYLE      = 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset'.split(',');
+	DEF_ATTRS.POSITION_X        = 'left,center,right'.split(',');
+	DEF_ATTRS.POSITION_Y        = 'top,center,bottom'.split(',');
+	DEF_ATTRS.ALIGN             = 'left,center,right,justify'.split(',');
+	DEF_ATTRS.TEXT_DECORATION   = 'none,underline,overline,line-through,blink'.split(',');
+	DEF_ATTRS.TEXT_TRANSFORM    = 'none,capitalize,lowercase,uppercase'.split(',');
+	DEF_ATTRS.WIDTH_HEIGHT      = 'auto'.split(',');
+	DEF_ATTRS.BOX_SIZING        = 'content-box,padding-box,border-box,margin-box'.split(',');
+	DEF_ATTRS.PAINT             = 1; // 再描画のみ必要
+	DEF_ATTRS.REFLOW            = 2; // レイアウトの再計算が必要
 	
-	var AbstractLayoutManager = Class.create(
-		'AbstractLayoutManager',
-		Class.ABSTRACT, {
-			reflow : function(){}
-		}
-	);
+	DEF_ATTRS.borderWidth    = [ DEF_ATTRS.REFLOW,  0, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH      ]; // em [ top, right, bottom, left ]
+	DEF_ATTRS.borderColor    = [ DEF_ATTRS.PAINT,   4, DEF_ATTRS.QUARTET | DEF_ATTRS.DEF_COLOR   ]; // color [ top, right, bottom, left ]
+	DEF_ATTRS.borderStyle    = [ DEF_ATTRS.REFLOW,  8, DEF_ATTRS.QUARTET | DEF_ATTRS.LIST, DEF_ATTRS.BORDER_STYLE ]; // string [ top, right, bottom, left ]
+	DEF_ATTRS.cornerRadius   = [ DEF_ATTRS.PAINT,  12, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, px [ top, right, bottom, left ]
+	DEF_ATTRS.bgColor        = [ DEF_ATTRS.PAINT,  16, DEF_ATTRS.COLOR     ]; // color
+	DEF_ATTRS.bgAlpha        = [ DEF_ATTRS.PAINT,  17, DEF_ATTRS.U_DECIMAL ]; // 0 - 1
+	DEF_ATTRS.bgImgUrl       = [ DEF_ATTRS.PAINT,  18, DEF_ATTRS.URL       ]; // url
+	DEF_ATTRS.bgImgRepeatX   = [ DEF_ATTRS.PAINT,  19, DEF_ATTRS.BOOLEAN   ]; // true / false
+	DEF_ATTRS.bgImgRepeatY   = [ DEF_ATTRS.PAINT,  20, DEF_ATTRS.BOOLEAN   ]; // true / false
+	DEF_ATTRS.bgImgPositionX = [ DEF_ATTRS.PAINT,  21, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.LIST, DEF_ATTRS.POSITION_X ]; // em %, px, string
+	DEF_ATTRS.bgImgPositionY = [ DEF_ATTRS.PAINT,  22, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.LIST, DEF_ATTRS.POSITION_Y ]; // em %, px, string
+	DEF_ATTRS.shadowColor    = [ DEF_ATTRS.PAINT,  23, DEF_ATTRS.COLOR     ]; // color
+	DEF_ATTRS.shadowAlpha    = [ DEF_ATTRS.PAINT,  24, DEF_ATTRS.U_DECIMAL ]; // 0 - 1
+	DEF_ATTRS.shadowOffsetX  = [ DEF_ATTRS.PAINT,  25, DEF_ATTRS.LENGTH    ]; // em
+	DEF_ATTRS.shadowOffsetY  = [ DEF_ATTRS.PAINT,  26, DEF_ATTRS.LENGTH    ]; // em
+	DEF_ATTRS.shadowBlur     = [ DEF_ATTRS.PAINT,  27, DEF_ATTRS.LENGTH    ]; // em
+	DEF_ATTRS.shadowSpread   = [ DEF_ATTRS.PAINT,  28, DEF_ATTRS.LENGTH    ]; // em
+	DEF_ATTRS.shadowInset    = [ DEF_ATTRS.PAINT,  29, DEF_ATTRS.BOOLEAN   ]; // true / false
+	
+	DEF_ATTRS.color          = [ DEF_ATTRS.PAINT,  30, DEF_ATTRS.COLOR     ]; // color
+	DEF_ATTRS.fontFamily     = [ DEF_ATTRS.REFLOW, 31, DEF_ATTRS.FONT_NAME ]; // string
+	DEF_ATTRS.fontSize       = [ DEF_ATTRS.REFLOW, 32, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, %
+	DEF_ATTRS.bold           = [ DEF_ATTRS.REFLOW, 33, DEF_ATTRS.BOOLEAN   ]; // true / false
+	DEF_ATTRS.italic         = [ DEF_ATTRS.REFLOW, 34, DEF_ATTRS.BOOLEAN   ]; // true / false
+	DEF_ATTRS.lineHeight     = [ DEF_ATTRS.REFLOW, 35, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.NUMERICAL ]; // em, %, 
+	DEF_ATTRS.letterSpacing  = [ DEF_ATTRS.REFLOW, 36, DEF_ATTRS.LENGTH    ]; // em
+	DEF_ATTRS.wordSpacing    = [ DEF_ATTRS.REFLOW, 37, DEF_ATTRS.LENGTH    ];
+	DEF_ATTRS.align          = [ DEF_ATTRS.REFLOW, 38, DEF_ATTRS.LIST, DEF_ATTRS.ALIGN           ];
+	DEF_ATTRS.decoration     = [ DEF_ATTRS.PAINT,  39, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_DECORATION ];
+	DEF_ATTRS.transform      = [ DEF_ATTRS.REFLOW, 40, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_TRANSFORM  ];
+	DEF_ATTRS.shadowColor    = [ DEF_ATTRS.PAINT,  41, DEF_ATTRS.COLOR     ];
+	DEF_ATTRS.shadowOffsetX  = [ DEF_ATTRS.PAINT,  42, DEF_ATTRS.LENGTH    ];
+	DEF_ATTRS.shadowOffsetY  = [ DEF_ATTRS.PAINT,  43, DEF_ATTRS.LENGTH    ];
+	DEF_ATTRS.shadowBlur     = [ DEF_ATTRS.PAINT,  44, DEF_ATTRS.LENGTH    ];
+	
+	DEF_ATTRS.width              = [ DEF_ATTRS.REFLOW, 45, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT, DEF_ATTRS.WIDTH_HEIGHT ];
+	DEF_ATTRS.minWidth           = [ DEF_ATTRS.REFLOW, 46, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+	DEF_ATTRS.maxWidth           = [ DEF_ATTRS.REFLOW, 47, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+	DEF_ATTRS.height             = [ DEF_ATTRS.REFLOW, 48, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT, DEF_ATTRS.WIDTH_HEIGHT ];
+	DEF_ATTRS.minHeight          = [ DEF_ATTRS.REFLOW, 49, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+	DEF_ATTRS.maxHeight          = [ DEF_ATTRS.REFLOW, 50, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+	DEF_ATTRS.padding            = [ DEF_ATTRS.REFLOW, 51, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+	DEF_ATTRS.margin             = [ DEF_ATTRS.REFLOW, 55, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+	DEF_ATTRS.sizing             = [ DEF_ATTRS.REFLOW, 59, DEF_ATTRS.LIST, DEF_ATTRS.BOX_SIZING ];
+	DEF_ATTRS.pageBox            = [ DEF_ATTRS.REFLOW, 60, DEF_ATTRS.BOOLEAN   ]; // true / false
+	DEF_ATTRS.x = DEF_ATTRS.left = [ DEF_ATTRS.REFLOW, 61, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+	DEF_ATTRS.y = DEF_ATTRS.top  = [ DEF_ATTRS.REFLOW, 62, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+	DEF_ATTRS.bottom             = [ DEF_ATTRS.REFLOW, 63, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+	DEF_ATTRS.right              = [ DEF_ATTRS.REFLOW, 64, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
 	
-	var BasicLayoutManager = AbstractLayoutManager.inherits(
+	/**
+	 * 再計算と再描画
+	 * redraw 再描画はパラメータ変更後に setTimeout で
+	 * reflow 再計算は値が get された場合 invalidate が サイズだったら
+	 * または再描画前に invalidate がサイズなフラグが足っていたら 
+	 */
+	
+	var BasicLayoutManager = Class.create(
 		'BasicLayoutManager',
+		Class.POOL_OBJECT,
 		{
 			Constructor : function(){
 				
+			},
+			redraw : function( nodeData ){
+				var root = nodeData.__root;
+				root.dirty === DEF_ATTRS.REFLOW && this.reflow( root );
+				
+				// draw
+			},
+			reflow : function( nodeData ){
+				var parent   = nodeData.__parent,
+					allowW   = parent.contentWidth,
+					allowH   = parent.contentHeight,
+					autoW    = parent.autoWidth,
+					autoH    = parent.autoHeight,
+					offsetX  = parent.offsetX,
+					offsetY  = parent.offsetY,
+					children = nodeData.children,					
+					style    = nodeData.__style,				
+					x, y, w, minW, maxW, h, minH, maxH,
+					contentW, contentH, boxW, boxH,
+					autoSize, sizing, page,
+					paddingT, paddingR, paddingB, paddingL,
+					borderT, borderR, borderB, borderL,
+					marginT, marginR, marginB, marginL,
+					childW   = 0,
+					childH   = 0,
+					styles, child, calc, i;
+
+				if( style ){
+					styles   = style.data;
+					calc     = BasicLayoutManager.calcValue;
+					sizing   = styles[ 53 ];
+					page     = styles[ 54 ];				
+					x        = calc( styles[ 55 ], allowW );
+					y        = calc( styles[ 56 ], page === true ? allowH : allowW );
+					w        = styles[ 45 ];
+					minW     = styles[ 46 ];
+					maxW     = styles[ 47 ];
+					contentW = BasicLayoutManager.finalValue( w, minW, maxW, allowW );
+					h        = styles[ 48 ];
+					minW     = styles[ 49 ];
+					maxW     = styles[ 50 ];
+					contentH = BasicLayoutManager.finalValue( h, minW, maxW, allowH );
+					autoSize = w === AUTO || h === AUTO;
+					paddingT = calc( styles[ 51 ], page === true ? allowH : allowW );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
+					paddingR = calc( styles[ 52 ], allowW );
+					paddingT = calc( styles[ 53 ], page === true ? allowH : allowW );
+					paddingL = calc( styles[ 54 ], allowW, autoW );
+					borderT  = styles[  0 ];
+					borderR  = styles[  1 ];
+					borderB  = styles[  2 ];
+					borderL  = styles[  3 ];
+					marginT  = calc( styles[ 55 ], page === true ? allowH : allowW );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して
+					marginR  = calc( styles[ 56 ], allowW );
+					marginB  = calc( styles[ 57 ], page === true ? allowH : allowW );
+					marginL  = calc( styles[ 58 ], allowW );
+					boxW     = contentW;
+					boxH     = contentH;
+					switch( sizing ){
+						case 3 : // margin-box
+							 contentW -= ( marginR + marginL );
+							 contentH -= ( marginT + marginR );
+							 
+						case 2 : // border-box
+							 contentW -= ( borderR + borderL );
+							 contentH -= ( borderT + borderR );
+						case 1 : // padding-box
+							 contentW -= ( paddingR + paddingL );
+							 contentH -= ( paddingT + paddingR );
+						// case 0 : // content-box
+					};		
+				} else {
+					boxW     = contentW = w        = allowW;
+					boxH     = contentH = h        = allowH;
+					minW     = minH     = 0;
+					maxW     = maxH     = Infinity;
+					autoSize = false;
+				};
+				
+				if( nodeData.contentWidth !== contentW || nodeData.contentHeight === contentH ){
+					if( autoSize === false ){
+						nodeData.updateLayout();
+						nodeData.contentWidth  = contentW;
+						nodeData.contentHeight = contentH;
+						nodeData.boxWidth      = boxW;
+						nodeData.boxHeight     = boxH;						
+					};
+					if( node instanceof LayoutBoxPrivate ){
+						nodeData.Super.reflow.call( nodeData );
+					} else {
+						node.reflow();
+					};
+				};
+
+				if( children ){
+					for( i = children.length; i; ){
+						child = children[ --i ];
+						if( child instanceof LayoutBoxPrivate ){
+							child.layoutManager.reflow( child );
+						} else {
+							child.reflow();
+						};
+						if( autoSize === false ) continue;
+						if( childW < child.rectRight  ) childW = child.rectRight;
+						if( childH < child.rectBottom ) childH = child.rectBottom;						
+					};
+					if( autoSize === true ){
+						if( w === AUTO && childW < contentW ) contentW = childW;
+						if( h === AUTO && childH < contentH ) contentH = childH;
+						if( contentW < minW ) contentW = minW;
+						if( maxW < contentW ){
+							nodeData.scrollWidth = contentW;
+							contentW = maxW;
+						};
+						if( contentH < minH ) contentH = minH;
+						if( maxH < contentH ){
+							nodeData.scrollHeight = contentH;
+							contentH = maxH;
+						};
+						nodeData.contentWidth  = boxW = contentW;
+						nodeData.contentHeight = boxH = contentH;
+						switch( sizing ){
+							case 3 : // margin-box
+								 boxW += ( marginR + marginL );
+								 boxH += ( marginT + marginR );
+							case 2 : // border-box
+								 boxW += ( borderR + borderL );
+								 boxH += ( borderT + borderR );
+							case 1 : // padding-box
+								 boxW += ( paddingR + paddingL );
+								 boxH += ( paddingT + paddingR );
+							// case 0 : // content-box
+						};
+						nodeData.boxWidth  = boxW;
+						nodeData.boxHeight = boxH;
+					};					
+				};
+				delete nodeData.dirty;
 			}
 		}
 	);
+	BasicLayoutManager.finalValue = function( styleValue, styleMin, styleMax, srcValue ){
+		var calc = BasicLayoutManager.calcValue,
+			v    = calc( styleValue, srcValue ),
+			min  = calc( styleMin,   srcValue ),
+			max  = calc( styleMax,   srcValue );
+		if( v < min ) return min;
+		if( max < v ) return max;
+		return v;
+	};
+	BasicLayoutManager.calcValue = function( styleValue, srcValue ){
+		if( styleValue === 0 ) return 0;
+		// 100%
+		if( styleValue === FULL || styleValue === AUTO ) return srcValue;
+		if( 1 <= styleValue  ) return styleValue; // legth
+		if( -1 < styleValue  ) return FLOOR( srcValue * styleValue ); // %
+		return styleValue; // - length
+	};
 	
-	var AbstractStylePrivate = Class.create(
-		Class.ABSTRACT | Class.PRIVATE_DATA,
+	var NodeStylePrivate = Class.create(
+		Class.PRIVATE_DATA | Class.POOL_OBJECT,
 		{
+			colorCssText  : null,
+			layoutCssText : null,
+			Constructor : function(){
+				this.data  = [];
+				this.dirty = 0;
+			},
 			register : function( node ){
-				var list = this.nodeList;
-				if( !list ){
+				var root  = node.__root,
+					roots = this.rootList,
+					nodes = this.nodeList;
+				if( !roots ){
+					this.rootList = [ root ];
+				} else
+				if( getIndex( roots, root ) === -1 ) roots[ roots.length ] = root;
+				
+				if( !nodes ){
 					this.nodeList = [ node ];
 					return;
 				};
-				if( getIndex( list, node ) === -1 ) list[ list.length ] = node;
+				if( getIndex( nodes, node ) === -1 ) nodes[ nodes.length ] = node;
 			},
 			unRegister : function( node ){
-				var list = this.nodeList,
-					i    = getIndex( list, node );
-				if( i !== -1 && list.splice( i, 1 ) && list.length === 0 ) delete this.nodeList;
+				var nodes = this.nodeList,
+					i     = getIndex( nodes, node ),
+					root  = node._root,
+					roots = this.rootList,
+					j     = getIndex( roots, root );
+				if( i !== -1 && nodes.splice( i, 1 ) && nodes.length === 0 ) delete this.nodeList;
+				if( j !== -1 && roots.splice( j, 1 ) && roots.length === 0 ) delete this.rootList;
 			},
 			clone : function(){
 				var styleClass = Class.getClass( this.User ),
@@ -7221,12 +7468,14 @@ var XDocument = ( function( window, document ){
 					quartet   = !!( type & DEF_ATTRS.QUARTET   ),
 					url       = !!( type & DEF_ATTRS.URL       ),
 					fontName  = !!( type & DEF_ATTRS.FONT_NAME ),
-					list      = !!( type & DEF_ATTRS.LIST      ),
+					//list      = !!( type & DEF_ATTRS.LIST      ),
 					combi     = !!( type & DEF_ATTRS.COMBI     ),
 					data      = this.data,
 					_v        = -1,
-					_type, i, l, nodes;
-					
+					i, l, nodes, root;
+				/*
+				 * Setter
+				 */
 				if( v !== undefined ){
 					if( Type.isNumber( v ) === true ){
 						if( numerical === false ){
@@ -7247,53 +7496,68 @@ var XDocument = ( function( window, document ){
 					};					
 					if( Type.isArray( v ) === true ){
 						if( v.length <= 4 && quartet === true ){
-							_type = type ^ DEF_ATTRS.QUARTET;
+							type ^= DEF_ATTRS.QUARTET;
 						} else
 						if( v.length === 2 && combi === true ){
-							_type = type ^ DEF_ATTRS.COMBI;
+							type ^= DEF_ATTRS.COMBI;
 						} else {
 							throw new Error( '' );
 						};
 						switch( v.length ){
 							case 1 :
-								this.attr( [ propID  , _type, list ], v[ 0 ] );
-								this.attr( [ ++propID, _type, list ], v[ 0 ] );
-								this.attr( [ ++propID, _type, list ], v[ 0 ] );
-								this.attr( [ ++propID, _type, list ], v[ 0 ] );
+								this.attr( [ propID  , type, list ], v[ 0 ] );
+								this.attr( [ ++propID, type, list ], v[ 0 ] );
+								this.attr( [ ++propID, type, list ], v[ 0 ] );
+								this.attr( [ ++propID, type, list ], v[ 0 ] );
 								break;
 							case 2 :
-								this.attr( [ propID  , _type, list ], v[ 0 ] );
-								this.attr( [ ++propID, _type, list ], v[ 1 ] );
-								this.attr( [ ++propID, _type, list ], v[ 0 ] );
-								this.attr( [ ++propID, _type, list ], v[ 1 ] );
+								this.attr( [ propID  , type, list ], v[ 0 ] );
+								this.attr( [ ++propID, type, list ], v[ 1 ] );
+								this.attr( [ ++propID, type, list ], v[ 0 ] );
+								this.attr( [ ++propID, type, list ], v[ 1 ] );
 								break;
 							case 3 :
-								this.attr( [ propID  , _type, list ], v[ 0 ] );
-								this.attr( [ ++propID, _type, list ], v[ 1 ] );
-								this.attr( [ ++propID, _type, list ], v[ 2 ] );
-								this.attr( [ ++propID, _type, list ], v[ 1 ] );
+								this.attr( [ propID  , type, list ], v[ 0 ] );
+								this.attr( [ ++propID, type, list ], v[ 1 ] );
+								this.attr( [ ++propID, type, list ], v[ 2 ] );
+								this.attr( [ ++propID, type, list ], v[ 1 ] );
 								break;
 							case 4 :
-								this.attr( [ propID  , _type, list ], v[ 0 ] );
-								this.attr( [ ++propID, _type, list ], v[ 1 ] );
-								this.attr( [ ++propID, _type, list ], v[ 2 ] );
-								this.attr( [ ++propID, _type, list ], v[ 3 ] );
+								this.attr( [ propID  , type, list ], v[ 0 ] );
+								this.attr( [ ++propID, type, list ], v[ 1 ] );
+								this.attr( [ ++propID, type, list ], v[ 2 ] );
+								this.attr( [ ++propID, type, list ], v[ 3 ] );
 								break;
 							default :
 						};
 						return this.User;
 					};
-					if( this.invalidateLayout < update ) this.invalidate = update;
+					if( update === DEF_ATTRS.REFLOW ){
+						delete this.layoutCssText;
+					} else {
+						delete this.colorCssText;
+					};
+					if( this.dirty < update ){
+						this.dirty = update;
+						roots = this.rootList;
+						for( i = 0, l = roots.length; i < l; ++i ){
+							root = roots[ i ];
+							if( root.dirty < update ) root.dirty = update;
+						};
+					};
 					
 					if( list ) _v = Util.getIndex( list, v );
 					data[ propID ] = _v !== -1 ? _v : v;
 					return this.User;
 				};
-				if( this.invalidate === DEF_ATTRS.REFLOW ){
-					nodes = this.nodeList;
-					if( nodes ){
-						for( i = 0, l = nodes.length; i < l; ++i ){
-							nodes[ i ].reflow();
+				/*
+				 * Getter
+				 */
+				if( this.dirty === DEF_ATTRS.REFLOW ){
+					roots = this.rootList;
+					if( roots ){
+						for( i = 0, l = roots.length; i < l; ++i ){
+							roots[ i ].reflow();
 						};
 					};
 				};
@@ -7302,251 +7566,133 @@ var XDocument = ( function( window, document ){
 				if( combi === true ) return [ v, data[ ++propID ] ];
 				if( list && Type.isNumber( v ) === true ) return list[ v ];
 				return v;
-			}
-		}
-	);
-	
-	var PaintPrivate = AbstractStylePrivate.inherits(
-		'PaintPrivate',
-		Class.PRIVATE_DATA | Class.POOL_OBJECT,
-		{
-			Constructor : function(){
-				this.data = [];
-				this.invalidate = 0;
 			},
 			cssText : function(){
-				
+				if( this.colorCssText  === null ) this.colorCssText  = this.createColorCssText();
+				if( this.layoutCssText === null ) this.layoutCssText = this.createLayoutCssText();
+				return this.colorCssText + ';' + this.layoutCssText;
 			},
-			cssObject : function(){
+			createColorCssText : function(){
 				
 			},
-			paint : function( node ){
+			createLayoutCssText : function(){
 				
 			}
 		}
 	);
 	
-	var PaintStyle = Class.create(
-		'PaintStyle',
+	var NodeStyle = Class.create(
+		'NodeStyle',
 		Class.POOL_OBJECT,
-		PaintPrivate,
+		NodeStylePrivate,
 		{
 			Constructor : function(){
-				PaintStyle.newPrivateData( this );
+				NodeStyle.newPrivateData( this );
 			},
 			borderWidth : function( v ){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.borderWidth, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.borderWidth, v );
 			},
 			borderColor : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.borderColor, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.borderColor, v );
 			},
 			borderStyle : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.borderStyle, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.borderStyle, v );
 			},
 			cornerRadius : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.cornerRadius, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.cornerRadius, v );
 			},
 			bgColor : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.bgColor, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgColor, v );
 			},
 			bgAlpha : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.bgAlpha, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgAlpha, v );
 			},
 			bgImgUrl : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.bgImgUrl, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgUrl, v );
 			},
 			bgImgRepeatX : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.bgImgRepeatX, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgRepeatX, v );
 			},
 			bgImgRepeatY : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.bgImgRepeatY, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgRepeatY, v );
 			},
 			bgImgPositionX : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.bgImgPositionX, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgPositionX, v );
 			},
 			bgImgPositionY : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.bgImgPositionY, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgPositionY, v );
 			},
 			shadowColor : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.shadowColor, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowColor, v );
 			},
 			shadowAlpha : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.shadowAlpha, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowAlpha, v );
 			},
 			shadowOffsetX : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.shadowOffsetX, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetX, v );
 			},
 			shadowOffsetY : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.shadowOffsetY, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetY, v );
 			},
 			shadowBlur : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.shadowBlur, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowBlur, v );
 			},
 			shadowSpread : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.shadowSpread, v );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowSpread, v );
 			},
 			shadowInset : function(){
-				return PaintStyle.getPrivateData( this ).attr( PaintPrivate.shadowInset, v );
-			}
-		}
-	);
-	
-	var TypoPrivate = AbstractStylePrivate.inherits(
-		'TypoPrivate',
-		Class.PRIVATE_DATA | Class.POOL_OBJECT,
-		{
-			Constructor : function(){
-				this.data = [];
-				this.invalidate = 0;
-			},
-			cssText : function(){
-				
-			},
-			cssObject : function(){
-				
-			}
-		}
-	);
-	
-	var TypoStyle = Class.create(
-		'TypoStyle',
-		Class.POOL_OBJECT,
-		TypoPrivate,
-		{
-			Constructor : function( v ){
-				TypoStyle.newPrivateData( this );
+				return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowInset, v );
 			},
 			color : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.color, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.color, v );
 			},
 			fontFamily : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.fontFamily, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.fontFamily, v );
 			},
 			fontSize : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.fontSize, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.fontSize, v );
 			},
 			bold : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.bold, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.bold, v );
 			},
 			italic : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.italic, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.italic, v );
 			},
 			lineHeight : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.lineHeight, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.lineHeight, v );
 			},
 			letterSpacing : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.letterSpacing, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.letterSpacing, v );
 			},
 			wordSpacing : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.wordSpacing, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.wordSpacing, v );
 			},
 			align : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.align, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.align, v );
 			},
 			decoration : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.decoration, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.decoration, v );
 			},
 			transform : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.transform, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.transform, v );
 			},
 			shadowColor : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.shadowColor, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowColor, v );
 			},
 			shadowOffsetX : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.shadowOffsetX, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetX, v );
 			},
 			shadowOffsetY : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.shadowOffsetY, v );
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetY, v );
 			},
 			shadowBlur : function( v ){
-				return TypoStyle.getPrivateData( this ).attr( TypoPrivate.shadowBlur, v );
-			}
-		}
-	);
-	
-	var LayoutPrivate = AbstractStylePrivate.inherits(
-		'LayoutPrivate',
-		Class.PRIVATE_DATA | Class.POOL_OBJECT,
-		{
-			Constructor : function(){
-				this.data = [];
-				this.invalidate = 0;
+				return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowBlur, v );
 			},
 			cssText : function(){
-				
-			},
-			cssObject : function(){
-				
+				return TypoStyle.getPrivateData( this ).cssText();
 			}
 		}
 	);
-	
-	DEF_ATTRS.LENGTH            =  1;
-	DEF_ATTRS.PERCENT           =  2;
-	DEF_ATTRS.COLOR             =  4;
-	DEF_ATTRS.U_DECIMAL         =  8;
-	DEF_ATTRS.NUMERICAL         = 16;
-	DEF_ATTRS.BOOLEAN           = 32;
-	DEF_ATTRS.QUARTET           = 64;
-	DEF_ATTRS.URL               = 128;
-	DEF_ATTRS.FONT_NAME         = 256;
-	DEF_ATTRS.LIST              = 512;
-	DEF_ATTRS.AUTO              = 1024;
-	DEF_ATTRS.COMBI             = 2048;
-	DEF_ATTRS.BORDER_STYLE      = 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset'.split(',');
-	DEF_ATTRS.POSITION_X        = 'left,center,right'.split(',');
-	DEF_ATTRS.POSITION_Y        = 'top,center,bottom'.split(',');
-	DEF_ATTRS.ALIGN             = 'left,center,right,justify'.split(',');
-	DEF_ATTRS.TEXT_DECORATION   = 'none,underline,overline,line-through,blink'.split(',');
-	DEF_ATTRS.TEXT_TRANSFORM    = 'none,capitalize,lowercase,uppercase'.split(',');
-	DEF_ATTRS.WIDTH_HEIGHT      = 'auto'.split(',');
-	DEF_ATTRS.PAINT             = 1; // 再描画のみ必要
-	DEF_ATTRS.REFLOW            = 2; // レイアウトの再計算が必要
-	
-	PaintPrivate.borderWidth    = [ DEF_ATTRS.REFLOW,  0, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH      ]; // em [ top, right, bottom, left ]
-	PaintPrivate.borderColor    = [ DEF_ATTRS.PAINT,   4, DEF_ATTRS.QUARTET | DEF_ATTRS.DEF_COLOR   ]; // color [ top, right, bottom, left ]
-	PaintPrivate.borderStyle    = [ DEF_ATTRS.REFLOW,  8, DEF_ATTRS.QUARTET | DEF_ATTRS.LIST, DEF_ATTRS.BORDER_STYLE ]; // string [ top, right, bottom, left ]
-	PaintPrivate.cornerRadius   = [ DEF_ATTRS.PAINT,  12, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, px [ top, right, bottom, left ]
-	PaintPrivate.bgColor        = [ DEF_ATTRS.PAINT,  16, DEF_ATTRS.COLOR     ]; // color
-	PaintPrivate.bgAlpha        = [ DEF_ATTRS.PAINT,  17, DEF_ATTRS.U_DECIMAL ]; // 0 - 1
-	PaintPrivate.bgImgUrl       = [ DEF_ATTRS.PAINT,  18, DEF_ATTRS.URL       ]; // url
-	PaintPrivate.bgImgRepeatX   = [ DEF_ATTRS.PAINT,  19, DEF_ATTRS.BOOLEAN   ]; // true / false
-	PaintPrivate.bgImgRepeatY   = [ DEF_ATTRS.PAINT,  20, DEF_ATTRS.BOOLEAN   ]; // true / false
-	PaintPrivate.bgImgPositionX = [ DEF_ATTRS.PAINT,  21, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.LIST, DEF_ATTRS.POSITION_X ]; // em %, px, string
-	PaintPrivate.bgImgPositionY = [ DEF_ATTRS.PAINT,  22, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.LIST, DEF_ATTRS.POSITION_Y ]; // em %, px, string
-	PaintPrivate.shadowColor    = [ DEF_ATTRS.PAINT,  23, DEF_ATTRS.COLOR     ]; // color
-	PaintPrivate.shadowAlpha    = [ DEF_ATTRS.PAINT,  24, DEF_ATTRS.U_DECIMAL ]; // 0 - 1
-	PaintPrivate.shadowOffsetX  = [ DEF_ATTRS.PAINT,  25, DEF_ATTRS.LENGTH    ]; // em
-	PaintPrivate.shadowOffsetY  = [ DEF_ATTRS.PAINT,  26, DEF_ATTRS.LENGTH    ]; // em
-	PaintPrivate.shadowBlur     = [ DEF_ATTRS.PAINT,  27, DEF_ATTRS.LENGTH    ]; // em
-	PaintPrivate.shadowSpread   = [ DEF_ATTRS.PAINT,  28, DEF_ATTRS.LENGTH    ]; // em
-	PaintPrivate.shadowInset    = [ DEF_ATTRS.PAINT,  29, DEF_ATTRS.BOOLEAN   ]; // true / false
-	
-	TypoPrivate.color           = [ DEF_ATTRS.PAINT,   0, DEF_ATTRS.COLOR     ]; // color
-	TypoPrivate.fontFamily      = [ DEF_ATTRS.REFLOW,  1, DEF_ATTRS.FONT_NAME ]; // string
-	TypoPrivate.fontSize        = [ DEF_ATTRS.REFLOW,  2, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, %
-	TypoPrivate.bold            = [ DEF_ATTRS.REFLOW,  3, DEF_ATTRS.BOOLEAN   ]; // true / false
-	TypoPrivate.italic          = [ DEF_ATTRS.REFLOW,  4, DEF_ATTRS.BOOLEAN   ]; // true / false
-	TypoPrivate.lineHeight      = [ DEF_ATTRS.REFLOW,  5, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.NUMERICAL ]; // em, %, 
-	TypoPrivate.letterSpacing   = [ DEF_ATTRS.REFLOW,  6, DEF_ATTRS.LENGTH    ]; // em
-	TypoPrivate.wordSpacing     = [ DEF_ATTRS.REFLOW,  7, DEF_ATTRS.LENGTH    ];
-	TypoPrivate.align           = [ DEF_ATTRS.REFLOW,  8, DEF_ATTRS.LIST, DEF_ATTRS.ALIGN           ];
-	TypoPrivate.decoration      = [ DEF_ATTRS.PAINT,   9, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_DECORATION ];
-	TypoPrivate.transform       = [ DEF_ATTRS.REFLOW, 10, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_TRANSFORM  ];
-	TypoPrivate.shadowColor     = [ DEF_ATTRS.PAINT,  11, DEF_ATTRS.COLOR     ];
-	TypoPrivate.shadowOffsetX   = [ DEF_ATTRS.PAINT,  12, DEF_ATTRS.LENGTH    ];
-	TypoPrivate.shadowOffsetY   = [ DEF_ATTRS.PAINT,  13, DEF_ATTRS.LENGTH    ];
-	TypoPrivate.shadowBlur      = [ DEF_ATTRS.PAINT,  14, DEF_ATTRS.LENGTH    ];
-	
-	LayoutPrivate.width         = [ DEF_ATTRS.REFLOW,  0, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT, DEF_ATTRS.WIDTH_HEIGHT ];
-	LayoutPrivate.minWidth      = [ DEF_ATTRS.REFLOW,  1, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
-	LayoutPrivate.maxWidth      = [ DEF_ATTRS.REFLOW,  2, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
-	LayoutPrivate.height        = [ DEF_ATTRS.REFLOW,  3, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT, DEF_ATTRS.WIDTH_HEIGHT ];
-	LayoutPrivate.minHeight     = [ DEF_ATTRS.REFLOW,  4, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
-	LayoutPrivate.maxHeight     = [ DEF_ATTRS.REFLOW,  5, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
-	LayoutPrivate.padding       = [ DEF_ATTRS.REFLOW,  6, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
-	LayoutPrivate.margin        = [ DEF_ATTRS.REFLOW, 10, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
-
 
 	var NodePrivate = Class.create(
 		'NodePrivate',
@@ -7554,43 +7700,38 @@ var XDocument = ( function( window, document ){
 		{
 			elmWrap       : null,
 			textNode      : null,
+			autoWidth     : false,
+			autoHeight    : false,
+			autoSize      : false,
+			boxX          : 0,
+			boxY          : 0,
+			boxWidth      : 0,
+			boxHeight     : 0,
+			boxRight      : 0,
+			boxBottom     :	0,
+			contentX      : 0,
+			contentY      : 0,			
 			contentWidth  : 0,
 			contentHeight : 0,
 			Constructor   : function( __root, __parent ){
 				this.__root   = __root;
 				if( __parent ) this.__parent = __parent;
 			},
-			paint : function( v ){
-				if( v instanceof PaintStyle ){
-					this.__paint && this.__paint.unRegister( this );
-					this._paint = v;
-					this.__paint = PaintStyle.getPrivateData( v );					
-					this.__paint.register( this );
+			style : function( v ){
+				if( v instanceof NodeStyle ){
+					this.__style && this.__style.unRegister( this );
+					this._style = v;
+					this.__style = StylePrivate.getPrivateData( v );					
+					this.__style.register( this );
 					return this.User;
 				} else
 				if( v === null ){
-					this.__paint && this.__paint.unRegister( this );
-					delete this._paint;
-					delete this.__paint;
+					this.__style && this.__style.unRegister( this );
+					delete this._style;
+					delete this.__style;
 					return this.User;
 				};
-				return this._paint;
-			},
-			typo : function( v ){
-				if( v instanceof TypoStyle ){
-					this.__typo && this.__typo.unRegister( this );
-					this._typo = v;
-					this.__typo = TypoStyle.getPrivateData( v );					
-					this.__typo.register( this );
-					return this.User;
-				} else
-				if( v === null ){
-					this.__typo && this.__typo.unRegister( this );
-					delete this._typo;
-					delete this.__typo;
-					return this.User;
-				};
-				return this._typo;
+				return this._style;
 			},
 			/**
 			 * 1. 要素の追加・削除
@@ -7600,20 +7741,24 @@ var XDocument = ( function( window, document ){
 			 */
 			reflow : function(){
 				var content = this._textContent,
-					layout  = this.__layout,
-					targetW = this.__parent.childWidth,
-					targetH = this.__parent.childHeight,
+					style   = this.__style,
+					parent  = this.__parent,
 					size, data, w, h;
 				
-				if( content || ( this.__paint && this.__paint.hasStyle === true ) || ( this.__typo && this.__typo.hasStyle === true ) ){
-					if( !this.elmWrap ) this.elmWrap = DOM.createDiv();
-					this.__parent.addDiv( this );
-					if( conetnt ){
+				if( content || ( style && style.hasPaint === true ) ){
+					if( !this.elmWrap ){
+						this.elmWrap = DOM.createDiv();
+						parent.addDisplayElement( this );
+					};
+					if( style && style.hasStyle === true ){
+						this.elmWrap.style.cssText = style.cssText();
+					};				
+					if( content ){
 						if( !this.textNode ){
 							this.textNode = DOM.cerateText();
 							this.elmWrap.appendChild( this.textNode );
 						};
-						if( layout && ( layout.autoWidth === true || layout.autoHeight === true ) ){
+						if( style && ( style.autoWidth === true || style.autoHeight === true ) ){
 							size = DOM.getTextSize( this.elmWrap, content );
 							this.contentWidth  = size[ 0 ];
 							this.conetntHeight = size[ 1 ];
@@ -7626,24 +7771,94 @@ var XDocument = ( function( window, document ){
 						delete this.contentWidth;
 						delete this.conetntHeight;
 					};
-					this.currentWidth  = this.elmWrap.offsetWidth;
-					this.currentHeight = this.elmWrap.offsetHeight;					
+					this.boxWidth  = this.elmWrap.offsetWidth;
+					this.boxHeight = this.elmWrap.offsetHeight;					
 				} else
 				if( this.elmWrap ){
-					DOM.correct( this.elmWrap );
-					delete this.elmWrap;
-					delete this.textNode;
-					delete this.contentWidth;
-					delete this.conetntHeight;
-					delete this.currentWidth;
-					delete this.currentHeight
+					parent.removeDisplayElement( this );
+				};
+			},
+			preSizing : function(){
+				var parent   = nodeData.__parent,
+					allowW   = parent.contentWidth,
+					allowH   = parent.contentHeight,		
+					style    = nodeData.__style,				
+					x, y, w, minW, maxW, h, minH, maxH,
+					contentW, contentH,
+					page,
+					paddingT, paddingR, paddingB, paddingL,
+					borderT, borderR, borderB, borderL,
+					marginT, marginR, marginB, marginL,
+					styles, calc;
+
+				if( style ){
+					styles   = style.data;
+					calc     = BasicLayoutManager.calcValue;
+					page     = styles[ 54 ] === true ? allowH : allowW ;
+					w        = styles[ 45 ];
+					minW     = styles[ 46 ];
+					maxW     = styles[ 47 ];
+					contentW = BasicLayoutManager.finalValue( w, minW, maxW, allowW );
+					h        = styles[ 48 ];
+					minW     = styles[ 49 ];
+					maxW     = styles[ 50 ];
+					contentH = BasicLayoutManager.finalValue( h, minW, maxW, allowH );
+					paddingT = calc( styles[ 51 ], page );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
+					paddingR = calc( styles[ 52 ], allowW );
+					paddingB = calc( styles[ 53 ], page );
+					paddingL = calc( styles[ 54 ], allowW );
+					borderT  = styles[  0 ];
+					borderR  = styles[  1 ];
+					borderB  = styles[  2 ];
+					borderL  = styles[  3 ];
+					marginT  = calc( styles[ 55 ], page );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して
+					marginR  = calc( styles[ 56 ], allowW );
+					marginB  = calc( styles[ 57 ], page );
+					marginL  = calc( styles[ 58 ], allowW );
+					this.boxWidth      = contentW;
+					this.boxHeight     = contentH;
+					switch( styles[ 53 ] ){
+						case 3 : // margin-box
+							 contentW -= ( marginR + marginL );
+							 contentH -= ( marginT + marginR );
+							 
+						case 2 : // border-box
+							 contentW -= ( borderR + borderL );
+							 contentH -= ( borderT + borderR );
+						case 1 : // padding-box
+							 contentW -= ( paddingR + paddingL );
+							 contentH -= ( paddingT + paddingR );
+						// case 0 : // content-box
+					};
+					this.contentX      = marginL + borderL + paddingL;
+					this.contentY      = marginT + borderT + paddingT;					
+					this.contentWidth  = contentW;
+					this.contentHeight = contentH;
+					this.autoHeight    = h === AUTO;
+					this.autoWidth     = w === AUTO;
+					this.autoSize      = this.autoWidth || this.autoHeight;
+				} else {
+					this.boxWidth  = this.contentWidth  = allowW;
+					this.boxHeight = this.contentHeight = allowH;
+					delete this.contentX;
+					delete this.contentY;						
+					delete this.autoSize;
+					delete this.autoWidth;
+					delete this.autoHeight;
 				};
-				
-				// this.__parent.layoutManager.reflow();
 			},
-			addDiv : function( nodeData ){
+			addDisplayElement : function( nodeData ){
 				
-			}	
+			},
+			removeDisplayElement : function( nodeData ){
+				DOM.correct( nodeData.elmWrap );
+				delete nodeData.elmWrap;
+				delete nodeData.textNode;
+				delete nodeData.contentWidth;
+				delete nodeData.conetntHeight;
+				delete nodeData.currentWidth;
+				delete nodeData.currentHeight;			
+			}
 		}
 	);
 	var Node = Class.create(
@@ -7654,12 +7869,9 @@ var XDocument = ( function( window, document ){
 			Constructor : function( root, parent ){
 				Node.newPrivateData( this,  LayoutBox.getPrivateData( root ), parent ? LayoutBox.getPrivateData( parent ) : undefined, this );
 			},
-			paint : function( v ){
+			style : function( v ){
 				return Node.getPrivateData( this ).paint( v );
 			},
-			typo : function( v ){
-				return Node.getPrivateData( this ).typo( v );
-			},
 			remove : function(){
 				Node.getPrivateData( this ).remove();
 			},
@@ -7701,7 +7913,7 @@ var XDocument = ( function( window, document ){
 	
 	var LayoutBoxPrivate = NodePrivate.inherits(
 		'LayoutBoxPrivate',
-		Class.POOL_OBJECT,
+		Class.POOL_OBJECT | Class.SUPER_ACCESS,
 		{
 			Constructor : function( layoutManager, root, parent ){
 				this.layoutManager = layoutManager;
@@ -7709,10 +7921,7 @@ var XDocument = ( function( window, document ){
 				if( _parent ) this._parent = _parent;
 			},
 			reflow : function(){
-				this.manager.reflow( this );
-			},
-			repaint : function(){
-				this.manager.repaint( this );
+				this.layoutManager.reflow( this );
 			}
 		}
 	);
-- 
2.11.0