From 2e8aa8876f3549073b142ee6e75c60a4d71e6aaa Mon Sep 17 00:00:00 2001
From: itozyun <itozyun@gmail.com>
Date: Sat, 19 May 2012 16:32:41 +0900
Subject: [PATCH] version0.4.33, fixed balloon 0deg position, boot editor with
 panel data.

---
 0.4.x/index.html                     |   6 +-
 0.4.x/javascripts/common.js          | 272 +++++++++++++++++------------------
 0.4.x/javascripts/system.js          |   2 +-
 0.4.x/javascripts/work.js            | 271 +++++++++++++++++-----------------
 0.4.x/json/comics_1.json             |  60 +++++++-
 0.4.x/test/activex.html              |   6 +-
 0.4.x/test/comic-html-structure.html |   3 +
 0.4.x/test/dynamic-comic-html.html   |  17 ++-
 0.4.x/test/html2comic_0.1.html       |   5 +-
 0.4.x/test/index.html                |   6 +-
 0.4.x/test/svg.html                  |   6 +-
 0.4.x/test/transform.html            |   6 +-
 0.4.x/test/type.html                 |   6 +-
 0.4.x/test/vertical-center.html      |   8 +-
 0.4.x/work.html                      |   6 +-
 15 files changed, 386 insertions(+), 294 deletions(-)

diff --git a/0.4.x/index.html b/0.4.x/index.html
index e639684..86d2f21 100644
--- a/0.4.x/index.html
+++ b/0.4.x/index.html
@@ -105,7 +105,11 @@
                 </div>
             </div>
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
-        </div><!-- #EndLibraryItem --></div>
+        </div><!-- #EndLibraryItem -->
+	</div>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 	<script type="text/javascript" src="javascripts/common.js"></script>
 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
 </body>
diff --git a/0.4.x/javascripts/common.js b/0.4.x/javascripts/common.js
index 3711638..3a2e2ff 100644
--- a/0.4.x/javascripts/common.js
+++ b/0.4.x/javascripts/common.js
@@ -1,6 +1,6 @@
 /*
  * pettanR common.js
- *   version 0.4.29
+ *   version 0.4.33
  * 
  * author: itozyun
  */
@@ -75,7 +75,7 @@
 
 var pettanr = ( function(){
 	var	FUNCTION_ARRAY = [],
-		URL = document.location.href.split( '#')[ 0],
+		URL = document.location.href.split( '#')[ 0 ],
 		IS_LOCAL = URL.indexOf( 'file:') === 0,
 		URL_PARAMS = ( function(){
 			var search = document.location.search,
@@ -108,11 +108,11 @@ var pettanr = ( function(){
 		IS_DEBUG = Type.isBoolean( URL_PARAMS.debug ) ? URL_PARAMS.debug : IS_LOCAL === true,
 		jqWindow , jqDocument , jqBody;
 	return {
-		version: '0.4.28',
+		version: '0.4.33',
 		init: function(){
-			jqWindow = $( window);
-			jqDocument = $( document);
-			jqBody = $( document.body);
+			jqWindow   = $( window );
+			jqDocument = $( document );
+			jqBody     = $( document.body );
 			
 			var l = FUNCTION_ARRAY.length,
 				_fn;
@@ -161,8 +161,7 @@ var pettanr = ( function(){
 			var pre = document.createElement('pre');
 			pre.appendChild( document.createTextNode('\n'));
 			return pre.firstChild.data;
-		})(),
-		IS_IFRAME: !!window.parent
+		})()
 	}
 })();
 
@@ -663,61 +662,51 @@ pettanr.ua = ( function(){
 
 
 pettanr.CONST = ( function(){
-	var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false,
-		isLocalhost = document.location.href.indexOf( 'http:\/\/localhost:3000\/' ) === 0,
-		PETTANR_ROOT_PATH = isLocalhost === true ? 'http:\/\/localhost:3000\/' : 'http:\/\/pettanr.heroku.com\/',
-		location = document.location.pathname,
-		deep =	location.indexOf( '\/diary\/' ) !== -1 ||
-				location.indexOf( '\/test\/' ) !== -1 ||
-				location.indexOf( '\/help\/' ) !== -1 ||
-				location.indexOf( '\/sitemap\/' ) !== -1 ||
-				location.indexOf( '\/wiki\/' ) !== -1;
+	var SERVER_SUPPORT    = !( 'has_server_support' in window && has_server_support === false ),
+		PETTANR_ROOT_PATH = ( function(){
+			if( SERVER_SUPPORT === false ){
+				var h1 = document.getElementsByTagName( 'h1' )[ 0 ];
+				if( h1 ){
+					var a = h1.getElementsByTagName( 'a' )[ 0 ];
+					return a ? a.href : '';
+				}
+				return '';
+			}
+			var loc = document.location;
+			return [ loc.protocol, '\/\/', loc.host, '\/' ].join( '' );
+		})(),
+		RELATIVE = ( function(){
+			var ret  = '',
+				loc  = document.location,
+				path = [ loc.protocol, '\/', loc.host, '\/', loc.pathname.split( '\\' ).join( '\/' ) ].join( '' ),
+				l    = path.split( '\/' ).length - PETTANR_ROOT_PATH.split( '\/' ).length;
+			for( var i=0; i<l; ++i ){
+				ret += '..\/';
+			}
+			return ret;
+		})();
 		
 	return {
 		PETTANR_ROOT_PATH:			PETTANR_ROOT_PATH,
-		URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'original_pictures.json',
-		URL_RESOURCE_PICTURES_JSON: ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'resource_pictures.json',
-		URL_COMICS_JSON:			( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'comics.json',
-		URL_PANELS_JSON:			( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'panels.json',
+		URL_ORIGINAL_PICTURES_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'original_pictures.json',
+		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',
 		NS_PETTANR_COMIC:			'pettanr-comic',
-		RESOURCE_PICTURE_PATH:		( isLocal === true ? ( deep === true ? '..\/' : '' ) : PETTANR_ROOT_PATH ) + 'resource_pictures\/',
-		CREATE_COMIC_JS:			isLocal === true ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',
-		CREATE_PANEL_JS:			isLocal === true ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',
-		UPLOAD_PICTURE_JS:			isLocal === true ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',
-		REGISTER_ARTIST_JS:			isLocal === true ? 'js\/register_artist.js' : PETTANR_ROOT_PATH + 'artists\/new.js',
-		JQUERY_URL:					isLocal === true ? 'javascripts\/jquery-1.6.2.min.js' : PETTANR_ROOT_PATH + 'assets\/jquery-162_min.js'
+		RESOURCE_PICTURE_PATH:		( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'resource_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',
+		UPLOAD_PICTURE_JS:			SERVER_SUPPORT === false ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',
+		REGISTER_ARTIST_JS:			SERVER_SUPPORT === false ? 'js\/register_artist.js' : PETTANR_ROOT_PATH + 'artists\/new.js',
+		JQUERY_URL:					SERVER_SUPPORT === false ? 'javascripts\/jquery-1.6.2.min.js' : PETTANR_ROOT_PATH + 'assets\/jquery-162_min.js',
+		SERVER_SUPPORT:				SERVER_SUPPORT
 	}
 })();
 
 pettanr.view = ( function(){
 	/* create iframe overlay for user console */
-	var location = document.location.pathname,
-		isWorkPage =	document.location.href.indexOf( 'http:\/\/localhost:3000\/' ) === 0 ||
-						document.location.href.indexOf( pettanr.CONST.PETTANR_ROOT_PATH ) === 0 ||
-						location.indexOf( '\/work.html') !== -1 ||
-						location.indexOf( '\work.html') !== -1, // for ie6
-		deep =	location.indexOf( '\/diary\/') !== -1 ||
-				location.indexOf( '\/test\/') !== -1 ||
-				location.indexOf( '\/help\/') !== -1 ||
-				location.indexOf( '\/sitemap\/') !== -1 ||
-				location.indexOf( '\/wiki\/') !== -1,
-		LoginUserNavi;
-
-	if( isWorkPage === false){
-		LoginUserNavi = {
-			show: function(){
-				var i = pettanr.util.getChildIndex( this.parentNode, this );
-				document.location.href = [
-						deep === true ? '../' : '',
-						'work.html',
-						typeof i === 'number' ? '?view=' + i : ''
-					].join( '');
-				return false;
-			},
-			hide: function(){}
-		}
-	} else {
-		LoginUserNavi = {
+	var LoginUserNavi = {
 			show: function(){
 				var i = pettanr.util.getChildIndex( this.parentNode, this );
 				i !== -1 && bootApplication( i );
@@ -725,7 +714,6 @@ pettanr.view = ( function(){
 			},
 			hide: function(){}
 		}
-	}
 
 	/* debug info */
 	// ua version, lang, os, plugin ( vml, svg), standerdmode, balloon, rimg
@@ -835,8 +823,6 @@ pettanr.view = ( function(){
 	}
 
 	function bootApplication( APPLICATIONorINDEX, _arguments ){
-		if( isWorkPage === false ) return;
-
 		var _application,
 			i, j, l, 
 			nodesA = document.getElementById('global-navi').getElementsByTagName( 'a') || [],
@@ -1800,15 +1786,15 @@ pettanr.form = ( function(){
  * 
  */
 pettanr.balloon = ( function() {
-	var MIN_BALLOON_WIDTH = 30,
+	var MIN_BALLOON_WIDTH  = 30,
 		MIN_BALLOON_HEIGHT = 30,
-		TAIL_WIDTH = 6,
-		TAIL_HEIGHT = 10,
-		STROKE_WIDTH = 1.2,
-		PADDING_TOP = TAIL_HEIGHT,
-		PADDING_LEFT = TAIL_HEIGHT,
-		ACCURACY = 1, // 有効少数桁	
-		IS_VML = pettanr.ua.isIE === true && pettanr.ua.ieVersion < 9,
+		NUM_BALLOON_IMAGE  = 24,
+		TAIL_WIDTH         = 6,
+		TAIL_HEIGHT        = 10,
+		STROKE_WIDTH       = 1.2,
+		PADDING_TOP        = TAIL_HEIGHT,
+		PADDING_LEFT       = TAIL_HEIGHT,
+		IS_VML             = pettanr.ua.isIE === true && pettanr.ua.ieVersion < 9,
 		ELM_BALLOON_ORIGIN = ( function(){
 			var ret;
 			try {
@@ -1834,15 +1820,23 @@ pettanr.balloon = ( function() {
 				return null;
 			}
 		})(),
-		NUM_BALLOON_IMAGE = 24,
-		vectorEnabled = ELM_BALLOON_ORIGIN !== null && pettanr.URL_PARAMS.vector !== false;
-	if( IS_VML === true && pettanr.ua.VML === false ) vectorEnabled = false;
+		vectorEnabled = ELM_BALLOON_ORIGIN !== null &&
+						pettanr.URL_PARAMS.vector !== false &&
+						!( IS_VML === true && pettanr.ua.VML === false )
 
-	var cos = Math.cos, sin = Math.sin,
-		abs = Math.abs, pow = Math.pow,
-		round = Math.round,
-		floor = Math.floor,
-		TARGET = TAIL_WIDTH * TAIL_WIDTH,
+	var cos        = Math.cos,
+		sin        = Math.sin,
+		abs        = function(v){ return v >= 0 ? v : -1; },
+		pow        = Math.pow,
+		round      = Math.round,
+		floor      = Math.floor,
+		TARGET     = TAIL_WIDTH * TAIL_WIDTH,
+		isFinit    = Type.isFinite,
+		ACCURACY   = 1, // 有効少数桁	
+		cround     = function ( v, r ){
+						r = r || ACCURACY;
+						return round( v * pow( 10.0, r )) / pow( 10.0, r );
+					},
 		DEG_TO_RAD = Math.PI / 180;
 
 	var XBROWSER_BALLOON_CLASS = function( w, h, a ){
@@ -1852,24 +1846,21 @@ pettanr.balloon = ( function() {
 			instance = this,
 			l = ',';
 		
-		draw( a, w, h );
-		
 		function draw( _a, _w, _h ){
-			a  = _a !== undefined ? _a : a;
-			_a = a;// - 90;
-			w  = _w !== undefined ? _w - PADDING_TOP * 2 : w;
-			h  = _h !== undefined ? _h - PADDING_LEFT * 2 : h;
+			a  = isFinit( _a ) === true ? _a : a;
+			w  = isFinit( _w ) === true ? _w - PADDING_TOP * 2 : w;
+			h  = isFinit( _h ) === true ? _h - PADDING_LEFT * 2 : h;
 
 			if( vectorEnabled === false){
-				balloonElm.setAttribute( 'src', balloonUrlBuilder( _a ));
+				balloonElm.setAttribute( 'src', pettanr.balloon.getBalloonUrl( w, h, _a ));
 				return;
 			}
 			
-			var rx = w /2,
-				ry = h /2,
+			var rx      = w / 2,
+				ry      = h / 2,
 				tailRad = _a * DEG_TO_RAD,
-				tailX = rx +( rx +TAIL_HEIGHT ) * cos( tailRad ),
-				tailY = ry +( ry +TAIL_HEIGHT ) * sin( tailRad ),
+				tailX   = rx + ( rx + TAIL_HEIGHT ) * sin( tailRad ),
+				tailY   = ry - ( ry + TAIL_HEIGHT ) * cos( tailRad ),
 				startX, startY, endX, endY;
 		/*
 		 * tailの太さをTAIL_WIDTHに一致させるため、角度を絞りつつ計算
@@ -1881,19 +1872,19 @@ pettanr.balloon = ( function() {
 			for( var i = 45; i > 0.01; i /= 2){
 				d = ( tailDeg + i ) /2;
 				startRad = ( _a + d ) * DEG_TO_RAD;
-				endRad = ( _a - d ) * DEG_TO_RAD;
+				endRad   = ( _a - d ) * DEG_TO_RAD;
 				
-				_startX = rx +cos( startRad ) * rx;
-				_startY = ry +sin( startRad ) * ry;
-				_endX = rx +cos( endRad) * rx;
-				_endY = ry +sin( endRad) * ry;	//円弧上のY位置＝円中心Y＋sin(角度×PI÷180)×円半径
+				_startX  = rx + sin( startRad ) * rx;
+				_startY  = ry - cos( startRad ) * ry;
+				_endX    = rx + sin( endRad ) * rx;
+				_endY    = ry - cos( endRad ) * ry;	//円弧上のY位置＝円中心Y＋sin(角度×PI÷180)×円半径
 					
-				if( pow( ( _startX - _endX), 2 ) + pow( ( _startY - _endY ), 2 ) < TARGET ){
+				if( pow( ( _startX - _endX ), 2 ) + pow( ( _startY - _endY ), 2 ) < TARGET ){
 					tailDeg += i;
-					startX = _startX;
-					startY = _startY;
-					endX = _endX;
-					endY = _endY;						
+					startX  = _startX;
+					startY  = _startY;
+					endX    = _endX;
+					endY    = _endY;
 				}
 			}
 
@@ -1935,30 +1926,20 @@ pettanr.balloon = ( function() {
 					'z'
 				].join( ' '));
 			}
-			function cround( v, r){
-				r = r || ACCURACY;
-				return round( v * pow( 10.0, r )) / pow( 10.0, r );
-			}
 		}
+
+		draw( a, w, h );
 		
-		function balloonUrlBuilder( _a ){
-			var d = 360 / NUM_BALLOON_IMAGE;
-			_a = ( _a >= _a ? _a : _a + 360 ) + d / 2;
-			return [ 'system_pictures\/_w', _a < 360 - d / 2 ? floor( _a / d ) : 0, '.gif' ].join( '' );
-		}
 		this.elm = balloonElm;
 		this.resize = draw;
 		this.angle = function( _a ){
 			_a !== undefined && _a !== a &&
-				vectorEnabled === false ? balloonUrlBuilder( _a ) : draw( _a );
+				vectorEnabled === false ? pettanr.balloon.getBalloonUrl( w, h, _a ) : draw( _a );
 			return a;
 		}
 		this.type = function( _type ){
 			//draw( _a);
 		}
-		this.getURL = function(){
-			return balloonUrlBuilder( a );
-		}
 		this.destroy = function(){
 			delete instance.destroy;
 			balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm );
@@ -1975,9 +1956,20 @@ pettanr.balloon = ( function() {
 	})();
 
 	return {
-	    createBalloon: function( _w, _h, _a){
+	    createBalloon: function( _w, _h, _a ){
 	    	return new XBROWSER_BALLOON_CLASS( _w, _h, _a );
 	    },
+	    isBalloonInstance: function( _ballon ){
+	    	
+	    },
+	    getBalloonUrl: function( _w, _h, _a ){
+			var d = 360 / NUM_BALLOON_IMAGE;
+			_a = _a + d / 2;
+			return [
+				pettanr.CONST.SYSTEM_PICTURE_PATH, '_w',
+				_a < 360 - d / 2 ? floor( _a / d ) : 0,
+				'.gif' ].join( '' );
+	    },
 		TYPE_NONE:				0,
 		TYPE_SPEACH_BALLOON:	1,
 		TYPE_THINKING:			2,
@@ -2126,14 +2118,14 @@ pettanr.image = ( function(){
 		}
 	})();
 	
-	var REG_PNG = /\.png?/i,
-		IS_CSS3 = 0,
-		IS_VML = 1,
-		IS_ACTIVEX = 2,
-		IS_CANVAS = 3,
-		IS_FLASH = 4,
-		IS_SILVERLIGHT = 5,
-		IS_SERVER = 6,
+	var REG_PNG           = /\.png?/i,
+		IS_CSS3           = 0,
+		IS_VML            = 1,
+		IS_ACTIVEX        = 2,
+		IS_CANVAS         = 3,
+		IS_FLASH          = 4,
+		IS_SILVERLIGHT    = 5,
+		IS_SERVER         = 6,
 		IS_ACTIVEX_SERVER = 7,
 		BACKEND = ( function(){
 			if( pettanr.DEBUG === true && pettanr.URL_PARAMS.rimg ){
@@ -2157,21 +2149,20 @@ pettanr.image = ( function(){
 			if( pettanr.ua.ACTIVEX === true ) return IS_ACTIVEX_SERVER;
 			return IS_SERVER;
 		})(),
-		CLASS_NAME = 'reversible-image-container',
+		CLASS_NAME         = 'reversible-image-container',
 		CLASS_NAME_LOADING = CLASS_NAME + ' loading',
-		CLASS_NAME_ERROR = CLASS_NAME +' error',
-		RETRY_DELAY = 5000,
-		NUM_RETRY = 3,
+		CLASS_NAME_ERROR   = CLASS_NAME +' error',
+		RETRY_DELAY        = 5000,
+		NUM_RETRY          = 3,
 		ReversibleImageClass,
 		ReversibleImageClassWithPingfix;
 	
 	var css3Image = function( url, w, h, onLoadCallback ){
-		var elmWrap = document.createElement( 'div' ),
-			elmImg,
-			loaded = false,
+		var elmWrap    = document.createElement( 'div' ),
+			elmImg     = null,
 			retryTimer = null,
-			fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),
-			instance = this;
+			fetch      = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),
+			instance   = this;
 		elmWrap.className = CLASS_NAME_LOADING;
 
 		function onLoad( _url, _actualW, _actualH ){
@@ -2185,7 +2176,6 @@ pettanr.image = ( function(){
 			elmWrap.className = CLASS_NAME;
 			onLoadCallback && onLoadCallback( _url, _actualW, _actualH );
 			onLoadCallback = fetch = null;
-			loaded = true;
 			instance.resize( w, h );
 		}
 		function onError( _url ){
@@ -2203,13 +2193,13 @@ pettanr.image = ( function(){
 		this.resize = function( _w, _h ){
 			w = _w !== undefined ? _w : w;
 			h = _h !== undefined ? _h : h;
-			if( loaded === false ) return;
+			if( elmImg === null ) return;
 			elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';
 		}
 		this.destroy = function(){
 			delete instance.destroy;
 			
-			loaded === true && elmWrap.removeChild( elmImg );
+			elmImg !== null && elmWrap.removeChild( elmImg );
 			retryTimer !== null && window.clearTimeout( retryTimer );
 			fetch !== null && fetch.stop();
 			elmWrap = elmImg = onLoadCallback = retryTimer = fetch = instance = null;
@@ -2220,24 +2210,22 @@ pettanr.image = ( function(){
 	
 	var vmlImage = function( url, w, h, onLoadCallback ){
 		var elmWrap = document.createElement( 'div' ),
-			vmlImg,
-			loaded = false,
+			vmlImg = null,
 			retryTimer = null,
 			fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),
 			instance = this;
 		elmWrap.className = CLASS_NAME_LOADING;
-		function onLoad( _url, _actualW, _actualH){
+		function onLoad( _url, _actualW, _actualH ){
 			if( elmWrap === null ) return;
 			elmWrap.className = CLASS_NAME;
 			vmlImg = document.createElement( 'v:image' );
 			vmlImg.src = url;
 			onLoadCallback && onLoadCallback( _url, _actualW, _actualH );
 			onLoadCallback = fetch = null;
-			loaded = true;
 			instance.resize( w, h );
 		}
 		function onError( _url ){
-			if( elmWrap === null) return;
+			if( elmWrap === null ) return;
 			elmWrap.className = CLASS_NAME_ERROR;
 			retryTimer = window.setTimeout( retry, RETRY_DELAY );
 			fetch = null;
@@ -2251,9 +2239,9 @@ pettanr.image = ( function(){
 		this.resize = function( _w, _h ){
 			w = _w !== undefined ? _w : w;
 			h = _h !== undefined ? _h : h;
-			if( loaded !== true ) return;
-			vmlImg.style.width = w < 0 ? -w : w +'px';
-			vmlImg.style.height = h < 0 ? -h : h +'px';
+			if( vmlImg === null ) return;
+			vmlImg.style.width  = ( w < 0 ? -w : w ) + 'px';
+			vmlImg.style.height = ( h < 0 ? -h : h ) + 'px';
 			//if( flipH !== _flipH || flipV !== _flipV){
 				vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg );
 			//}
@@ -2263,21 +2251,19 @@ pettanr.image = ( function(){
 		this.destroy = function(){
 			instance.destroy;
 			
-			loaded === true && elmWrap.removeChild( vmlImg );
+			vmlImg !== null && elmWrap.removeChild( vmlImg );
 			retryTimer !== null && window.clearTimeout( retryTimer );
 			fetch !== null && fetch.stop();
 			elmWrap = vmlImg = onLoadCallback = retryTimer = fetch = instance = null;
 		}
 	}
 	
-	var serverImage = function( url, w, h, onLoadCallback ){
-		
-	}
+	var serverImage = css3Image; // function( url, w, h, onLoadCallback ){}
 	
-	if( BACKEND === IS_CSS3 ) ReversibleImageClass = css3Image;
-	if( BACKEND === IS_VML ) ReversibleImageClass = vmlImage;
+	if( BACKEND === IS_CSS3 )    ReversibleImageClass = css3Image;
+	if( BACKEND === IS_VML )     ReversibleImageClass = vmlImage;
 	if( BACKEND === IS_ACTIVEX ) ReversibleImageClass = activexImage;
-	if( BACKEND === IS_SERVER ) ReversibleImageClass = activexImage;
+	if( BACKEND === IS_SERVER )  ReversibleImageClass = activexImage;
 	
 	css3Image = vmlImage = activexImage = activexImage = null;
 	
diff --git a/0.4.x/javascripts/system.js b/0.4.x/javascripts/system.js
index 6162a6f..4d00da8 100644
--- a/0.4.x/javascripts/system.js
+++ b/0.4.x/javascripts/system.js
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.4.32
+ *   version 0.4.33
  *   
  * author:
  *   itozyun
diff --git a/0.4.x/javascripts/work.js b/0.4.x/javascripts/work.js
index 901e9c7..d18c952 100644
--- a/0.4.x/javascripts/work.js
+++ b/0.4.x/javascripts/work.js
@@ -1,6 +1,6 @@
 /*
  * pettanR work.js
- *   version 0.4.32
+ *   version 0.4.33
  *   
  * author:
  *   itozyun
@@ -68,23 +68,24 @@
 pettanr.editor = pettanr.view.registerApplication( function(){
 
 	var PANEL_ELEMENT_TYPE_IMAGE = 0,
-		PANEL_ELEMENT_TYPE_TEXT = 1,
-		MOUSE_LISTENER_ARRAY = [],
-		PANEL_ELEMENT_ARRAY = [],
+		PANEL_ELEMENT_TYPE_TEXT  = 1,
+		MOUSE_LISTENER_ARRAY     = [],
+		PANEL_ELEMENT_ARRAY      = [],
 		ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),
-		MIN_PANEL_HEIGHT = 20,
-		MIN_ELEMENT_SIZE = 19,
-		MOUSE_HIT_AREA = 10,
+		MIN_PANEL_HEIGHT         = 20,
+		MIN_ELEMENT_SIZE         = 19,
+		MOUSE_HIT_AREA           = 10,
 		jqMouseEventChacher,
 		jqEditor,
 		windowW, windowH,
-		currentListener = null,
-		currentCursor = '',
-		instance = this,
+		currentListener          = null,
+		currentCursor            = '',
+		instance                 = this,
 		option,
-		comicID = -1,
-		panelID = -1,
-		panelTimming = -1,
+		comicID                  = -1,
+		panelID                  = -1,
+		panelTimming             = -1,
+		phase                    = -1,
 		log;
 
 /* ----------------------------------------
@@ -819,7 +820,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 		MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);
 
 		function addImage( e){
-			setTimeout( IMAGE_EXPLORER_WINDOW.open, 0);
+			IMAGE_EXPLORER_WINDOW.open();// setTimeout( IMAGE_EXPLORER_WINDOW.open, 0);
 			instance.bodyBackOrForward( true );
 			e && e.preventDefault && e.preventDefault();
 			return false;
@@ -955,7 +956,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 						height: _h
 					});
 				},
-				update: function( currentElement){
+				update: function( currentElement ){
 					
 					if( currentLock === true && currentElement === null) return;
 					
@@ -1597,15 +1598,15 @@ pettanr.editor = pettanr.view.registerApplication( function(){
  */
 	var TAIL_OPERATOR = ( function(){
 		var	MOUSE_CURSOR = updateMouseCursor,
-			ELM_MOVER = document.getElementById( 'balloon-tail-mover'),
-			SIZE = pettanr.util.getElementSize( ELM_MOVER).width,
-			SIN = Math.sin,
-			COS = Math.cos,
-			ATAN = Math.atan,
-			FLOOR = Math.floor,
-			DEG_TO_RAD = Math.PI / 180,
-			RAD_TO_DEG = 1 /DEG_TO_RAD,
-			currentText = null,
+			ELM_MOVER    = document.getElementById( 'balloon-tail-mover'),
+			SIZE         = pettanr.util.getElementSize( ELM_MOVER).width,
+			SIN          = Math.sin,
+			COS          = Math.cos,
+			ATAN         = Math.atan,
+			FLOOR        = Math.floor,
+			DEG_TO_RAD   = Math.PI / 180,
+			RAD_TO_DEG   = 1 / DEG_TO_RAD,
+			currentText  = null,
 			tailX, tailY,
 			x, y, w, h,
 			balloonW, balloonH, balloonA, radA,
@@ -1613,13 +1614,13 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 			startA;
 		
 		return {
-			update: function ( _w, _h, _a){
+			update: function ( _w, _h, _a ){
 				balloonW = _w !== undefined ? _w : balloonW;
 				balloonH = _h !== undefined ? _h : balloonH;
 				balloonA = _a !== undefined ? _a : balloonA;
-				radA = balloonA * DEG_TO_RAD;
-				tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2);
-				tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2);
+				radA = ( balloonA - 90 ) * DEG_TO_RAD;
+				tailX = FLOOR( ( ( COS( radA ) / 2 + 0.5 ) * ( balloonW + SIZE )) - SIZE / 2);
+				tailY = FLOOR( ( ( SIN( radA ) / 2 + 0.5 ) * ( balloonH + SIZE )) - SIZE / 2);
 				ELM_MOVER.style.left = tailX +'px';
 				ELM_MOVER.style.top = tailY +'px';
 				//log.html( [ balloonW, balloonH, balloonA].join());
@@ -1629,12 +1630,12 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 				 * visibilityのほうがいい, display:none だと ie で描画が狂う
 				 */
 				ELM_MOVER.style.visibility = '';
-				this.update( _currentText.w, _currentText.h, _currentText.angle());
+				TAIL_OPERATOR.update( _currentText.w, _currentText.h, _currentText.angle() );
 				currentText = _currentText;
 			},
 			hitTest: function( _mouseX, _mouseY){
-				var _x = tailX -SIZE /2,
-					_y = tailY -SIZE /2;
+				var _x = tailX -SIZE / 2,
+					_y = tailY -SIZE / 2;
 					ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;
 				ret === true && MOUSE_CURSOR( 'move');
 				return ret;
@@ -1644,10 +1645,10 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 				currentText = null;
 			},
 			onStart: function( _currentText, _mouseX, _mouseY){
-				if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT) return false;
+				if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT ) return false;
 				x = _currentText.x;
 				y = _currentText.y;
-				if( this.hitTest( _mouseX -x, _mouseY -y) === true){
+				if( TAIL_OPERATOR.hitTest( _mouseX -x, _mouseY -y ) === true){
 					w = _currentText.w;
 					h = _currentText.h;
 					currentText = _currentText;
@@ -1657,16 +1658,15 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 				return false;
 			},
 			onDrag: function( _mouseX, _mouseY){
-				_mouseX = _mouseX -x -w /2;
-				_mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換
-				
-				this.update( w, h,
+				_mouseX = _mouseX - x - w / 2;
+				_mouseY = _mouseY - y - h / 2; //Balloonの中心を0,0とする座標系に変換
+				TAIL_OPERATOR.update( w, h,
 					_mouseX !== 0 ?
-						ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :
-						_mouseY > 0 ? 90 : -90
+						ATAN( _mouseY / _mouseX ) * RAD_TO_DEG + ( _mouseX > 0 ? 90 : 270 ) :
+						_mouseY > 0 ? 180 : 0
 				);
-				currentText && currentText.angle( Math.floor( balloonA + 0.5 ));
-				INFOMATION_WINDOW.update( currentText);
+				currentText && currentText.angle( FLOOR( balloonA + 0.5 ));
+				INFOMATION_WINDOW.update( currentText );
 			},
 			onFinish: function(){
 				startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);
@@ -2219,23 +2219,18 @@ pettanr.editor = pettanr.view.registerApplication( function(){
  */
 	var	jqImageElementOrigin;
 	var ImageElementClass = function( data ){
-		jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());
-		
-		var JQ_WRAPPER = jqImageElementOrigin.clone( true ),
-			w = data.width,
-			h = data.height,
-			x, y, z,
-			flipH = w < 0 ? -1 : 1,
-			flipV = h < 0 ? -1 : 1,
+		jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete' ).remove().html() );
+		
+		var jqWrap          = jqImageElementOrigin.clone( true ),
+			flipH           = data.width  < 0 ? -1 : 1,
+			flipV           = data.height < 0 ? -1 : 1,
 			resourcePicture = data.resource_picture,
-			actualW = data.resource_picture.width,
-			actualH = data.resource_picture.height,
+			actualW         = data.resource_picture.width,
+			actualH         = data.resource_picture.height,
 			reversibleImage = null,
-			instance = this;
-		w = Math.floor( w );
-		h = Math.floor( h );
-
-		function onAnimeComplete(){
+			instance        = this,
+			x, y, z, w, h;
+		function flipReversibleImage(){
 			reversibleImage && reversibleImage.resize( flipH * w, flipV * h );
 		}
 		function updateResourcePicture( _resourcePicture ){
@@ -2248,25 +2243,26 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 					[ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),
 					flipH * w, flipV * h
 				);
-			if( reversibleImage !== null){
-				JQ_WRAPPER.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );
+			if( reversibleImage !== null ){
+				jqWrap.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );
 				reversibleImage.destroy();
 			} else {
-				JQ_WRAPPER.append( _reversibleImage.elm );
+				jqWrap.append( _reversibleImage.elm );
 			}
 			reversibleImage = _reversibleImage;
 		}
 		/* global methods */
-		this.$ = JQ_WRAPPER;
+		this.$ = jqWrap;
 		//this.x = x;
 		//this.y = y;
 		//this.w = w;
 		//this.h = h;					
 		this.z = data.z;
 		this.timing = data.t;
+		this.keepSize = false;
 		this.init = function(){
 			updateResourcePicture( data.resource_picture );
-			instance.resize( data.x, data.y, data.width, data.height );
+			instance.resize( data.x, data.y, Math.abs( data.width ), Math.abs( data.height ) );
 			delete instance.init;
 		}
 		this.flip = function( _updateH, _updateV ){
@@ -2275,12 +2271,8 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 			flipV = _updateV === true ? -flipV : flipV;
 			reversibleImage.resize( flipH * w, flipV * h );
 		}
-		this.flipV = function(){
-			return flipV;
-		}
-		this.flipH = function(){
-			return flipH;
-		}
+		this.flipV = function(){ return flipV;}
+		this.flipH = function(){ return flipH;}
 		this.resourcePicture = function( _resourcePicture ){
 			if( _resourcePicture && _resourcePicture !== resourcePicture ){
 				HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture );
@@ -2293,19 +2285,18 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 		}
 		this.actualW = function(){ return actualW;}
 		this.actualH = function(){ return actualH;}
-		this.keepSize = false;
 		this.resize = function( _x, _y, _w, _h, animate ){
-			instance.x = x = _x !== undefined ? _x : x;
-			instance.y = y = _y !== undefined ? _y : y;
-			instance.w = w = _w !== undefined ? _w : w;
-			instance.h = h = _h !== undefined ? _h : h;
-			JQ_WRAPPER[ animate === true ? 'animate' : 'css' ]( { 
+			instance.x = x = Type.isFinite( _x ) === true ? _x : x;
+			instance.y = y = Type.isFinite( _y ) === true ? _y : y;
+			instance.w = w = Type.isFinite( _w ) === true ? _w : w;
+			instance.h = h = Type.isFinite( _h ) === true ? _h : h;
+			jqWrap[ animate === true ? 'animate' : 'css' ]( { 
 				left:	x,
 				top:	y,
 				width:	w,
 				height:	h
-			}, 250, onAnimeComplete );
-			animate !== true && onAnimeComplete();
+			}, 250,  flipReversibleImage );
+			animate !== true && flipReversibleImage();
 		}
 		this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){
 			flipH = _flipH !== undefined ? _flipH : flipH;
@@ -2316,8 +2307,8 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 			delete instance.destroy;
 			
 			reversibleImage.destroy();
-			JQ_WRAPPER.stop().remove();
-			JQ_WRAPPER = reversibleImage = resourcePicture = data = instance = null;
+			jqWrap.stop().remove();
+			jqWrap = reversibleImage = resourcePicture = data = instance = null;
 		}
 	}
 	ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE );
@@ -2395,21 +2386,18 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 			updateText();
 			instance.resize( data.x, data.y, data.width, data.height, data.tail );
 			delete instance.init;
-		}
+		};
 		this.angle = function( _a ){
 			_a !== undefined && instance.resize( x, y, w, h, _a );
-			return a >= 0 ? a : a + 360;
-		}
+			return a;
+		};
 		this.text = function( _text ){
 			if( _text && text !== _text) {
 				HISTORY_CONTROL.saveState( updateText, text || '', _text );
 				updateText( _text );
 			}
 			return text;
-		}
-		this.getBalloonURL = function(){
-			return balloon.getURL();
-		}
+		};
 		this.resize = function( _x, _y, _w, _h, _a, animate ){
 			instance.x = x = _x !== undefined ? _x : x;
 			instance.y = y = _y !== undefined ? _y : y;
@@ -2425,17 +2413,17 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 				}, 250, resizeBalloon
 			);		
 			animate !== true && resizeBalloon();
-		}
+		};
 		this.animate = function ( _x, _y, _w, _h, _a ){
 			instance.resize( _x, _y, _w, _h, _a, true );
-		}
+		};
 		this.destroy = function(){
 			delete instance.destroy;
 			
 			JQ_WRAPPER.stop().remove();
 			balloon.destroy();
 			JQ_WRAPPER = elmText = data = balloon = instance = null;
-		}
+		};
 	}
 	TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );
 
@@ -2473,36 +2461,35 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 	 * 2. renumber z
 	 */
 		function appendComicElement( _panelElement ) {
-			var z = _panelElement.z,
+			var z = Type.isFinite( _panelElement.z ) === true ? _panelElement.z : -1,
 				l = PANEL_ELEMENT_ARRAY.length,
 				_jqElm = _panelElement.$.stop().css( {
 					filter:		'',
 					opacity:	''
 				});
-			if( typeof z !== 'number' || z < 0 || z >= l ){
+			if( z < 0 ){
 				PANEL_ELEMENT_ARRAY.unshift( _panelElement );
-				ELM_CONTAINER.appendChild( _jqElm.get( 0 ));
+				// ELM_CONTAINER.appendChild( _jqElm.get( 0 ));
+				renumber();
 				_jqElm.fadeIn();
-			} else
-			if( l === 0 ){
-				PANEL_ELEMENT_ARRAY.push( _panelElement );
-				ELM_CONTAINER.appendChild( _jqElm.get( 0 ));
 			} else {
-				var insertIndex = 0;
 				for( var i = 0; i < l; ++i ){
-					if( PANEL_ELEMENT_ARRAY[ i ].z <= z ){
-						insertIndex = i;
-						break;
-					}
+					if( PANEL_ELEMENT_ARRAY[ i ].z < z ) break;
 				}
-				PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm.fadeIn() );
-				PANEL_ELEMENT_ARRAY.splice( insertIndex, 0, _panelElement );
+				if( i === l ){
+					PANEL_ELEMENT_ARRAY.push( _panelElement );
+					//ELM_CONTAINER.appendChild( _jqElm.get( 0 ));
+				} else {
+					PANEL_ELEMENT_ARRAY.splice( i, 0, _panelElement );
+					//PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm );
+				}
+				renumber();
+				_jqElm.fadeIn();
 			}
-			renumber();
 		}
 		function removeComicElement( _panelElement ) {
 			var l = PANEL_ELEMENT_ARRAY.length;
-			for( var i=0; i<l; ++i){
+			for( var i=0; i<l; ++i ){
 				if( PANEL_ELEMENT_ARRAY[ i ] === _panelElement ){
 					PANEL_ELEMENT_ARRAY.splice( i, 1 );
 					renumber();
@@ -2514,10 +2501,10 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 					return;
 				}
 			}
-			function onFadeOut(){
-				this.parentNode.removeChild( this );
-			}
 		}
+		function onFadeOut(){
+			this.parentNode.removeChild( this );
+		}		
 		function restoreComicElement( arg ){
 			var isAppend = arg[ 0 ],
 				comicElement = arg[ 1 ];
@@ -2533,34 +2520,36 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 			for( var i=0; i < l; ++i){
 				_panelElement = PANEL_ELEMENT_ARRAY[ i ];
 				jqElm = _panelElement.$;
+				i === 0 && ELM_CONTAINER.appendChild( jqElm.get( 0 ));
 				jqNext && jqNext.before( jqElm );
-				_panelElement.z = l -i -1;
+				if( phase === 1 ) _panelElement.z = l - i - 1;
 				jqNext = jqElm;
 			}
 		}
 		function replaceComicElement( _panelElement, goForward ){
 			// PANEL_ELEMENT_ARRAYの再構築
 			var l = PANEL_ELEMENT_ARRAY.length,
-				i = ( function(){
-					for( var ret = 0; ret < l; ++ret ){
-						if( PANEL_ELEMENT_ARRAY[ ret] === _panelElement ) return ret;
-					}
-					return -1;
-				})();
+				i = -1;
+			for( var j = 0; j < l; ++j ){
+				if( PANEL_ELEMENT_ARRAY[ j ] === _panelElement ){
+					i = j;
+					break;
+				};
+			}
 			if( i === -1) return false;
-			if( goForward === true){
-				if( i === 0) return false;
-				PANEL_ELEMENT_ARRAY.splice( i, 1);
-				PANEL_ELEMENT_ARRAY.splice( i -1, 0, _panelElement);
+			if( goForward === true ){
+				if( i === 0 ) return false;
+				PANEL_ELEMENT_ARRAY.splice( i, 1 );
+				PANEL_ELEMENT_ARRAY.splice( i - 1, 0, _panelElement );
 			} else {
-				if( i === l -1) return false;
-				PANEL_ELEMENT_ARRAY.splice( i, 1);
-				PANEL_ELEMENT_ARRAY.splice( i +1, 0, _panelElement);
+				if( i === l - 1 ) return false;
+				PANEL_ELEMENT_ARRAY.splice( i, 1 );
+				PANEL_ELEMENT_ARRAY.splice( i + 1, 0, _panelElement );
 			}
-			renumber();
+			renumber( true );
 			return true;
 		}
-		function restoreReplaceElement( arg){
+		function restoreReplaceElement( arg ){
 			replaceComicElement( arg[ 0], arg[ 1]);
 		}
 		function onTextInput( _panelElement ){
@@ -2674,22 +2663,26 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 				}
 			},
 			onImageSelect: function( data, isPanelPictureData ){
+				var _panelElement;
 				if( isPanelPictureData !== true ){
-					data = {
+					_panelElement = new ImageElementClass( {
 						resource_picture:data,
-						x:               Math.floor( panelW /2 - data.width /2 ),
-						y:               Math.floor( panelH /2 - data.height /2 ),
+						x:               Math.floor( panelW / 2 - data.width / 2 ),
+						y:               Math.floor( panelH / 2 - data.height / 2 ),
 						z:               -1,
 						t:               PANEL_ELEMENT_ARRAY.length,
-						width:           data.width,
-						height:          data.height
-					}
+						width:           1,
+						height:          1
+					});
+					_panelElement.init && _panelElement.init();
+					appendComicElement( _panelElement );
+					_panelElement.animate( undefined, undefined, Math.abs( data.width ), Math.abs( data.height ) );
+				} else {
+					_panelElement = new ImageElementClass( data );
+					_panelElement.init && _panelElement.init();
+					appendComicElement( _panelElement );
 				}
-				var _panelElement = new ImageElementClass( data );
-				_panelElement.init && _panelElement.init();
-				appendComicElement( _panelElement );
-				_panelElement.animate( undefined, undefined, data.width, data.height );
-				SAVE( restoreComicElement, [ false, _panelElement], [ true, _panelElement], true );
+				SAVE( restoreComicElement, [ false, _panelElement], [ true, _panelElement ], true );
 			},
 			createTextElement: function( data ){
 				var _panelElement;
@@ -2803,9 +2796,10 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 		delete instance.firstOpen;
 	}
 	this.onOpen = function( _w, _h, _file ){
-		comicID = -1;
-		panelID = -1;
+		comicID      = -1;
+		panelID      = -1;
 		panelTimming = -1;
+		phase        = 0;
 		
 		var panelW, panelH,
 			borderSize,
@@ -2864,8 +2858,11 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 		windowW = _w;
 		windowH = _h;
 		instance.onPaneResize( _w, _h );
+		
+		phase   = 1;
 	}
 	this.onClose = function(){
+		phase   = 2;
 		HISTORY_CONTROL.close();
 		
 		WINDOWS_CONTROL.close();
@@ -2878,6 +2875,8 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 		
 		// last
 		MENU_BAR_CONTROL.open();
+		
+		phase = -1;
 	}
 	this.onPaneResize = function( _windowW, _windowH){
 		windowW = _windowW || windowW;
@@ -3630,7 +3629,7 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
 					isXHTML !== true ? '>' : ' \/>'
 				].join( '');				
 			} else {
-				url = _panelElement.getBalloonURL();
+				url = pettanr.balloon.getBalloonUrl( _panelElement.w, _panelElement.h, _panelElement.angle() );
 				return [
 					'<img ',
 						'src="',        isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',
diff --git a/0.4.x/json/comics_1.json b/0.4.x/json/comics_1.json
index 0d6049a..c24a177 100644
--- a/0.4.x/json/comics_1.json
+++ b/0.4.x/json/comics_1.json
@@ -38,7 +38,7 @@
 		            "balloon_template_id":1,
 		            "system_picture_id":1,
 		            "size":1,
-		            "tail":340,
+		            "tail":64,
 		            "x":-34,
 		            "y":35,
 		            "z":1,
@@ -57,6 +57,64 @@
 		            }
 		        }
 		    ]
+		},
+		{
+		    "id":2,
+		    "border":2,
+		    "comic_id":1,
+		    "resource_picture_id":1,
+		    "x":0,
+		    "y":0,
+		    "z":0,
+		    "width":300,
+		    "height":335,
+		    "panel_elements":[{
+		            "resource_picture":{
+		                "id":42,
+		                "ext":"gif"
+		            },
+		            "x":32,
+		            "y":21,
+		            "z":1,
+		            "width":110,
+		            "height":216,
+		            "t":1
+		        },
+		        {
+		            "resource_picture":{
+		                "id":42,
+		                "ext":"gif"
+		            },
+		            "x":35,
+		            "y":224,
+		            "z":0,
+		            "width":103,
+		            "height":-99,
+		            "t":2
+		        },
+		        {
+		            "balloon_template_id":1,
+		            "system_picture_id":1,
+		            "size":1,
+		            "tail":286,
+		            "x":158,
+		            "y":24,
+		            "z":2,
+		            "t":3,
+		            "width":156,
+		            "height":128,
+		            "speaches_attributes":{
+		                "newf3":{
+		                    "content":"今我ら鏡もて見る如く観る所朧なり",
+		                    "x":158,
+		                    "y":24,
+		                    "t":3,
+		                    "width":156,
+		                    "height":128
+		                }
+		            }
+		        }
+		    ]
 		}
     ], 
     "title": "Hello, world", 
diff --git a/0.4.x/test/activex.html b/0.4.x/test/activex.html
index 24b5c9c..a3d7edd 100644
--- a/0.4.x/test/activex.html
+++ b/0.4.x/test/activex.html
@@ -166,7 +166,11 @@ x.style.cssText = 'width:1px;height:1px;<ins>line-height:1px;</ins>filter:progid
                 </div>
             </div>
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
-        </div><!-- #EndLibraryItem --></div>
+        </div><!-- #EndLibraryItem -->
+	</div>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 	<script type="text/javascript" src="../javascripts/common.js"></script>
 <!-- InstanceBeginEditable name="script" -->
 	<script type="text/javascript">
diff --git a/0.4.x/test/comic-html-structure.html b/0.4.x/test/comic-html-structure.html
index a5335b2..d7a30bf 100644
--- a/0.4.x/test/comic-html-structure.html
+++ b/0.4.x/test/comic-html-structure.html
@@ -431,6 +431,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" src="../javascripts/common.js"></script>
 <!-- InstanceBeginEditable name="script" -->
 <!-- InstanceEndEditable -->
diff --git a/0.4.x/test/dynamic-comic-html.html b/0.4.x/test/dynamic-comic-html.html
index 219c978..7e55918 100644
--- a/0.4.x/test/dynamic-comic-html.html
+++ b/0.4.x/test/dynamic-comic-html.html
@@ -12,6 +12,7 @@
 	<title>js によるコミック html の動的書き出しテスト | pettanR</title>
 	<!-- InstanceEndEditable -->
 	<!-- InstanceBeginEditable name="head" -->
+	<link type="text/css" rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCoreDefault.css">
 	<!-- InstanceEndEditable -->
 </head>
 
@@ -63,7 +64,7 @@
 			"balloon_template_id":	1,
 			"system_picture_id":	1,
 			"size":			1,
-			"tail":			-14,
+			"tail":			90,
 			"x":			-29,
 			"y":			39,
 			"z":			1,
@@ -90,7 +91,7 @@
 					<h3>source</h3>
 					<p>pettanr.bind は pettanR コミック用の html エレメントを制作するときに使用する．外部サイト張り出し用  script や ユーザーコンソールの コミックビューワーから使われる．</p>
 					<p>pettanr.bind.createBindWorker で BindWorker インスタンスを作って使用する．bind の意味は 製本 ．jQuery.bind とは関係ないので注意．</p>
-					<pre><code>
+					<pre class="brush: js;">
 var jsonArea = document.htmlTest.jsonString,
 	button = document.htmlTest.bindButton,
 	bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),
@@ -106,7 +107,7 @@ button.onclick = function(){
 	json !== null && bindWorker.json( json);
 	json = null;
 }
-					</code></pre>
+					</pre>
 					<h3>js による動的な書き出しの利点</h3>
 					<p>js による動的な書き出しには以下にあげる利点がある．最後のもの以外はサーバへの画像リクエストを抑えるものになります．</p>
 					<ul>
@@ -180,9 +181,19 @@ 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" src="../javascripts/common.js"></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">
+		SyntaxHighlighter.all();
+		
 		var jsonArea = document.htmlTest.jsonString,
 			button = document.htmlTest.bindButton,
 			bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),
diff --git a/0.4.x/test/html2comic_0.1.html b/0.4.x/test/html2comic_0.1.html
index dbc2b4c..e931e75 100644
--- a/0.4.x/test/html2comic_0.1.html
+++ b/0.4.x/test/html2comic_0.1.html
@@ -2,6 +2,7 @@
 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<meta http-equiv="Content-Language" content="ja">
 	<meta http-equiv="Content-Script-Type" content="text/javascript">
 	<meta http-equiv="Content-Style-Type" content="text/css">
@@ -10,7 +11,6 @@
 	<!-- InstanceBeginEditable name="doctitle" -->
 	<title>ぺったんR html 実証サンプル version 0.1 | pettanR</title>
 	<!-- InstanceEndEditable -->
-	<link type="text/css" rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCoreDefault.css">
 	<!-- InstanceBeginEditable name="head" -->
 	<style type="text/css">			
 				
@@ -337,6 +337,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" src="../javascripts/common.js"></script>
 <!-- InstanceBeginEditable name="script" -->
 	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js"></script>
diff --git a/0.4.x/test/index.html b/0.4.x/test/index.html
index c81036a..f8c2378 100644
--- a/0.4.x/test/index.html
+++ b/0.4.x/test/index.html
@@ -126,7 +126,11 @@
                 </div>
             </div>
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
-        </div><!-- #EndLibraryItem --></div>
+        </div><!-- #EndLibraryItem -->
+	</div>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 	<script type="text/javascript" src="../javascripts/common.js"></script>
 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
 </body>
diff --git a/0.4.x/test/svg.html b/0.4.x/test/svg.html
index 3f31029..d15a7e3 100644
--- a/0.4.x/test/svg.html
+++ b/0.4.x/test/svg.html
@@ -167,7 +167,11 @@
                 </div>
             </div>
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
-        </div><!-- #EndLibraryItem --></div>
+        </div><!-- #EndLibraryItem -->
+	</div>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 	<script type="text/javascript" src="../javascripts/common.js"></script>
 <!-- InstanceBeginEditable name="script" -->
 		<script type="text/javascript">
diff --git a/0.4.x/test/transform.html b/0.4.x/test/transform.html
index cda6732..20cca44 100644
--- a/0.4.x/test/transform.html
+++ b/0.4.x/test/transform.html
@@ -180,7 +180,11 @@
                 </div>
             </div>
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
-        </div><!-- #EndLibraryItem --></div>
+        </div><!-- #EndLibraryItem -->
+	</div>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 	<script type="text/javascript" src="../javascripts/common.js"></script>
 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
 </body>
diff --git a/0.4.x/test/type.html b/0.4.x/test/type.html
index c783789..deaedd5 100644
--- a/0.4.x/test/type.html
+++ b/0.4.x/test/type.html
@@ -127,7 +127,11 @@
                 </div>
             </div>
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
-        </div><!-- #EndLibraryItem --></div>
+        </div><!-- #EndLibraryItem -->
+	</div>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 	<script type="text/javascript" src="../javascripts/common.js"></script>
 <!-- InstanceBeginEditable name="script" -->
 		<script type="text/javascript">
diff --git a/0.4.x/test/vertical-center.html b/0.4.x/test/vertical-center.html
index a38ecdd..ff746ba 100644
--- a/0.4.x/test/vertical-center.html
+++ b/0.4.x/test/vertical-center.html
@@ -264,6 +264,8 @@
 						</div>
 					</div>
 					
+					<div style="height:420px;"></div>
+					
 					<h2>上下中央配置テスト</h2>
 					http://www.webbibo.com/blog/htmlcss/vertical/125.html
 					<div class="wrap">
@@ -343,7 +345,11 @@
                 </div>
             </div>
             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
-        </div><!-- #EndLibraryItem --></div>
+        </div><!-- #EndLibraryItem -->
+	</div>
+	<script type="text/javascript">
+		var has_server_support = false;
+	</script>
 	<script type="text/javascript" src="../javascripts/common.js"></script>
 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
 </body>
diff --git a/0.4.x/work.html b/0.4.x/work.html
index 6c1f4dc..c1c87ba 100644
--- a/0.4.x/work.html
+++ b/0.4.x/work.html
@@ -456,9 +456,11 @@
 			</div>
 			
 		</div>
-
+		<script type="text/javascript">
+			var has_server_support = false;
+		</script>
 		<script type="text/javascript" src="javascripts/common.js"></script>
-		<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
+		<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 		<script type="text/javascript" src="javascripts/work.js"></script>
 		<script type="text/javascript" src="javascripts/system.js"></script>
     </body>
-- 
2.11.0