OSDN Git Service

client is version0.5.16, start working system.DHTML.anime().
authoritozyun <itozyun@gmail.com>
Fri, 14 Sep 2012 00:20:53 +0000 (09:20 +0900)
committeritozyun <itozyun@gmail.com>
Fri, 14 Sep 2012 00:20:53 +0000 (09:20 +0900)
app/assets/javascripts/system.js

index 0158525..adb6ac0 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR system.js\r
- *   version 0.5.15\r
+ *   version 0.5.16\r
  * \r
  * \r
  * Type\r
                                return ret;\r
                        })( ELM_SIZE_GETTER );\r
                \r
+               var REG_LARGE = /[A-Z]/g;\r
+               \r
                /* clean comment node */\r
                window.setTimeout( function(){\r
                        Util.cleanCommnetNode();\r
                            return camelized;\r
                        },\r
                        uncamelize: function( str ){\r
-                               return str.split( ' ' ).join( '' ).replace( /[A-Z]/g, '-$&' ).toLowerCase();\r
+                               return str.split( ' ' ).join( '' ).replace( REG_LARGE, '-$&' ).toLowerCase();\r
                        },\r
                        pxTo: function( _px, _unit ){\r
                                return _px / ( UNIT_RATIO[ _unit ] || 1 );\r
@@ -704,14 +706,14 @@ var CSS = ( function( window, documwnt, undefined ){
 \r
                        // if( style.backgroundPositionX === undefined ){\r
                                _special.setBackgroundPositionXY = function( style ){\r
-                                       var bgp = style.backgroundPosition.split( ' ' );\r
-                                       style.backgroundPositionX = bgp[ 0 ];\r
-                                       style.backgroundPositionY = bgp[ 1 ];\r
+                                       var bgp = ( style.backgroundPosition || '' ).split( ' ' );\r
+                                       style.backgroundPositionX = bgp[ 0 ] || 0;\r
+                                       style.backgroundPositionY = bgp[ 1 ] || 0;\r
                                };\r
                        // };\r
                        if( style.clipTop === undefined && style[ 'clip-top' ] === undefined ){\r
                                _special.setClipTopRightBottomLeft = function( style ){\r
-                                       var clip = style.clip;\r
+                                       var clip = style.clip || '';\r
                                        if( clip.indexOf( 'rect(' ) === -1 ){\r
                                                style.clipTop    = 0;\r
                                                style.clipRight  = 0;\r
@@ -756,7 +758,7 @@ var CSS = ( function( window, documwnt, undefined ){
                };\r
                \r
                SPECIAL.setBackgroundPositionXY && SPECIAL.setBackgroundPositionXY( ret );\r
-               SPECIAL.setClipTopRightBottomLeft && SPECIAL.getClipTopRightBottomLeft( ret );\r
+               SPECIAL.setClipTopRightBottomLeft && SPECIAL.setClipTopRightBottomLeft( ret );\r
                \r
                return ret;\r
        };\r
@@ -765,83 +767,83 @@ var CSS = ( function( window, documwnt, undefined ){
                var ret = {}, v, name,\r
                        list = [\r
                                0, 'BLACK',\r
-                               parseFloat( 'FF0000', 16 ), 'RED',\r
-                               parseFloat( '00FF00', 16 ), 'LIME',\r
-                               parseFloat( '0000FF', 16 ), 'BLUE',\r
-                               parseFloat( 'FFFF00', 16 ), 'YELLOW',\r
-                               parseFloat( '00FFFF', 16 ), 'AQUA or CYAN',\r
-                               parseFloat( 'FF00FF', 16 ), 'FUCHSIA or MAGENTA',\r
-                               parseFloat( 'FFFFFF', 16 ), 'WHITE',\r
-                               parseFloat( '008000', 16 ), 'GREEN',\r
-                               parseFloat( '800080', 16 ), 'PURPLE',\r
-                               parseFloat( '800000', 16 ), 'MAROON',\r
-                               parseFloat( '000080', 16 ), 'NAVY',\r
-                               parseFloat( '808000', 16 ), 'OLIVE',\r
-                               parseFloat( '008080', 16 ), 'TEAL',\r
-                               parseFloat( '808080', 16 ), 'GRAY',\r
-                               parseFloat( 'C0C0C0', 16 ), 'SILVER',\r
-                               parseFloat( '696969', 16 ), 'DIMGRAY',\r
-                               parseFloat( '708090', 16 ), 'SLATEGRAY',\r
-                               parseFloat( 'A9A9A9', 16 ), 'DARKGRAY',\r
-                               parseFloat( 'DCDCDC', 16 ), 'GAINSBORO',\r
-                               parseFloat( '191970', 16 ), 'MIDNIGHTBLUE',\r
-                               parseFloat( '6A5ACD', 16 ), 'SLATEBLUE',\r
-                               parseFloat( '0000CD', 16 ), 'MEDIUMBLUE',\r
-                               parseFloat( '4169E1', 16 ), 'ROYALBLUE',\r
-                               parseFloat( '1E90FF', 16 ), 'DODGERBLUE',\r
-                               parseFloat( '87CEEB', 16 ), 'SKYBLUE',\r
-                               parseFloat( '4682B4', 16 ), 'STEELBLUE',\r
-                               parseFloat( 'ADD8E6', 16 ), 'LIGHTBLUE',\r
-                               parseFloat( 'AFEEEE', 16 ), 'PALETURQUOISE',\r
-                               parseFloat( '40E0D0', 16 ), 'TURQUOISE',\r
-                               parseFloat( 'E0FFFF', 16 ), 'LIGHTCYAN',\r
-                               parseFloat( '7FFFD4', 16 ), 'AQUAMARINE',\r
-                               parseFloat( '006400', 16 ), 'DARKGREEN',\r
-                               parseFloat( '2E8B57', 16 ), 'SEAGREEN',\r
-                               parseFloat( '90EE90', 16 ), 'LIGHTGREEN',\r
-                               parseFloat( '7FFF00', 16 ), 'CHARTREUSE',\r
-                               parseFloat( 'ADFF2F', 16 ), 'GREENYELLOW',\r
-                               parseFloat( '32CD32', 16 ), 'LIMEGREEN',\r
-                               parseFloat( '9ACD32', 16 ), 'YELLOWGREEN',\r
-                               parseFloat( '6B8E23', 16 ), 'OLIVEDRAB',\r
-                               parseFloat( 'BCB76B', 16 ), 'DARKKHAKI',\r
-                               parseFloat( 'EEE8AA', 16 ), 'PALEGOLDENROD',\r
-                               parseFloat( 'FFFFE0', 16 ), 'LIGHTYELLOW',\r
-                               parseFloat( 'FFD700', 16 ), 'GOLD',\r
-                               parseFloat( 'DAA520', 16 ), 'GOLDENROD',\r
-                               parseFloat( 'B8860B', 16 ), 'DARKGOLDENROD',\r
-                               parseFloat( 'BC8F8F', 16 ), 'ROSYBROWN',\r
-                               parseFloat( 'CD5C5C', 16 ), 'INDIANRED',\r
-                               parseFloat( '8B4513', 16 ), 'SADDLEBROWN',\r
-                               parseFloat( 'A0522D', 16 ), 'SIENNA',\r
-                               parseFloat( 'CD853F', 16 ), 'PERU',\r
-                               parseFloat( 'DEB887', 16 ), 'BURLYWOOD',\r
-                               parseFloat( 'F5F5DC', 16 ), 'BEIGE',\r
-                               parseFloat( 'F5DEB3', 16 ), 'WHEAT',\r
-                               parseFloat( 'F4A460', 16 ), 'SANDYBROWN',\r
-                               parseFloat( 'D2B48C', 16 ), 'TAN',\r
-                               parseFloat( 'D2691E', 16 ), 'CHOCOLATE',\r
-                               parseFloat( 'B22222', 16 ), 'FIREBRICK',\r
-                               parseFloat( 'A52A2A', 16 ), 'BROWN',\r
-                               parseFloat( 'FA8072', 16 ), 'SALMON',\r
-                               parseFloat( 'FFA500', 16 ), 'ORANGE',\r
-                               parseFloat( 'FF7F50', 16 ), 'CORAL',\r
-                               parseFloat( 'FF6347', 16 ), 'TOMATO',\r
-                               parseFloat( 'FF69B4', 16 ), 'HOTPINK',\r
-                               parseFloat( 'FFC0CB', 16 ), 'PINK',\r
-                               parseFloat( 'FF1493', 16 ), 'DEEPPINK',\r
-                               parseFloat( 'DB7093', 16 ), 'PALEVIOLETRED',\r
-                               parseFloat( 'EE82EE', 16 ), 'VIOLET',\r
-                               parseFloat( 'DDA0DD', 16 ), 'PLUM',\r
-                               parseFloat( 'DA70D6', 16 ), 'ORCHILD',\r
-                               parseFloat( '9400D3', 16 ), 'DARKVIOLET',\r
-                               parseFloat( '8A2BE2', 16 ), 'BLUEVIOLET',\r
-                               parseFloat( '9370DB', 16 ), 'MEDIUMPURPLE',\r
-                               parseFloat( 'D8BFD8', 16 ), 'THISTLE',\r
-                               parseFloat( 'E6E6FA', 16 ), 'LAVENDER',\r
-                               parseFloat( 'FFE4E1', 16 ), 'MISTYROSE',\r
-                               parseFloat( 'FFFFF0', 16 ), 'IVORY',\r
-                               parseFloat( 'FFFACD', 16 ), 'LEMONCHIFFON'\r
+                               parseInt( 'FF0000', 16 ), 'RED',\r
+                               parseInt( '00FF00', 16 ), 'LIME',\r
+                               parseInt( '0000FF', 16 ), 'BLUE',\r
+                               parseInt( 'FFFF00', 16 ), 'YELLOW',\r
+                               parseInt( '00FFFF', 16 ), 'AQUA or CYAN',\r
+                               parseInt( 'FF00FF', 16 ), 'FUCHSIA or MAGENTA',\r
+                               parseInt( 'FFFFFF', 16 ), 'WHITE',\r
+                               parseInt( '008000', 16 ), 'GREEN',\r
+                               parseInt( '800080', 16 ), 'PURPLE',\r
+                               parseInt( '800000', 16 ), 'MAROON',\r
+                               parseInt( '000080', 16 ), 'NAVY',\r
+                               parseInt( '808000', 16 ), 'OLIVE',\r
+                               parseInt( '008080', 16 ), 'TEAL',\r
+                               parseInt( '808080', 16 ), 'GRAY',\r
+                               parseInt( 'C0C0C0', 16 ), 'SILVER',\r
+                               parseInt( '696969', 16 ), 'DIMGRAY',\r
+                               parseInt( '708090', 16 ), 'SLATEGRAY',\r
+                               parseInt( 'A9A9A9', 16 ), 'DARKGRAY',\r
+                               parseInt( 'DCDCDC', 16 ), 'GAINSBORO',\r
+                               parseInt( '191970', 16 ), 'MIDNIGHTBLUE',\r
+                               parseInt( '6A5ACD', 16 ), 'SLATEBLUE',\r
+                               parseInt( '0000CD', 16 ), 'MEDIUMBLUE',\r
+                               parseInt( '4169E1', 16 ), 'ROYALBLUE',\r
+                               parseInt( '1E90FF', 16 ), 'DODGERBLUE',\r
+                               parseInt( '87CEEB', 16 ), 'SKYBLUE',\r
+                               parseInt( '4682B4', 16 ), 'STEELBLUE',\r
+                               parseInt( 'ADD8E6', 16 ), 'LIGHTBLUE',\r
+                               parseInt( 'AFEEEE', 16 ), 'PALETURQUOISE',\r
+                               parseInt( '40E0D0', 16 ), 'TURQUOISE',\r
+                               parseInt( 'E0FFFF', 16 ), 'LIGHTCYAN',\r
+                               parseInt( '7FFFD4', 16 ), 'AQUAMARINE',\r
+                               parseInt( '006400', 16 ), 'DARKGREEN',\r
+                               parseInt( '2E8B57', 16 ), 'SEAGREEN',\r
+                               parseInt( '90EE90', 16 ), 'LIGHTGREEN',\r
+                               parseInt( '7FFF00', 16 ), 'CHARTREUSE',\r
+                               parseInt( 'ADFF2F', 16 ), 'GREENYELLOW',\r
+                               parseInt( '32CD32', 16 ), 'LIMEGREEN',\r
+                               parseInt( '9ACD32', 16 ), 'YELLOWGREEN',\r
+                               parseInt( '6B8E23', 16 ), 'OLIVEDRAB',\r
+                               parseInt( 'BCB76B', 16 ), 'DARKKHAKI',\r
+                               parseInt( 'EEE8AA', 16 ), 'PALEGOLDENROD',\r
+                               parseInt( 'FFFFE0', 16 ), 'LIGHTYELLOW',\r
+                               parseInt( 'FFD700', 16 ), 'GOLD',\r
+                               parseInt( 'DAA520', 16 ), 'GOLDENROD',\r
+                               parseInt( 'B8860B', 16 ), 'DARKGOLDENROD',\r
+                               parseInt( 'BC8F8F', 16 ), 'ROSYBROWN',\r
+                               parseInt( 'CD5C5C', 16 ), 'INDIANRED',\r
+                               parseInt( '8B4513', 16 ), 'SADDLEBROWN',\r
+                               parseInt( 'A0522D', 16 ), 'SIENNA',\r
+                               parseInt( 'CD853F', 16 ), 'PERU',\r
+                               parseInt( 'DEB887', 16 ), 'BURLYWOOD',\r
+                               parseInt( 'F5F5DC', 16 ), 'BEIGE',\r
+                               parseInt( 'F5DEB3', 16 ), 'WHEAT',\r
+                               parseInt( 'F4A460', 16 ), 'SANDYBROWN',\r
+                               parseInt( 'D2B48C', 16 ), 'TAN',\r
+                               parseInt( 'D2691E', 16 ), 'CHOCOLATE',\r
+                               parseInt( 'B22222', 16 ), 'FIREBRICK',\r
+                               parseInt( 'A52A2A', 16 ), 'BROWN',\r
+                               parseInt( 'FA8072', 16 ), 'SALMON',\r
+                               parseInt( 'FFA500', 16 ), 'ORANGE',\r
+                               parseInt( 'FF7F50', 16 ), 'CORAL',\r
+                               parseInt( 'FF6347', 16 ), 'TOMATO',\r
+                               parseInt( 'FF69B4', 16 ), 'HOTPINK',\r
+                               parseInt( 'FFC0CB', 16 ), 'PINK',\r
+                               parseInt( 'FF1493', 16 ), 'DEEPPINK',\r
+                               parseInt( 'DB7093', 16 ), 'PALEVIOLETRED',\r
+                               parseInt( 'EE82EE', 16 ), 'VIOLET',\r
+                               parseInt( 'DDA0DD', 16 ), 'PLUM',\r
+                               parseInt( 'DA70D6', 16 ), 'ORCHILD',\r
+                               parseInt( '9400D3', 16 ), 'DARKVIOLET',\r
+                               parseInt( '8A2BE2', 16 ), 'BLUEVIOLET',\r
+                               parseInt( '9370DB', 16 ), 'MEDIUMPURPLE',\r
+                               parseInt( 'D8BFD8', 16 ), 'THISTLE',\r
+                               parseInt( 'E6E6FA', 16 ), 'LAVENDER',\r
+                               parseInt( 'FFE4E1', 16 ), 'MISTYROSE',\r
+                               parseInt( 'FFFFF0', 16 ), 'IVORY',\r
+                               parseInt( 'FFFACD', 16 ), 'LEMONCHIFFON'\r
                        ];\r
                for( i=list.length; i; ){\r
                        v    = list[ --i ];\r
@@ -906,11 +908,13 @@ var CSS = ( function( window, documwnt, undefined ){
                        return Math.abs( this._toPx() - prop._toPx() ) < 1;\r
                },\r
                convert: function( prop ){\r
-                       var u = prop.unit;\r
+                       var u = prop.unit, v;\r
                        if( this.unit === u ) return;\r
-                       this.value = this._toPx();\r
+                       this.value = v = this._toPx();\r
                        this.unit  = u;\r
-                       if( u !== px ) this.value = Util.pxTo( this.value, u );\r
+                       if( u !== px ){\r
+                               this.value = u === 'em' ? v / this.pxPerEm : Util.pxTo( v, u );\r
+                       };\r
                },\r
                setValue: function( v ){\r
                        this.value = v;\r
@@ -1080,17 +1084,18 @@ var CSS = ( function( window, documwnt, undefined ){
                        return true;\r
                },\r
                convert: function( prop ){\r
-                       if( this.pct === prop.pct ) return;\r
-                       var x = prop.pct === true ? 100 / 255 : 2.55;\r
+                       var u = prop.pct;\r
+                       if( this.pct === u ) return;\r
+                       var x    = u === true ? 100 / 255 : 2.55;\r
                        this.r  *= x;\r
                        this.g  *= x;\r
                        this.b  *= x;\r
-                       this.pct = prop.pct;\r
+                       this.pct = u;\r
                },\r
                setValue: function( rgb ){\r
                        this.r = rgb[ 0 ];\r
                        this.g = rgb[ 1 ];\r
-                       this.b = rgb[ 2 ]\r
+                       this.b = rgb[ 2 ];\r
                },\r
                getValue: function(){\r
                        return [ this.r, this.g, this.b ];\r
@@ -1103,10 +1108,13 @@ var CSS = ( function( window, documwnt, undefined ){
                },\r
                getValueText: function(){\r
                        if( this.pct === true ){\r
-                               return [ 'rgb(', this.r, '% ', this.g, '% ', this.b, '%)' ].join( '' );\r
+                               return [ 'rgb(', this.r, '%,', this.g, '%,', this.b, '%)' ].join( '' );\r
                        };\r
-                       var rgb = this.r * 255 * 255 + this.g * 256 + this.g;\r
-                       return '#' + rgb.toString( 16 );\r
+                       var round = Math.round;\r
+                       //return [ 'rgb(', round( this.r ), ',', round( this.g ), ',', round( this.b ), ')' ].join( '' );\r
+                       \r
+                       var rgb   = '00000' + ( ( round( this.r ) << 16 ) + ( round( this.g ) << 8 ) + round( this.b ) ).toString( 16 );\r
+                       return '#' + rgb.substr( rgb.length - 6 );\r
                },\r
                clear: function(){\r
                        var t = this, p;\r
@@ -1120,7 +1128,13 @@ var CSS = ( function( window, documwnt, undefined ){
                        return [ this.r / 2.55, this.g / 2.55, this.b / 2.55 ];\r
                },\r
                isValid: function( t ){\r
-                       return true;\r
+                       var isFinite = window.isFinite;\r
+                       if( !isFinite( this.r ) || !isFinite( this.g ) || !isFinite( this.b ) ) return false;\r
+                       if( 0 > this.r || 0 > this.g || 0 > this.b ) return false;\r
+                       if( this.pct === true ){\r
+                               return this.r <= 100 && this.g <= 100 && this.b <= 100;\r
+                       };\r
+                       return this.r <= 255 && this.g <= 255 && this.b <= 255;\r
                }\r
        };\r
        \r
@@ -1128,12 +1142,14 @@ var CSS = ( function( window, documwnt, undefined ){
                isNumber       = Type.isNumber;\r
        var REG_UINIT      = /.*\d(\w{1,2})?/,\r
                $1             = '$1',\r
-               px             = 'px';\r
+               px             = 'px',\r
+               REG_XXXXXX     = /^#[\da-fA-F]{6}?/,\r
+               REG_XXX        = /^#[\da-fA-F]{3}?/;\r
        \r
-       var WrappedStyleClass = function( elm, style ){\r
+       var WrappedStyleClass = function( elm, style, pxPerEm ){\r
                this.elm     = elm;\r
                this.style   = style;\r
-               this.pxPerEm = this.get( 'fontSize' )._toPx;\r
+               this.pxPerEm = this.get( 'fontSize' )._toPx();\r
        };\r
 \r
        WrappedStyleClass.prototype = {\r
@@ -1150,6 +1166,8 @@ var CSS = ( function( window, documwnt, undefined ){
                        };\r
                        var x = this.style[ p ], e, v, u;\r
                        if( PARAMS.offset[ p ] === true ){\r
+                               return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x, p ), this.pxPerEm );\r
+                               /*\r
                                e = this.elm;\r
                                if( p === 'width'  ) v = e.offsetWidth;\r
                                if( p === 'height' ) v = e.offsetHeight;\r
@@ -1157,8 +1175,9 @@ var CSS = ( function( window, documwnt, undefined ){
                                if( p === 'bottom' ) v = e.offsetBottom;\r
                                if( p === 'left'   ) v = e.offsetLeft;\r
                                if( p === 'right'  ) v = e.offsetRight;\r
-                               u = this.getUnit( x );\r
-                               return new PropertyClass( p, this.pxTo( v, u ), u, this.pxPerEm );\r
+                               u = this.getUnit( x, p );\r
+                               // alert( p + this.pxTo( v, u ) + u )\r
+                               return new PropertyClass( p, this.pxTo( v, u ), u, this.pxPerEm ); */\r
                        };\r
                        if( p === 'fontSize' ){ // xx-small 等\r
                                v = Util.absoluteFontSizeToPx( x );\r
@@ -1167,10 +1186,11 @@ var CSS = ( function( window, documwnt, undefined ){
                                };\r
                        };                      \r
                        if( PARAMS.percent[ p ] === true ){\r
-                               return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x ), this.pxPerEm );\r
+                               // alert( p + ' , ' + x + ' , ' + this.getUnit( x, p ) )\r
+                               return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x, p ), this.pxPerEm );\r
                        };\r
                        if( PARAMS.size[ p ] === true ){\r
-                               return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x ), this.pxPerEm );\r
+                               return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x, p ), this.pxPerEm );\r
                        };\r
                        if( PARAMS.color[ p ] === true ){\r
                                return this.getColor( x, p );\r
@@ -1178,7 +1198,7 @@ var CSS = ( function( window, documwnt, undefined ){
                },\r
                pxTo: function( px, unit ){\r
                        if( unit === 'em' ) return px / this.pxPerEm;\r
-                       Util.pxTo( px, unit );\r
+                       return Util.pxTo( px, unit );\r
                },\r
                getValue: function( x, p ){\r
                        if( isString( x ) === true ){\r
@@ -1189,13 +1209,15 @@ var CSS = ( function( window, documwnt, undefined ){
                        };\r
                        return 0;\r
                },\r
-               getUnit: function( x ){\r
-                       var u = px;\r
+               getUnit: function( x, p ){\r
+                       var u;\r
                        if( isString( x ) === true ){\r
                                u = x.replace( REG_UINIT, $1 );\r
-                               if( PARAMS.unit[ u ] === false ) return '';\r
+                               if( p === 'lineHeight' ) return u;\r
+                               if( PARAMS.unit[ u ] !== true ) return px;\r
+                               return u;\r
                        };\r
-                       return u;\r
+                       return px;\r
                },\r
                getColor: function( x, p ){\r
                        var rgb = COLOR[ x.toUpperCase() ],\r
@@ -1208,15 +1230,16 @@ var CSS = ( function( window, documwnt, undefined ){
                                g = ( rgb & 0xff00 ) >> 8;\r
                                b = ( rgb & 0xff );\r
                        } else\r
-                       if( x.match( /^#[\da-fA-F]{3}?/ ) ){\r
-                               r = parseFloat( x.cahrAt( 1 ) + x.cahrAt( 1 ), 16 );\r
-                               g = parseFloat( x.cahrAt( 2 ) + x.cahrAt( 2 ), 16 );\r
-                               b = parseFloat( x.cahrAt( 3 ) + x.cahrAt( 3 ), 16 );\r
-                       } else\r
-                       if( x.match( /^#[\da-fA-F]{6}?/ ) ){\r
-                               r = parseFloat( x.cahrAt( 1 ) + x.cahrAt( 2 ), 16 );\r
-                               g = parseFloat( x.cahrAt( 3 ) + x.cahrAt( 4 ), 16 );\r
-                               b = parseFloat( x.cahrAt( 5 ) + x.cahrAt( 6 ), 16 );\r
+                       if( x.match( REG_XXXXXX ) ){\r
+                               r = parseInt( x.charAt( 1 ) + x.charAt( 2 ), 16 );\r
+                               g = parseInt( x.charAt( 3 ) + x.charAt( 4 ), 16 );\r
+                               b = parseInt( x.charAt( 5 ) + x.charAt( 6 ), 16 );\r
+                               //alert( x + ' g: ' + g )\r
+                       } else                  \r
+                       if( x.match( REG_XXX ) ){\r
+                               r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );\r
+                               g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );\r
+                               b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );\r
                        } else\r
                        if( x.indexOf( 'rgb(' ) === 0 ){\r
                                rgb = x.substr( 4 ).split( ',' );\r
@@ -1224,11 +1247,12 @@ var CSS = ( function( window, documwnt, undefined ){
                                g = parseFloat( rgb[ 1 ] );\r
                                b = parseFloat( rgb[ 2 ] );\r
                                if( x.indexOf( '%' ) !== -1 ){\r
-                                       r  *= 2.56;\r
-                                       g  *= 2.56;\r
-                                       b  *= 2.56;\r
                                        pct = true;\r
                                };\r
+                       } else {\r
+                               r = 255;\r
+                               g = 255;\r
+                               b = 255;\r
                        };\r
                        return new ColorPropertyClass( p, r, g, b, pct );\r
                },\r
@@ -1370,10 +1394,20 @@ var CSS = ( function( window, documwnt, undefined ){
                        };\r
                }\r
        };\r
+       function camelizeHash( obj ){\r
+               var p, _p;\r
+               for( p in obj ){\r
+                       _p = Util.camelize( p );\r
+                       if( _p === p ) continue;\r
+                       obj[ _p ] = obj[ _p ] || obj[ p ];\r
+                       delete obj[ p ];\r
+               };\r
+       };\r
        \r
        return {\r
-               getWrappedStyle: function( elm, css ){\r
-                       return new WrappedStyleClass( elm, css || CSS.getComputedStyle( elm ) );\r
+               getWrappedStyle: function( elm, opt_css ){\r
+                       opt_css && camelizeHash( opt_css );\r
+                       return new WrappedStyleClass( elm, opt_css || CSS.getComputedStyle( elm ) );\r
                },\r
                getInlineStyle: function( _elm ){\r
                        return cssToObject( _elm.style.cssText );\r
@@ -1404,7 +1438,7 @@ var CSS = ( function( window, documwnt, undefined ){
                                if( PARAMS.borderWidth[ p ] === true && _css.borderWidth ) continue;\r
                                if( PARAMS.borderColor[ p ] === true && _css.borderColor ) continue;\r
                                v = _css[ p ];\r
-                               v && ret.push( [ p, v ].join( ':' ) );\r
+                               v && ret.push( [ Util.uncamelize( p ), v ].join( ':' ) );\r
                        };\r
                        return ret.join( ';' );\r
                }\r
@@ -2349,7 +2383,6 @@ var File = ( function(){
                                }\r
                                for( var key in src ){\r
                                        if( Util.getIndex( protects, key ) === -1 ){\r
-                                               //alert( key )\r
                                                ret[ key ] = clone( src[ key ]);\r
                                        }\r
                                }\r
@@ -2593,6 +2626,9 @@ var AbstractApplication = function( displayName, appClass, isOverlay ){
                _class.prototype = new AbstractBasicPane();\r
                return new _class( _options );\r
        };\r
+       this.createDHTML = function( _elm ){\r
+               return DHTML.create( self, _elm );\r
+       };\r
        this.fetchCSS = function( _url, opt_onload, opt_onerror ){\r
                if( phase === 1 ){\r
                        ++fetchResource;\r
@@ -2945,8 +2981,8 @@ var Application = ( function(){
                                                        var self     = this;\r
                                                        \r
                                                        this.bgColor      = '#ffffff';\r
-                                                       this.MIN_WIDTH    = 320;\r
-                                                       this.MIN_HEIGHT   = 320;\r
+                                                       this.MIN_WIDTH    = 200;\r
+                                                       this.MIN_HEIGHT   = 200;\r
                                                        this.onInit       = function(){};\r
                                                        this.onOpen       = function( _w, _h ){\r
                                                                KeyEvent.add( self, Const.KEY.EVENT.KEY_DOWN, ref.shutdown, 27 ); // 27.esc\r
@@ -2988,7 +3024,7 @@ var Application = ( function(){
  * \r
  *  clientX\r
  *  ウインドウ座標とは、現在のブラウザのウインドウの、ドキュメントを表示している部分の左上原点とした座標である。\r
- *  問題は、ウインドウは、必ずしもドキュメント全体を表示するとは限らない。スクロールと呼ばれるUIによって、ドキュメントの一部だけを表示しているかもしれない。
+ *  問題は、ウインドウは、必ずしもドキュメント全体を表示するとは限らない。スクロールと呼ばれるUIによって、ドキュメントの一部だけを表示しているかもしれない。\r
  */\r
        var XBrowserEvent = ( function(){\r
                var wrappedHandlerClass,\r
@@ -3343,7 +3379,7 @@ var ResizeEvent = ( function(){
 \r
 /* =====================================================\r
  *  MouseEvent\r
- * 
+ * \r
  */\r
        var MouseEvent = ( function(){\r
                var CLICK_OFFSET   = 2 * 2;             \r
@@ -3720,7 +3756,7 @@ var KeyEvent = ( function(){
                /*\r
                 * currentListener\r
                 *  currrentApplication ( overlay Application ) or\r
-                *  superuser ( UI )
+                *  superuser ( UI )\r
                 */\r
                updateCurrentListener: function( _apiuser ){\r
                        application = _apiuser;\r
@@ -3768,7 +3804,7 @@ var KeyEvent = ( function(){
 \r
 /**\r
  * \r
- * http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof
+ * http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof\r
  */\r
 \r
 var Css = ( function(){\r
@@ -3933,7 +3969,7 @@ var Css = ( function(){
 \r
 \r
 /* ----------------------------------------\r
- * 
+ * \r
  */\r
 \r
 var Overlay = ( function(){\r
@@ -5058,21 +5094,22 @@ var Finder = ( function(){
  * backgroundPosition  (len, %)\r
  * opacity\r
  * lineHeight          (len, %, num)\r
- * zIndex                      ( order )
+ * zIndex                      ( order )\r
  */\r
 \r
 var DHTML = ( function(){\r
        \r
        var ANIMATION_TICKET_ARRAY = [],\r
-               fpms                   = 50;\r
+               fpms                   = 50,\r
+               round                  = Math.round,\r
+               cround                 = function ( v ){ return round( v * 100 ) / 100 };\r
        \r
        function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames ){\r
                var _ticket, i = ANIMATION_TICKET_ARRAY.length;\r
                for( ; i; ){\r
                        _ticket = ANIMATION_TICKET_ARRAY[ --i ];\r
                        if( _ticket.elm === _elm ){\r
-                               _ticket.destroy();\r
-                               break;\r
+                               return;\r
                        };\r
                };\r
                \r
@@ -5085,22 +5122,26 @@ var DHTML = ( function(){
                        inlineStyle    = CSS.getInlineStyle( _elm ),\r
                        currentStyle   = CSS.getWrappedStyle( _elm ),\r
                        targetStyle    = CSS.getWrappedStyle( _elm, _cssObject );\r
-               for( var p in _cssObject ){             \r
+                       targetStyle.pxPerEm = currentStyle.get( 'fontSize' )._toPx();\r
+               for( var p in _cssObject ){\r
+                       p       = Util.camelize( p );\r
                        target  = targetStyle.get( p );\r
                        current = currentStyle.get( p );\r
+\r
                        if( target.isValid() === false || current.isValid() === false || current.equal( target ) !== false ){\r
                                target.clear();\r
                                current.clear();\r
                                continue;\r
                        };\r
-                       current.convert( target );\r
                        \r
+                       current.convert( target );\r
+                       // alert( current.getValue() + ' , ' + target.getValue() )\r
                        _currentValues.push( current.getValue() );\r
                        _offsetValues.push( current.getOffset( target ) );\r
                        _endValues.push( target.getValue() );\r
                        _targetProperties.push( p );\r
                        _units.push( target.getUnit() );\r
-                       \r
+\r
                        // IE has trouble with opacity if it does not have layout\r
                        // Force it by setting the zoom level                   \r
                        if( p === 'opacity' && SPECIAL.hasLayout ){\r
@@ -5114,28 +5155,69 @@ var DHTML = ( function(){
                        current.clear();\r
                };\r
                \r
-               currentStyle.clear();\r
-               targetStyle.clear();\r
+               var i, _cssTextArray = [];\r
+               for( i = 0; i < _numFrames; ++i ){\r
+                       if( i < _numFrames - 1 ){\r
+                               tickValue( _currentValues, _offsetValues, _numFrames );\r
+                               createCssText( _currentValues, _targetProperties, targetStyle, inlineStyle, _cssTextArray );\r
+                       } else {\r
+                               createCssText( _endValues, _targetProperties, targetStyle, inlineStyle, _cssTextArray );\r
+                       };\r
+               };\r
                \r
                ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(\r
-                       elm, inlineStyle,\r
-                       _currentValues, _offsetValues, _endValues, _targetProperties, _units,\r
+                       _elm, _cssTextArray,\r
                        Type.isFunction( _onComplete ) === true   ? _onComplete   : null,\r
                        Type.isFunction( _onEnterFrame ) === true ? _onEnterFrame : null,\r
                        _numFrames\r
                ) );\r
                \r
+               currentStyle.clear();\r
+               targetStyle.clear();            \r
                SystemTimer.add( SUPER_USER_KEY, onEnterFrame, 1000 / fpms );\r
        };\r
        \r
+       function tickValue( current, offset, numFrames ){\r
+               if( Type.isArray( current ) === true ){\r
+                       var ret, i = current.length;\r
+                       for( ; i; ){\r
+                               --i;\r
+                               ret = tickValue( current[ i ], offset[ i ], numFrames );\r
+                               if( Type.isNumber( ret ) === true ) current[ i ] = ret;\r
+                       };\r
+               } else {\r
+                       return current + offset / numFrames;\r
+               };\r
+       };\r
+       function createCssText( update, props, style, inline, cssTextArray ){\r
+               var prop;\r
+               for( var i = props.length; i; ){\r
+                       prop = style.get( props[ --i ] );\r
+                       prop.setValue( update[ i ] );\r
+                       inline[ Util.uncamelize( prop.name ) ] = prop.getValueText();\r
+                       //if( prop.name === 'backgroundColor' ) alert( prop.getValueText() + '|' + update[ i ].join( ',') )\r
+                       prop.clear();\r
+               };\r
+               cssTextArray.push( CSS.toCssText( inline ) );\r
+       };\r
+       \r
        function onEnterFrame(){\r
-               var _ticket,\r
+               var _ticket, l,\r
                        i = 0;\r
                while( i < ANIMATION_TICKET_ARRAY.length ){\r
                        _ticket = ANIMATION_TICKET_ARRAY[ i ];\r
-                       if( _ticket.onEnterFrame() === true ){\r
+                       l       = _ticket.cssTexts.length;\r
+                       _ticket.elm.style.cssText = _ticket.cssTexts.shift();\r
+                       if( l === 1 ){\r
+                               _ticket.onComplete && _ticket.onComplete();\r
+                               delete _ticket.elm;\r
+                               delete _ticket.cssTexts;\r
+                               delete _ticket.onComplete;\r
+                               delete _ticket.onEnterFrame;\r
+                               delete _ticket.numFrame;\r
                                ANIMATION_TICKET_ARRAY.splice( i, 1 );\r
                        } else {\r
+                               _ticket.onEnterFrame && _ticket.onEnterFrame( l / _ticket.numFrame );\r
                                ++i;\r
                        };\r
                };\r
@@ -5144,60 +5226,13 @@ var DHTML = ( function(){
                };\r
        };\r
        \r
-       var AnimationTaskClass = function( elm, inlineStyle, currentValues, offsetValues, endValues, properties, units, onComplete, onEnterFrame, numFrames ){\r
-               this.elm              = elm;\r
-               this.inlineStyle      = inlineStyle;\r
-               this.style            = CSS.getWrappedStyle( elm, inlineStyle );\r
-               this.currentValues    = currentValues;\r
-               this.offsetValues     = offsetValues;\r
-               this.endValues        = endValues;\r
-               this.properties       = properties;\r
-               this.units            = units;\r
-               this.onComplete       = onComplete;\r
-               this.onEnterFrame     = onEnterFrame;\r
-               this.numFrames        = numFrames;\r
-               this.count            = 0;\r
+       var AnimationTaskClass = function( elm, cssTexts, onEnterFrame, onComplete, numFrame ){\r
+               this.elm          = elm;\r
+               this.cssTexts     = cssTexts;\r
+               this.onEnterFrame = onEnterFrame;\r
+               this.onComplete   = onComplete;\r
+               this.numFrame     = numFrame;\r
        };\r
-       AnimationTaskClass.prototype = {\r
-               onEnterFrame: function(){\r
-                       if( this.count < this.numFrams ){\r
-                               this._setOffset( this.currentValues, this.offsetValues );\r
-                               this._update( this.currentValues );\r
-                               this.onEnterFrame && this.onEnterFrame( this.count / this.numFrams );\r
-                               ++this.count;\r
-                               return false;\r
-                       };\r
-                       this._update( this.endValues );\r
-                       this.onComplete && this.onComplete();\r
-                       this.style.clear();\r
-                       \r
-                       return true;\r
-               },\r
-               _setOffset: function( current, offset ){\r
-                       if( Type.isArray( current ) === true ){\r
-                               var ret, i = current.length;\r
-                               for( ; i; ){\r
-                                       --i;\r
-                                       ret = this._setOffset( current[ i ], offset[ i ] );\r
-                                       if( Type.isNumber( ret ) === true ) current[ i ] = ret;\r
-                               };\r
-                       } else {\r
-                               return current += offset / this.numFrames;\r
-                       };\r
-               },\r
-               _update: function( update ){\r
-                       var props  = this.properties, prop,\r
-                               inline = this.inlineStyle,\r
-                               style  = this.style;\r
-                       for( var i = props.length; i; ){\r
-                               prop = style.get( props[ --i ] );\r
-                               prop.setValue( update[ i ] );\r
-                               inline[ prop.name ] = prop.getValueText();\r
-                               prop.clear();\r
-                       };\r
-                       this.elm.style.cssText = CSS.toCssText( inline );\r
-               }\r
-       }\r
        \r
        var VisualEffectClass = function( elm ){\r
                var isHtmlElement;\r
@@ -5224,7 +5259,7 @@ var DHTML = ( function(){
        };\r
        \r
        return {\r
-               createVisualEffect: function( _elm ){\r
+               create: function( application, _elm ){\r
                        return new VisualEffectClass( _elm );\r
                },\r
                isInstanceOfVisualEffect: function( _instance){\r
@@ -5235,7 +5270,7 @@ var DHTML = ( function(){
 \r
 \r
 /* --------------------------------------------\r
- * 
+ * \r
  */\r
 \r
        Application.onCurrentApplicationChange( SUPER_USER_KEY );\r
@@ -5253,7 +5288,7 @@ var DHTML = ( function(){
 \r
 \r
 /* ---------------------------------------------\r
- * broadcast to global
+ * broadcast to global\r
  */\r
        window.gOS = {};\r
        \r