From: itozyun <itozyun@gmail.com>
Date: Fri, 14 Sep 2012 00:17:08 +0000 (+0900)
Subject: version 0.5.16, start working system.DHTML.anime()
X-Git-Url: http://git.osdn.jp/view?a=commitdiff_plain;h=d361f64281adba215a5a93ee982da1a224ec0633;p=pettanr%2FclientJs.git

version 0.5.16, start working system.DHTML.anime()
---

diff --git a/0.5.x/index.html b/0.5.x/index.html
index 6a7be56..ea2aaf8 100644
--- a/0.5.x/index.html
+++ b/0.5.x/index.html
@@ -109,9 +109,9 @@
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
 </body>
 <!-- InstanceEnd --></html>
diff --git a/0.5.x/javascripts/peta.apps.js b/0.5.x/javascripts/peta.apps.js
index 3622d1a..f11646b 100644
--- a/0.5.x/javascripts/peta.apps.js
+++ b/0.5.x/javascripts/peta.apps.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.apps.js
- *   version 0.5.8
+ *   version 0.5.15
  *   
  * author:
  *   itozyun
@@ -8,8 +8,7 @@
  *   3-clause BSD
  */
 
-( function( pettanr, gOS, window, undefined ){
-
+( function( pettanr, gOS, window, document, undefined ){
 /*
  * PettanR service driver.
  */
@@ -21,36 +20,34 @@
 			
 			function onLoadJson( _file, _json ){
 				var _access = FileAPI.getFileDataAccess( _file ),
-					_data = _access !== null ? _access.DATA : null,
-					l;
+					_data = _access !== null ? _access.DATA : null;
 				if( _data === null ){
-					onErrorJson( _file);
+					onErrorJson( _file );
 					return;
 				}
 				_data.state = Const.FILE.STATE.OK;
 				
 				if( Type.isArray( _json ) === true ){
-					l = _json.length;
-					if( l === 0) return;
-					for( var i=0; i<l; ++i ){
-						buildFileData( _json[ i], _data);
+					for( var i=0, l = _json.length; i<l; ++i ){
+						buildFileData( _json[ i ], _data );
 					};
 				} else
-				if( _json.id ){
+				if( Type.isNumber( _json.id ) === true ){
 					buildFileData( _json, _data );
 				};
-				_file.dispatchEvent( FileAPI.createFileEvent( Const.FILE.EVENT.GET_SEQENTIAL_FILES, _file, 'children', null) );
+				_file.dispatchEvent( FileAPI.createFileEvent( Const.FILE.EVENT.GET_SEQENTIAL_FILES, _file, 'children', null ) );
 			};
 			function onErrorJson( _file ){ 
 				var _data = FileAPI.getFileData( _file);
 				if( _data !== null){
 					_data.state = Const.FILE.STATE.ERROR;
 				};
+				_file.dispatchEvent( FileAPI.createFileEvent( Const.FILE.EVENT.GET_SEQENTIAL_FILES, _file, 'children', null ) );
 			};
 			function buildFileData( _data, _parent ){
 				var _array, i, l;
 				// Panel
-				if( _parent === FILE_DATA_PANELS_ROOT ){
+				if( _parent === FILE_DATA_PANELS_ROOT || _parent === FILE_DATA_MY_PANELS_ROOT ){
 					_data.type = FILE_TYPE.PANEL;
 					_array = PANEL_ARRAY;
 				} else
@@ -101,14 +98,14 @@
 				};
 				
 				_data.driver = Driver;
-				
+				// alert( ' _array ' + _data.id + Type.isNumber( _data.id ) );
 				// _array に _data を格納 または 上書き
-				if( typeof _data.id === 'number' && _data.id > 0 ){
-					var _id = _data.id - 1,
-						__data = _array[ _id ],
+				if( Type.isNumber( _data.id ) === true && _data.id > 0 ){
+					var _id       = _data.id - 1,
+						__data    = _array[ _id ],
 						_reserved = Const.FILE.DATA_PROPERTY_RESERVED.join( ', ' );
 					if( __data ){
-						for( var key in _data){
+						for( var key in _data ){
 							if( _reserved.indexOf( key ) === -1 ){
 								__data[ key ] = _data[ key ];
 							};
@@ -118,7 +115,7 @@
 						_array[ _id ] = _data;
 					};
 				} else {
-					alert( 'error' );
+					// alert( 'error' + _parent.name + ' ' + _data.id );
 				};
 		
 				// Author
@@ -130,7 +127,7 @@
 				if( _parent.type === FILE_TYPE.COMIC || _parent === FILE_DATA_COMICS_ROOT ){
 					var _panels = _data.stories,
 						_panel;
-					if( _panels && Type.isArray( _panels ) === true ){
+					if( Type.isArray( _panels ) === true ){
 						
 						for( i=0, l=_panels.length; i<l; ++i ){
 							_panel = buildFileData( _panels[ i ], FILE_DATA_PANELS_ROOT );
@@ -155,19 +152,22 @@
 						_author.id === MyAuthorID && addChildData( FILE_DATA_MY_COMICS_ROOT, _data );
 					};
 					if( _parent === FILE_DATA_COMICS_ROOT ){
-						addChildData( FILE_DATA_LATEST_COMICS, _data);
+						addChildData( FILE_DATA_LATEST_COMICS, _data );
 					};
 				} else
 				// Panel
-				if( _parent === FILE_DATA_PANELS_ROOT ){
-					_data.comic = getResource( COMIC_ARRAY, _data.comic_id );
+				if( _parent === FILE_DATA_PANELS_ROOT || _parent === FILE_DATA_MY_PANELS_ROOT ){
+					 _data.comic && buildFileData( _data.comic, FILE_DATA_COMICS_ROOT );
+					_data.author && buildFileData( _data.author, FILE_DATA_AUTHOR_ROOT );
+					
+					_data.comic  = getResource( COMIC_ARRAY, _data.comic_id );
 					_data.author = getResource( AUTHOR_ARRAY, _data.author_id );
-		
+					
 					// picture data をファイルに取り出し
 					var _elements = _data.panel_elements,
 						_elm;
 					if( Type.isArray( _elements ) === true ){
-						for( i=0, l=_elements.length; i<l; ++i){
+						for( i=0, l=_elements.length; i<l; ++i ){
 							_elm = _elements[ i];
 							if( _elm.resource_picture ){
 								_elm.resource_picture = buildFileData( _elm.resource_picture, FILE_DATA_PICTURE_ROOT ); // 上記参照切れに備えてここで上書き
@@ -176,6 +176,8 @@
 							};
 						};
 					};
+					_data.publish === 1 && addChildData( FILE_DATA_LATEST_PANELS, _data );
+					_data.author_id === MyAuthorID && addChildData( FILE_DATA_MY_PANELS_ROOT, _data );
 				} else
 				// Picture
 				if( _data.type == FILE_TYPE.PICTURE ){
@@ -193,7 +195,7 @@
 				return _data;
 			};
 			function addChildData( _parent, _child ){
-				if( Type.isArray( _parent.children ) === false){
+				if( Type.isArray( _parent.children ) === false ){
 					_parent.children = [];
 				};
 				Util.getIndex( _parent.children, _child ) === -1 && _parent.children.push( _child );
@@ -231,7 +233,7 @@
 					return [ _data.id, _data.ext ].join( '.' );
 				} else
 				if( _type === FILE_TYPE.PANEL ){
-					return [ _data.t, ':', _data.comic.title ].join( '' );
+					return [ 'id:' + _data.id + ', ' + ( _data.t || '' ) + ':', _data.comic ? _data.comic.title : 'no comic' ].join( '' );
 				} else
 				if( _type === FILE_TYPE.COMIC ){
 					return _data.title;
@@ -248,7 +250,7 @@
 				var _data = FileAPI.getFileData( _file ),
 					_type = _data !== null ? _data.type : null;
 				if( _type === FILE_TYPE.PICTURE ){
-					return { image: [ pettanr.CONST.RESOURCE_PICTURE_PATH, 'thumbnail/', _data.id, '.', _data.ext ].join( '' )};
+					return { image: [ pettanr.CONST.THUMBNAIL_PATH, _data.id, '.', _data.ext ].join( '' )};
 				};
 				if( _data === FILE_DATA_COMICS_ROOT ){
 					return { className: 'file-type-cabinet' };
@@ -415,6 +417,18 @@
 			type:		FILE_TYPE.FOLDER,
 			children:	[]
 		},
+		FILE_DATA_LATEST_PANELS = {
+			name:		'Latest Panels',
+			type:		FILE_TYPE.FOLDER,
+			children:	[]
+		},
+		FILE_DATA_MY_PANELS_ROOT = {
+			name:		'My Panels',
+			type:		FILE_TYPE.FOLDER,
+			children:	[],
+			driver:		Driver,
+			json:		pettanr.CONST.URL_MY_PANELS_JSON
+		},
 		FILE_DATA_MY_PICTURES_ROOT = {
 			name:		'My Pictures',
 			type:		FILE_TYPE.FOLDER,
@@ -453,6 +467,7 @@
 		BASIC_LICENSES = 'cc_by,cc_nc,cc_nd,cc_sa,keep_aspect_ratio,no_convert,no_flip,no_resize'.split( ',');
 	FILE_DATA_SERVICE_ROOT.children.push( FILE_DATA_COMICS_ROOT, FILE_DATA_PICTURE_ROOT, FILE_DATA_PANELS_ROOT, FILE_DATA_LISENCE_ROOT, FILE_DATA_BALLOON_ROOT );
 	FILE_DATA_COMICS_ROOT.children.push( FILE_DATA_MY_COMICS_ROOT, FILE_DATA_LATEST_COMICS, FILE_DATA_AUTHOR_ROOT );
+	FILE_DATA_PANELS_ROOT.children.push( FILE_DATA_LATEST_PANELS, FILE_DATA_MY_PANELS_ROOT );
 	FILE_DATA_PICTURE_ROOT.children.push( FILE_DATA_MY_PICTURES_ROOT, FILE_DATA_ARTIST_ROOT );
 	
 	FileAPI.createFolderUnderRoot( FILE_DATA_SERVICE_ROOT );
@@ -630,8 +645,8 @@ if( pettanr.DEBUG === true){
  */
 var PremiumSatge = gOS.registerApplication( function(){
 	var BASE_PATH      = pettanr.CONST.RESOURCE_PICTURE_PATH,
-		THUMB_PATH     = BASE_PATH, // + 'thumbnail/',
-		LIMIT_FILESIZE = 1024 * 10,
+		THUMB_PATH     = pettanr.CONST.THUMBNAIL_PATH,
+		LIMIT_FILESIZE = 1024 * 100,
 		ICON_ARRAY     = [];
 		
 	var self             = this,
@@ -1522,17 +1537,16 @@ var Editor = gOS.registerApplication( function(){
 			Editor.shutdown();
 		};
 		function onSave(){
-			var model = Model.createPanel( {
+			PanelConsole.boot( Model.createPanel( {
 				comicID           : comicID,
 				panelID           : panelID,
 				panelTimming      : panelTimming,
 				panelW            : PANEL_CONTROL.w,
 				panelH            : PANEL_CONTROL.h,
 				borderSize        : 2,
-				panelElementArray : PANEL_ELEMENT_ARRAY
-			} );
-			PanelConsole.boot( model.getJsonPostString().replace( /\n/g, '' ) );
-			model.destroy();
+				panelElementArray : PANEL_ELEMENT_ARRAY,
+				publish           : true
+			} ) );
 		};
 		function onSaveQuit(){
 			// Editor.shutdown();
@@ -2016,8 +2030,7 @@ var Editor = gOS.registerApplication( function(){
 			ui, inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
 			inputPercentW, inputPercentH,
 			currentPanelElement = null,
-			currentElementType = -1,
-			currentLock = false;
+			currentElementType = -1;
 
 		return WINDOWS_CONTROL.createWindow(
 			{
@@ -2045,8 +2058,6 @@ var Editor = gOS.registerApplication( function(){
 					});
 				},
 				update: function( currentElement ){
-					if( currentLock === true && currentElement === null ) return;
-
 					var _elementType = currentElement === null ? -1 : currentElement.type,
 						x = currentElement !== null ? currentElement.x : 0,
 						y = currentElement !== null ? currentElement.y : 0,
@@ -2097,10 +2108,6 @@ var Editor = gOS.registerApplication( function(){
 					} else {
 						
 					}
-				},
-				lock: function( _currentLock ){
-					currentLock = !!_currentLock;
-					INFOMATION_WINDOW.bodyBackOrForward( !currentLock );
 				}
 			},
 			'infomation-window', 'Infomation', 0, 30, 200, 180, true
@@ -2807,7 +2814,6 @@ var Editor = gOS.registerApplication( function(){
 			baseX, baseY, baseW, baseH,
 			currentX, currentY, currentW, currentH,
 			offsetX, offsetY,
-			lock  = false,
 			error = 0;
 		
 		function draw( _x, _y, _w, _h ){
@@ -2822,10 +2828,10 @@ var Editor = gOS.registerApplication( function(){
 				elmResizerContainerStyle.height = _h + 'px';
 				elmResizerTopStyle.left = elmResizerBottomStyle.left = FLOOR( _w / 2 - 5 ) + 'px';
 				elmResizerLeftStyle.top = elmResizerRightStyle.top   = FLOOR( _h / 2 - 5 ) + 'px';
-			} catch(e){
+			} catch( e ){
 				alert( [x, y, w, h].join( ','));
 				return;
-			}
+			};
 			
 			POSITION_ARRAY.splice( 0, POSITION_ARRAY.length );
 			POSITION_ARRAY.push(
@@ -2838,7 +2844,7 @@ var Editor = gOS.registerApplication( function(){
 				{x:	_x -HIT_AREA,			y:	_y +_h -5,			w:	HIT_AREA +5,	h:	HIT_AREA +5},
 				{x:	_x +_w -5,				y:	_y +_h -5,			w:	HIT_AREA +5,	h:	HIT_AREA +5}
 			);
-		}
+		};
 		
 		function update( _x, _y, _w, _h ){
 			var __w, __h;
@@ -2960,10 +2966,10 @@ var Editor = gOS.registerApplication( function(){
 					_h = _h !== undefined ? _h : baseH +moveY *com.h;
 					error += _thisError === 0 ? 0 : 1;
 					++_thisError;
-					if( _thisError > 9999){
+					if( _thisError > 9999 ){
 						++error
 						//alert( 'opera error' +error);
-						this.onCancel;
+						this.onCancel();
 						return;
 					}
 				}
@@ -3056,13 +3062,6 @@ var Editor = gOS.registerApplication( function(){
 					currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
 					currentElement.animate( startX, startY, startW, startH, angle);
 			},
-			lock: function( _lock ){
-				if( _lock !== undefined){
-					elmResizerContainerStyle.borderColor = _lock === true ? 'blue' : '';
-					lock = _lock;
-				}
-				return lock;
-			},
 			onShiftUpdate: update,
 			onCtrlUpdate: update
 		}
@@ -3529,8 +3528,6 @@ var Editor = gOS.registerApplication( function(){
 	var PANEL_ELEMENT_CONTROL = ( function(){
 		var	elmContainer,
 			currentElement  = null,
-			currentLockTest = false,
-			currentLock     = false,
 			panelX, panelY, panelW, panelH,
 			startX, startY;
 	/*
@@ -3686,7 +3683,6 @@ var Editor = gOS.registerApplication( function(){
 					_elm = currentElement;
 					
 				if( _elm !== null ){
-					currentLockTest = currentLockTest === true && _x === 0 && _y === 0;
 					if( _elm.busy() === true ){
 						_elm.mousemove( _x, _y );
 						return true;
@@ -3695,10 +3691,6 @@ var Editor = gOS.registerApplication( function(){
 						_elm.mousemove( _x, _y ); // cursor
 						return true;
 					}
-					if( currentLock === true ){
-						currentLockTest = true;
-						return true;
-					}
 				};
 				for( var i=0; i<l; ++i ){
 					_elm = PANEL_ELEMENT_ARRAY[ i ];
@@ -3716,9 +3708,6 @@ var Editor = gOS.registerApplication( function(){
 			mouseup: function( _mouseX, _mouseY ){
 				var ret = currentElement !== null && currentElement.busy() === true;
 				ret === true && currentElement.mouseup( _mouseX -startX || panelX, _mouseY -startY || panelY );
-				currentLock = currentLockTest === true && currentElement.hitTest( _mouseX -panelX, _mouseY -panelY ) === true;
-				RESIZE_OPERATOR.lock( currentLock );
-				INFOMATION_WINDOW.lock( currentLock );
 				return ret;
 			},
 			mousedown: function( _mouseX, _mouseY ){
@@ -3726,7 +3715,6 @@ var Editor = gOS.registerApplication( function(){
 				startY = panelY;
 				if( currentElement === null) return false
 				currentElement.mousedown( _mouseX -startX, _mouseY -startY);
-				currentLockTest = true;
 				return true;
 			},
 			busy: function(){
@@ -4125,145 +4113,157 @@ var Editor = gOS.registerApplication( function(){
 	};
 }, false, true, 'Panel Editor', 'paneleditor', null, '#2D89F0' );
 
+var FormApplicationHelper = function( app ){
+	app.isUploading = false;
+	app.elmProgress = null;
+	app.elmUploader = null;
+	app.elmScript   = null;
+	app.elmIframe   = null;
+	app.elmForm     = null;
+	app.fetchScript = function(){
+		app.elmProgress    = document.getElementById( app.elmProgressID );
+		
+		if( !( app.elmUploader = document.getElementById( app.elmUploaderID ) ) ){
+			app.elmUploader    = document.createElement( 'div' );
+			app.rootElement.appendChild( app.elmUploader );
+			app.elmUploader.id = app.elmUploaderID;
+			if( app.hideUploader === true ){
+				app.elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';
+			};			
+		};
+		
+		app.elmScript        = document.createElement( 'script' );
+		document.body.appendChild( app.elmScript );
+		app.elmScript.type   = 'text\/javascript';
+		app.elmScript.src    = app.scriptSrc;
+		
+		app.elmProgress.innerHTML = 'loading form.';
+		
+		app.addTimer( app.detectForm, 250 );
+		
+		delete app.fetchScript;
+	};
+	app.detectForm = function(){
+		app.elmForm = app.elmUploader.getElementsByTagName( 'form' )[ 0 ];
+		if( !app.elmForm ) return;
+		
+		app.removeTimer( app.detectForm );
+		Util.createIframe( 'targetFrame', app.onCreateIframe );
+		app.elmProgress.innerHTML = 'create iframe';
+		
+		delete app.detectForm;
+	};
+	app.onCreateIframe = function( _iframe ){
+		app.elmUploader.appendChild( _iframe );
+		app.elmIframe             = _iframe;
+		app.elmForm.target        = _iframe.name;
+		app.elmProgress.innerHTML = '';
+		app.onFormReady && app.onFormReady();
+		
+		delete app.onCreateIframe;
+	};
+	app.submit = function(){
+		app.elmProgress.innerHTML = 'submit!';
+		try {
+			app.elmForm.submit();
+			app.isUploading = true;
+		} catch( e ){
+			app.elmProgress.innerHTML = 'submit err..';
+			app.submitError && app.submitError();
+			return;
+		};
+		if( app.detectIframe ){
+			app.elmIframe.onreadystatechange = app.detectIframe;
+		} else {
+			app.elmIframe.onload = app.onIframeUpdate;
+		};
+		app.elmProgress.innerHTML = 'uploading..';
+		
+		delete app.submit;
+	};
+	if( UA.isIE ){
+		app.detectIframe = function(){
+	        if ( this.readyState !== 'complete' ) return;
+	        this.onreadystatechange = new Function();
+	        this.onreadystatechange = null;
+	        app.onIframeUpdate();
+	        delete app.detectIframe;
+		};		
+	};
+	app.onIframeUpdate = function(){
+		app.elmIframe.onload = null;
+		try {
+			console.log( ( app.elmIframe.contentWindow || app.elmIframe.contentDocument.parentWindow ).document.body.innerHTML );
+			console.log( ( app.elmIframe.contentWindow || app.elmIframe.contentDocument.parentWindow )[ 'current_author' ] );
+		} catch(e){
+			
+		};
+		( app.elmIframe.contentWindow || app.elmIframe.contentDocument.parentWindow ).close();
+		app.elmIframe = null;
+		app.elmProgress.innerHTML = 'success!';
+		app.isUploading = false;
+		app.submitSuccess && app.submitSuccess();
+		delete app.onIframeUpdate;
+	};
+	app.destroyHelper = function(){
+		app = null;
+	};
+};
 
 var ComicConsole = gOS.registerApplication( function(){
 	var elmHeader, elmProgress,
-		winW, winH,
+		windowW, windowH,
 		inputTitle, inputW, inputH,
 		comboboxVisible, // comboboxEditable,
 		buttonSubmit, buttonCancel,
-		elmUploader = null,
-		elmScript   = null,
-		elmIframe   = null,
-		elmForm     = null,
-		isUploading = false,
-		instance    = this;
-	//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
-	
+		app         = this;
+
 	function clickOK(){
-		if( !elmForm || !elmIframe || isUploading === true ) return false;
+		if( !app.elmForm || !app.elmIframe || app.isUploading === true ) return false;
 		// validate
-		isUploading = true;
-		elmProgress.innerHTML = '■';
-		copyAndSubmit();
-	};
 
-		function copyAndSubmit(){
-			var _inputList = elmForm.getElementsByTagName( 'input' ),
-				_input, _name;
-			for( var i = _inputList.length; i; ){
-				_input = _inputList[ --i ];
-				_name = _input.name;
-				if( _name === 'comic[title]'){
-					_input.value = inputTitle.value();
-				} else
-				if( _name === 'comic[width]'){
-					_input.value = inputW.value();
-				} else
-				if( _name === 'comic[height]'){
-					_input.value = inputH.value();
-				};
-			};
-			var _selectList = elmForm.getElementsByTagName( 'select' ),
-				_select, _optionList;
-			for( i = _selectList.length; i; ){
-				_select = _selectList[ --i ];
-				_name = _select.name;
-				_optionList = _select.getElementsByTagName( 'option' )
-				if( _name === 'comic[visible]'){
-					_select.selectedIndex = comboboxVisible.selectIndex();
-				} else
-				if( _name === 'comic[editable]'){
-					// _select.selectedIndex = comboboxEditable.selectIndex();
-				};
-			};
-			try {
-				elmForm.submit();
-			} catch( e ){
-				elmProgress.innerHTML = 'submit() err..';
-				isUploading = false;
-				instance.addTimer( clickCancel , 3000, true );
-				return;
-			};
-			if( UA.isIE ){
-				elmIframe.onreadystatechange = detectIframe;
-			} else {
-				elmIframe.onload = onIframeUpdate;
+		var _inputList = app.elmForm.getElementsByTagName( 'input' ),
+			_input, _name;
+		for( var i = _inputList.length; i; ){
+			_input = _inputList[ --i ];
+			_name = _input.name;
+			if( _name === 'comic[title]' ){
+				_input.value = inputTitle.value();
+			} else
+			if( _name === 'comic[width]' ){
+				_input.value = inputW.value();
+			} else
+			if( _name === 'comic[height]' ){
+				_input.value = inputH.value();
 			};
-			elmProgress.innerHTML = 'uploading..';
 		};
-	/*
-	 * ie の 場合、readyState をチェック．
-	 */
-			function detectIframe(){
-	            if ( elmIframe.readyState === 'complete' ){
-	                elmIframe.onreadystatechange = new Function();
-	                elmIframe.onreadystatechange = null;
-	                onIframeUpdate();
-	            };
-			};
-				function onIframeUpdate(){
-					elmIframe.onload = null;
-					try {
-						console.log( ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).document.body.innerHTML );
-					} catch(e){
-						
-					}
-					
-					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-					elmIframe = null;
-					elmProgress.innerHTML = 'success!';
-					instance.addTimer( clickCancel , 1000 );
-					isUploading = false;
-				};
-			
-	function clickCancel(){
-		if( isUploading === true ) return false;
-		ComicConsole.shutdown();
-	};
-	function detectForm(){
-		elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];
-		if( elmForm ){
-			var selectList = elmForm.getElementsByTagName( 'select' ),
-				select,
-				j, m,
-				optionList, option;
-			for( var i=0, l=selectList.length; i<l; ++i ){
-				select = selectList[ i ];
-				optionList = select.getElementsByTagName( 'option' );
-				for( j=0, m=optionList.length; j<m; ++j ){
-					option = optionList[ j ];
-					if( select.name === 'comic[visible]' ){
-						comboboxVisible.createOption( option.innerHTML, option.value, option.selected );
-					} else
-					if( select.name === 'comic[editable]' ){
-						// comboboxEditable.createOption( option.innerHTML, option.value, option.selected );
-					};
-				};
+		var _selectList = app.elmForm.getElementsByTagName( 'select' ),
+			_select, _optionList;
+		for( i = _selectList.length; i; ){
+			_select = _selectList[ --i ];
+			_name = _select.name;
+			_optionList = _select.getElementsByTagName( 'option' )
+			if( _name === 'comic[visible]' ){
+				_select.selectedIndex = comboboxVisible.selectIndex();
+			} else
+			if( _name === 'comic[editable]' ){
+				// _select.selectedIndex = comboboxEditable.selectIndex();
 			};
-			
-			instance.removeTimer( detectForm );
-			Util.createIframe( 'targetFrameCreateComic', onCreateIframe );
-			elmProgress.innerHTML = 'create iframe';
-			
-			instance.onPaneResize( winW, winH );
-			inputTitle.focus();
 		};
+		app.submit();
 	};
-	function onCreateIframe( _iframe ){
-		elmUploader.appendChild( _iframe );
-		elmIframe             = _iframe;
-		elmForm.target        = _iframe.name;
-		elmProgress.innerHTML = '';
+	function clickCancel(){
+		if( app.isUploading === true ) return false;
+		ComicConsole.shutdown();
 	};
 
 	/* grobal method */
 	this.MIN_WIDTH   = 320;
 	this.MIN_HEIGHT  = 320;
 	this.onInit = function(){
-		instance.rootElement.id = 'comic-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
+		app.rootElement.id = 'comic-console-wrapper';
+		app.rootElement.className = 'console-wrapper';
+		app.rootElement.innerHTML = [
 			'<div id="comic-console-header" class="console-header">Create New Comic</div>',
 			'<div id="comic-console" class="console-inner">',
 				'<div id="comic-console-title" class="field">',
@@ -4294,12 +4294,48 @@ var ComicConsole = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 		
-		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
+		app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
+		
+		delete app.onInit;
+	};
+	this.elmProgressID   = 'comic-console-progress';
+	this.elmUploaderID   = 'newcomic';
+	this.elmIframeName   = 'targetFrameCreateComic'
+	this.scriptSrc       = pettanr.CONST.CREATE_COMIC_JS;
+	this.hideUploader    = true;
+	FormApplicationHelper( this );
+	this.onFormReady     = function(){
+		app.onPaneResize( windowW, windowH );
+		
+		var selectList = app.elmForm.getElementsByTagName( 'select' ),
+			select,
+			j, m,
+			optionList, option;
+		for( var i=0, l=selectList.length; i<l; ++i ){
+			select = selectList[ i ];
+			optionList = select.getElementsByTagName( 'option' );
+			for( j=0, m=optionList.length; j<m; ++j ){
+				option = optionList[ j ];
+				if( select.name === 'comic[visible]' ){
+					comboboxVisible.createOption( option.innerHTML, option.value, option.selected );
+				} else
+				if( select.name === 'comic[editable]' ){
+					// comboboxEditable.createOption( option.innerHTML, option.value, option.selected );
+				};
+			};
+		};
+		inputTitle.focus();
 		
-		delete instance.onInit;
+		delete app.onFoemReady;
+	};
+	this.submitError = function(){
+		app.addTimer( clickCancel , 5000, true );
+	};
+	this.submitSuccess = function(){
+		app.addTimer( clickCancel , 5000, true );
 	};
 	this.onOpen = function( w, h ){
-		var ui           = instance.createUIGroup();
+		var ui           = app.createUIGroup();
 		
 		inputTitle       = ui.createInputText( document.getElementById( 'comic-console-title') );
 		inputW           = ui.createInputText( document.getElementById( 'comic-console-width') );
@@ -4309,128 +4345,38 @@ var ComicConsole = gOS.registerApplication( function(){
 		buttonSubmit     = ui.createButton( document.getElementById( 'comic-console-post-button'), clickOK );
 		buttonCancel     = ui.createButton( document.getElementById( 'comic-console-cancel-button'), clickCancel );
 		
-		elmHeader        = document.getElementById( 'comic-console-header' );
-		elmProgress      = document.getElementById( 'comic-console-progress' );
-		
-		elmUploader      = document.createElement( 'div' );
-		instance.rootElement.appendChild( elmUploader );
-		elmUploader.id   = 'newcomic';
-		elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';
-		
-		elmScript        = document.createElement( 'script' );
-		document.body.appendChild( elmScript );
-		elmScript.type   = 'text\/javascript';
-		elmScript.src    = pettanr.CONST.CREATE_COMIC_JS;
-		
-		elmProgress.innerHTML = 'loading form.';
-		
-		instance.addTimer( detectForm, 250 );
-		instance.onPaneResize( w, h );
-		
-		delete instance.onOpen;
+		app.onPaneResize( w, h );
+		app.fetchScript();
+		delete app.onOpen;
 	};
 	this.onPaneResize = function( _w, _h ){
-		winW = _w;
-		winH = _h;
-		instance.rootElement.style.cssText = [
-			'left:', Math.floor( ( _w - instance.rootElement.offsetWidth  ) /2 ), 'px;',
-			'top:',  Math.floor( ( _h- instance.rootElement.offsetHeight ) /2 ), 'px;'
+		windowW = _w;
+		windowH = _h;
+		app.rootElement.style.cssText = [
+			'left:', Math.floor( ( _w - app.rootElement.offsetWidth  ) /2 ), 'px;',
+			'top:',  Math.floor( ( _h- app.rootElement.offsetHeight ) /2 ), 'px;'
 		].join( '' );
 	};
 	this.onClose = function(){
-		elmHeader = elmProgress = elmForm  = elmUploader = instance = null;
-		isUploading = false;
+		app.destroyHelper();
+		app = inputTitle = inputW = inputH = comboboxVisible = buttonSubmit = buttonCancel = null;
 	};
 }, true, true, 'Comic Console', 'comicConsole', null, '#D44A26' );
 
 var UploadConsole = gOS.registerApplication( function(){
 	var windowW, windowH,
-		TARGET_FRAME_NAME = 'targetFrame',
-		elmContainer,
-		elmProgress,
-		elmScript   = null,
-		elmForm     = null,
-		elmFile     = null,
-		elmIframe   = null,
-		isUploading = false,
-		instance    = this;
-	/*
-	 * upload ボタンが押されたらまず iframe をつくる．
-	 */
+		buttonSubmit, buttonCancel,
+		elmFile,
+		app = this;
+
 	function clickOK(){
-		if( !elmForm || !elmIframe || isUploading === true ) return false;
+		if( !app.elmForm || !app.elmIframe || app.isUploading === true ) return false;
 		if( elmFile.value.length === 0 ) return false;
-		elmProgress.innerHTML = 'uploading.';
-		isUploading = true;
-		submit();
+		app.submit();
 		return false;
 	};
-	/*
-	 * form の target に iframe を指定したのち submit();
-	 */
-		function submit(){
-			try {
-				elmForm.submit();
-			} catch( e){
-				elmProgress.innerHTML = 'submit() err..';
-				isUploading = false;
-				instance.addTimer( clickCancel , 3000, true );
-				return;
-			};
-			
-			if( UA.isIE){
-				elmIframe.onreadystatechange = detectIframe;
-			} else {
-				elmIframe.onload = onLoad;
-			};
-			elmProgress.innerHTML = 'uploading..';
-		};
-	/*
-	 * ie の 場合、readyState をチェック．
-	 */
-			function detectIframe(){
-	            if ( elmIframe.readyState === 'complete') {
-	                elmIframe.onreadystatechange = new Function();
-	                elmIframe.onreadystatechange = null;
-	                onLoad();
-	            };
-			};
-				function onLoad(){
-					elmIframe.onload = null;
-					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-					elmProgress.innerHTML = 'success!';
-					instance.addTimer( clickCancel , 1000 );
-					isUploading = false;
-				};
-	
-	function detectForm(){
-		elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
-		if( elmForm ){
-			var _inputList = elmForm.getElementsByTagName( 'input' ),
-				_input;
-			for( var i = _inputList.length; i; ){
-				_input = _inputList[ --i ];
-				if( _input.type === 'file' ){
-					elmFile = _input;
-				};
-				if( _input.type === 'submit' ){
-					_input.style.display = 'none';
-				};
-			};
-			instance.removeTimer( detectForm );
-			Util.createIframe( TARGET_FRAME_NAME, onCreateIframe );
-			elmProgress.innerHTML = 'create iframe';
-		};
-	};
-	function onCreateIframe( _iframe ){
-		elmContainer.appendChild( _iframe );
-		elmIframe = _iframe;
-		elmForm.target = _iframe.name;
-		elmProgress.innerHTML = '';
-		instance.onPaneResize( windowW, windowH );
-	};
 	function clickCancel(){
-		if( isUploading === true ) return false;
+		if( app.isUploading === true ) return false;
 		UploadConsole.shutdown();
 		return false;
 	};
@@ -4439,9 +4385,9 @@ var UploadConsole = gOS.registerApplication( function(){
 	this.MIN_WIDTH   = 320;
 	this.MIN_HEIGHT  = 320;
 	this.onInit = function(){
-		instance.rootElement.id = 'upload-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
+		app.rootElement.id = 'upload-console-wrapper';
+		app.rootElement.className = 'console-wrapper';
+		app.rootElement.innerHTML = [
 			'<div id="upload-console-header" class="console-header">Upload Picture</div>',
 			'<div id="upload-console" class="console-inner">',
 				'<div id="uploader"></div>',
@@ -4453,136 +4399,83 @@ var UploadConsole = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 		
-		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
+		app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
-		delete instance.onInit;
-	}
+		delete app.onInit;
+	};
+	this.elmProgressID   = 'upload-console-progress';
+	this.elmUploaderID   = 'uploader';
+	this.elmIframeName   = 'targetFrameUpload'
+	this.scriptSrc       = pettanr.CONST.UPLOAD_PICTURE_JS;
+	this.hideUploader    = false;
+	FormApplicationHelper( this );
+	this.onFormReady     = function(){
+		app.onPaneResize( windowW, windowH );
+
+		var _inputList = app.elmForm.getElementsByTagName( 'input' ),
+			_input;
+		for( var i = _inputList.length; i; ){
+			_input = _inputList[ --i ];
+			if( _input.type === 'file' ){
+				elmFile = _input;
+			} else
+			if( _input.type === 'submit' ){
+				_input.style.display = 'none';
+			};
+		};
+		delete app.onFoemReady;
+	};
+	this.submitError = function(){
+		app.addTimer( clickCancel , 5000, true );
+	};
+	this.submitSuccess = function(){
+		app.addTimer( clickCancel , 5000, true );
+	};
 	this.onOpen = function( w, h ){
-		elmContainer = document.getElementById( 'uploader' );
-		elmProgress  = document.getElementById( 'upload-console-progress' );
-		
-		instance.addMouseEventListener( document.getElementById( 'upload-console-post-button' ), 'click', clickOK );
-		instance.addMouseEventListener( document.getElementById( 'upload-console-cancel-button' ), 'click', clickCancel );
-		/*
-		 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
-		 */				
-		elmScript      = document.createElement( 'script' );
-		document.body.appendChild( elmScript );
-		elmScript.type = 'text\/javascript';
-		elmScript.src  = pettanr.CONST.UPLOAD_PICTURE_JS;
+		var ui           = app.createUIGroup();
+		buttonSubmit     = ui.createButton( document.getElementById( 'upload-console-post-button'), clickOK );
+		buttonCancel     = ui.createButton( document.getElementById( 'upload-console-cancel-button'), clickCancel );
 
-		instance.addTimer( detectForm, 250 );
-		instance.onPaneResize( w, h );
-		
-		elmProgress.innerHTML = 'loading form.';
+		app.onPaneResize( w, h );
+		app.fetchScript();
 	};
 	this.onPaneResize = function( _windowW, _windowH){
 		windowW = _windowW;
 		windowH = _windowH;
-		instance.rootElement.style.cssText = [
-			'left:', Math.floor( ( _windowW - instance.rootElement.offsetWidth  ) /2 ), 'px;',
-			'top:',  Math.floor( ( _windowH - instance.rootElement.offsetHeight ) /2 ), 'px;'
+		app.rootElement.style.cssText = [
+			'left:', Math.floor( ( _windowW - app.rootElement.offsetWidth  ) /2 ), 'px;',
+			'top:',  Math.floor( ( _windowH - app.rootElement.offsetHeight ) /2 ), 'px;'
 		].join( '' );
-	}
+	};
 	this.onClose = function(){
-		elmHeader = elmProgress = elmForm  = elmUploader = instance = null;
-		isUploading = false;
-	}
+		app.destroyHelper();
+		app = elmFile = buttonSubmit = buttonCancel = null;
+	};
 }, true, true, 'Upload Console', 'uploadConsole', null, '#01A31C' );
 
 var ArtistConsole = gOS.registerApplication( function(){
 	var windowW, windowH,
-		TARGET_FRAME_NAME = 'targetFrameRegisterArtist',
-		elmContainer, elmProgress,
-		elmScript   = null,
-		elmForm     = null,
-		elmIframe   = null,
-		isUploading = false,
-		instance    = this;
-	/*
-	 * upload ボタンが押されたらまず iframe をつくる．
-	 */
+		buttonSubmit, buttonCancel,
+		app = this;
+
 	function clickOK(){
-		if( !elmForm || !elmIframe || isUploading === true ) return false;
-		elmProgress.innerHTML = 'uploading.';
-		isUploading = true;
-		submit();
+		if( !app.elmForm || !app.elmIframe || app.isUploading === true ) return false;
+		app.submit();
 		return false;
-	}
-	/*
-	 * form の target に iframe を指定したのち submit();
-	 */
-		function submit(){
-			try {
-				elmForm.submit();
-			} catch( e){
-				elmProgress.innerHTML = 'submit() err..';
-				isUploading = false;
-				instance.addTimer( clickCancel , 3000, true );
-				return;
-			}
-			
-			if( UA.isIE){
-				elmIframe.onreadystatechange = detectIframe;
-			} else {
-				elmIframe.onload = onLoad;
-			}
-			elmProgress.innerHTML = 'uploading..';
-		}
-	/*
-	 * ie の 場合、readyState をチェック．
-	 */
-			function detectIframe(){
-	            if ( elmIframe.readyState === 'complete' ){
-	                elmIframe.onreadystatechange = new Function();
-	                elmIframe.onreadystatechange = null;
-	                onLoad();
-	            }
-			}
-				function onLoad(){
-					elmIframe.onload = null;
-					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-					elmProgress.innerHTML = 'success!';
-					instance.addTimer( clickCancel , 1000, true );
-					isUploading = false;
-				}
-	
-	function detectForm(){
-		elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
-		if( elmForm){
-			var _inputList = elmForm.getElementsByTagName( 'input' ),
-				_input;
-			for( var i = _inputList.length; i; ){
-				_input = _inputList[ --i ];
-				if( _input.type === 'submit' ){
-					_input.style.display = 'none';
-				}
-			}
-			instance.removeTimer( detectForm );
-			Util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
-			elmProgress.innerHTML = 'create iframe';
-		}
-	}
-	function onCreateIframe( _iframe ){
-		elmContainer.appendChild( _iframe );
-		elmIframe = _iframe;
-		elmForm.target = _iframe.name;
-		elmProgress.innerHTML = '';
-		instance.onPaneResize( windowW, windowH );
-	}
+	};
 	function clickCancel(){
-		if( isUploading === true) return false;
+		if( app.isUploading === true) return false;
 		ArtistConsole.shutdown();
 		return false;
-	}
+	};
 
 	/* grobal method */
 	this.MIN_WIDTH   = 320;
 	this.MIN_HEIGHT  = 320;
 	this.onInit = function(){
-		instance.rootElement.id = 'artist-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
+		app.rootElement.id = 'artist-console-wrapper';
+		app.rootElement.className = 'console-wrapper';
+		app.rootElement.innerHTML = [
 			'<div id="artist-console-header" class="console-header">Register Artist</div>',
 			'<div id="artist-console" class="console-inner">',
 				'<div id="register"></div>',
@@ -4594,40 +4487,54 @@ var ArtistConsole = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 		
-		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
+		app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
-		delete instance.onInit;
+		delete app.onInit;
+	};
+	this.elmProgressID   = 'artist-console-progress';
+	this.elmUploaderID   = 'register';
+	this.elmIframeName   = 'targetFrameArtistRegister'
+	this.scriptSrc       = pettanr.CONST.REGISTER_ARTIST_JS;
+	this.hideUploader    = false;
+	FormApplicationHelper( this );
+	this.onFormReady     = function(){
+		app.onPaneResize( windowW, windowH );
+
+		var _inputList = app.elmForm.getElementsByTagName( 'input' ),
+			_input;
+		for( var i = _inputList.length; i; ){
+			_input = _inputList[ --i ];
+			if( _input.type === 'submit' ){
+				_input.style.display = 'none';
+			};
+		};
+		delete app.onFoemReady;
+	};
+	this.submitError = function(){
+		app.addTimer( clickCancel , 5000, true );
+	};
+	this.submitSuccess = function(){
+		app.addTimer( clickCancel , 5000, true );
 	};
 	this.onOpen = function( w, h ){
-		elmContainer = document.getElementById( 'register');
-		elmProgress  = document.getElementById( 'artist-console-progress');
-		
-		instance.addMouseEventListener( document.getElementById( 'artist-console-post-button' ), 'click', clickOK );
-		instance.addMouseEventListener( document.getElementById( 'artist-console-cancel-button' ), 'click', clickCancel );
-		/*
-		 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
-		 */				
-		elmScript = document.createElement( 'script' );
-		document.body.appendChild( elmScript );
-		elmScript.type = 'text\/javascript';
-		elmScript.src = pettanr.CONST.REGISTER_ARTIST_JS;
+		var ui           = app.createUIGroup();
+		buttonSubmit     = ui.createButton( document.getElementById( 'artist-console-post-button'), clickOK );
+		buttonCancel     = ui.createButton( document.getElementById( 'artist-console-cancel-button'), clickCancel );
 
-		instance.addTimer( detectForm, 250 );
-		instance.onPaneResize( w, h );
-		
-		elmProgress.innerHTML = 'loading form.';
+		app.onPaneResize( w, h );
+		app.fetchScript();
 	};
 	this.onPaneResize = function( _windowW, _windowH ){
 		windowW = _windowW;
 		windowH = _windowH;
-		instance.rootElement.style.cssText = [
-			'left:', Math.floor( ( _windowW - instance.rootElement.offsetWidth  ) /2 ), 'px;',
-			'top:',  Math.floor( ( _windowH - instance.rootElement.offsetHeight ) /2 ), 'px;'
+		app.rootElement.style.cssText = [
+			'left:', Math.floor( ( _windowW - app.rootElement.offsetWidth  ) /2 ), 'px;',
+			'top:',  Math.floor( ( _windowH - app.rootElement.offsetHeight ) /2 ), 'px;'
 		].join( '' );
 	};
 	this.onClose = function(){
-		elmHeader = elmProgress = elmForm  = elmUploader = instance = null;
-		isUploading = false;
+		app.destroyHelper();
+		app = buttonSubmit = buttonCancel = null;
 	};
 }, true, true, 'Artist Console', 'artistConsole', null, '#FFC40D' );
 
@@ -4635,13 +4542,14 @@ var ArtistConsole = gOS.registerApplication( function(){
 var Model = ( function(){
 	
 	var PanelModelClass = function( panel ){
-		var comicID           = panel.comicID,
-			panelID           = panel.panelID,
-			panelTimming      = panel.panelTimming,
+		var comicID           = panel.comicID || -1,
+			panelID           = panel.panelID || -1,
+			panelTimming      = panel.panelTimming || -1,
 			panelW            = panel.panelW,
 			panelH            = panel.panelH,
 			borderSize        = panel.borderSize,
 			panelElementArray = panel.panelElementArray,
+			publish           = panel.publish,
 			timing            = 0;
 			
 		function getPanelElementByTiming(){
@@ -4779,24 +4687,24 @@ var Model = ( function(){
 			};
 			return [
 				'{', cr,
-					//'"panel": {', cr,
-						//'"id": ',               panelID, ',', cr,
-					    '"width": ',            panelW, ',', cr,
-					    '"height": ',           panelH, ',', cr,
-					    '"border": ',           borderSize, ',', cr,
-					    // '"comic_id": ',         comicID, ',', cr,
-					    // '"picture_id": 1,', cr,
-						'"x": ',                0, ',', cr,
-						'"y": ',                0, ',', cr,
-						'"z": ',                1, ',', cr,
-						// '"t": ',				panelTimming, ',', cr,
-					    '"panel_pictures_attributes": {', cr,
-					    	IMAGE_ARRAY.join( ',' + cr ), cr,
-					    '},', cr,
-					    '"speech_balloons_attributes": {', cr,
-					    	BALLOON_ARRAY.join( ',' + cr ), cr,
-					    '}', cr,
-					//'}', cr,
+					panelID !== -1 ? ( '"id": ' + panelID + ',' + cr ) : '',
+					comicID !== -1 ? ( '"comic_id": ' + comicID + ',' + cr ) : '',
+				    '"width": ',            panelW, ',', cr,
+				    '"height": ',           panelH, ',', cr,
+				    '"border": ',           borderSize, ',', cr,
+				    
+				    // '"picture_id": 1,', cr,
+					'"x": ',                0, ',', cr,
+					'"y": ',                0, ',', cr,
+					'"z": ',                1, ',', cr,
+					panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',
+				    '"panel_pictures_attributes": {', cr,
+				    	IMAGE_ARRAY.join( ',' + cr ), cr,
+				    '},', cr,
+				    '"speech_balloons_attributes": {', cr,
+				    	BALLOON_ARRAY.join( ',' + cr ), cr,
+				    '}', ',', cr,
+				    '"publish": ',           ( publish === true ? 1 : 0 ), cr,
 				'}'
 			].join( '' );
 		};
@@ -4862,6 +4770,9 @@ var Model = ( function(){
 			
 			return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA );
 		};
+		this.publish = function( v ){
+			return publish = Type.isBoolean( v ) === true ? v : publish;
+		};
 		this.destroy = function(){
 			panel = panelElementArray = null;
 		};
@@ -4883,7 +4794,7 @@ var OutputConsole = gOS.registerApplication( function(){
 		windowW, windowH,
 		timing   = 0,
 		comicID, panelID, panelTimming, panelW, panelH, borderSize, panelElementArray,
-		instance = this,
+		app      = this,
 		model    = null;
 	
 	function clickOK(){
@@ -4922,9 +4833,9 @@ var OutputConsole = gOS.registerApplication( function(){
 	this.MIN_WIDTH   = 320;
 	this.MIN_HEIGHT  = 320;
 	this.onInit = function(){
-		instance.rootElement.id = 'output-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
+		app.rootElement.id = 'output-console-wrapper';
+		app.rootElement.className = 'console-wrapper';
+		app.rootElement.innerHTML = [
 			'<div id="output-console-header" class="console-header">Output Console</div>',
 			'<div id="output-console" class="console-inner">',
 				'<div id="output-console-format" class="field">',
@@ -4940,14 +4851,14 @@ var OutputConsole = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 
-		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
+		app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 
-		delete instance.onInit;
+		delete app.onInit;
 	};
 	this.onOpen = function( _w, _h, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElementArray ){
 		elmOutputArea = document.getElementById( 'output-area' );
 		
-		var ui = instance.createUIGroup();
+		var ui = app.createUIGroup();
 		comboboxFormat = ui.createCombobox( document.getElementById( 'output-console-format' ), formatUpdate );
 		
 		for( var i=0; FORMAT_LIST[ 0 ]; ++i ){
@@ -4956,7 +4867,10 @@ var OutputConsole = gOS.registerApplication( function(){
 		inputOption    = ui.createInputText( document.getElementById( 'output-console-option' ), null );
 		// buttonPost     = ui.createButton( document.getElementById( 'output-console-post-button' ), clickPost );
 		buttonClose    = ui.createButton( document.getElementById( 'output-console-close-button' ), clickClose );
-		instance.onPaneResize( _w, _h );
+		
+		app.onPaneResize( _w, _h );
+		
+		comboboxFormat.focus( true );
 		
 		model = Model.createPanel( {
 			comicID           : _comicID,
@@ -4965,7 +4879,8 @@ var OutputConsole = gOS.registerApplication( function(){
 			panelW            : _panelW,
 			panelH            : _panelH,
 			borderSize        : _borderSize,
-			panelElementArray : _panelElementArray
+			panelElementArray : _panelElementArray,
+			publish           : true
 		} );
 		
 		formatUpdate();
@@ -4973,9 +4888,9 @@ var OutputConsole = gOS.registerApplication( function(){
 	this.onPaneResize = function( _windowW, _windowH ){
 		windowW = _windowW;
 		windowH = _windowH;
-		instance.rootElement.style.cssText = [
-			'left:', Math.floor( ( _windowW - instance.rootElement.offsetWidth  ) /2 ), 'px;',
-			'top:',  Math.floor( ( _windowH - instance.rootElement.offsetHeight ) /2 ), 'px;'
+		app.rootElement.style.cssText = [
+			'left:', Math.floor( ( _windowW - app.rootElement.offsetWidth  ) /2 ), 'px;',
+			'top:',  Math.floor( ( _windowH - app.rootElement.offsetHeight ) /2 ), 'px;'
 		].join( '' );
 	};
 	this.onClose = function(){
@@ -4988,109 +4903,46 @@ var OutputConsole = gOS.registerApplication( function(){
 
 var PanelConsole = gOS.registerApplication( function(){
 	var windowW, windowH,
-		TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',
-		elmContainer, elmProgress,
-		elmScript = null,
-		elmForm = null,
-		elmIframe = null,
-		isUploading = false,
-		instance = this,
-		json;
+		comboboxPublish, buttonPost, buttonClose,
+		elmInput,
+		app         = this,
+		model       = null;
+		
 	/*
 	 * upload ボタンが押されたらまず iframe をつくる．
 	 */
 	function clickOK(){
-		if( !elmForm || !elmIframe || isUploading === true ) return false;
-		elmProgress.innerHTML = 'uploading.';
-		isUploading = true;
-		submit();
+		if( !app.elmForm || !app.elmIframe || app.isUploading === true ) return false;
+		app.submit();
 		return false;
 	}
-	/*
-	 * form の target に iframe を指定したのち submit();
-	 */
-		function submit(){
-			try {
-				elmForm.submit();
-			} catch( e ){
-				elmProgress.innerHTML = 'submit() err..';
-				isUploading = false;
-				instance.addTimer( clickCancel , 3000, true );
-				return;
-			}
-			
-			if( UA.isIE ){
-				elmIframe.onreadystatechange = detectIframe;
-			} else {
-				elmIframe.onload = onLoad;
-			}
-			elmProgress.innerHTML = 'uploading..';
-		}
-	/*
-	 * ie の 場合、readyState をチェック．
-	 */
-			function detectIframe(){
-	            if ( elmIframe.readyState === 'complete' ){
-	                elmIframe.onreadystatechange = new Function();
-	                elmIframe.onreadystatechange = null;
-	                onLoad();
-	            };
-			};
-				function onLoad(){
-					try {
-						console.log( ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).document.body.innerHTML );
-					} catch(e){
-						
-					}
-					elmIframe.onload = null;
-					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-					elmProgress.innerHTML = 'success!';
-					instance.addTimer( clickCancel , 1000, true );
-					isUploading = false;
-				};
-	
-	function detectForm(){
-		elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
-		if( elmForm){
-			var _inputList = elmForm.getElementsByTagName( 'input' ),
-				_input;
-			for( var i = _inputList.length; i; ){
-				_input = _inputList[ --i ];
-				if( _input.type === 'submit' ){
-					_input.style.display = 'none';
-				};
-				if( _input.name === 'json' && Type.isString( json ) === true ){
-					_input.value = json;
-				};
-			};
-			instance.removeTimer( detectForm );
-			Util.createIframe( TARGET_FRAME_NAME, onCreateIframe );
-			elmProgress.innerHTML = 'create iframe';
-		};
-	};
-	function onCreateIframe( _iframe ){
-		elmContainer.appendChild( _iframe );
-		elmIframe = _iframe;
-		elmForm.target = _iframe.name;
-		elmProgress.innerHTML = '';
-		instance.onPaneResize( windowW, windowH );
-	};
+
 	function clickCancel(){
-		if( isUploading === true) return false;
+		if( app.isUploading === true ) return false;
 		PanelConsole.shutdown();
 		return false;
 	};
+	function publishUpdate(){
+		if( model ){
+			model.publish( comboboxPublish.selectIndex() === 1 );
+			elmInput.value = model.getJsonPostString().replace( /\n/g, '' );			
+		};
+	};
 
 	/* grobal method */
 	this.MIN_WIDTH   = 320;
 	this.MIN_HEIGHT  = 320;
 	this.onInit = function(){
-		instance.rootElement.id = 'panel-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
+		app.rootElement.id = 'panel-console-wrapper';
+		app.rootElement.className = 'console-wrapper';
+		app.rootElement.innerHTML = [
 			'<div id="panel-console-header" class="console-header">Create New Panel (dev)</div>',
 			'<div id="panel-console" class="console-inner">',
 				'<div id="newpanel"></div>',
+				'<div id="panel-console-publish" class="field">',
+					'<span class="field-label">Publish:</span>',
+					'<span id="panel-console-publish-value" class="combobox"></span>',
+				'</div>',
 				'<div class="console-button-container">',
 					'<div id="panel-console-post-button" class="button console-submit-button">post</div>',
 					'<div id="panel-console-cancel-button" class="button console-cancel-button">cancel</div>',
@@ -5099,44 +4951,72 @@ var PanelConsole = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 
-		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
+		app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 
-		delete instance.onInit;
-	}
-	this.onOpen = function( w, h, _json ){
-		elmContainer = document.getElementById( 'newpanel' );
-		elmProgress  = document.getElementById( 'panel-console-progress' );
-		
-		instance.addMouseEventListener( document.getElementById( 'panel-console-post-button' ), 'click', clickOK );
-		instance.addMouseEventListener( document.getElementById( 'panel-console-cancel-button' ), 'click', clickCancel );
-		/*
-		 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
-		 */				
-		elmScript = document.createElement( 'script' );
-		document.body.appendChild( elmScript );
-		elmScript.type = 'text\/javascript';
-		elmScript.src  = pettanr.CONST.CREATE_PANEL_JS;
+		delete app.onInit;
+	};
+	this.elmProgressID   = 'panel-console-progress';
+	this.elmUploaderID   = 'newpanel';
+	this.elmIframeName   = 'targetFrameNewPanel'
+	this.scriptSrc       = pettanr.CONST.CREATE_PANEL_JS;
+	this.hideUploader    = false;
+	FormApplicationHelper( this );
+	this.onFormReady     = function(){
+		app.onPaneResize( windowW, windowH );
 
-		instance.addTimer( detectForm, 250 );
-		instance.onPaneResize( w, h );
+		var _inputList = app.elmForm.getElementsByTagName( 'input' ),
+			_input;
+		for( var i = _inputList.length; i; ){
+			_input = _inputList[ --i ];
+			if( _input.type === 'submit' ){
+				_input.style.display = 'none';
+			};
+			if( _input.name === 'json' ){
+				elmInput     = _input;
+				publishUpdate();
+			};
+		};
+		
+		delete app.onFoemReady;
+	};
+	this.submitError = function(){
+		app.addTimer( clickCancel , 5000, true );
+	};
+	this.submitSuccess = function(){
+		app.addTimer( clickCancel , 5000, true );
+	};
+	this.onOpen = function( w, h, _model ){
+		var ui  = app.createUIGroup(),
+			elm = document.getElementById( 'panel-console-publish' );
+		if( _model ){
+			comboboxPublish  = ui.createCombobox( elm, publishUpdate );
+			comboboxPublish.createOption( 'only me', '0', _model.publish() === false );
+			comboboxPublish.createOption( 'publish', '1', _model.publish() === true );
+			model = _model;
+		} else {
+			elm.parentNode.removeChild( elm );
+		};
 		
-		json = _json;
+		buttonPost       = ui.createButton( document.getElementById( 'panel-console-post-button' ), clickOK );
+		buttonClose      = ui.createButton( document.getElementById( 'panel-console-cancel-button' ), clickCancel );
 		
-		elmProgress.innerHTML = 'loading form.';
+		app.onPaneResize( w, h );
+		app.fetchScript();
 	};
 	this.onPaneResize = function( _windowW, _windowH ){
 		windowW = _windowW;
 		windowH = _windowH;
-		instance.rootElement.style.cssText = [
-			'left:', Math.floor( ( _windowW - instance.rootElement.offsetWidth  ) /2 ), 'px;',
-			'top:',  Math.floor( ( _windowH - instance.rootElement.offsetHeight ) /2 ), 'px;'
+		app.rootElement.style.cssText = [
+			'left:', Math.floor( ( _windowW - app.rootElement.offsetWidth  ) /2 ), 'px;',
+			'top:',  Math.floor( ( _windowH - app.rootElement.offsetHeight ) /2 ), 'px;'
 		].join( '' );
 	};
 	this.onClose = function(){
-		elmHeader = elmProgress = elmForm  = elmUploader = instance = null;
-		isUploading = false;
+		app.destroyHelper();
+		model && model.destroy();
+		app = model = comboboxPublish = buttonPost = buttonClose = elmInput = null;
 	};
 }, true, true, 'Panel Console', 'panelConsole', null, '#603CBA' );
 
 
-})( pettanr, gOS, window );
+})( pettanr, gOS, window, document );
diff --git a/0.5.x/javascripts/peta.common.js b/0.5.x/javascripts/peta.common.js
index 458809a..19b96eb 100644
--- a/0.5.x/javascripts/peta.common.js
+++ b/0.5.x/javascripts/peta.common.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.common.js
- *   version 0.5.8
+ *   version 0.5.14
  * 
  *   author:
  *     itozyun
@@ -89,8 +89,11 @@ pettanr.CONST = ( function(){
 		URL_RESOURCE_PICTURES_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'resource_pictures.json',
 		URL_COMICS_JSON:			( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'comics.json',
 		URL_PANELS_JSON:			( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'panels.json',
+		URL_MY_PANELS_JSON:			( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/panel.json',
 		NS_PETTANR_COMIC:			'pettanr-comic',
-		RESOURCE_PICTURE_PATH:		( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'resource_pictures\/',
+		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\/',
+		PANEL_PICTURE_PATH:		    SERVER_SUPPORT === false ? RELATIVE + 'resource_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',
 		CREATE_PANEL_JS:			SERVER_SUPPORT === false ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',
@@ -592,7 +595,7 @@ pettanr.image = ( function(){
 				elmWrap.appendChild( vmlImg );
 		}
 		this.destroy = function(){
-			instance.destroy;
+			delete instance.destroy;
 			
 			vmlImg !== null && elmWrap.removeChild( vmlImg );
 			retryTimer !== null && window.clearTimeout( retryTimer );
@@ -623,7 +626,7 @@ pettanr.image = ( function(){
 pettanr.bind = ( function(){
 	var BIND_WORKER_ARRAY = [],
 		NAMESPACE_CLASSNAME = pettanr.CONST.NS_PETTANR_COMIC + '-',
-		RESOURCE_PICTURE_PATH = pettanr.CONST.RESOURCE_PICTURE_PATH,
+		PICTURE_PATH = pettanr.CONST.PANEL_PICTURE_PATH,
 		ELM_DETECT_WIDTH = ( function(){
 			var ret = document.createElement( 'div');
 			ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';
@@ -706,7 +709,7 @@ pettanr.bind = ( function(){
 				_rPic = _comicElement.resource_picture;
 				if( _rPic ){
 					_rImg = pettanr.image.createReversibleImage(
-							[ RESOURCE_PICTURE_PATH, _rPic.id, '.', _rPic.ext ].join( ''),
+							[ PICTURE_PATH, _rPic.id, '.', _rPic.ext ].join( ''),
 							_comicElement.width, _comicElement.height
 						);
 					_elmImg = _rImg.elm;
@@ -844,199 +847,6 @@ pettanr.bind = ( function(){
 	}
 })();
 
-var VisualEffect = ( function(){
-	
-	var ANIMATION_TICKET_ARRAY = [],
-		fpms = 50,
-		TIMER = null,
-		FILTER = 'filter',
-		OPACITY = 'opacity',
-		REG_ALPHA = /alpha\([^)]*\)/i,
-		CORON = ':',
-		EMPTY = '',
-		SEMICORON = ';';
-	
-	function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames){
-		var _ticket;
-		for( var i=0, l=ANIMATION_TICKET_ARRAY.length; i<l; ++i){
-			_ticket = ANIMATION_TICKET_ARRAY[ i];
-			if( _ticket.elm === _elm) {
-				_ticket.destroy();
-				break;
-			}
-		}
-		//  coputedStyle と _cssObject を比較して , 一致及び非数は削除しつつ コピー
-		//  filter opacity の追加 REG_ALPHA.test( _value ) ? _value.replace( REG_ALPHA, opacity ) : _value + " " + opacity
-		/*
-		 * cssObject をまわす
-		 * 非数は削除
-		 * cssText と一致も削除
-		 * coputedStyle と一致も削除
-		 * updateTraget ととして記録
-		 * 初期値を cssObject としてセット
-		 * cssTest にセット zoom もセット
-		 */
-		
-		//
-		/*
-			var style = elem.style,
-				currentStyle = elem.currentStyle,
-				opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",
-				filter = currentStyle && currentStyle.filter || style.filter || "";
-
-			// IE has trouble with opacity if it does not have layout
-			// Force it by setting the zoom level
-			style.zoom = 1;
-		 */
-		
-		var _currentParameters = [],
-			_offsetParameters = [],
-			_endParameters = [],
-			_targetAttributes = [];
-		
-		ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(
-			_elm,
-			_currentParameters, _offsetParameters, _endParameters, _targetAttributes,
-			typeof _onComplete === 'function' ? _onComplete : null,
-			typeof _onEnterFrame === 'function' ? _onEnterFrame : null,
-			_numFrames
-		));
-		
-		if( TIMER === null){
-			TIMER = window.setInterval( onEnterFrame, fpms);
-		}
-	}
-	function onEnterFrame(){
-		var _ticket,
-			i = 0;
-		while( i<ANIMATION_TICKET_ARRAY.length){
-			_ticket = ANIMATION_TICKET_ARRAY[ i];
-			if( _ticket.onEnterFrame() === true){
-				_ticket.destroy();
-				ANIMATION_TICKET_ARRAY.splice( i, 1);
-			} else {
-				++i;
-			}
-		}
-		if( ANIMATION_TICKET_ARRAY.length === 0){
-			window.clearInterval( TIMER);
-			TIMER = null;
-		}
-	}
-	function updateCss( _elm, _updateParameters, _targetAttributes, _numAttributes){
-		if( _numAttributes > 1){
-			var _cssTexts = _elm.style.cssText.split( ';'), _css,
-				_separate,
-				_cssObject = {}, _target, _value, _number, _px,
-				j;
-			for(var i=0, l=_cssTexts.length; i<l; ++i){
-				_css = _cssTexts[ i];
-				_separate = _css.indexOf( ':');
-				if( _separate >= 3){
-					_target = _css.substr( 0, _separate +1);
-					_value = _css.substr( _separate +1);
-					/*
-					 * ie filter
-					 */
-					if( _target === FILTER){
-						for( j=0; j<_numAttributes; ++j){
-							if( _targetAttributes[ j] === OPACITY){
-								_cssTexts[ i] = [
-										_target, ':',
-										_value.replace( REG_ALPHA, "alpha(opacity=" + _updateParameters[ j] * 100 + ")")
-									].join( '');
-								break;
-							}
-						}
-					/*
-					 * other
-					 */
-					} else {
-						_number = '' + parseFloat( _value);
-						_px = _value.indexOf( _number);
-						_px = _px > 0 ? _value.substr( _px + _number.length) : '';
-						for( j=0; j<_numAttributes; ++j){
-							if( _targetAttributes[ j] === _target){
-								_cssTexts[ i] = [ _target, ':', _updateParameters[ j], _px].join( '');
-								break;
-							}
-						}						
-					}
-				}
-			}
-			_elm.style.cssText = _cssTexts.join( ';');
-			return;	
-		}
-		/*
-		 * 一度に update する Attributes が少ない場合、cssText は使用しない.
-		 */
-	}
-	
-	var AnimationTaskClass = function( ELM, currentParameters, offsetParameters, endParameters, targetAttributes, onComplete, onEnterFrame, numFrames){
-		var l = targetAttributes.length;
-		return {
-			elm:	ELM,
-			onEnterFrame: function(){
-				var _updateCss = {}, i;
-				if( numFrames === 1){
-					for( i=0; i<l; ++i){
-						_updateCss[ targetAttributes[ i]] = endParameters[ i];
-						++i;
-					}
-					updateCss( ELM, currentParameters, targetAttributes, l);
-					onComplete !== null && onComplete();
-				} else {
-					for( i=0; i<l; ++i){
-						_updateCss[ targetAttributes[ i]] = currentParameters[ i] = Math.floor( currentParameters[ i] + offsetParameters[ i]);
-						++i;
-					}
-					updateCss( ELM, currentParameters, targetAttributes, l);
-					onEnterFrame !== null && onEnterFrame( _updateCss);
-				}
-				--numFrames;
-				return numFrames === 0;
-			},
-			destroy: function(){
-				ELM = onComplete = onEnterFrame = null;
-			}
-		}
-	}
-	
-	var VisualEffectClass = function( ELM){
-		var isHtmlElement;
-		
-		function registerAnime( _cssObject, _onComplete, _onEnterFrame, _time){
-			var _numFrames = Math.floor( _time / fpms);
-			startAnimation( ELM, _cssObject, _onComplete, _onEnterFrame, _numFrames);
-		}
-		function startFadeIn(){
-			
-		}
-		function startFadeOut(){
-			
-		}
-		function update( _x, _y, _w, _h){
-			var _cssText = ELM.style.cssText;
-			
-		}
-		
-		this.anime = registerAnime;
-		this.fadeIn = startFadeIn;
-		this.fadeOut = startFadeOut;
-		this.update = update;
-	}
-	
-	return {
-		createVisualEffect: function( _elm){
-			return new VisualEffectClass( _elm);
-		},
-		isInstanceOfVisualEffect: function( _instance){
-			return _instance instanceof VisualEffectClass;
-		}
-	}
-})();
-
-
 
 /*
  *  Google Analytics
diff --git a/0.5.x/javascripts/system.js b/0.5.x/javascripts/system.js
index efd5da9..adb6ac0 100644
--- a/0.5.x/javascripts/system.js
+++ b/0.5.x/javascripts/system.js
@@ -1,13 +1,15 @@
 /*
  * pettanR system.js
- *   version 0.5.9
+ *   version 0.5.16
  * 
  * 
  * Type
  * 
+ * UA
+ * 
  * Util
  * 
- * UA
+ * CSS
  * 
  * gadgetOS
  *   author:
@@ -84,6 +86,131 @@
 		}
 	};
 
+/*
+ * UA
+ * 
+ *   detect userAgent
+ *   detect plug in
+ */
+	var UA = ( function(){
+		var ua = (function(){
+				var acme = {};
+				
+				var n    = navigator;
+				var dua  = n.userAgent;
+				var dav  = n.appVersion;
+				var tv   = parseFloat(dav);
+				acme.isOpera  = (dua.indexOf("Opera") >= 0) ? tv: undefined;
+				acme.isKhtml  = (dav.indexOf("Konqueror") >= 0) ? tv : undefined;
+				acme.isWebKit = parseFloat(dua.split("WebKit\/")[1]) || undefined;
+				acme.isChrome = parseFloat(dua.split("Chrome\/")[1]) || undefined;
+				acme.isGecko  = (dua.indexOf("Gecko\/") >= 0) ? parseFloat(dua.split("rv:")[1].replace( /^(\d*\.\d*)\.(\d*)/, '$1$2' )) : undefined;
+				var index = Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0);
+				if(index && !acme.isChrome){
+					acme.isSafari = parseFloat(dav.split("Version/")[1]);
+					if(!acme.isSafari || parseFloat(dav.substr(index + 7)) <= 419.3){
+						acme.isSafari = 2;
+					}
+				}
+				if(document.all && !acme.isOpera){
+					acme.isIE = parseFloat(dav.split("MSIE ")[1]) || undefined;
+				}
+				
+				return acme;
+			})(),
+			isIE = navigator.userAgent.toLowerCase().indexOf( 'msie') !== -1,
+			ieVersion = isIE === true ? parseInt( navigator.appVersion.toLowerCase().replace( /.*msie[ ]/, '').match( /^[0-9]+/)) : 0,
+			ieRenderingVersion = ieVersion === 8 ? document.documentMode : ieVersion,
+			isStanderdMode = document.compatMode === 'CSS1Compat',
+			ActiveX = ( function(){
+				if( isIE === false || ieVersion > 8 ) return false;
+				var	b = document.body,
+					c = b.className || '',
+					x,
+					ret = undefined, //pettanr.URL_PARAMS.ActiveX,
+					ns = 'pettanr-ActiveX-',
+					enabled = 'enabled',
+					disabled = 'disabled';
+				if( ret !== true && ret !== false){
+					if( b.className.indexOf( ns + enabled ) !== -1 )  return true;
+					if( b.className.indexOf( ns + disabled ) !== -1 ) return false;
+					x = document.createElement( 'div' );
+					b.appendChild(x);
+					x.style.cssText = 'width:1px;height:1px;line-height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';
+					ret = x.offsetHeight > 1;
+					b.removeChild(x);
+				}
+				b.className += [ c !== '' ? ' ' : c, ns, ret === true ? enabled : disabled ].join( '');
+				return ret;
+			})(),
+			VML = ( function(){
+				if( ActiveX === false || isIE === false || ieVersion > 8) return false;
+				var globalObjectName = 'detect_activex',//Util.createGlobalUniqueName(),
+					script,
+					id = 'detectVML';
+				document.write( [ '<!--[if gte vml 1]><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));
+				if( window[ globalObjectName ] === 1 ){
+					script = document.getElementById( id );
+					script.parentNode.removeChild( script );
+					window[ globalObjectName ] = null;
+					return true;
+				}
+				return false;
+			})(),
+			isStandAloneMode = ( function(){
+				if( isIE === false) return false;
+				if( VML === true) return false;
+				var globalObjectName = 'detect_standalone', //Util.createGlobalUniqueName(),
+					script,
+					id = 'detectStandAlone';
+				document.write( [ '<!--[if IE ', Math.floor( ieVersion ), ']><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));
+				if( window[globalObjectName] === 1){
+					script = document.getElementById( id);
+					script.parentNode.removeChild( script);
+					window[globalObjectName] = null;
+					return false;
+				}
+				return true;
+			})();
+		return {
+			IE:					ua.isIE,
+			GECKO:				ua.isGecko,
+			OPERA:				ua.isOpera,
+			KHTML:				ua.isKhtml,
+			WEBKIT:				ua.isWebKit,
+			CHROME:				ua.isChrome,
+			isIE:				isIE,
+			ieVersion:			ieVersion,
+			ieRenderingVersion:	ieRenderingVersion,
+			isStanderdMode:		isStanderdMode,
+			ACTIVEX:            ActiveX,
+			VML:                VML,
+			STANDALONE:         isStandAloneMode,
+			VENDER_PREFIX: ( function() {
+				var ua = navigator.userAgent.toLowerCase();
+				if ( ua.indexOf('opera') !== -1 ){
+					return 'O';
+				} else if ( ua.indexOf('msie') !== -1 ){
+					return 'ms';
+				} else if ( ua.indexOf('webkit') !== -1 ){
+					return 'webkit';
+				} else if ( navigator.product === 'Gecko' ){
+					return 'Moz';
+				}
+				return '';
+			})(),
+			startVML: function(){
+				delete UA.startVML;
+				if( UA.VML !== true) return false;
+				if (!document.namespaces["v"]) {
+			        document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");
+			    }
+			    document.createStyleSheet().cssText = "v\:shape,v\:image{behavior:url(#default#VML);display:block;};";
+			}
+		}
+	})();
+
+
 /* ----------------------------------------------------
  * Util
  * 
@@ -96,58 +223,93 @@
  *   getGrobalObjectName()
  * 
  */
-	var Util = ( function(){
-		var doc  = window.document,
-			body = doc.getElementsByTagName( 'body' )[ 0 ];
+	var Util = ( function( window, document, undefined ){
+		var body = document.getElementsByTagName( 'body' )[ 0 ];
 			
 		var ELM_SIZE_GETTER = ( function(){
-				var ret = doc.createElement( 'DIV' );
+				var ret = document.createElement( 'div' );
 				body.appendChild( ret );
 				
-				ret.id         = 'elmSizeGetter';
-				ret.style.cssText  = 'position:absolute;left:0;top:-9999px;visibility:hidden';
+				ret.id            = 'elmSizeGetter';
+				ret.style.cssText = 'position:absolute;left:0;top:-9999px;visibility:hidden';
 				
 				body.removeChild( ret );
 				return ret;
 			})(),
 			CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame,base,bgsound,frameset,listing'.split( ',' );
 		
-		/* clean comment node */
-		cleanCommnetNode();
-		
-		/* clean noscript */
-		( function(){
-			var nodeNoscript = doc.getElementsByTagName( 'noscript' ),
-				noscript;
-			for( var i=0; i<nodeNoscript.length; ++i ){
-				noscript = nodeNoscript[i];
-				noscript.parentNode && noscript.parentNode.removeChild( noscript );
-			};
-		})();
-	
-		function cleanCommnetNode( _targetElm ){
-			search( _targetElm || body );
-			
-			function search( _elm ){
-				if( !_elm ) return;
-				if( _elm.nodeType === 8 ){
-					_elm.parentNode.removeChild( _elm );
-					return;
+		var UNIT_RATIO = ( function( elm ){
+				var ret = {},
+					unit,
+					units = 'cm,mm,in,pt,pc'.split( ',' );
+				
+				body.appendChild( elm );
+				
+				for( var i=units.length; i; ){
+					unit = units[ --i ];
+					elm.style.width = 1000 + unit;
+					ret[ unit ] = elm.offsetWidth / 1000;
 				};
-				var i, l, _children = _elm.childNodes, _array = [];
-				if( _children && typeof _children.length === 'number' ){
-					// liveNode > array
-					for( i=0, l=_children.length; i<l; ++i ){
-						_array.push( _children[ i ] );
-					};
-					while( _array.length !== 0 ){
-						search( _array.shift() );
-					};
+				elm.style.cssText = '';
+				
+				body.removeChild( elm );
+				return ret;
+			})( ELM_SIZE_GETTER );
+			
+		var FONT_SIZE_RATIO = ( function( elm ){
+				var ret = {},
+					size,
+					list = 'xx-large,x-large,large,larger,medium,small,smaller,x-small,xx-small'.split( ',' );
+				
+				body.appendChild( elm );
+				elm.style.cssText = 'font-size:100px;line-height:1em;';
+				elm.appendChild( document.createTextNode( 'X' ) );
+				
+				base = elm.offsetHeight;
+				
+				for( var i = list.length; i; ){
+					size = list[ --i ];
+					elm.style.fontSize = size;
+					ret[ size ] = elm.offsetHeight;// / base;
 				};
+				
+				elm.style.cssText = '';
+				elm.removeChild( elm.firstChild );
+				body.removeChild( elm );
+				return ret;
+			})( ELM_SIZE_GETTER );
+		
+		var REG_LARGE = /[A-Z]/g;
+		
+		/* clean comment node */
+		window.setTimeout( function(){
+			Util.cleanCommnetNode();
+			
+			/* clean noscript */
+
+			var noscripts = Util.copyArray( document.getElementsByTagName( 'noscript' ) ),
+				ns;
+			for( var i = noscripts.length; i; ){
+				ns = noscripts[ --i ];
+				ns.parentNode && ns.parentNode.removeChild( ns );
 			};
-		};
+		}, 0 );
 		
 		return {
+			parse: function( v ){
+				if( Type.isString( v ) === true ){
+					if( v === 'true' )      return true;
+					if( v === 'false' )     return false;
+					if( v === 'null' )      return null;
+					if( v === 'undefined' ) return undefined;
+					if( v === 'NaN' )       return NaN;
+					if( v === '' )          return v;
+					var _v = v.split( ' ' ).join( '' ),
+						n = _v - 0;
+					if( '' + n === _v || '' + n === '0' + _v  ) return n - 0;
+				};
+				return v;
+			},
 			extend: function( baseInstance, extend ){
 				for( var key in extend ){
 					if( Type.isUndefined( baseInstance[ key ] ) === true ){
@@ -157,32 +319,71 @@
 						baseInstance[ key ] = extend[ key ];
 					} else {
 						alert( 'extend error' );
-					}
-				}
+					};
+				};
 				return baseInstance;
 			},	
-			cleanCommnetNode: cleanCommnetNode,
+			cleanCommnetNode: function ( _targetElm ){
+				search( _targetElm || body );
+				
+				function search( _elm ){
+					if( !_elm ) return;
+					if( _elm.nodeType === 8 ){
+						_elm.parentNode.removeChild( _elm );
+						return;
+					};
+					if( _elm.nodeType === 1 ){
+						var _array = Util.copyArray( _elm.childNodes ); // liveNode > array
+						while( _array.length > 0 ) search( _array.shift() );
+					};
+				};
+			},
 			cleanElement: function( _targetElm ){
-				var _nodes, _elm, _array, j, m;
-				for( var i=0, l=CLEAN_TARGET_ELEMENT.length; i<l; ++i){
-					_nodes = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ i]);
-					_array = [];
-					for( j=0, m = _nodes.length; j<m; ++j){
-						_array.push( _nodes[ j]);
-					}
-					for( j=0, m = _array.length; j<m; ++j){
-						_elm = _nodes[ j];
-						_elm.parentNode && _elm.parentNode.removeChild( _elm);
-					}
-				}
-				cleanCommnetNode( _targetElm );
+				var _array, _elm, j, _css;
+				for( var i = CLEAN_TARGET_ELEMENT.length; i; ){
+					_array = Util.copyArray( _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ --i ] ) );
+					for( j = _array.length; j; ){
+						_elm = _nodes[ --j ];
+						_elm.parentNode && _elm.parentNode.removeChild( _elm );
+					};
+				};
+				Util.cleanCommnetNode( _targetElm );
+				
 				if( UA.isIE === false ) return;
-				_nodes = _targetElm.all || _targetElm.getElementsByName( '*' );
-				for( i=0, l = _nodes.length; i<l; ++i){
-					_elm = _nodes[ i ];
-					_elm.style.filter = '';
-					_elm.style.behavior = '';
-				}
+				_nodes = _targetElm.all || _targetElm.getElementsByTagName( '*' );
+				for( i = _nodes.length; i; ){
+					_elm = _nodes[ --i ];
+					_css = Util.getInlineStyle( _elm );
+					_css.filter   = null;
+					_css.behavior = null;
+					_elm.style.cssText = Util.toCssText( _css );
+				};
+			},
+			camelize: function( cssProp ){
+			    var parts = cssProp.split( ' ' ).join( '' ).split( '-' ),
+			    	l     = parts.length;
+			    if( l === 1 ) return parts[ 0 ];
+			
+			    var camelized = cssProp.charAt(0) === '-'
+			      ? parts[ 0 ].charAt( 0 ).toUpperCase() + parts[ 0 ].substring( 1 )
+			      : parts[ 0 ];
+			
+			    for( var i = 1; i < l; ++i ){
+			    	camelized += parts[ i ].charAt( 0 ).toUpperCase() + parts[ i ].substring( 1 );
+			    };
+			    return camelized;
+			},
+			uncamelize: function( str ){
+				return str.split( ' ' ).join( '' ).replace( REG_LARGE, '-$&' ).toLowerCase();
+			},
+			pxTo: function( _px, _unit ){
+				return _px / ( UNIT_RATIO[ _unit ] || 1 );
+			},
+			toPx: function( x, _unit ){
+				return x * ( UNIT_RATIO[ _unit ] || 1 );
+			},
+			absoluteFontSizeToPx: function( fontsize ){
+				return FONT_SIZE_RATIO[ fontsize ] || 0;
 			},
 			getElementSize: function( _elm ){
 				if( Type.isHTMLElement( _elm ) === false ){
@@ -258,7 +459,7 @@
 						if (image[key] && image[key].src === image.src) {
 							return image[key];
 						};
-						if( doc.uniqueID ){ // for IE
+						if( document.uniqueID ){ // for IE
 							run = image.runtimeStyle;
 							mem = { w: run.width, h: run.height }; // keep runtimeStyle
 							run.width  = "auto"; // override
@@ -284,10 +485,12 @@
 				
 				return size;
 			},
-			getAbsolutePath: function( path) {
-				var e = document.createElement("div");
-				e.innerHTML = '<a href=\"' + path + '\" />';
-				return e.firstChild.href;
+			getAbsolutePath: function( path ){
+				var elm = document.createElement('div');
+				body.appendChild( elm );
+				elm.innerHTML = '<a href=\"' + path + '\" />';
+				body.removeChild( elm );
+				return elm.firstChild.href;
 			},
 			getAbsolutePosition: function( _elm ){
 				// Find the destination's position
@@ -308,44 +511,42 @@
 			},
 			pullHtmlAsTemplete: function( html ){
 				var elm = document.createElement( 'div' );
+				body.appendChild( elm );
 				elm.innerHTML = html;
+				body.removeChild( elm );
 				return elm.firstChild;
 			},
 			getElementsByClassName: function( _elm, _className, opt_tagName ){
-				var _all = !opt_tagName || opt_tagName === '*',
-					_nodes = _all === true ? ( _elm.all || _elm.getElementsByTagName( '*' )) : _elm.getElementsByTagName( opt_tagName ),
-					_node, _classes, ret = [];
-				for( var i=0, l = _nodes.length; i<l; ++i ){
-					_node = _nodes[ i ];
-					_node.nodeType === 1 && Util.hasClassName( _node, _className ) === true && ret.push( _node );
-				}
-				return ret;
-				
-				var sp = ' ', cn,
-					_cnames = _className.replace( /\s+/g, sp ).split( sp ),
-					_nodes = Util.copyArray( _livenodes );
-				
-				for( var i = _cnames.length; i; ){
-					cn = _cnames[ --i ];
-					for( var j = _nodes.length; j > 0; ){
-						_node = _nodes[ --j ];
-						if( _node.nodeType !== 1 || Util.hasClassName( _node, cn ) === false ){
-							_nodes.split( j, 1 );
-							--j;
-						};
+				var _all       = !opt_tagName || opt_tagName === '*',
+					_livenodes = _all === true ? ( _elm.all || _elm.getElementsByTagName( '*' )) : _elm.getElementsByTagName( opt_tagName ),
+					_nodes     = Util.copyArray( _livenodes );
+				for( var j = 0; j < _nodes.length; ){
+					_node = _nodes[ j ];
+					if( _node.nodeType !== 1 || Util.hasClassName( _node, _className ) === false ){
+						_nodes.splice( j, 1 );
+					} else {
+						++j;
 					};
 				};
+				return _nodes;
 			},
 			getChildIndex: function( _parent, _child ){
-				var _children = _parent.getElementsByTagName( _child.tagName ),
-					l = _children.length;
-				for( var i=0; i<l; ++i ){
-					if( _children[ i ] === _child ) return i;
+				var _children = _parent.getElementsByTagName( _child.tagName );
+				for( var i = _children.length; i; ){
+					if( _children[ --i ] === _child ) return i;
 				};
 				return -1;
 			},
 			hasClassName: function( _elm, _className ){
-				return Util.getIndex( ( _elm.className || '' ).split( ' ' ), _className ) !== -1;
+				var cnames  = ( _elm.className || '' ).split( ' ' ),
+					_cnames = _className.split( ' ' ),
+					cname;
+				for( var i = _cnames.length; i; ){
+					cname = _cnames[ --i ];
+					if( cname === '' ) continue;
+					if( Util.getIndex( cnames, cname ) === -1 ) return false;
+				};
+				return true;
 			},
 			addClass: function( _elm, _className ){
 				if( Util.hasClassName( _elm, _className ) === false ){
@@ -378,24 +579,25 @@
 					_node.parentNode && _node.parentNode.removeChild( _node);
 				}
 			},
-			getIndex: function( _array, _element){
+			getIndex: function( _array, _element ){
 				if( Array.prototype.indexof ){
-					Util.getIndex = function( _array, _element){
-						return _array.indexof( _element);
-					}
+					Util.getIndex = function( _array, _element ){
+						return _array.indexof( _element );
+					};
 				} else {
-					Util.getIndex = function( _array, _element){
-						for( var i=0, l = _array.length; i<l; ++i){
-							if( _array[ i] === _element) return i;
-						}
-						return -1;					
-					}
-				}
-				return Util.getIndex( _array, _element);
+					Util.getIndex = function( _array, _element ){
+						for( var i = _array.length; i; ){
+							if( _array[ --i ] === _element ) return i;
+						};
+						return -1;
+					};
+				};
+				return Util.getIndex( _array, _element );
 			},
 			copyArray: function( _array ){
-				var ret = new Array( l );
-				for( var i=0, l = _array.length; i<l; ++i ){
+				var l = _array.length,
+					ret = new Array( l );
+				for( var i=0; i<l; ++i ){
 					ret[ i ] = _array[ i ];
 				}
 				return ret;
@@ -405,7 +607,7 @@
 			 */
 			createGlobalUniqueName: function(){
 				var randomKey = null;
-				while(true) {
+				while( true ){
 					randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');
 					if( typeof window[randomKey] === 'undefined'){
 						break;
@@ -450,134 +652,799 @@
 					callback( el );
 				};
 			}
-		}
-	})();
+		};
+	})( window, document );
 
 
-/*
- * UA
- * 
- *   detect userAgent
- *   detect plug in
- */
-	var UA = ( function(){
-		var ua = (function(){
-				var acme = {};
-				
-				var n    = navigator;
-				var dua  = n.userAgent;
-				var dav  = n.appVersion;
-				var tv   = parseFloat(dav);
-				acme.isOpera  = (dua.indexOf("Opera") >= 0) ? tv: undefined;
-				acme.isKhtml  = (dav.indexOf("Konqueror") >= 0) ? tv : undefined;
-				acme.isWebKit = parseFloat(dua.split("WebKit\/")[1]) || undefined;
-				acme.isChrome = parseFloat(dua.split("Chrome\/")[1]) || undefined;
-				acme.isGecko  = (dua.indexOf("Gecko\/") >= 0) ? parseFloat(dua.split("rv:")[1].replace( /^(\d*\.\d*)\.(\d*)/, '$1$2' )) : undefined;
-				var index = Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0);
-				if(index && !acme.isChrome){
-					acme.isSafari = parseFloat(dav.split("Version/")[1]);
-					if(!acme.isSafari || parseFloat(dav.substr(index + 7)) <= 419.3){
-						acme.isSafari = 2;
-					}
-				}
-				if(document.all && !acme.isOpera){
-					acme.isIE = parseFloat(dav.split("MSIE ")[1]) || undefined;
-				}
+var CSS = ( function( window, documwnt, undefined ){
+	var	CORON                  = ':',
+		EMPTY                  = '',
+		SEMICORON              = ';';
+		UNITS                  = 'px,cm,mm,in,pt,pc,em,%'.split( ',' ),
+		CLIP_SEPARATOR         = UA.isIE === true && UA.ieVersion < 8 ? ' ' : ',';
+
+	var SPECIAL = ( function(){
+		var _special = {};
+		if( UA.isIE === true && UA.ieVersion < 9 ){
+			if( UA.ACTIVEX === true ){
+				// _special.opacity    = 'ActiveXOpacity';
+				_special.setFilters = function( style ){
+					var filters = ( style.filter || '' ).split( ') ' ),
+						data    = {},
+						i       = filters.length,
+						filter, names, props, prop, j, l, key, v;
+					for( ; i; ){
+						filter   = filters[ --i ].split( ' ' ).join( '' ).split( '(' );
+						if( filter.length !== 2 ) continue;
+						names    = filter[ 0 ].split( '.' ); // progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9)
+						props    = filter[ 1 ].split( ',' ); // 
+						filter   = {};
+						for( j = 0, l = props.length; j < l; ++j ){
+							prop = props[ j ].split( '=' );
+							key  = prop[ 0 ].toLowerCase();
+							v    = prop[ 1 ];
+							filter[ key ] = v; //v.charAt( 0 ) === '#' ? v : parseInt( v );
+						};
+						data[ names[ names.length - 1 ] ] = filter;
+					};
+					
+					style.filter  = data;
+					style.opacity = data.alpha && data.alpha.opacity ? data.alpha.opacity / 100 : 1;
+				};
+				_special.hasLayout = function( elm ){
+					return elm.currentStyle.hasLayout;
+				};
+			} else {
+				_special.opacity = null;
+			};
+		} else {
+			var style = document.documentElement.style;
+			_special.opacity = style.opacity          !== undefined ? 'opacity' : 
+							style.MozOpacity          !== undefined ? 'MozOpacity' :
+							style.KhtmlOpacity        !== undefined ? 'KhtmlOpacity' :
+							style[ '-khtml-opacity' ] !== undefined ? 'KhtmlOpacity' : null;
+
+			// if( style.backgroundPositionX === undefined ){
+				_special.setBackgroundPositionXY = function( style ){
+					var bgp = ( style.backgroundPosition || '' ).split( ' ' );
+					style.backgroundPositionX = bgp[ 0 ] || 0;
+					style.backgroundPositionY = bgp[ 1 ] || 0;
+				};
+			// };
+			if( style.clipTop === undefined && style[ 'clip-top' ] === undefined ){
+				_special.setClipTopRightBottomLeft = function( style ){
+					var clip = style.clip || '';
+					if( clip.indexOf( 'rect(' ) === -1 ){
+						style.clipTop    = 0;
+						style.clipRight  = 0;
+						style.clipBottom = 0;
+						style.clipLeft   = 0;
+						return;
+					};
+					clip = clip.split( '(' )[ 1 ].split( ')' )[ 0 ].split( clip.indexOf( ',' ) !== -1 ? ',' : ' ' );
+					ret.clipTop    = clip[ 0 ];
+					ret.clipRight  = clip[ 1 ];
+					ret.clipBottom = clip[ 2 ];
+					ret.clipLeft   = clip[ 3 ];
+				};
+			};
+		};
 				
-				return acme;
-			})(),
-			isIE = navigator.userAgent.toLowerCase().indexOf( 'msie') !== -1,
-			ieVersion = isIE === true ? parseInt( navigator.appVersion.toLowerCase().replace( /.*msie[ ]/, '').match( /^[0-9]+/)) : 0,
-			ieRenderingVersion = ieVersion === 8 ? document.documentMode : ieVersion,
-			isStanderdMode = document.compatMode === 'CSS1Compat',
-			ActiveX = ( function(){
-				if( isIE === false || ieVersion > 8 ) return false;
-				var	b = document.body,
-					c = b.className || '',
-					x,
-					ret = undefined, //pettanr.URL_PARAMS.ActiveX,
-					ns = 'pettanr-ActiveX-',
-					enabled = 'enabled',
-					disabled = 'disabled';
-				if( ret !== true && ret !== false){
-					if( Util.hasClassName( b, ns + enabled) === true )  return true;
-					if( Util.hasClassName( b, ns + disabled) === true ) return false;
-					x = document.createElement( 'div' );
-					b.appendChild(x);
-					x.style.cssText = 'width:1px;height:1px;line-height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';
-					ret = x.offsetHeight > 1;
-					b.removeChild(x);
-				}
-				b.className += [ c !== '' ? ' ' : c, ns, ret === true ? enabled : disabled ].join( '');
-				return ret;
-			})(),
-			VML = ( function(){
-				if( ActiveX === false || isIE === false || ieVersion > 8) return false;
-				var globalObjectName = Util.createGlobalUniqueName(),
-					script,
-					id = 'detectVML';
-				document.write( [ '<!--[if gte vml 1]><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));
-				if( window[globalObjectName] === 1){
-					script = document.getElementById( id);
-					script.parentNode.removeChild( script);
-					window[globalObjectName] = null;
-					return true;
-				}
-				return false;
-			})(),
-			isStandAloneMode = ( function(){
-				if( isIE === false) return false;
-				if( VML === true) return false;
-				var globalObjectName = Util.createGlobalUniqueName(),
-					script,
-					id = 'detectStandAlone';
-				document.write( [ '<!--[if IE ', Math.floor( ieVersion ), ']><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));
-				if( window[globalObjectName] === 1){
-					script = document.getElementById( id);
-					script.parentNode.removeChild( script);
-					window[globalObjectName] = null;
-					return false;
-				}
-				return true;
-			})();
-		return {
-			IE:					ua.isIE,
-			GECKO:				ua.isGecko,
-			OPERA:				ua.isOpera,
-			KHTML:				ua.isKhtml,
-			WEBKIT:				ua.isWebKit,
-			CHROME:				ua.isChrome,
-			isIE:				isIE,
-			ieVersion:			ieVersion,
-			ieRenderingVersion:	ieRenderingVersion,
-			isStanderdMode:		isStanderdMode,
-			ACTIVEX:            ActiveX,
-			VML:                VML,
-			STANDALONE:         isStandAloneMode,
-			VENDER_PREFIX: ( function() {
-				var ua = navigator.userAgent.toLowerCase();
-				if ( ua.indexOf('opera') !== -1 ){
-					return 'O';
-				} else if ( ua.indexOf('msie') !== -1 ){
-					return 'ms';
-				} else if ( ua.indexOf('webkit') !== -1 ){
-					return 'webkit';
-				} else if ( navigator.product === 'Gecko' ){
-					return 'Moz';
-				}
-				return '';
-			})(),
-			startVML: function(){
-				delete UA.startVML;
-				if( UA.VML !== true) return false;
-				if (!document.namespaces["v"]) {
-			        document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");
-			    }
-			    document.createStyleSheet().cssText = "v\:shape,v\:image{behavior:url(#default#VML);display:block;};";
-			}
+		return _special;
+	})();
+	
+	function cssToObject( css ){
+		var ret = {}, i, nv, n, v, parse = Util.parse, isNumber = Type.isNumber;
+		if( Type.isString( css ) === true ){
+			css = css.split( ';' );
+			for( i = css.length; i; ){
+				nv    = css[ --i ].split( ':' ); // filter の場合, progid: がくる
+				n     = nv.shift();
+				if( isNumber( parse( n ) ) === true ) continue;
+				v     = nv.join( '' );
+				while( v.charAt( 0 ) === ' ' ) v = v.substr( 1 );
+				ret[ Util.camelize( n ) ] = parse( v );
+			};
+		} else {
+			for( n in css ){
+				if( Type.isNumber( parse( n ) ) === false ) ret[ n ] = parse( css[ n ] );
+			};
+		};
+
+		if( SPECIAL.setFilters ){
+			SPECIAL.setFilters( ret );
+		} else {
+			ret.opacity = SPECIAL.opacity !== null ? ret[ SPECIAL.opacity ] : 1;
+		};
+		
+		SPECIAL.setBackgroundPositionXY && SPECIAL.setBackgroundPositionXY( ret );
+		SPECIAL.setClipTopRightBottomLeft && SPECIAL.setClipTopRightBottomLeft( ret );
+		
+		return ret;
+	};
+
+	var COLOR = ( function(){
+		var ret = {}, v, name,
+			list = [
+				0, 'BLACK',
+				parseInt( 'FF0000', 16 ), 'RED',
+				parseInt( '00FF00', 16 ), 'LIME',
+				parseInt( '0000FF', 16 ), 'BLUE',
+				parseInt( 'FFFF00', 16 ), 'YELLOW',
+				parseInt( '00FFFF', 16 ), 'AQUA or CYAN',
+				parseInt( 'FF00FF', 16 ), 'FUCHSIA or MAGENTA',
+				parseInt( 'FFFFFF', 16 ), 'WHITE',
+				parseInt( '008000', 16 ), 'GREEN',
+				parseInt( '800080', 16 ), 'PURPLE',
+				parseInt( '800000', 16 ), 'MAROON',
+				parseInt( '000080', 16 ), 'NAVY',
+				parseInt( '808000', 16 ), 'OLIVE',
+				parseInt( '008080', 16 ), 'TEAL',
+				parseInt( '808080', 16 ), 'GRAY',
+				parseInt( 'C0C0C0', 16 ), 'SILVER',
+				parseInt( '696969', 16 ), 'DIMGRAY',
+				parseInt( '708090', 16 ), 'SLATEGRAY',
+				parseInt( 'A9A9A9', 16 ), 'DARKGRAY',
+				parseInt( 'DCDCDC', 16 ), 'GAINSBORO',
+				parseInt( '191970', 16 ), 'MIDNIGHTBLUE',
+				parseInt( '6A5ACD', 16 ), 'SLATEBLUE',
+				parseInt( '0000CD', 16 ), 'MEDIUMBLUE',
+				parseInt( '4169E1', 16 ), 'ROYALBLUE',
+				parseInt( '1E90FF', 16 ), 'DODGERBLUE',
+				parseInt( '87CEEB', 16 ), 'SKYBLUE',
+				parseInt( '4682B4', 16 ), 'STEELBLUE',
+				parseInt( 'ADD8E6', 16 ), 'LIGHTBLUE',
+				parseInt( 'AFEEEE', 16 ), 'PALETURQUOISE',
+				parseInt( '40E0D0', 16 ), 'TURQUOISE',
+				parseInt( 'E0FFFF', 16 ), 'LIGHTCYAN',
+				parseInt( '7FFFD4', 16 ), 'AQUAMARINE',
+				parseInt( '006400', 16 ), 'DARKGREEN',
+				parseInt( '2E8B57', 16 ), 'SEAGREEN',
+				parseInt( '90EE90', 16 ), 'LIGHTGREEN',
+				parseInt( '7FFF00', 16 ), 'CHARTREUSE',
+				parseInt( 'ADFF2F', 16 ), 'GREENYELLOW',
+				parseInt( '32CD32', 16 ), 'LIMEGREEN',
+				parseInt( '9ACD32', 16 ), 'YELLOWGREEN',
+				parseInt( '6B8E23', 16 ), 'OLIVEDRAB',
+				parseInt( 'BCB76B', 16 ), 'DARKKHAKI',
+				parseInt( 'EEE8AA', 16 ), 'PALEGOLDENROD',
+				parseInt( 'FFFFE0', 16 ), 'LIGHTYELLOW',
+				parseInt( 'FFD700', 16 ), 'GOLD',
+				parseInt( 'DAA520', 16 ), 'GOLDENROD',
+				parseInt( 'B8860B', 16 ), 'DARKGOLDENROD',
+				parseInt( 'BC8F8F', 16 ), 'ROSYBROWN',
+				parseInt( 'CD5C5C', 16 ), 'INDIANRED',
+				parseInt( '8B4513', 16 ), 'SADDLEBROWN',
+				parseInt( 'A0522D', 16 ), 'SIENNA',
+				parseInt( 'CD853F', 16 ), 'PERU',
+				parseInt( 'DEB887', 16 ), 'BURLYWOOD',
+				parseInt( 'F5F5DC', 16 ), 'BEIGE',
+				parseInt( 'F5DEB3', 16 ), 'WHEAT',
+				parseInt( 'F4A460', 16 ), 'SANDYBROWN',
+				parseInt( 'D2B48C', 16 ), 'TAN',
+				parseInt( 'D2691E', 16 ), 'CHOCOLATE',
+				parseInt( 'B22222', 16 ), 'FIREBRICK',
+				parseInt( 'A52A2A', 16 ), 'BROWN',
+				parseInt( 'FA8072', 16 ), 'SALMON',
+				parseInt( 'FFA500', 16 ), 'ORANGE',
+				parseInt( 'FF7F50', 16 ), 'CORAL',
+				parseInt( 'FF6347', 16 ), 'TOMATO',
+				parseInt( 'FF69B4', 16 ), 'HOTPINK',
+				parseInt( 'FFC0CB', 16 ), 'PINK',
+				parseInt( 'FF1493', 16 ), 'DEEPPINK',
+				parseInt( 'DB7093', 16 ), 'PALEVIOLETRED',
+				parseInt( 'EE82EE', 16 ), 'VIOLET',
+				parseInt( 'DDA0DD', 16 ), 'PLUM',
+				parseInt( 'DA70D6', 16 ), 'ORCHILD',
+				parseInt( '9400D3', 16 ), 'DARKVIOLET',
+				parseInt( '8A2BE2', 16 ), 'BLUEVIOLET',
+				parseInt( '9370DB', 16 ), 'MEDIUMPURPLE',
+				parseInt( 'D8BFD8', 16 ), 'THISTLE',
+				parseInt( 'E6E6FA', 16 ), 'LAVENDER',
+				parseInt( 'FFE4E1', 16 ), 'MISTYROSE',
+				parseInt( 'FFFFF0', 16 ), 'IVORY',
+				parseInt( 'FFFACD', 16 ), 'LEMONCHIFFON'
+			];
+		for( i=list.length; i; ){
+			v    = list[ --i ];
+			name = list[ --i ];
+			ret[ name ] = v;
+		};
+		return ret;
+	})();
+	
+	var PARAMS = ( function(){
+		ret = {};
+		register( ret.percent = {},
+			'marginBottom,marginLeft,marginRight,marginTop,paddingBottom,paddingLeft,paddingRight,paddingTop,fontSize,textIndent'
+		);
+		register( ret.offset = {},
+			'height,width,bottom,left,right,top'
+		);		
+		register( ret.size = {},
+			'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth,letterSpacing'
+		);
+		register( ret.color = {},
+			'backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,color'
+		);
+		register( ret.region = {},
+			'margin,padding,borderWidth,borderColor'
+		);		
+		register( ret.special = {},
+			'clip,backgroundPosition,opacity,lineHeight,zIndex'
+		);
+		register( ret.unit = {}, 'px,cm,mm,in,pt,pc,em,%' );
+		
+		register( ret.margin = {}, 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom' );
+		register( ret.padding = {}, 'paddingBottom,paddingLeft,paddingRight,paddingTop' );
+		register( ret.borderWidth = {}, 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth' );
+		register( ret.borderColor = {}, 'borderBottomColor,borderLeftColor,borderRightColor,borderTopColor' );
+		
+		function register( obj, params ){
+			params = params.split( ',' );
+			for( var i=params.length; i; ) obj[ params[ --i ] ] = true;
+		};
+		return ret;
+	})();
+	
+	/*
+	 * 
+	 */
+	var PropertyClass = function( name, value, unit, pxPerEm ){
+		this.name    = name;
+		this.value   = value;
+		this.unit    = unit;
+		this.pxPerEm = pxPerEm; // XXpx = 1em;
+	};
+	PropertyClass.prototype = {
+		name:    '',
+		value:   0,
+		pxPerEm: 12, // 1em === ??px
+		unit:    '',
+		equal: function( prop ){
+			if( this.unit === prop.unit ){
+				return this.value === prop.value;
+			};
+			return Math.abs( this._toPx() - prop._toPx() ) < 1;
+		},
+		convert: function( prop ){
+			var u = prop.unit, v;
+			if( this.unit === u ) return;
+			this.value = v = this._toPx();
+			this.unit  = u;
+			if( u !== px ){
+				this.value = u === 'em' ? v / this.pxPerEm : Util.pxTo( v, u );
+			};
+		},
+		setValue: function( v ){
+			this.value = v;
+		},
+		getValue: function(){
+			return this.value;
+		},
+		getOffset: function( prop ){
+			return prop.value - this.value;
+		},
+		getUnit: function(){
+			return this.unit;
+		},
+		getValueText: function(){
+			return this.value === 0 ? '0' : this.value + this.unit;
+		},
+		clear: function(){
+			var t = this, p;
+			for( p in t ){
+				if( t.hasOwnProperty && !t.hasOwnProperty( p ) ) continue;
+				delete t[ p ];
+			};
+		},
+		_toPx: function(){
+			var v = this.value, u = this.unit;
+			if( u === px )   return v;
+			if( u === 'em' ) return v * this.pxPerEm;
+			if( u === '' && this.name === 'lineHeight' ) return v * this.pxPerEm;
+			return Util.toPx( v, u );
+		},
+		isValid: function( t ){
+			t = t || this;
+			var n = t.name,
+				v = t.value,
+				u = t.unit,
+				z = u !== '' ? true : v === 0;
+			if( PARAMS.percent[ n ] === true ) return z;
+			if( PARAMS.offset[ n ] === true  ) return z;
+			if( PARAMS.size[ n ] === true  )   return z && u !== '%';
+			if( PARAMS.special[ n ] === true  ){
+				if( n === 'lineHeight' ) return true;
+				if( n === 'opacity' )    return 0 <= v && v <= 1 && u === '';
+				if( n === 'zIndex'  )    return u === '';
+			};
+			return false;
+		}
+	};
+	
+	/**
+	 * backgroundPosition, clip
+	 */
+	var PropertyGroupClass = function( name ){
+		this.name  = name;
+		this.props = [];
+		for( var i = 1, l = arguments.length; i<l; ++i ){
+			this.props.push( arguments[ i ] );
+		};
+	};
+	
+	/**
+	 * margin, padding, borderWidth, borderColor
+	 */
+	var FrexiblePropertyClass = function( name ){
+		this.name  = name;
+		this.props = [];
+		for( var i = 1, l = arguments.length; i<l; ++i ){
+			this.props.push( arguments[ i ] );
+		};
+		// top, bottom, left, right, topbottom, leftright, all
+	};
+	FrexiblePropertyClass.prototype = PropertyGroupClass.prototype = {
+		name:    '',
+		equal: function( prop ){
+			var ps = this.props, i = ps.length;
+			for( ; i; ){
+				--i;
+				if( ps[ i ].equal( prop[ i ] ) === false ) return false;
+			};
+			return true;
+		},
+		convert: function( prop ){
+			var ps = this.props, i = ps.length;
+			for( ; i; ){
+				--i;
+				ps[ i ].convert( prop[ i ] );
+			};
+		},
+		setValue: function( ary ){
+			var ps = this.props, i = 0, l = ps.length;
+			for( ; i<l; ++i ){
+				ps[ i ].setValue( ary[ i ] );
+			};
+		},
+		getValue: function(){
+			var ret = [], ps = this.props, i = 0, l = ps.length;
+			for( ; i<l; ++i ){
+				ret.push( ps[ i ].getValue() );
+			};
+			return ret;
+		},
+		getOffset: function( prop ){
+			var ret = [],
+				ps  = this.props,
+				_ps = prop.props,
+				i   = 0,
+				l = ps.length;
+			for( ; i<l; ++i ){
+				ret.push( ps[ i ].getOffset( _ps[ i ] ) );
+			};
+			return ret;
+		},
+		getUnit: function(){
+			var ret = [], ps = this.props, i = 0, l = ps.length;
+			for( ; i<l; ++i ){
+				ret.push( ps[ i ].getUnit() );
+			};
+			return ret;
+		},
+		getValueText: function(){
+			var ret = [], ps = this.props, i = 0, l = ps.length;
+			for( ; i<l; ++i ){
+				ret.push( ps[ i ].getValueText() );
+			};			
+			if( this.name === 'clip' ){
+				return 'rect(' + ret.join( CLIP_SEPARATOR ) + ')';
+			};
+			return ret.join( ' ' );
+		},
+		clear: function(){
+			var ps = this.props, i = ps.length;
+			for( ; i; ){
+				ps[ --i ].clear();
+			};
+			delete this.name;
+			delete this.props;
+		},
+		isValid: function( t ){
+			t = t || this;
+			var ps = t.props, i = ps.length;
+			for( ; i; ){
+				--i;
+				if( ps[ i ].isValid() === false ) return false;
+			};
+			return true;
+		}
+	};
+
+	var ColorPropertyClass = function( name, r, g, b, pct ){
+		this.name = name;
+		this.r    = r;
+		this.g    = g;
+		this.b    = b;
+		this.pct  = pct;
+	};
+	ColorPropertyClass.prototype = {
+		name:    '',
+		equal: function( prop ){
+			if( this.pct === prop.pct ){
+				return this.r === prop.r && this.g === prop.g && this.b === prop.b;
+			};
+			var rgb  = this._toPct(),
+				_rgb = prop._toPct();
+			for( var i = rgb.length; i; ){
+				--i;
+				if( Math.abs( rgb[ i ] - _rgb[ i ] ) > 1 ) return false;
+			};
+			return true;
+		},
+		convert: function( prop ){
+			var u = prop.pct;
+			if( this.pct === u ) return;
+			var x    = u === true ? 100 / 255 : 2.55;
+			this.r  *= x;
+			this.g  *= x;
+			this.b  *= x;
+			this.pct = u;
+		},
+		setValue: function( rgb ){
+			this.r = rgb[ 0 ];
+			this.g = rgb[ 1 ];
+			this.b = rgb[ 2 ];
+		},
+		getValue: function(){
+			return [ this.r, this.g, this.b ];
+		},
+		getOffset: function( prop ){
+			return [ prop.r - this.r, prop.g - this.g, prop.b - this.b ];
+		},
+		getUnit: function(){
+			return this.pct === true ? '%' : '';
+		},
+		getValueText: function(){
+			if( this.pct === true ){
+				return [ 'rgb(', this.r, '%,', this.g, '%,', this.b, '%)' ].join( '' );
+			};
+			var round = Math.round;
+			//return [ 'rgb(', round( this.r ), ',', round( this.g ), ',', round( this.b ), ')' ].join( '' );
+			
+			var rgb   = '00000' + ( ( round( this.r ) << 16 ) + ( round( this.g ) << 8 ) + round( this.b ) ).toString( 16 );
+			return '#' + rgb.substr( rgb.length - 6 );
+		},
+		clear: function(){
+			var t = this, p;
+			for( p in t ){
+				if( t.hasOwnProperty && !t.hasOwnProperty( p ) ) continue;
+				delete t[ p ];
+			};
+		},
+		_toPct: function(){
+			if( this.pct === true ) return [ this.r, this.g, this.b ];
+			return [ this.r / 2.55, this.g / 2.55, this.b / 2.55 ];
+		},
+		isValid: function( t ){
+			var isFinite = window.isFinite;
+			if( !isFinite( this.r ) || !isFinite( this.g ) || !isFinite( this.b ) ) return false;
+			if( 0 > this.r || 0 > this.g || 0 > this.b ) return false;
+			if( this.pct === true ){
+				return this.r <= 100 && this.g <= 100 && this.b <= 100;
+			};
+			return this.r <= 255 && this.g <= 255 && this.b <= 255;
+		}
+	};
+	
+	var isString       = Type.isString,
+		isNumber       = Type.isNumber;
+	var REG_UINIT      = /.*\d(\w{1,2})?/,
+		$1             = '$1',
+		px             = 'px',
+		REG_XXXXXX     = /^#[\da-fA-F]{6}?/,
+		REG_XXX        = /^#[\da-fA-F]{3}?/;
+	
+	var WrappedStyleClass = function( elm, style, pxPerEm ){
+		this.elm     = elm;
+		this.style   = style;
+		this.pxPerEm = this.get( 'fontSize' )._toPx();
+	};
+
+	WrappedStyleClass.prototype = {
+		get: function( p ){
+			if( PARAMS.special[ p ] === true || PARAMS.region[ p ] === true ){
+				if( p === 'clip' )        return this.getClip();
+				if( p === 'margin' )      return this.getMarginPaddingBorder( p );
+				if( p === 'padding' )     return this.getMarginPaddingBorder( p );
+				if( p === 'borderWidth' ) return this.getMarginPaddingBorder( 'border', 'Width' );
+				if( p === 'borderColor' ) return this.getBorderColor( 'borderColor' );
+				if( p === 'backgroundPosition' ) return this.getBackgroundPosition( p );
+				// opacity, zindex, lineHeight
+				return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x ), this.pxPerEm );
+			};
+			var x = this.style[ p ], e, v, u;
+			if( PARAMS.offset[ p ] === true ){
+				return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x, p ), this.pxPerEm );
+				/*
+				e = this.elm;
+				if( p === 'width'  ) v = e.offsetWidth;
+				if( p === 'height' ) v = e.offsetHeight;
+				if( p === 'top'    ) v = e.offsetTop;
+				if( p === 'bottom' ) v = e.offsetBottom;
+				if( p === 'left'   ) v = e.offsetLeft;
+				if( p === 'right'  ) v = e.offsetRight;
+				u = this.getUnit( x, p );
+				// alert( p + this.pxTo( v, u ) + u )
+				return new PropertyClass( p, this.pxTo( v, u ), u, this.pxPerEm ); */
+			};
+			if( p === 'fontSize' ){ // xx-small 等
+				v = Util.absoluteFontSizeToPx( x );
+				if( v !== 0 ){
+					return new PropertyClass( p, v, px, this.pxPerEm );
+				};
+			};			
+			if( PARAMS.percent[ p ] === true ){
+				// alert( p + ' , ' + x + ' , ' + this.getUnit( x, p ) )
+				return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x, p ), this.pxPerEm );
+			};
+			if( PARAMS.size[ p ] === true ){
+				return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x, p ), this.pxPerEm );
+			};
+			if( PARAMS.color[ p ] === true ){
+				return this.getColor( x, p );
+			};
+		},
+		pxTo: function( px, unit ){
+			if( unit === 'em' ) return px / this.pxPerEm;
+			return Util.pxTo( px, unit );
+		},
+		getValue: function( x, p ){
+			if( isString( x ) === true ){
+				return parseInt( x );
+			} else
+			if( isNumber( x ) === true ){
+				return x;
+			};
+			return 0;
+		},
+		getUnit: function( x, p ){
+			var u;
+			if( isString( x ) === true ){
+				u = x.replace( REG_UINIT, $1 );
+				if( p === 'lineHeight' ) return u;
+				if( PARAMS.unit[ u ] !== true ) return px;
+				return u;
+			};
+			return px;
+		},
+		getColor: function( x, p ){
+			var rgb = COLOR[ x.toUpperCase() ],
+				pct = false,
+				r   = 0,
+				g   = 0,
+				b   = 0;
+			if( isNumber( rgb ) === true ){
+				r = ( rgb & 0xff0000 ) >> 16;
+				g = ( rgb & 0xff00 ) >> 8;
+				b = ( rgb & 0xff );
+			} else
+			if( x.match( REG_XXXXXX ) ){
+				r = parseInt( x.charAt( 1 ) + x.charAt( 2 ), 16 );
+				g = parseInt( x.charAt( 3 ) + x.charAt( 4 ), 16 );
+				b = parseInt( x.charAt( 5 ) + x.charAt( 6 ), 16 );
+				//alert( x + ' g: ' + g )
+			} else			
+			if( x.match( REG_XXX ) ){
+				r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
+				g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );
+				b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );
+			} else
+			if( x.indexOf( 'rgb(' ) === 0 ){
+				rgb = x.substr( 4 ).split( ',' );
+				r = parseFloat( rgb[ 0 ] );
+				g = parseFloat( rgb[ 1 ] );
+				b = parseFloat( rgb[ 2 ] );
+				if( x.indexOf( '%' ) !== -1 ){
+					pct = true;
+				};
+			} else {
+				r = 255;
+				g = 255;
+				b = 255;
+			};
+			return new ColorPropertyClass( p, r, g, b, pct );
+		},
+		getClip: function( name ){
+			// rect(...)	クリップします。<top>, <bottom> は上端からの、 <right>, <left> は左端からのオフセットで指定します。Internet Explorer 4～7 では、カンマの代わりにスペースで区切る必要があります。
+			// position:absolute または position:fixed を適用した要素に対してのみ有効です。
+			var top    = this.get( name + 'Top' ),
+				right  = this.get( name + 'Right' ),
+				bottom = this.get( name + 'Bottom' ),
+				left   = this.get( name + 'Left' ),
+				ret    = new PropertyGroupClass( name, top, right, bottom, left );
+			if( ret.isValid() === true ) return ret;
+			ret.clear();
+			all    = this.style[ name ].split( '(' )[ 1 ].split( ')' )[ 0 ].split( CLIP_SEPARATOR );
+			return new PropertyGroupClass( name,
+				new PropertyClass( name + 'Top',    all[ 0 ], px, this.pxPerEm ),
+				new PropertyClass( name + 'Right',  all[ 1 ], px, this.pxPerEm ),
+				new PropertyClass( name + 'Bottom', all[ 2 ], px, this.pxPerEm ),
+				new PropertyClass( name + 'Left',   all[ 3 ], px, this.pxPerEm )
+			);
+		},
+		getBackgroundPosition: function( name ){
+			var x   = this.get( name + 'X' ),
+				y   = this.get( name + 'Y' ),
+				ret = new PropertyGroupClass( name, x, y ),
+				xy;
+			if( ret.isValid() === true ) return ret;
+			ret.clear();
+			xy  = this.style[ name ].split( ' ' );
+			return new PropertyGroupClass( name,
+				new PropertyClass( name + 'X', this.getValue( xy[ 0 ] ), this.getUnit( xy[ 0 ] ), this.pxPerEm ),
+				new PropertyClass( name + 'Y', this.getValue( xy[ 1 ] ), this.getUnit( xy[ 1 ] ), this.pxPerEm )
+			);
+		},
+		getMarginPaddingBorder: function( name, widthOrColor ){
+			widthOrColor = widthOrColor || '';
+			var _class = PropertyClass;
+				top    = this.get( name + 'Top' + widthOrColor ),
+				right  = this.get( name + 'Right' + widthOrColor ),
+				bottom = this.get( name + 'Bottom' + widthOrColor ),
+				left   = this.get( name + 'Left' + widthOrColor ),
+				ret    = new FrexiblePropertyClass( name, top, right, bottom, left ),
+				all, x, v, u;
+			
+			if( ret.isValid() === true ) return ret;
+			ret.clear();
+			all = this.style[ name + widthOrColor ].split( ' ' );
+			
+			for( var i=0, l=all.length; i<l; ++i ){
+				x = all[ i ];
+				v = this.getValue( x );
+				u = this.getUnit( x );
+				if( l === 4 ){
+					if( i === 0 ) top    = new _class( name + 'Top' +    widthOrColor, v, u, this.pxPerEm );
+					if( i === 1 ) right  = new _class( name + 'Right' +  widthOrColor, v, u, this.pxPerEm );
+					if( i === 2 ) bottom = new _class( name + 'Bottom' + widthOrColor, v, u, this.pxPerEm );
+					if( i === 3 ) left   = new _class( name + 'Left' +   widthOrColor, v, u, this.pxPerEm );
+				} else
+				if( l === 3 ){
+					if( i === 0 ) top    = new _class( name + 'Top' + widthOrColor, v, u, this.pxPerEm );
+					if( i === 1 ){
+						right  = new _class( name + 'Right' + widthOrColor, v, u, this.pxPerEm );
+						left   = new _class( name + 'Left'  + widthOrColor, v, u, this.pxPerEm );
+					} else
+					if( i === 2 ) bottom = new _class( name + 'Bottom' + widthOrColor , v, u, this.pxPerEm );
+				} else
+				if( l === 2 ){
+					if( i === 0 ){
+						top    = new _class( name + 'Top'    + widthOrColor, v, u, this.pxPerEm );
+						bottom = new _class( name + 'Bottom' + widthOrColor, v, u, this.pxPerEm );
+					} else
+					if( i === 1 ){
+						right  = new _class( name + 'Right' + widthOrColor, v, u, this.pxPerEm );
+						left   = new _class( name + 'Left'  + widthOrColor, v, u, this.pxPerEm );
+					};
+				} else
+				if( l === 1 ){
+					top    = new _class( name + 'Top'    + widthOrColor, v, u, this.pxPerEm );
+					bottom = new _class( name + 'Bottom' + widthOrColor, v, u, this.pxPerEm );
+					right  = new _class( name + 'Right'  + widthOrColor, v, u, this.pxPerEm );
+					left   = new _class( name + 'Left'   + widthOrColor, v, u, this.pxPerEm );
+				};
+			};
+			return new FrexiblePropertyClass( name, top, right, bottom, left );
+		},
+		getBorderColor: function( name ){
+			var getColor = this.getColor;
+				top      = this.get( name + 'TopColor' ),
+				right    = this.get( name + 'RightColor' ),
+				bottom   = this.get( name + 'BottomColor' ),
+				left     = this.get( name + 'LeftColor' ),
+				ret      = new FrexiblePropertyClass( name, top, right, bottom, left ),
+				all, x;
+			
+			if( ret.isValid() === true ) return ret;
+			ret.clear();
+			all = this.style[ name ].split( ' ' );
+			
+			for( var i=0, l=all.length; i<l; ++i ){
+				x = all[ i ];
+				if( l === 4 ){
+					if( i === 0 ) top    = getColor( x, name + 'Top' );
+					if( i === 1 ) right  = getColor( x, name + 'Right' );
+					if( i === 2 ) bottom = getColor( x, name + 'Bottom' );
+					if( i === 3 ) left   = getColor( x, name + 'Left' );
+				} else
+				if( l === 3 ){
+					if( i === 0 ) top    = getColor( x, name + 'Top' );
+					if( i === 1 ){
+						right  = getColor( x, name + 'Right' );
+						left   = getColor( x, name + 'Left' );
+					} else
+					if( i === 2 ) bottom = getColor( x, name + 'Bottom' );
+				} else
+				if( l === 2 ){
+					if( i === 0 ){
+						top    = getColor( x, name + 'Top' );
+						bottom = getColor( x, name + 'Bottom' );
+					} else
+					if( i === 1 ){
+						right  = getColor( x, name + 'Right' );
+						left   = getColor( x, name + 'Left' );
+					};
+				} else
+				if( l === 1 ){
+					top    = getColor( x, name + 'Top' );
+					bottom = getColor( x, name + 'Bottom' );
+					right  = getColor( x, name + 'Right' );
+					left   = getColor( x, name + 'Left' );
+				};
+			};
+			return new FrexiblePropertyClass( name, top, right, bottom, left );
+		},
+		clear: function(){
+			var t = this, p;
+			for( p in t ){
+				if( t.hasOwnProperty && !t.hasOwnProperty( p ) ) continue;
+				delete t[ p ];
+			};
 		}
-	})();
-
+	};
+	function camelizeHash( obj ){
+		var p, _p;
+		for( p in obj ){
+			_p = Util.camelize( p );
+			if( _p === p ) continue;
+			obj[ _p ] = obj[ _p ] || obj[ p ];
+			delete obj[ p ];
+		};
+	};
+	
+	return {
+		getWrappedStyle: function( elm, opt_css ){
+			opt_css && camelizeHash( opt_css );
+			return new WrappedStyleClass( elm, opt_css || CSS.getComputedStyle( elm ) );
+		},
+		getInlineStyle: function( _elm ){
+			return cssToObject( _elm.style.cssText );
+		},
+		getComputedStyle: function( elm ){
+			/* if( window.getComputedStyle ){
+		        CSS.getComputedStyle = function( elm ){
+		        	return cssToObject( window.getComputedStyle( elm, '' ) );
+		        };
+		  	} else */
+		    if( document.defaultView && document.defaultView.getComputedStyle ){
+		        CSS.getComputedStyle = function( elm ){
+		        	var obj = document.defaultView.getComputedStyle( elm, '' );
+		        	return cssToObject( obj.cssText || obj );
+		        };
+		    } else {
+		        CSS.getComputedStyle = function( elm ){
+		        	return cssToObject( elm.currentStyle );
+		        };
+		    };
+		    return CSS.getComputedStyle( elm );
+		},
+		toCssText: function( _css ){
+			var ret = [], v;
+			for( var p in _css ){
+				if( PARAMS.margin[ p ] === true && _css.margin ) continue;
+				if( PARAMS.padding[ p ] === true && _css.padding ) continue;
+				if( PARAMS.borderWidth[ p ] === true && _css.borderWidth ) continue;
+				if( PARAMS.borderColor[ p ] === true && _css.borderColor ) continue;
+				v = _css[ p ];
+				v && ret.push( [ Util.uncamelize( p ), v ].join( ':' ) );
+			};
+			return ret.join( ';' );
+		}
+	};
+	
+})( window, document );
 
 
 /* ----------------------------------------------------
@@ -585,7 +1452,7 @@
  * 
  */	
 
-( function( window, undefined ){
+( function( window, document, undefined ){
 	
 	var doc            = window.document;
 	var body           = doc.getElementsByTagName( 'body' )[ 0 ]; //( doc.compatMode || '' ) !== 'CSS1Compat' ? doc.body : doc.documentElement;// 
@@ -1436,31 +2303,31 @@ var File = ( function(){
 			var _data = FILE_CONTROLER.getFileData( _file ),
 				_type = _data.type,
 				_className = '';
-			if( _type === Const.FILE.TYPE.FOLDER){
+			if( _type === Const.FILE.TYPE.FOLDER ){
 				_className = 'folder';
 			} else
-			if( _type === Const.FILE.TYPE.IMAGE){
+			if( _type === Const.FILE.TYPE.IMAGE ){
 				
 			} else
-			if( _type === Const.FILE.TYPE.TEXT){
+			if( _type === Const.FILE.TYPE.TEXT ){
 				
 			} else
-			if( _type === Const.FILE.TYPE.HTML){
+			if( _type === Const.FILE.TYPE.HTML ){
 				
 			} else
-			if( _type === Const.FILE.TYPE.CSV){
+			if( _type === Const.FILE.TYPE.CSV ){
 				
 			} else
-			if( _type === Const.FILE.TYPE.JSON){
+			if( _type === Const.FILE.TYPE.JSON ){
 				
 			} else
-			if( _type === Const.FILE.TYPE.XML){
+			if( _type === Const.FILE.TYPE.XML ){
 				
-			}
+			};
 			return {
 				image:		null,
 				className:	' file-type-' + _className
-			}
+			};
 		};
 		this.getSummary = function( _file ){
 			var _data = FILE_CONTROLER.getFileData( _file ),
@@ -1516,7 +2383,6 @@ var File = ( function(){
 				}
 				for( var key in src ){
 					if( Util.getIndex( protects, key ) === -1 ){
-						//alert( key )
 						ret[ key ] = clone( src[ key ]);
 					}
 				}
@@ -1668,6 +2534,7 @@ var AbstractApplication = function( displayName, appClass, isOverlay ){
 	this.init = function(){
 		phase = 1;
 		self  = this;
+		appClass === Page.appClass && Page.show();
 		self.onInit();
 		phase = 2;
 	};
@@ -1737,6 +2604,9 @@ var AbstractApplication = function( displayName, appClass, isOverlay ){
 		self.rootElement = null;
 		
 		Application.shutdown( self, isOverlay );
+		
+		appClass === Page.appClass && Page.hide();
+		
 		self = appClass = uiList = null;
 		
 		phase = 6;
@@ -1756,6 +2626,9 @@ var AbstractApplication = function( displayName, appClass, isOverlay ){
 		_class.prototype = new AbstractBasicPane();
 		return new _class( _options );
 	};
+	this.createDHTML = function( _elm ){
+		return DHTML.create( self, _elm );
+	};
 	this.fetchCSS = function( _url, opt_onload, opt_onerror ){
 		if( phase === 1 ){
 			++fetchResource;
@@ -2034,33 +2907,34 @@ var Application = ( function(){
 	})();
 
 	var Page = ( function(){
-		var pageNodes = [];
-
-		var ref;
-		
-		var ignoreTagList = [ 'script', 'noscript' ];
+		var pageNodes = [],
+			appClass, ref,
+			ignoreTagList = [ 'script', 'noscript', 'style' ];
 		
 		var MemoryClass = function( node ){
-			var _nodeType = node.nodeType;
-			if( _nodeType === 1 && Util.getIndex( ignoreTagList, node.tagName.toLowerCase() ) === -1 ){
-				this.node    = node;
-				this.type    = _nodeType;
-				this.display = node.style.display;
-			} else
-			if( _nodeType === 3 ){
-				if( node.data.replace( /\s/g, '' ).length !== 0 ){
-					this.node    = node;
-					this.type    = _nodeType;
-					this.before  = pageNodes.length === 0 ? null : pageNodes[ pageNodes.length - 1 ].node;
-				} else {
-					body.removeChild( node );
-				}
-			} else {
-				// body.removeChild( node );
-				return false;
-			};
+			this.node = node;
 		};
 		MemoryClass.prototype = {
+			init: function(){
+				var node      = this.node,
+					_nodeType = node.nodeType;
+				if( _nodeType === 1 && Util.getIndex( ignoreTagList, node.tagName.toLowerCase() ) === -1 ){
+					this.type    = _nodeType;
+					this.display = node.style.display;
+				} else
+				if( _nodeType === 3 ){
+					if( node.data.replace( /\s/g, '' ).length !== 0 ){
+						this.type    = _nodeType;
+						this.before  = pageNodes.length === 0 ? null : pageNodes[ pageNodes.length - 1 ].node;
+					} else {
+						body.removeChild( node );
+						return false;
+					}
+				} else {
+					// body.removeChild( node );
+					return false;
+				};
+			},
 			show: function(){
 				if( this.type === 1 ){
 					if( this.display ){
@@ -2077,6 +2951,9 @@ var Application = ( function(){
 				};
 			},
 			hide: function(){
+				if( !this.node.parentNode ){
+					return;
+				};
 				if( this.type === 1 ){
 					this.node.style.display = 'none';
 				} else {
@@ -2091,46 +2968,50 @@ var Application = ( function(){
 					_mem;
 				for( var i = 0, l = _children.length; i<l; ++i ){
 					_mem = new MemoryClass( _children[ i ] );
-					_mem.node && pageNodes.push( _mem );
+					_mem.init() !== false && pageNodes.push( _mem );
 				};
 				if( pageNodes.length !== 0 ){
-					ref = Application.register( function(){
-						var self     = this,
-							winW     = 0,
-							winH     = 0,
-							tailList = [],
-							elmContainer, elmHeader;
-						
-						this.bgColor     = '#ffffff';
-						this.MIN_WIDTH   = 320;
-						this.MIN_HEIGHT  = 320;
-						this.onInit = function(){
-							for( var i=0, l = pageNodes.length; i < l; ++i ){
-								pageNodes[ i ].show();
-							};
-							KeyEvent.add( self, Const.KEY.EVENT.KEY_DOWN, ref.shutdown, 27 ); // 27.esc
-						};
-						this.onOpen = function( _w, _h ){
-			
-						};
-						this.onPaneResize = function( _w, _h ){
+					if( Type.isFunction( gOS.PageApplicationClass ) === true ){
+						Page.appClass = gOS.PageApplicationClass;
+						Page.appClass.bgColor    = Page.appClass.bgColor    || '#ffffff';
+						Page.appClass.MIN_WIDTH  = Page.appClass.MIN_WIDTH  || 240;
+						Page.appClass.MIN_HEIGHT = Page.appClass.MIN_HEIGHT || 240;
+					} else {
+						Page.appClass = function(){
+							var self     = this;
 							
-						};
-						this.onClose = function(){
-							for( var i=0, l = pageNodes.length; i < l; ++i ){
-								pageNodes[ i ].hide();
+							this.bgColor      = '#ffffff';
+							this.MIN_WIDTH    = 200;
+							this.MIN_HEIGHT   = 200;
+							this.onInit       = function(){};
+							this.onOpen       = function( _w, _h ){
+								KeyEvent.add( self, Const.KEY.EVENT.KEY_DOWN, ref.shutdown, 27 ); // 27.esc
 							};
+							this.onPaneResize = function( _w, _h ){};
+							this.onClose      = function(){};
 						};
-					}, false, true, doc.title, 'page', null, '#999999' );
+					};
+					ref = Application.register( Page.appClass, false, true, document.title, 'page', null, Page.appClass.tailColor || '#999999' );
 				};
 				delete Page.onReady;
 			},
+			show: function(){
+				for( var i = pageNodes.length; i; ){
+					pageNodes[ --i ].show();
+				};
+			},
+			hide: function(){
+				for( var i = pageNodes.length; i; ){
+					pageNodes[ --i ].hide();
+				};				
+			},
 			boot: function(){
 				ref && ref.boot();
 			},
 			registered: function(){
 				return !!ref;
-			}
+			},
+			appClass: null
 		}
 	})();
 
@@ -2143,7 +3024,7 @@ var Application = ( function(){
  * 
  *  clientX
  *  ウインドウ座標とは、現在のブラウザのウインドウの、ドキュメントを表示している部分の左上原点とした座標である。
- *  問題は、ウインドウは、必ずしもドキュメント全体を表示するとは限らない。スクロールと呼ばれるUIによって、ドキュメントの一部だけを表示しているかもしれない。
+ *  問題は、ウインドウは、必ずしもドキュメント全体を表示するとは限らない。スクロールと呼ばれるUIによって、ドキュメントの一部だけを表示しているかもしれない。
  */
 	var XBrowserEvent = ( function(){
 		var wrappedHandlerClass,
@@ -2178,10 +3059,10 @@ var Application = ( function(){
 				this.screenX       = e.screenX;
 				this.screenY       = e.screenY;
 				
+				this.keyCode       = e.keyCode;
 				this.altKey        = e.altKey;
 				this.ctrlKey       = e.ctrlKey;
 				this.shiftKey      = e.shiftKey;
-				this.charCode      = e.keyCode;
 				
 				this.wheelDelta    = e.wheelDelta;
 				
@@ -2364,55 +3245,61 @@ var Application = ( function(){
 	};
 
 var ReadyEvent = ( function(){
-	var timer  = null,
-		script = null,
-		ticketReady,
+	var ticketReady,
 		ticketLoad;
 
-	function detect(){
+	function webkitDetect(){
 		var state = document.readyState;
 		if( state === 'loaded' || state === 'complete' ){
-			timer && window.clearInterval( timer );
+			SystemTimer.remove( SUPER_USER_KEY, webkitDetect );
 			timer = null;
 			onReady();
-		}
-	}
+		};
+	};
 	function ieDetect(){
-		if( this.readyState === 'loaded' || this.readyState === 'complete' ){
+		if( this.readyState === 'complete' ){ // this.readyState === 'loaded' || 
 			this.onreadystatechange = new Function();
 			this.onreadystatechange = null;
-			this.parentNode.removeChild( this );
-			script = null;
+			AsyncCall.remove( SUPER_USER_KEY, ieScroll );
 			onReady();
-		}
-	}
-	
+		};
+	};
+	function ieScroll(){
+		try {
+			document.documentElement.doScroll( 'left' );
+		} catch( e ){
+			AsyncCall.add( SUPER_USER_KEY, ieScroll );
+			return;
+		};
+		// no errors, fire
+		document.onreadystatechange = new Function();
+		document.onreadystatechange = null;
+		onReady();		
+	};
+		
 	function onReady(){
+		ticketReady && ticketReady.destroy();
+		ticketLoad  && ticketLoad.destroy();
+		ticketReady = ticketLoad = null;
 		Page.onReady();
 		if( Page.registered() === true ){
 			Page.boot();
 		} else {
 			Home.boot();
-		}
-		ticketReady && ticketReady.destroy();
-		ticketLoad  && ticketLoad.destroy();
-		ticketReady = ticketLoad = null;
-	}
+		};
+	};
 	
 	// Apple WebKit (Safari, OmniWeb, ...)
 	if( doc.readyState && !!UA.WEBKIT ){
-		timer = window.setInterval( detect, 50 );
-	} else
-	if( document.readyState && UA.isIE && UA.ieVersion < 9 ){
-		document.write('<script type="text/javascript" defer="defer" id="ieDOMContentLoaded" src="' +
-			( ( window.location.protocol === 'https:' ) ? '://0' : 'javascript:void(0)' ) +
-			'"><\/script>');
-		script = document.getElementById( 'ieDOMContentLoaded' );
-		script.onreadystatechange = ieDetect;
+		SystemTimer.add( SUPER_USER_KEY, webkitDetect, 50 );
+	/* } else
+		if( document.readyState && UA.isIE && UA.ieVersion < 9 ){
+		ieScroll();
+		document.onreadystatechange = ieDetect; */
 	} else {
-		ticketReady = new EventTicketClass( doc, 'DOMContentLoaded', onReady );
-		ticketLoad  = new EventTicketClass( doc, 'load', onReady );
-	}
+		ticketReady = new EventTicketClass( document, 'DOMContentLoaded', onReady );
+		ticketLoad  = new EventTicketClass( window, 'load', onReady );
+	};
 })();
 
 
@@ -2492,7 +3379,7 @@ var ResizeEvent = ( function(){
 
 /* =====================================================
  *  MouseEvent
- * 
+ * 
  */
 	var MouseEvent = ( function(){
 		var CLICK_OFFSET   = 2 * 2;		
@@ -2727,8 +3614,8 @@ var ResizeEvent = ( function(){
  */
 var KeyEvent = ( function(){
 	var EVENT_LIST_MAP = [],
-		LOCK_UP      = [],
-		LOCK_DOWN    = [],
+		LOCK_UP        = [],
+		LOCK_DOWN      = [],
 		application    = null,
 		currentList    = null;
 
@@ -2747,12 +3634,13 @@ var KeyEvent = ( function(){
 	function onKeyChange( e ){
 		var cancel         = false,
 			type           = e.type,
-			key            = e.keyCode || e.charCode || e.which,
+			key            = e.keyCode, // || e.which,
 			shift          = Type.isBoolean( e.shiftKey ) === true ? e.shiftKey : ( e.modifiers & Event.SHIFT_MASK ),
 			ctrl           = Type.isBoolean( e.ctrlKey  ) === true ? e.ctrlKey  : ( e.modifiers & Event.CONTROL_MASK ),
 			lock           = type === 'keyup' ? LOCK_UP : LOCK_DOWN;
+			
 		// block chattering
-		if( Util.getIndex( lock, key ) !== -1 ) return false;
+		if( Util.getIndex( lock, key ) !== -1 ) return;
 		lock.push( key );
 		AsyncCall.add( SUPER_USER_KEY, unlock, [ lock, key ] );
 		
@@ -2764,7 +3652,6 @@ var KeyEvent = ( function(){
 		};
 		for( var i=currentList.length, t; t = currentList[ --i ]; ){
 			if( Type.isFunction( t[ type ] ) === true && t.keyCode === key && ( t.shift === undefined || t.shift === shift ) && ( t.ctrl === undefined || t.ctrl === ctrl )){
-				
 				AsyncCall.add( t.apiuser, t[ type ], e );
 				cancel = true;
 			};
@@ -2776,7 +3663,7 @@ var KeyEvent = ( function(){
 	
 	if( UA.isIE === true && UA.ieRenderingVersion < 9 ){
 		keyPress = function( e ){
-			var key = e.charCode;
+			var key = e.keyCode;
 			if( key === 13 || key === 27 ){
 				e.type = 'keydown';
 				return onKeyChange( e );
@@ -2869,11 +3756,12 @@ var KeyEvent = ( function(){
 		/*
 		 * currentListener
 		 *  currrentApplication ( overlay Application ) or
-		 *  superuser ( UI )
+		 *  superuser ( UI )
 		 */
 		updateCurrentListener: function( _apiuser ){
 			application = _apiuser;
-			currentList = EVENT_LIST_MAP[ _apiuser.getUID() ] || [];
+			var _uid    = _apiuser.getUID();
+			currentList = EVENT_LIST_MAP[ _uid ] || ( EVENT_LIST_MAP[ _uid ] = [] );
 			
 			var _ticket,
 				_down = false,
@@ -2884,7 +3772,7 @@ var KeyEvent = ( function(){
 				if( _down && _up ) break;
 			}
 			if( _down === true ){
-				keydownTicket = new EventTicketClass( doc, 'keydown', onKeyChange );
+				keydownTicket = new EventTicketClass( document, 'keydown', onKeyChange );
 				keypressTicket = keyPress !== null ? new EventTicketClass( doc, 'keypress', keyPress ) : null;
 			} else {
 				keydownTicket && keydownTicket.destroy();
@@ -2892,14 +3780,14 @@ var KeyEvent = ( function(){
 				keydownTicket = keypressTicket = null;
 			}
 			if( _up === true ){
-				keyupTicket   = new EventTicketClass( doc, 'keyup', onKeyChange );
+				keyupTicket   = new EventTicketClass( document, 'keyup', onKeyChange );
 			} else {
 				keyupTicket && keyupTicket.destroy();
 				keyupTicket = null;
 			}
 			
 			if( _down === true || _up === true ){
-				focusTicket   = new EventTicketClass( doc, 'mouseenter', window.focus );
+				focusTicket   = new EventTicketClass( document, 'mouseenter', window.focus );
 			} else {
 				focusTicket && focusTicket.destroy();
 				focusTicket = null;
@@ -2916,7 +3804,7 @@ var KeyEvent = ( function(){
 
 /**
  * 
- * http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof
+ * http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof
  */
 
 var Css = ( function(){
@@ -3081,7 +3969,7 @@ var Css = ( function(){
 
 
 /* ----------------------------------------
- * 
+ * 
  */
 
 var Overlay = ( function(){
@@ -3201,6 +4089,7 @@ var UI = ( function(){
 		windowH     = 0;
 
 	var CLASSNAME_COMBOBOX_OPTION = 'combobox-option',
+		CLASSNAME_COMBOBOX_OPTION_CURRENT = CLASSNAME_COMBOBOX_OPTION + ' combobox-option-current',
 		ELM_A_ORIGIN = ( function(){
 			var ret = document.createElement( 'a' );
 			ret.href = '#';
@@ -3252,8 +4141,8 @@ var UI = ( function(){
 			focus = true;
 			start( apiuser, uiGroup, instance );
 			elmA.style.display = 'none';
-			elmValue.appendChild( ELM_INPUT_TEXT );
 			
+			elmValue.appendChild( ELM_INPUT_TEXT );
 			ELM_INPUT_TEXT.value = value;
 			ELM_INPUT_TEXT.focus();
 			ELM_INPUT_TEXT.select();
@@ -3291,6 +4180,7 @@ var UI = ( function(){
 				elmValue.removeChild( ELM_INPUT_TEXT );
 			}
 			MouseEvent.remove( apiuser, elmWrapper );
+			
 			apiuser = uiGroup = elmWrapper = elmValue = elmA = onUpdate = validater = instance = null;
 		};
 		instance.value( value );
@@ -3341,52 +4231,6 @@ var UI = ( function(){
 		};
 	};
 
-	var FileInputClass = function( apiuser, uiGroup, elmWrapper, onUpdate, validater, elmFileInput ){
-		var elmFilePath = Util.getElementsByClassName( elmWrapper, 'file-path' )[ 0 ],
-			focus       = false,
-			visible     = true,
-			enabled     = true,
-			index       = GROUP_ID ? itemList[ GROUP_ID ].length : -1,
-			value,
-			instance;
-		elmFileInput = elmWrapper.getElementsByTagName('input')[0] || elmFileInput || document.createElement( 'input');
-		elmFileInput.type = 'file';
-		elmFileInput.style.visivility = 'hidden';
-
-		elmWrapper.onclick = onClick;
-		elmFileInput.onchange = onChange;
-		
-		function onChange(){
-			elmFilePath.innerHTML = elmFileInput.value;
-		}
-		return {
-			init: function(){
-				instance = this;
-				delete this.init;
-			},
-			focus: function( e ){
-				focus = true;
-				start( apiuser, uiGroup, instance );
-				elmFileInput.click();
-				return false;
-			},
-			blur: function( keep ){
-				focus = false;
-			},
-			enabled: function(){
-				return enabled;
-			},
-			visible: function( _visible ){
-				if( Type.isBoolean( _visible ) === true ){
-					elmWrapper.style.display = _visible ? '' : 'none';
-					visible = _visible;
-				};
-				return visible;
-			},
-			index : index
-		}
-	}
-
 	var ComboBoxClass = function( apiuser, uiGroup, elmWrapper, onUpdate ){
 		var elmBox     = Util.getElementsByClassName( elmWrapper, 'combobox' )[ 0 ],
 			elmA       = ELM_COMBOBOX.cloneNode( true ),
@@ -3450,26 +4294,24 @@ var UI = ( function(){
 		};
 		this.createOption = function( _displayValue, _value, _isSelected ){
 			var option = null,
-				_option,
-				_index;
-			_value = _value || _displayValue;
-			for( var i = 0, l = optionList.length; i < l; ++i ){
-				_option = optionList[ i ];
+				_option, i;
+			_value      = _value || _displayValue;
+			_isSelected = !!_isSelected;
+			for( i = optionList.length; i; ){
+				_option = optionList[ --i ];
 				if( _value === _option.value ){
 					option = _option;
-					_index = i;
-				} else {
-					_option.current = _option.value === _value;
-				}
-			}
-			if( option === null ){
-				option = new OptionClass( instance, _displayValue, _value, _isSelected );
-				_index = optionList.length;
-				optionList.push( option );
-			}
+					break;
+				};
+			};
 			if( _isSelected === true ){
+				index = optionList.length;
 				elmValue.data = _displayValue;
-			}
+			};			
+			if( option === null ){
+				option = new OptionDataClass( _displayValue, _value, _isSelected );
+				optionList.push( option );
+			};
 		};
 		this.destroy = function(){
 			instance.blur();
@@ -3479,9 +4321,9 @@ var UI = ( function(){
 		};
 		MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );
 	};
-	var OptionClass = function( combobox, displayValue, value, isCurrent ){
+	var OptionDataClass = function( displayValue, value, isCurrent ){
 		this.displayValue = displayValue;
-		this.value        = value = value || displayValue;
+		this.value        = value || displayValue;
 		this.current      = isCurrent;
 		displayValue = value = null;
 	};
@@ -3499,27 +4341,31 @@ var UI = ( function(){
 				return ret;
 			})();
 
-		var OptionClass = function( apiuser, option ){
-			this.elm  = ELM_OPTION_ORIGIN.cloneNode( true );
-			this.data = option;
-			this.current = function( _current ){
-				this.elm.className = CLASSNAME_COMBOBOX_OPTION;
-				option.current = _current;
-				currentOption  = this;
-			};
-			this.destroy = function(){
-				MouseEvent.remove( apiuser, this.elm );
-				apiuser = option = null;
+		var OptionClass = function( option ){
+			this.elm     = ELM_OPTION_ORIGIN.cloneNode( true );
+			this.data    = option;
+			this.init();
+		};
+		OptionClass.prototype = {
+			init: function(){
+				ELM_OPTION_WRAPPER.appendChild( this.elm );
+				this.elm.firstChild.data = this.data.displayValue;
+				this.current( this.data.current );
+				MouseEvent.add( SUPER_USER_KEY, this.elm, 'mousedown', onOptionSelect );// onclick では 選択ボックス 隠すように body に設定した onmouseup が先に動いてしまう！
+			},
+			current: function( _current ){
+				this.elm.className = _current === true ? CLASSNAME_COMBOBOX_OPTION_CURRENT : CLASSNAME_COMBOBOX_OPTION;
+				this.data.current  = _current;
+				currentOption      = _current === true ? this : currentOption;
+			},
+			destroy: function(){
+				MouseEvent.remove( SUPER_USER_KEY, this.elm );
+				Util.removeAllChildren( this.elm );
 				ELM_OPTION_WRAPPER.removeChild( this.elm );
 				delete this.elm;
 				delete this.data;
-			};
-			
-			ELM_OPTION_WRAPPER.appendChild( this.elm );
-			this.elm.firstChild.data = option.displayValue;
-			this.current( option.current );
-			MouseEvent.add( SUPER_USER_KEY, this.elm, 'mousedown', onOptionSelect );// onclick では 選択ボックス 隠すように body に設定した onmouseup が先に動いてしまう！
-		}
+			}
+		};
 		
 		function onOptionSelect( e ){
 			for( var i = 0, l = OPTION_LIST.length, _option; i < l; ++i){
@@ -3530,7 +4376,7 @@ var UI = ( function(){
 					break;
 				};
 			};
-			return false;			
+			return false;
 		};
 		
 		var OPTION_LIST     = [],
@@ -3570,7 +4416,7 @@ var UI = ( function(){
 		};
 		function change( e ){
 			var l   = OPTION_LIST.length,
-				i   = currentIndex + e.keyCode === 40 ? 1 : -1;
+				i   = currentIndex + ( e.keyCode === 40 ? -1 : 1 );
 			if( currentCombobox === null || l < 2 ) return;
 			i = i < 0 ?
 					l - 1 :
@@ -3588,9 +4434,9 @@ var UI = ( function(){
 				elm             = _combobox.elm;
 				
 				for( var i = 0, l = _optionList.length; i<l; ++i ){
-					OPTION_LIST.unshift( new OptionClass( _apiuser, _optionList[ i ] ) );
+					OPTION_LIST.unshift( new OptionClass( _optionList[ i ] ) );
 				};
-				MouseEvent.add( SUPER_USER_KEY, doc, 'mouseup', bodyMouseupHandler );
+				MouseEvent.add( SUPER_USER_KEY, document, 'mouseup', bodyMouseupHandler );
 				KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change, 38 );
 				KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change, 40 );
 				//KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onEnter, 13 );
@@ -3600,6 +4446,8 @@ var UI = ( function(){
 				
 				updateCurrrentOption( _combobox.value(), false );
 				updateWrapperPosition();
+				
+				SystemTimer.add( SUPER_USER_KEY, updateWrapperPosition, 500 );
 			},
 			hide: function( _combobox ){
 				if( currentCombobox !== _combobox || currentCombobox === null ) return;
@@ -3617,6 +4465,8 @@ var UI = ( function(){
 				//KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onEnter );
 				//KeyEvent.updateCurrentListener( apiuser );
 				
+				SystemTimer.remove( SUPER_USER_KEY, updateWrapperPosition, 500 );
+				
 				apiuser         = null;
 				currentCombobox = null;
 				currentOption   = null;
@@ -3641,10 +4491,10 @@ var UI = ( function(){
 	var UIGroupClass = function( apiuser ){
 		var self        = this,
 			itemList    = [],
-			currentItem = null,
 			windowW, windowH;
 
 		this.focus = function( _value ){
+			/*
 			if( _value === true ){
 				if( currentItem ){
 					start( apiuser, self, currentItem );
@@ -3656,8 +4506,9 @@ var UI = ( function(){
 			if( _value === false ){
 				finish( apiuser, self, currentItem );
 			} else
+			*/
 			if( _value && Util.getIndex( itemList, _value ) !== -1 ){
-				currentItem = _value;
+				// currentItem = _value;
 				currentList = itemList;
 			};
 			return currentUi === self; 
@@ -3704,28 +4555,35 @@ var UI = ( function(){
 			var _item;
 			while( _item = itemList.shift() ){
 				_item.destroy();
-			}
+			};
+			if( currentUi === this ){
+				currentItem = null;
+				currentUi   = null;
+				currentUser = null;
+				currentList = null;
+			};
+			apiuser = self = null;
 		};
 	};
 	
 	function start( _apiuser, _uigroup, _item ){
 		if( currentItem !== _item ){
+			currentUi !== _uigroup && currentUi && currentUi.blur();
+			
 			currentItem !== null && currentItem.blur();
 			
-			if( currentUser !== _apiuser ) {
-				KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );
-				KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 27 );
-				KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown,  9 );
-				KeyEvent.updateCurrentListener( SUPER_USER_KEY );
-			};
-			if( currentUi !== _uigroup ){
-				currentUi && currentUi.blur();
-			};
 			currentUser = _apiuser;
 			currentUi   = _uigroup;
 			currentItem = _item;
 			
 			_uigroup.focus( _item );
+			
+			// if( currentUser !== _apiuser ) {
+				KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );
+				KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 27 );
+				KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown,  9 );
+				KeyEvent.updateCurrentListener( SUPER_USER_KEY );
+			// };
 		};
 	}
 	function finish( _apiuser, _uigroup, _item ){
@@ -3735,6 +4593,7 @@ var UI = ( function(){
 			currentUser = null;
 			currentUi   = null;
 			currentItem = null;
+			currentList = null;
 			
 			KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );
 			KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 27 );
@@ -3745,7 +4604,7 @@ var UI = ( function(){
 
 	function onKeyDown( e ){
 		if( currentItem === null ) return true;
-		var keyCode = e.keyCode || e.charCode,
+		var keyCode = e.keyCode,
 			_index  = Util.getIndex( currentList, currentItem );
 		if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true ){ // 13.return 27.esc 9.tab 18.alt
 			keyCode === 9  && tabShift( _index, e.shiftKey === true ? -1 : 1 );
@@ -3844,7 +4703,7 @@ var Finder = ( function(){
 					'<a href="#" class="finder-icon-console-editor-apps"></a>',
 					'<a href="#" class="finder-icon-console-viewer-apps"></a>',
 				'</div>',
-			'</div>',
+			'</div>'
 		] ).join( '' );
 	})();
 
@@ -3861,7 +4720,7 @@ var Finder = ( function(){
 					'<div class="finder-action-switch button">action</div>',
 				'</div>',
 				'<div class="finder-body"></div>',
-			'</div>',
+			'</div>'
 		].join( '' ) ),
 		ICON_HEIGHT                     = Util.getElementSize( ELM_ORIGIN_FINDER_ICON ).height,
 		ICON_CLASSNAME                  = 'finder-icon-thumbnail',
@@ -4213,8 +5072,205 @@ var Finder = ( function(){
 })();
 
 
+/*
+ * -- len, %
+ * marginBottom, marginLeft, marginRight, marginTop, margin
+ * padding, paddingBottom, paddingLeft, paddingRight, paddingTop
+ * fontSize, textIndent
+ * height, width
+ * bottom, left, right, top			(len, %)
+ *
+ * -- len
+ * borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderWidth,
+ * letterSpacing
+ *
+ * -- color
+ * backgroundColor
+ * borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, borderColor
+ * color
+ *
+ * -- special
+ * clip			rect(0px, 40px, 40px, 0px);
+ * backgroundPosition	(len, %)
+ * opacity
+ * lineHeight		(len, %, num)
+ * zIndex			( order )
+ */
+
+var DHTML = ( function(){
+	
+	var ANIMATION_TICKET_ARRAY = [],
+		fpms                   = 50,
+		round                  = Math.round,
+		cround                 = function ( v ){ return round( v * 100 ) / 100 };
+	
+	function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames ){
+		var _ticket, i = ANIMATION_TICKET_ARRAY.length;
+		for( ; i; ){
+			_ticket = ANIMATION_TICKET_ARRAY[ --i ];
+			if( _ticket.elm === _elm ){
+				return;
+			};
+		};
+		
+		var _currentValues     = [],
+			_offsetValues      = [],
+			_endValues         = [],
+			_targetProperties  = [],
+			_units             = [];
+		var target, current,
+			inlineStyle    = CSS.getInlineStyle( _elm ),
+			currentStyle   = CSS.getWrappedStyle( _elm ),
+			targetStyle    = CSS.getWrappedStyle( _elm, _cssObject );
+			targetStyle.pxPerEm = currentStyle.get( 'fontSize' )._toPx();
+		for( var p in _cssObject ){
+			p       = Util.camelize( p );
+			target  = targetStyle.get( p );
+			current = currentStyle.get( p );
+
+			if( target.isValid() === false || current.isValid() === false || current.equal( target ) !== false ){
+				target.clear();
+				current.clear();
+				continue;
+			};
+			
+			current.convert( target );
+			// alert( current.getValue() + ' , ' + target.getValue() )
+			_currentValues.push( current.getValue() );
+			_offsetValues.push( current.getOffset( target ) );
+			_endValues.push( target.getValue() );
+			_targetProperties.push( p );
+			_units.push( target.getUnit() );
+
+			// IE has trouble with opacity if it does not have layout
+			// Force it by setting the zoom level			
+			if( p === 'opacity' && SPECIAL.hasLayout ){
+				if( SPECIAL.hasLayout( _elm ) === false ) inlineStyle.zoom = 1;
+				inlineStyle.filter = current.getValueText();
+			} else {
+				inlineStyle[ p ]   = current.getValueText();
+			};
+			
+			target.clear();
+			current.clear();
+		};
+		
+		var i, _cssTextArray = [];
+		for( i = 0; i < _numFrames; ++i ){
+			if( i < _numFrames - 1 ){
+				tickValue( _currentValues, _offsetValues, _numFrames );
+				createCssText( _currentValues, _targetProperties, targetStyle, inlineStyle, _cssTextArray );
+			} else {
+				createCssText( _endValues, _targetProperties, targetStyle, inlineStyle, _cssTextArray );
+			};
+		};
+		
+		ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(
+			_elm, _cssTextArray,
+			Type.isFunction( _onComplete ) === true   ? _onComplete   : null,
+			Type.isFunction( _onEnterFrame ) === true ? _onEnterFrame : null,
+			_numFrames
+		) );
+		
+		currentStyle.clear();
+		targetStyle.clear();		
+		SystemTimer.add( SUPER_USER_KEY, onEnterFrame, 1000 / fpms );
+	};
+	
+	function tickValue( current, offset, numFrames ){
+		if( Type.isArray( current ) === true ){
+			var ret, i = current.length;
+			for( ; i; ){
+				--i;
+				ret = tickValue( current[ i ], offset[ i ], numFrames );
+				if( Type.isNumber( ret ) === true ) current[ i ] = ret;
+			};
+		} else {
+			return current + offset / numFrames;
+		};
+	};
+	function createCssText( update, props, style, inline, cssTextArray ){
+		var prop;
+		for( var i = props.length; i; ){
+			prop = style.get( props[ --i ] );
+			prop.setValue( update[ i ] );
+			inline[ Util.uncamelize( prop.name ) ] = prop.getValueText();
+			//if( prop.name === 'backgroundColor' ) alert( prop.getValueText() + '|' + update[ i ].join( ',') )
+			prop.clear();
+		};
+		cssTextArray.push( CSS.toCssText( inline ) );
+	};
+	
+	function onEnterFrame(){
+		var _ticket, l,
+			i = 0;
+		while( i < ANIMATION_TICKET_ARRAY.length ){
+			_ticket = ANIMATION_TICKET_ARRAY[ i ];
+			l       = _ticket.cssTexts.length;
+			_ticket.elm.style.cssText = _ticket.cssTexts.shift();
+			if( l === 1 ){
+				_ticket.onComplete && _ticket.onComplete();
+				delete _ticket.elm;
+				delete _ticket.cssTexts;
+				delete _ticket.onComplete;
+				delete _ticket.onEnterFrame;
+				delete _ticket.numFrame;
+				ANIMATION_TICKET_ARRAY.splice( i, 1 );
+			} else {
+				_ticket.onEnterFrame && _ticket.onEnterFrame( l / _ticket.numFrame );
+				++i;
+			};
+		};
+		if( ANIMATION_TICKET_ARRAY.length === 0 ){
+			SystemTimer.remove( SUPER_USER_KEY, onEnterFrame );
+		};
+	};
+	
+	var AnimationTaskClass = function( elm, cssTexts, onEnterFrame, onComplete, numFrame ){
+		this.elm          = elm;
+		this.cssTexts     = cssTexts;
+		this.onEnterFrame = onEnterFrame;
+		this.onComplete   = onComplete;
+		this.numFrame     = numFrame;
+	};
+	
+	var VisualEffectClass = function( elm ){
+		var isHtmlElement;
+		
+		function registerAnime( _cssObject, _onComplete, _onEnterFrame, _time ){
+			var _numFrames = Math.floor( _time / fpms );
+			startAnimation( elm, _cssObject, _onComplete, _onEnterFrame, _numFrames );
+		};
+		function startFadeIn(){
+			
+		};
+		function startFadeOut(){
+			
+		};
+		function update( _x, _y, _w, _h ){
+			var _cssText = elm.style.cssText;
+			
+		};
+		
+		this.anime   = registerAnime;
+		this.fadeIn  = startFadeIn;
+		this.fadeOut = startFadeOut;
+		this.update  = update;
+	};
+	
+	return {
+		create: function( application, _elm ){
+			return new VisualEffectClass( _elm );
+		},
+		isInstanceOfVisualEffect: function( _instance){
+			return _instance instanceof VisualEffectClass;
+		}
+	}
+})();
+
+
 /* --------------------------------------------
- * 
+ * 
  */
 
 	Application.onCurrentApplicationChange( SUPER_USER_KEY );
@@ -4232,11 +5288,11 @@ var Finder = ( function(){
 
 
 /* ---------------------------------------------
- * broadcast to global
+ * broadcast to global
  */
 	window.gOS = {};
 	
 	gOS.registerApplication = Application.register;
 	gOS.registerDriver      = File.registerDriver;
 	
-})( window );
+})( window, document );
diff --git a/0.5.x/json/panels.json b/0.5.x/json/panels.json
index 80bb581..24fdbdc 100644
--- a/0.5.x/json/panels.json
+++ b/0.5.x/json/panels.json
@@ -1,26 +1,26 @@
 [
     {
         "author": {
-            "id": 1, 
-            "name": "no name"
+            "id": 2, 
+            "name": "Tester"
         }, 
-        "author_id": 1, 
+        "author_id": 2, 
         "border": 1, 
         "comic": {
-            "author_id": 1, 
+            "author_id": 2, 
             "created_at": "2012-01-06T07:39:55Z", 
             "editable": 0, 
             "height": 200, 
-            "id": 1, 
-            "title": "コミック作るテスト", 
+            "id": 11, 
+            "title": "コミック作るテスト  1", 
             "updated_at": "2012-01-06T07:39:55Z", 
             "visible": 0, 
             "width": 400
         },
-        "comic_id": 1, 
+        "comic_id": 11, 
         "created_at": "2012-01-06T07:40:25Z",
         "height": 200, 
-        "id": 1, 
+        "id": 101, 
         "resource_picture_id": 1, 
         "t": 1, 
         "updated_at": "2012-01-06T07:40:25Z", 
@@ -29,28 +29,24 @@
         "y": 0, 
         "z": 1
     }, 
-    {
-        "author": {
-            "id": 1, 
-            "name": "no name"
-        }, 
+    {  
         "author_id": 1, 
         "border": 1, 
         "comic": {
-            "author_id": 1, 
+            "author_id": 2, 
             "created_at": "2012-01-06T07:39:55Z", 
             "editable": 0, 
             "height": 200, 
-            "id": 1, 
-            "title": "コミック作るテスト", 
+            "id": 12, 
+            "title": "コミック作るテスト  2", 
             "updated_at": "2012-01-06T07:39:55Z", 
             "visible": 0, 
             "width": 400
-        }, 
-        "comic_id": 1, 
+        },
+        "comic_id": 12, 
         "created_at": "2012-01-10T08:23:36Z", 
         "height": 300, 
-        "id": 2, 
+        "id": 102, 
         "resource_picture_id": 1, 
         "t": 2, 
         "updated_at": "2012-01-10T08:23:36Z", 
@@ -60,27 +56,12 @@
         "z": 0
     }, 
     {
-        "author": {
-            "id": 1, 
-            "name": "Tester"
-        }, 
         "author_id": 1, 
-        "border": 1, 
-        "comic": {
-            "author_id": 1, 
-            "created_at": "2012-01-06T07:39:55Z", 
-            "editable": 0, 
-            "height": 200, 
-            "id": 1, 
-            "title": "コミック作るテスト", 
-            "updated_at": "2012-01-06T07:39:55Z", 
-            "visible": 0, 
-            "width": 400
-        }, 
-        "comic_id": 1, 
+        "border": 1,  
+        "comic_id": 11, 
         "created_at": "2012-01-10T08:25:41Z", 
         "height": 300, 
-        "id": 3, 
+        "id": 103, 
         "resource_picture_id": 1, 
         "t": 3, 
         "updated_at": "2012-01-10T08:25:41Z", 
@@ -90,27 +71,23 @@
         "z": 0
     }, 
     {
-        "author": {
-            "id": 1, 
-            "name": "Tester"
-        }, 
         "author_id": 1, 
         "border": 1, 
         "comic": {
-            "author_id": 1, 
+            "author_id": 2, 
             "created_at": "2012-01-06T07:39:55Z", 
             "editable": 0, 
             "height": 200, 
-            "id": 2, 
-            "title": "コミック作るテスト,2", 
+            "id": 13, 
+            "title": "コミック作るテスト 3", 
             "updated_at": "2012-01-06T07:39:55Z", 
             "visible": 0, 
             "width": 400
         }, 
-        "comic_id": 2, 
+        "comic_id": 13,
         "created_at": "2012-01-10T08:25:41Z", 
         "height": 300, 
-        "id": 3, 
+        "id": 104, 
         "resource_picture_id": 1, 
         "t": 3, 
         "updated_at": "2012-01-10T08:25:41Z", 
diff --git a/0.5.x/stylesheets/peta.apps.css b/0.5.x/stylesheets/peta.apps.css
index 393e9a8..c61ab59 100644
--- a/0.5.x/stylesheets/peta.apps.css
+++ b/0.5.x/stylesheets/peta.apps.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 /* pettanR peta.apps.css
- *   version 0.5.5
+ *   version 0.5.12
  * 
  *   author:
  *     itozyun
@@ -140,6 +140,14 @@
 							width:			180px;
 							text-align:		center;
 						}
+
+		/*  Panel Console
+		--------------------------------------------------------------------------------------*/			
+		#panel-console-publish-value {
+							width:			180px;
+							text-align:		center;	
+		}
+						
 		/*  Comic Reader
 		--------------------------------------------------------------------------------------*/
 		#comic-reader-wrapper {}
@@ -173,7 +181,7 @@
 				}
 				.pettanr-ActiveX-enabled .comic-reader-shadow {
 					filter:				alpha(opacity=50);
-					-ms-filter:			alpha(opacity=50);			
+					-ms-filter:			"alpha(opacity=50)";
 				}
 				.pettanr-ActiveX-disabled .comic-reader-shadow {
 					background:			transparent url( "../images/black_50pct.png" )　repeat 0 0;
diff --git a/0.5.x/stylesheets/system.css b/0.5.x/stylesheets/system.css
index e637d5c..a803d7a 100644
--- a/0.5.x/stylesheets/system.css
+++ b/0.5.x/stylesheets/system.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 /* pettanR system.css
- *   version 0.5.5
+ *   version 0.5.11
  * 
  *   author:
  *     itozyun
@@ -233,9 +233,9 @@
 				text-decoration:	none;
 				*cursor:			pointer;
 			}
-			.current-option a,
-			.current-option a:link,
-			.current-option a:visited {
+			a.combobox-option-current,
+			a.combobox-option-current:link,
+			a.combobox-option-current:visited {
 				color:				#e6e6ef;
 				background-color:	#66f;
 				text-decoration:	none;
diff --git a/0.5.x/test/activex.html b/0.5.x/test/activex.html
index 536a201..da3a1e3 100644
--- a/0.5.x/test/activex.html
+++ b/0.5.x/test/activex.html
@@ -170,9 +170,9 @@ x.style.cssText = 'width:1px;height:1px;<ins>line-height:1px;</ins>filter:progid
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" -->
 	<script type="text/javascript">
 		var container = document.getElementById( 'box-container'),
diff --git a/0.5.x/test/comic-html-structure.html b/0.5.x/test/comic-html-structure.html
index e2466b9..7b86ced 100644
--- a/0.5.x/test/comic-html-structure.html
+++ b/0.5.x/test/comic-html-structure.html
@@ -433,9 +433,9 @@
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" -->
 <!-- InstanceEndEditable -->
 </body>
diff --git a/0.5.x/test/dynamic-comic-html.html b/0.5.x/test/dynamic-comic-html.html
index 4779623..35470fa 100644
--- a/0.5.x/test/dynamic-comic-html.html
+++ b/0.5.x/test/dynamic-comic-html.html
@@ -183,15 +183,17 @@ button.onclick = function(){
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" -->
 	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js"></script>
 	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js"></script>
 	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js"></script>
 	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js"></script>
-	<link type="text/css" rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCoreDefault.css">
+	<script type="text/javascript" src="../javascripts/jquery-1.6.2.min.js"></script>
+	<script type="text/javascript" src="../javascripts/system.js"></script>
+	<script type="text/javascript" src="../javascripts/peta.common.js"></script>
 	<script type="text/javascript">
 		SyntaxHighlighter.all();
 		
diff --git a/0.5.x/test/html2comic_0.1.html b/0.5.x/test/html2comic_0.1.html
index db39a7b..95b2f1d 100644
--- a/0.5.x/test/html2comic_0.1.html
+++ b/0.5.x/test/html2comic_0.1.html
@@ -360,9 +360,9 @@
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" -->
 	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js"></script>
 	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js"></script>
diff --git a/0.5.x/test/index.html b/0.5.x/test/index.html
index 5f95398..7116835 100644
--- a/0.5.x/test/index.html
+++ b/0.5.x/test/index.html
@@ -44,7 +44,7 @@
 					<dl class="dl-table clearfix">
 						<dt><a href="comic-html-structure.html">html structure</a></dt>
 						<dd>マンガ状コンテンツを表示するための html + css の調査．</dd>
-						<dt><a href="dynamic-comic-html.html">dynamic html</a></dt>
+						<dt><a href="dynamic-comic-html.html">動的コミック</a></dt>
 						<dd>js によるコミック html の動的書き出しテスト．</dd>
 						<dt><a href="vertical-center.html">vertical center</a></dt>
 						<dd>上下中央配置テスト</dd>
@@ -60,12 +60,16 @@
 					</dl>
 					<h3>javascript テスト</h3>
 					<dl class="dl-table clearfix">
-						<dt><a href="activex.html">detect activex</a></dt>
+						<dt><a href="dhtml-anime.html">DHTML アニメ</a></dt>
+						<dd>system.js のDHTML アニメーション．</dd>
+						<dt><a href="activex.html">detect ActiveX</a></dt>
 						<dd>ActiveX が有効か？を js　で調べる．</dd>
 						<dt><a href="type.html">[js] Type</a></dt>
 						<dd>javascript の型判定のテスト</dd>
 						<dt><a href="pointingdevice.html">[js]ポインティングデバイス</a></dt>
 						<dd>[js]ポインティングデバイス</dd>
+						<dt><a href="computed-style.html">[js]computedStyle</a></dt>
+						<dd>[js]computedStyle</dd>
 					</dl>
 				</div>
 				<!-- InstanceEndEditable -->
@@ -132,9 +136,9 @@
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
 </body>
 <!-- InstanceEnd --></html>
diff --git a/0.5.x/test/svg.html b/0.5.x/test/svg.html
index 45e1cbf..9b591b3 100644
--- a/0.5.x/test/svg.html
+++ b/0.5.x/test/svg.html
@@ -171,9 +171,9 @@
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" -->
 		<script type="text/javascript" src="../javascripts/system.js"></script>
 		<script type="text/javascript">
diff --git a/0.5.x/test/transform.html b/0.5.x/test/transform.html
index 3dfc012..a314016 100644
--- a/0.5.x/test/transform.html
+++ b/0.5.x/test/transform.html
@@ -184,9 +184,9 @@
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
 </body>
 <!-- InstanceEnd --></html>
diff --git a/0.5.x/test/type.html b/0.5.x/test/type.html
index 10e001d..33614bb 100644
--- a/0.5.x/test/type.html
+++ b/0.5.x/test/type.html
@@ -131,9 +131,9 @@
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" -->
 		<script type="text/javascript">
 /**
diff --git a/0.5.x/test/useragent.html b/0.5.x/test/useragent.html
index ae50bf2..da2b4e8 100644
--- a/0.5.x/test/useragent.html
+++ b/0.5.x/test/useragent.html
@@ -228,9 +228,9 @@
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" -->
 		<script type="text/javascript">
 
diff --git a/0.5.x/test/vertical-center.html b/0.5.x/test/vertical-center.html
index 6aeb2f7..9c3b44d 100644
--- a/0.5.x/test/vertical-center.html
+++ b/0.5.x/test/vertical-center.html
@@ -349,9 +349,9 @@
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
         </div><!-- #EndLibraryItem -->
 	</div>
-		<script type="text/javascript">
-			var has_server_support = false;
-		</script>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
 </body>
 <!-- InstanceEnd --></html>
diff --git a/0.5.x/work.html b/0.5.x/work.html
index 538ed9a..d2b3641 100644
--- a/0.5.x/work.html
+++ b/0.5.x/work.html
@@ -9,7 +9,6 @@
 		<title>Login User Console | pettanR</title>
 		<link rel="stylesheet" type="text/css" href="stylesheets/peta.common.css">
 		<link rel="stylesheet" type="text/css" href="stylesheets/system.css">
-		<link rel="stylesheet" type="text/css" href="stylesheets/peta.apps.css">
 	</head>
 	<body>
 		<script type="text/javascript" src="javascripts/jquery-1.6.2.min.js"></script>