X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.5.x%2Fjavascripts%2Fpeta-common.js;h=13a424412bcc1eca1af9b0e70b1c45d814f20bdf;hb=2621070c032954702155d4a315535b8b1aafd616;hp=96133edb9d09a2bd8b3a29326b220386d6b5be8b;hpb=798ecd12de5f69881e861e0dca6d6a9e60bc9742;p=pettanr%2FclientJs.git

diff --git a/0.5.x/javascripts/peta-common.js b/0.5.x/javascripts/peta-common.js
index 96133ed..13a4244 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.39
+ *   version 0.5.49
  * 
  *   author:
  *     itozyun
@@ -40,7 +40,7 @@ var pettanr = ( function(){
 		})(),
 		IS_DEBUG = Type.isBoolean( URL_PARAMS.debug ) ? URL_PARAMS.debug : IS_LOCAL === true;
 	return {
-		version: '0.5.31',
+		version: '0.5.40',
 		URL_PARAMS: URL_PARAMS,
 		LOCAL: IS_LOCAL,
 		DEBUG: IS_DEBUG,
@@ -84,52 +84,33 @@ pettanr.CONST = ( function(){
 		})();
 		
 	return {
-		PETTANR_ROOT_PATH:			PETTANR_ROOT_PATH,
-		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_MY_RESOURCE_PICTURES_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/resource_picture.json',
-		URL_COMICS_JSON:			( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'comics.json',
-		URL_MY_COMICS_JSON:			( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/comic.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',
-		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',
-		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',
-		SERVER_SUPPORT:				SERVER_SUPPORT,
-		URL_PETA_APPS_CSS:			( SERVER_SUPPORT === false ? 'stylesheets' : '\/assets' ) + '\/peta.apps.css'
+		PETTANR_ROOT_PATH             : PETTANR_ROOT_PATH,
+		URL_MY_ORIGINAL_PICTURES_JSON : ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'original_pictures.json',
+		URL_MY_RESOURCE_PICTURES_JSON : ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/resource_pictures.json',
+		URL_RESOURCE_PICTURES_JSON    : ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'resource_pictures.json',
+		URL_MY_RESOURCE_PICTURES_JSON : ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/resource_picture.json',
+		URL_COMICS_JSON               :	( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'comics.json',
+		URL_MY_COMICS_JSON            :	( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/comic.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',
+		SPEECH_BALOON_TEMPLETE        : ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'speech_balloon_templates.json\/',
+		NS_PETTANR_COMIC              : 'pettanr-comic',
+		THUMBNAIL_PATH                : SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/thumbnail\/' : PETTANR_ROOT_PATH + 'resource_pictures\/',
+		RESOURCE_PICTURE_PATH         : SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/' : PETTANR_ROOT_PATH + 'resource_pictures\/full\/',
+		ORIGINAL_PICTURE_PATH         : SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/' : PETTANR_ROOT_PATH + 'original_pictures\/',
+		PICTURE_PATH                  : SERVER_SUPPORT === false ? RELATIVE + 'pictures\/' : PETTANR_ROOT_PATH + 'pictures\/',
+		SYSTEM_PICTURE_PATH           : ( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'system_pictures\/',
+		CREATE_COMIC_JS               : SERVER_SUPPORT === false ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',
+		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',
+		SERVER_SUPPORT                : SERVER_SUPPORT,
+		URL_PETA_APPS_CSS             : ( SERVER_SUPPORT === false ? 'stylesheets' : '\/assets' ) + '\/peta.apps.css'
 	}
 })();
 
 /* ----------------------------------------
- * Vector Support
- * 
- *              __________
- *             /          \
- *            /            \
- *            |,startX,Y    |
- * tailX,Y - <              |
- *            |'endX,Y      |
- *            \            /
- * 	           \__________/
- * 
- * SVG
- * -----------------------
- * ie9, other modern browser
- * 
- * XML
- * -----------------------
- * ie5.5-8
- * 
- * 内部の角度計算は radian で統一したい。
- * 当初 vectorEnabled = true で一度書いてみる。
- * 駄目なら、代替のイメージのsrcの用意もここで担当。
- * 閲覧と編集両方で使う。
+ * old balloon.
  * 
  */
 pettanr.balloon = ( function() {
@@ -145,7 +126,7 @@ pettanr.balloon = ( function() {
 		ELM_BALLOON_ORIGIN = ( function(){
 			var ret;
 			try {
-				if( IS_VML === true){
+				if( IS_VML === true ){
 					ret = document.createElement( 'DIV');
 					var shape = document.createElement( 'v:shape');
 					shape.coordorigin = "0,0";
@@ -185,22 +166,57 @@ pettanr.balloon = ( function() {
 		TARGET     = TAIL_WIDTH * TAIL_WIDTH,
 		isFinit    = Type.isFinite,
 		ACCURACY   = 1, // 有効少数桁	
-		cround     = function ( v, r ){
+		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 ){
-		var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true ) : document.createElement( 'img' ), // pettanr.imageに変更
-			path = balloonElm.getElementsByTagName( 'path' )[ 0 ],
-			shape = balloonElm.getElementsByTagName( 'shape' )[ 0 ],
-			instance = this,
-			l = ',';
-		
-		function draw( _a ){
-			var rx      = w / 2,
-				ry      = h / 2,
+		this.elm   = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true ) : document.createElement( 'img' ); // pettanr.imageに変更
+		this.path  = this.elm.getElementsByTagName( IS_VML === true ? 'shape' : 'path' )[ 0 ];
+		this.resize( a, w, h );
+	};
+	XBROWSER_BALLOON_CLASS.prototype = {
+		elm   : null,
+		path  : null,
+		w     : 0,
+		h     : 0,
+		a     : 0,
+		resize : function ( _a, _w, _h ){
+			this.w  = isFinit( _w ) === true ? _w - PADDING_TOP  * 2 : this.w;
+			this.h  = isFinit( _h ) === true ? _h - PADDING_LEFT * 2 : this.h;
+			// ie6 でリサイズが反応しない対策
+			if( vectorEnabled === false && UA.isIE === true && UA.ieVersion < 7 ){
+				var parent = this.elm.parentNode;
+				parent.removeChild( this.elm );
+				parent.insertBefore( this.elm, parent.firstChild );
+			};
+			this.angle( _a );
+		},
+		angle : function( _a ){
+			if( isFinit( _a ) === true ){
+				this.a = _a;
+				if( vectorEnabled === false ){
+					this.elm.src = pettanr.balloon.getBalloonUrl( this.w, this.h, _a );
+				} else {
+					this.draw( _a );
+				};
+			};
+			return this.a;
+		},
+		type : function( _type ){
+			//draw( _a);
+		},
+		destroy : function(){
+			this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );
+			delete this.elm;
+			delete this.path;
+		},
+		draw : function( _a ){
+			var rx      = this.w / 2,
+				ry      = this.h / 2,
+				l       = ',',
 				tailRad = _a * DEG_TO_RAD,
 				tailX   = rx + ( rx + TAIL_HEIGHT ) * sin( tailRad ),
 				tailY   = ry - ( ry + TAIL_HEIGHT ) * cos( tailRad ),
@@ -213,7 +229,7 @@ pettanr.balloon = ( function() {
 				tailDeg = 0, d;
 			
 			for( var i = 45; i > 0.01; i /= 2){
-				d = ( tailDeg + i ) /2;
+				d = ( tailDeg + i ) / 2;
 				startRad = ( _a + d ) * DEG_TO_RAD;
 				endRad   = ( _a - d ) * DEG_TO_RAD;
 				
@@ -237,27 +253,27 @@ pettanr.balloon = ( function() {
 			if( IS_VML === true ){
 				var _tailX = tailX *10,
 					_tailY = tailY *10,
-					__w = w *10,
-					__h = h *10;
+					__w = this.w *10,
+					__h = this.h *10;
 				
-				shape.style.width = w + 'px';
-				shape.style.height = h + 'px';
-				shape.coordsize = [ __w, __h ].join( l );
-				shape.path = [
+				this.path.style.width  = this.w + 'px';
+				this.path.style.height = this.h + 'px';
+				this.path.coordsize = [ __w, __h ].join( l );
+				this.path.path = [
 					' ar ', 0, l, 0, l, __w, l, __h, l,
 					round( endX * 10 ), l, round( endY * 10 ), l,
 					round( startX * 10 ), l, round( startY * 10 ),
 					' l ', round( _tailX ), l, round( _tailY ),
 					' x e'
-				].join( '');
+				].join( '' );
 
-				balloonElm.style.marginTop =  _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;
-				balloonElm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;
+				this.elm.style.marginTop =  _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;
+				this.elm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;
 			} else {
-				balloonElm.setAttribute( 'width', w + PADDING_LEFT *2 );
-				balloonElm.setAttribute( 'height', h + PADDING_TOP *2 );
-				path.setAttribute( 'd', [
-					'M', cround( tailX + PADDING_LEFT ), l, cround( tailY + PADDING_TOP ),
+				this.elm.setAttribute( 'width',  this.w + PADDING_LEFT *2 );
+				this.elm.setAttribute( 'height', this.h + PADDING_TOP *2 );
+				this.path.setAttribute( 'd', [
+					'M', cround( tailX + PADDING_LEFT ),  l, cround( tailY  + PADDING_TOP ),
 					'L', cround( startX + PADDING_LEFT ), l, cround( startY + PADDING_TOP ),
 					'A', rx, l, ry,
 					'0 1 1',			// flag
@@ -266,40 +282,6 @@ pettanr.balloon = ( function() {
 				].join( ' '));
 			}
 		}
-		
-		this.elm = balloonElm;
-		this.resize = function ( _a, _w, _h ){
-			w  = isFinit( _w ) === true ? _w - PADDING_TOP * 2 : w;
-			h  = isFinit( _h ) === true ? _h - PADDING_LEFT * 2 : h;
-			// ie6 でリサイズが反応しない対策
-			if( vectorEnabled === false && UA.isIE === true && UA.ieVersion < 7 ){
-				var parent = balloonElm.parentNode;
-				parent.removeChild( balloonElm );
-				parent.insertBefore( balloonElm, parent.firstChild );
-			}
-			instance.angle( _a );
-		};
-		this.angle = function( _a ){
-			if( isFinit( _a ) === true ){
-				a = _a;
-				if( vectorEnabled === false ){
-					balloonElm.src = pettanr.balloon.getBalloonUrl( w, h, _a );
-				} else {
-					draw( _a );
-				}
-			}
-			return a;
-		}
-		this.type = function( _type ){
-			//draw( _a);
-		}
-		this.destroy = function(){
-			delete instance.destroy;
-			balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm );
-			balloonElm = path = shape = instance = null;
-		}
-		
-		instance.resize( a, w, h );
 	};
 	
 	return {
@@ -328,6 +310,207 @@ pettanr.balloon = ( function() {
 })();
 
 /* ----------------------------------------
+ * New Balloon
+ * 
+ * Vector : SVG, Canvas, VML, Flash, None
+ * 
+ */
+pettanr.newBalloon = ( function(){
+	var TEMPLETES = {};
+	
+	var STROKE_WIDTH       = 1.2,
+		IS_VML             = UA.isIE === true && UA.ieVersion < 9,
+		ELM_BALLOON_ORIGIN = ( function(){
+			var ret;
+			try {
+				if( IS_VML === true ){
+					ret = document.createElement( 'DIV' );
+					var shape = document.createElement( 'v:shape' );
+					shape.coordorigin  = "0,0";
+					shape.strokecolor  = "black";
+					shape.strokeweight = STROKE_WIDTH;
+					shape.fillcolor    = "white";
+					ret.appendChild( shape);
+				} else {
+					var kSVGNS = 'http://www.w3.org/2000/svg';
+					// http://modernizr.com/downloads/modernizr.js
+					// Thanks to Erik Dahlstrom
+					if( !document.createElementNS || !document.createElementNS(kSVGNS, 'svg' ).createSVGRect ){
+						return null;
+					};
+					ret = document.createElementNS( kSVGNS, 'svg' );
+					var path = document.createElementNS( kSVGNS, 'path' );
+					path.setAttribute( 'fill', "white" );
+					path.setAttribute( 'stroke', "black" );
+					path.setAttribute( 'strokeWidth', STROKE_WIDTH );
+					ret.appendChild( path );
+				};
+				return ret;	
+			} catch( e ){
+				return null;
+			};
+		})(),
+		vectorEnabled = ELM_BALLOON_ORIGIN !== null &&
+						pettanr.URL_PARAMS.vector !== false &&
+						!( IS_VML === true && UA.VML === false ),
+		BalloonClass;
+	
+	if( vectorEnabled === true ){
+		BalloonClass = function( templete ){
+			this.elm     = ELM_BALLOON_ORIGIN.cloneNode( true );
+			this.path    = this.elm.getElementsByTagName( IS_VML === true ? 'shape' : 'path' )[ 0 ];
+			this.klass   = klass;
+			this.getPath = klass.getPath;
+		};
+		BalloonClass.prototype = {
+			elm     : null,
+			path    : null,
+			klass   : null,
+			getPath : null,
+			args    : null,
+			update  : IS_VML === true ?
+				function( /* w, h [, angle, ,,, ] */ ){
+					var w = arguments[ 0 ],
+						h = arguments[ 1 ];
+					var path = this.getPath.call( this.klass, arguments );
+					if( !path ) return false;
+					path = /* SVG2VML */ path;
+					this.path.style.width  = w + 'px';
+					this.path.style.height = h + 'px';
+					this.path.coordsize    = ( w * 10 ) + ',' + ( h * 10 );
+					this.path.path         = path;
+					// this.elm.style.marginTop =  _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;
+					// this.elm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;
+				} :
+				function( /* w, h [, angle, ,,, ] */ ){
+					var w = arguments[ 0 ],
+						h = arguments[ 1 ],
+						d = this.getPath.call( this.klass, arguments );
+					if( !d ) return false;
+					this.elm.width  = w + PADDING_LEFT * 2;
+					this.elm.height = h + PADDING_TOP  * 2;
+					this.path.setAttribute( 'd', d );
+				},
+			destroy : function(){
+				this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );
+				delete this.elm;
+				delete this.path;
+			}
+		};
+	} else {
+		BalloonClass = function( klass ){
+			// templete の vector の有無
+			this.elm          = document.createElement( 'img' ); // pettanr.imageに変更
+			this.klass        = klass;
+			this.getPictureID = klass.getPictureID;
+		};
+		BalloonClass.prototype = {
+			elm          : null,
+			klass        : null,
+			getPictureID : null,
+			args         : null,
+			update : function( /* w, h [, angle, ,,, ] */ ){
+				var id = this.getPictureID.call( this.klass, arguments );
+				if( id !== 0 && !id ) return false;
+				this.elm.src = pettanr.CONST.SYSTEM_PICTURE_PATH + id + '.gif';
+			},
+			destroy : function(){
+				this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );
+			}
+		};
+	};
+	
+	/*
+	 * http://sourceforge.jp/projects/pettanr/wiki/HowToMakeSpeechBalloon
+	 */
+	var NonVectorBalloonClass = function( templete ){
+		this.elm       = document.createElement( 'img' ); // pettanr.imageに変更
+		this.size      = this.elm.style;
+		//this.templete  = templete;
+		//this.speech    = templete.speech_template_attributes;
+		//this.defaultW  = templete.default_width;
+		//this.defaultH  = templete.default_height;
+		//this.sizeCount = templete.size_count;
+		this.wOffset   = templete.width_offset;
+		this.hOffset   = templete.height_offset;
+		this.wStep     = templete.width_step;
+		this.hStep     = templete.height_step;
+		// r_offset
+		// r_steps
+		
+		var obj = templete.balloon_template_attributes, v, p;
+		
+		if( templete.size_count && 1 < templete.size_count ){
+			this.picIDs = []; // system picture id list
+			for( p in obj ){
+				v = obj[ v ];
+				this.picIDs[ v.size ] = v.system_picture_id;
+			};			
+		} else {
+			for( p in obj ){
+				v = obj[ v ];
+				this.picID = v.system_picture_id;
+			};
+		};
+	};
+	NonVectorBalloonClass.prototype = {
+		elm      : null,
+		size     : null,
+		templete : null,
+		args     : null,
+		picIDs   : null,
+		picID    : 0,
+		path     : pettanr.CONST.SYSTEM_PICTURE_PATH,
+		update : function( w, h /* [, angle, ,,, ] */ ){
+			var l, id, _w, _h;
+			if( this.picIDs ){
+				_w = ( w - this.wOffset ) / this.wStep;
+				_h = ( h - this.hOffset ) / this.hStep;
+				l  = this.picIDs.length - 1;
+				_w = _w < 0 ? 0 : ( _w > l ? l : _w );
+				_h = _h < 0 ? 0 : ( _h > l ? l : _h );
+				id = this.picIDs[ _w > _h ? _w : _h ];			
+			} else {
+				id = this.picID;
+			};
+			
+			this.elm.src     = this.path + id + '.gif';
+			this.size.width  = w + 'px';
+			this.size.height = h + 'px';
+		},
+		destory : function(){
+			this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );
+		}
+	};
+	
+	return {
+		/**
+		 * balloon_templetes.json 取得時に呼ばれる
+		 * className は存在しない場合もある 
+		 */
+		register : function( templete ){
+			templete = $.parseJSON( templete );
+			if( templete.classname && !TEMPLETES[ templete.classname ] ){
+				TEMPLETES[ templete.classname ] = templete;
+				delete templete.classname;
+			};
+		},
+		create : function( name ){
+			if( Type.isString( name ) === true && name in window ){
+				return new BalloonClass( window[ name ] );
+			};
+			return new NonVectorBalloonClass( TEMPLETES[ name ] );
+		},
+		isTemplete : function( templete ){
+			
+		},
+		isInstance : function( balloon ){
+			return balloon instanceof BalloonClass || balloon instanceof NonVectorBalloonClass;
+		}
+	}
+})();
+
+/* ----------------------------------------
  *  pettanr.image
  *  
  *   xBackendな画像反転、画像描画機能。
@@ -346,7 +529,8 @@ pettanr.balloon = ( function() {
  *     - VML
  *     - flash(lite)
  *     - silverlight
- *     
+ *     - pettan server
+ * 
  *     -moz-transform:scale( -1, -1);
  */
 pettanr.image = ( function(){
@@ -628,9 +812,9 @@ pettanr.image = ( function(){
 pettanr.bind = ( function(){
 	var BIND_WORKER_ARRAY   = [],
 		NAMESPACE_CLASSNAME = pettanr.CONST.NS_PETTANR_COMIC + '-',
-		PICTURE_PATH        = pettanr.CONST.PANEL_PICTURE_PATH,
+		PICTURE_PATH        = pettanr.CONST.PICTURE_PATH,
 		ELM_DETECT_WIDTH    = ( function(){
-			var ret = document.createElement( 'div');
+			var ret = document.createElement( 'div' );
 			ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';
 			return ret;
 		})(),
@@ -644,10 +828,10 @@ pettanr.bind = ( function(){
 	 */
 	var ResizeAgentClass = function( onResizeFunction, opt_elmCheck){
 		var	_globalLock = 0,
-			_size = { w: 0, h: 0 };
+			_size = { w: 0, h: 0 },
 			_ie = !!document.all,
 			_quirks = (document.compatMode || "") !== "CSS1Compat",
-			_ieroot = _quirks ? "body" : "documentElement";
+			_ieroot = _quirks ? "body" : "documentElement",
 			_root = opt_elmCheck ? opt_elmCheck : ( _ie ? document[_ieroot] : window);
 
 		function getInnerSize(){
@@ -675,173 +859,206 @@ pettanr.bind = ( function(){
 	};
 	
 	
-	var ElementBuilderClass = function( elmTarget, noClassnameMode ){
-		var RIMG_ARRAY     = [],
-			BALLOON_ARRAY  = [];
-		
-		function buildComicElement(){
+	var ElementBuilder = function( elmTarget, noClassname ){
+		this.imageList    = [];
+		this.balloonList  = [];
+		this.elmTarget    = elmTarget;
+		this.noClassname  = noClassname;
+	};
+	ElementBuilder.prototype = {
+		build : function( json, zoom ){
+			this.clean();
 			
-		};
-		
-		function buildPanelElement( json, zoom ){
-			var _elmPanel = document.createElement( 'div' ),
-				_style = {
+			// json is Comic ? Panel ?
+			var stories = json.children || json.stories,
+				i, l;
+			if( Type.isArray( stories ) === true ){
+				// comic
+				for( i = 0, l = stories.length; i<l; ++i ){
+					this.buildPanelElement( stories[ i ], zoom );
+				};
+			} else
+			if( json.elements ){
+				// panel
+				this.buildPanelElement( json, zoom );
+			} else {
+				// invalid json
+			};
+		},
+		buildFromFile : function( file, zoom ){
+			this.clean();
+			
+			var l    = file.getChildFileLength(),
+				data = file.read(),
+				i, story;
+			if( data.title ){
+				// comic
+				for( i = 0; i<l; ++i ){
+					story = file.getChildFileAt( i ).read();
+					this.buildPanelElement( story.panel, zoom );
+				};
+			} else
+			if( data.panel ){
+				// story
+				this.buildPanelElement( data.panel, zoom );
+			} else
+			if( data.border ){
+				// panel
+				this.buildPanelElement( data, zoom );
+			} else {
+				// invalid json
+			};
+		},
+		buildComicElement : function(){
+			
+		},
+		buildPanelElement : function( json, zoom ){
+			var elmPanel = document.createElement( 'div' ),
+				style = {
 						'border-width':		typeof json.border === 'number' ? json.border + 'px' : 0,
-						width: 				json.width + 'px',
+						width: 				json.width  + 'px',
 						height:				json.height + 'px'
 				},
-				_cssText = [],
-				_comicElements = json.elements || ( json.panel ? json.panel.elements : [] ),
-				_comicElement, _elmImg, _rImg, _rPic,
-				_balloon, _elmBalloonWrap, _elmText, _text, _speechesAttributes, _key,
-				i, l;
-			elmTarget.appendChild( _elmPanel );
+				cssText  = [],
+				elements = json.elements,
+				realPic,
+				p, i, l, data;
+			this.elmTarget.appendChild( elmPanel );
 			
-			if( noClassnameMode === true ){
+			if( this.noClassname === true ){
 				
 			} else {
-				_elmPanel.className = NAMESPACE_CLASSNAME + 'panel';
+				elmPanel.className = NAMESPACE_CLASSNAME + 'panel';
 			};
-			for( _key in _style ){
-				_cssText.push( _key + ':' + _style[ _key ] );
+			for( p in style ){
+				cssText.push( p + ':' + style[ p ] );
 			};
-			_elmPanel.style.cssText = _cssText.join( ';' );
+			elmPanel.style.cssText = cssText.join( ';' );
 			
-			for( i = 0, l = _comicElements.length; i<l; ++i ){
-				_comicElement = _comicElements[ i ];
-				_rPic = _comicElement.picture;
-				if( _rPic ){
-					_rImg = pettanr.image.createReversibleImage(
-							[ PICTURE_PATH, _rPic.id, '.', _rPic.ext ].join( ''),
-							_comicElement.width, _comicElement.height
-						);
-					_elmImg = _rImg.elm;
-					_elmPanel.appendChild( _elmImg );
-					_elmImg.className = NAMESPACE_CLASSNAME + 'image';
-					_elmImg.style.cssText = [
-						'left:',   _comicElement.x, 'px;',
-						'top:',    _comicElement.y, 'px;',
-						'z-index:',_comicElement.z, ';'
-					].join( '');					
-					if( _elmImg.tagName === 'img' ){
-						_elmImg.width        = Math.abs( _comicElement.width );
-						_elmImg.height       = Math.abs( _comicElement.height );
-					} else {
-						_elmImg.style.width  = Math.abs( _comicElement.width ) + 'px';
-						_elmImg.style.height = Math.abs( _comicElement.height ) + 'px';
-					};
-					
-					RIMG_ARRAY.push( _rImg );
+			if( !elements ) return;
+			for( i = 0, l = elements.length; i < l; ++i ){
+				data    = elements[ i ];
+				realPic = data.picture;
+				if( realPic ){
+					this.buildImage( elmPanel, data, realPic );
 				} else {
-					_elmBalloonWrap = document.createElement( 'div' );
-					_elmPanel.appendChild( _elmBalloonWrap );
-					_elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';
-					_elmBalloonWrap.style.cssText = [
-						'width:',   _comicElement.width, 'px;',
-						'height:',  _comicElement.height, 'px;',
-						'left:',    _comicElement.x, 'px;',
-						'top:',     _comicElement.y, 'px;',
-						'z-index:', _comicElement.z, ';'
-					].join( '');
-
-					_balloon = pettanr.balloon.createBalloon( _comicElement.width, _comicElement.height, _comicElement.tail );
-					_elmBalloonWrap.appendChild( _balloon.elm );
-					
-					_elmText = document.createElement( 'p' );
-					_elmBalloonWrap.appendChild( _elmText );
-					
-					_elmText.appendChild( document.createElement( 'span' ) );
-					
-					_text = '';
-					_speechesAttributes = _comicElement.speeches_attributes;
-					if( _speechesAttributes ){
-						for( _key in _speechesAttributes ){
-							_text += _speechesAttributes[ _key ] && _speechesAttributes[ _key ].content ? _speechesAttributes[ _key ].content : '';
-						};
-					};
-					_elmText.firstChild.appendChild( document.createTextNode( _text ));
-					BALLOON_ARRAY.push( _balloon );
+					this.buildBalloon( elmPanel, data );
 				};
 			};
-		};
-		
-		function clean(){
-			// clean elmTarget
-			while( RIMG_ARRAY.length > 0 ){
-				RIMG_ARRAY.shift().destroy();
-			};
-			while( BALLOON_ARRAY.length > 0 ){
-				BALLOON_ARRAY.shift().destroy();
+		},
+		buildImage : function( elmPanel, data, realPic ){
+			var rImg = pettanr.image.createReversibleImage(
+					[ PICTURE_PATH, realPic.id, '.', realPic.ext ].join( '' ),
+					data.width, data.height
+				),
+				elmImg = rImg.elm;
+			elmPanel.appendChild( elmImg );
+			elmImg.className = NAMESPACE_CLASSNAME + 'image';
+			elmImg.style.cssText = [
+				'left:',    data.x, 'px;',
+				'top:',     data.y, 'px;',
+				'z-index:', data.z, ';'
+			].join( '');					
+			if( elmImg.tagName === 'img' ){
+				elmImg.width        = Math.abs( data.width );
+				elmImg.height       = Math.abs( data.height );
+			} else {
+				elmImg.style.width  = Math.abs( data.width ) + 'px';
+				elmImg.style.height = Math.abs( data.height ) + 'px';
 			};
-			Util.removeAllChildren( elmTarget );		
-		};
-		
-		this.build = function( json, zoom ){
-			clean();
 			
-			// json is Comic ? Panel ?
-			var stories = json.children || json.stories,
-				i, l;
-			if( Type.isArray( stories ) === true ){
-				// comic
-				for( i = 0, l = stories.length; i<l; ++i ){
-					buildPanelElement( stories[ i ], zoom );
+			this.imageList.push( rImg );			
+		},
+		buildBalloon : function( elmPanel, data ){
+			var elmBalloonWrap = document.createElement( 'div' ),
+				elmText        = document.createElement( 'p' ),
+				content        = '',
+				speechesAttr   = data.speeches_attributes,
+				balloon, p;
+			elmPanel.appendChild( elmBalloonWrap );
+			elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';
+			elmBalloonWrap.style.cssText = [
+				'width:',   data.width, 'px;',
+				'height:',  data.height, 'px;',
+				'left:',    data.x, 'px;',
+				'top:',     data.y, 'px;',
+				'z-index:', data.z, ';'
+			].join( '' );
+
+			balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail );
+			elmBalloonWrap.appendChild( balloon.elm );
+			
+			elmBalloonWrap.appendChild( elmText );
+			
+			elmText.appendChild( document.createElement( 'span' ) );
+			
+			if( speechesAttr ){
+				for( p in speechesAttr ){
+					content += speechesAttr[ p ] && speechesAttr[ p ].content ? speechesAttr[ p ].content : '';
 				};
-			} else
-			if( json.elements ){
-				// panel
-				buildPanelElement( json, zoom );
-			} else {
-				// invalid json
 			};
-		};
-		this.zoom = function(){
-			
-		};
-		this.destroy = function(){
-			clean();
-		};
+			elmText.firstChild.appendChild( document.createTextNode( content ));
+			this.balloonList.push( balloon );
+		},
+		clean : function(){
+			// clean elmTarget
+			while( this.imageList.length > 0 ){
+				this.imageList.shift().destroy();
+			};
+			while( this.balloonList.length > 0 ){
+				this.balloonList.shift().destroy();
+			};
+			Util.removeAllChildren( this.elmTarget );
+		},
+		zoom : function(){},
+		destroy : function(){
+			this.clean();
+		}			
 	};
 	
-	var BindWorkerClass = function( elmTarget, json, zoomSelfEnabled, noClassnameMode ){
-		var builder    = new ElementBuilderClass( elmTarget, noClassnameMode );
-		var elmDetectW = ELM_DETECT_WIDTH.cloneNode( false );
-		var resizer    = null;
-		
+	var BindWorker = function( elmTarget, json, zoomSelfEnabled, noClassname ){
+		this.builder     = new ElementBuilder( elmTarget, noClassname );
+		this.elmDetectW  = ELM_DETECT_WIDTH.cloneNode( false );
+		this._json        = json;
+		this.noClassname = noClassname;
 		if( zoomSelfEnabled === true ){
-			elmTarget.parentNode.insertBefore( elmDetectW, elmTarget );
-			resizer = new ResizeAgentClass( onResize, elmDetectW );
+			elmTarget.parentNode.insertBefore( this.elmDetectW, elmTarget );
+			this.resizer = new ResizeAgentClass( onResize, this.elmDetectW );
 		};
 		function onResize(){
 			
 		};
-		json && typeof json === 'object' && builder.build( json );
-		
-		this.init = function(){
+		json && typeof json === 'object' && this.builder.build( json );
+	};
+	BindWorker.prototype = {
+		init : function(){
 				
-		};
-		this.zoom = function(){
-			builder.zoom();
-		};
-		this.json = function( _json ){
-			json = _json;
-			builder.build( _json );
-		};
-		this.targetElement = function(){
+		},
+		zoom : function(){
+			this.builder.zoom();
+		},
+		json : function( json ){
+			this._json = json;
+			this.builder.build( json, this.noClassname );
+		},
+		file : function( file ){
+			this.builder.buildFromFile( file, this.noClassname );
+		},
+		targetElement : function(){
 				
-		};
-		this.layout = function(){
+		},
+		layout : function(){
 				
-		};
-		this.destroy = function(){
-			builder.destroy();
-			elmTarget = json = builder = null;
-		};
+		},
+		destroy : function(){
+			this.builder.destroy();
+			delete this.json;
+			delete this.builder;
+		}		
 	};
-	
 	return {
 		createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode ){
-			var ret = new BindWorkerClass( elmTarget, opt_COMICJSONorPANELJSON, !!opt_zoomSelfEnabled, !!opt_noClassnameMode);
+			var ret = new BindWorker( elmTarget, opt_COMICJSONorPANELJSON, !!opt_zoomSelfEnabled, !!opt_noClassnameMode );
 			BIND_WORKER_ARRAY.push( ret );
 			return ret;
 		},