/**
 * ■電線のみ
 * [加工名]         ---------------------- [加工名]
 *
 * ■片側コンタクト
 * [コンタクト型番] □-------------------- [加工名]
 *
 * ■両側コンタクト
 * [コンタクト型番] □------------------□ [コンタクト型番]
 *
 * ■片側ハウジング
 * [ハウジング型番] □==================== [加工名]
 * [コンタクト型番]
 *
 * ■両側ハウジング
 * [ハウジング型番] □==================□ [ハウジング型番]
 * [コンタクト型番]                        [コンタクト型番]
 *
 * ■片側ハウジング + 片側コンタクト
 * [ハウジング型番] □==================□ [コンタクト型番]
 * [コンタクト型番]
 *
 */
function HnsViewer(quote, viewport, colorTable, initColors, options){
	var $ = jQuery;		//support側で使う際、jQuery.noConflict()を実行している為、このscript内での$参照を復活させる
	var _this = this;
	
	this.quote = quote;
	
	if(viewport instanceof jQuery){
		this.viewport = viewport;
	}else if (viewport){
		this.viewport = $('#' + viewport);
	}
	
	this.setColorTable = function(ct){
		if(ct instanceof jQuery){
			this.colorTable = ct;
		}else if(ct){
			this.colorTable = $('#' + ct);
		}
	}
	_this.setColorTable(colorTable);
	
	this.cols = initColors;
	
	//初期option値
	this.options = {
		canvasId: 'icanvas',	//canvas element id
		wireLength: 340,	//wireの長さ
		wireSpace: 20,		//wire描画開始点の縦の間隔（複数描画時）
		wireWidth: 3,		//wireを矩形で表現する際の高さ
		
		partsWidth: 20,		//両端にパーツを描画する際の幅
		
		housingImgWidth:296,	//315,	//ハウジングイメージの幅
		housingImgHeight:197,	//210,	//ハウジングイメージの高さ
		
		lineWidth: 1,		//全ての線幅
		sideTextWidth: 130,	//サイドのテキストスペース
		fontSize: 12,		//全てのフォントサイズ（px）
		font: 'serif',		//全てのフォント
		
		marginTop:20,
		marginBottom:0,
		
		fontDescript: function(){
			return _this.options.fontSize + 'px "' + _this.options.font + '"';
		},
		lineFeed: function(n){
			return _this.options.fontSize * n;
		}
	};
	
	_this.options = $.extend( {}, _this.options, options );
	
	this.cnt=0;
	
	
	this.initCanvas = function(){
		_this.viewport.interactiveCanvas({id:_this.options.canvasId , width: _this._canvasWidth(), height: _this._canvasHeight()});
	}
	this._canvasHeight = function(){
		return (_this.options.wireSpace * _this.cnt 
					+ _this.options.wireWidth
					+ _this.options.wireSpace		//長さ表記スペース
					+ _this.options.lineFeed(1.5)*4 //フッターに4行分の文字スペース
					+ (_this._hasHousing() ? _this.options.housingImgHeight : 0)
					+ _this.options.marginTop + _this.options.marginBottom
				)
				+ 'px';
	}
	this._canvasWidth = function(){
		return (_this.options.wireLength + 2*_this.options.sideTextWidth) + 'px';
	}
	
	this.canvasConputedWidth = function(){
		return $('#' + _this.options.canvasId).attr('width');
	}
	this.canvasConputedHeight = function(){
		return $('#' + _this.options.canvasId).attr('height');
	}
	
	/**
	 * 引数の配列が[x, y]のようにx座標、y座標を示す配列として扱います。
	 * 受け取った配列は画像の中心を[0,0]の原点としますが、画像の下部にハウジング画像を描画する際は、
	 * 全体を上方向に移動する必要があります。
	 * そのずらす位置を計算して、移動後の数値を表す配列を返します。
	 *
	 * 配列にx,y座標以外の値が入っている場合、そのメンバーはそのまま保存されます。
	 * 座標のx,yがインデックス0から始まらない場合は、x座標が格納されているインデックス番号を第二引数として渡してください。
	 * （ex. [text, positionX, positionY]なら1を指定します）
	 */
	this.offsetMv = function(array,idx){
		if(idx == null || idx == undefined){
			idx = 0;
		}
	
		//####array[idx] x方向への移動なし
		
		//####array[idx+1] y方向への移動
		//
		array[idx+1] -= _this.options.wireSpace;		//長さ表記スペース
		//下部のスペック文字（4行分スペース）
		array[idx+1] -= _this.options.lineFeed(1.5)*4*0.5;
		
		//ハウジングありの場合だけ、下にハウジング画像が付くので、描画中心オフセットを画像の縦サイズ*1/2だけ上に移動する。
		if(_this._hasHousing()){
			array[idx+1] -= _this.options.housingImgHeight*0.5;
		}
		
		//上下マージンの相殺分移動
		array[idx+1] += (_this.options.marginTop - _this.options.marginBottom)*0.5;
		
		return array;
	}
	
	this.draw = function(doAfter){
		var cnt = _this.quote.wireCount();
		if(_this.cnt != cnt){
			_this.cnt = cnt;
			_this.initCanvas();
			_this.initColorTable();
		}
		if(cnt != 0){
			_this._drawCanvas(doAfter);
		}
		
	}
	this._drawCanvas = function(doAfter){
		var cd = new CanvasDrawing();
		
		var img = _this._drawHousingImg(cd);
		if(img){
			img.onload = function(){
				_this._drawCanvasExceptImg(cd);
				if(doAfter){
					doAfter();
				}
			}
		}else{
			_this._drawCanvasExceptImg(cd);
			if(doAfter){
				doAfter();
			}
		}
	}
	this._drawCanvasExceptImg = function(cd){
		_this._drawWire(cd);
		_this._drawLength(cd);
		_this._drawContact(cd);
		_this._drawHousing(cd);
		_this._drawProcessing(cd);
		_this._drawSpecDescription(cd);
		
		_this.viewport.interactiveCanvas("redraw", cd);
	}
	this._drawWire = function(cd){
		//色ラべリングの位置：ワイヤー右端からの移動距離を先に計算しておく。
		var shape = _this.quote._getVal('shape');
		var txtmvY = _this.options.lineFeed(1.5)		//_drawTxtがラインフィード分調整してしまうのを相殺する為。
							+ _this.options.fontSize*0.2;	//下からの適当なマージン
		var txtmvX;
		if(shape == '1' || shape == 2 || shape == 3){
			txtmvX = _this.options.fontSize*1.5;				//右端から0.5文字分だけマージン
		}else if(shape == '4' || shape == 5){
			txtmvX = _this.options.partsWidth + _this.options.fontSize*1.5;				//右端からパーツの幅＋0.5文字分だけマージン
		}else if(shape == '6'){
			txtmvX = _this.options.partsWidth + _this.options.fontSize * 4;			//ハウジングの場合番号が入るのでパーツの幅＋4文字分を空ける
		}
		
		cd.register('lineWidth', [_this.options.lineWidth]);
		for(var i=0; i < _this.cnt; i++){
			if(_this.quote._getVal('optionTwisted') == '1' && i == _this._bottomWireIndex()){
				_this._drawTwistedWire(cd, i);
			}else{
				_this._setWireColor(cd, i);
				cd.register('beginPath');
				cd.register('rect', 
								_this.offsetMv([-1*(_this.options.wireLength/2), -1*((_this.cnt-1)*_this.options.wireSpace/2)+_this.options.wireSpace*i, _this.options.wireLength, _this.options.wireWidth, CanvasDrawing.MODE_SCA]));
				cd.register('stroke');
				cd.register('closePath');
				cd.register('fill');
			}
			
			//色ラベル
			_this._drawWireLabel(
						cd,
						i,
						_this.offsetMv(
							[(_this.options.wireLength/2)-txtmvX,
							-1*((_this.cnt-1)*_this.options.wireSpace/2)+_this.options.wireSpace*i-txtmvY]
						)
					);
		}
	}
	this._bottomWireIndex = function(){
		for(var i=_this.cnt-1; i >= 0; i--){
			if(_this.quote._getVal('cl_' + i) != 'none'){
				return i;
			}
		}
		return -1;	//全て電線なし
	}
	this._setWireColor = function(cd, i){
		var c = this._getColorVal(i);
		cd.register('strokeStyle', [_this.colorMap[c].borderColor]);
		cd.register('fillStyle', [_this.colorMap[c].fillColor]);
	}
	this._getColorVal = function(i){
		var c = _this.quote._getVal('cl_' + i);
		if(c == undefined || c == null || c==''){
			c = 'k';
		}
		return c;
	}
	this.colorMap = {
			'k'	:{'lab':'黒', 'borderColor':'rgb(0,0,0)', 	'fillColor':'rgb(0,0,0)', 	'txtColor':'rgb(0,0,0)'},
			'w'	:{'lab':'白', 'borderColor':'rgb(0,0,0)', 									'fillColor':'rgb(255,255,255)', 	'txtColor':'rgb(128,128,128)'},
			'r'	:{'lab':'赤', 'borderColor':'rgb(255,0,0)', 	'fillColor':'rgb(255,0,0)', 	'txtColor':'rgb(255,0,0)'},
			'grn'	:{'lab':'緑', 'borderColor':'rgb(0,128,0)', 	'fillColor':'rgb(0,128,0)', 	'txtColor':'rgb(0,128,0)'},
			'y':{'lab':'黄', 'borderColor':'rgb(255,212,0)', 	'fillColor':'rgb(255,212,0)', 	'txtColor':'rgb(255,212,0)'},
			'br'	:{'lab':'茶', 'borderColor':'rgb(134,74,43)', 	'fillColor':'rgb(134,74,43)', 	'txtColor':'rgb(134,74,43)'},
			'bl'	:{'lab':'青', 'borderColor':'rgb(0,103,192)', 	'fillColor':'rgb(0,103,192)', 	'txtColor':'rgb(0,103,192)'},
			'gry'	:{'lab':'灰', 'borderColor':'rgb(113,115,117)', 	'fillColor':'rgb(113,115,117)', 	'txtColor':'rgb(113,115,117)'},
			'o':{'lab':'橙', 'borderColor':'rgb(245,130,32)', 	'fillColor':'rgb(245,130,32)', 	'txtColor':'rgb(245,130,32)'},
			'p':{'lab':'紫', 'borderColor':'rgb(139,82,161)', 	'fillColor':'rgb(139,82,161)', 	'txtColor':'rgb(139,82,161)'},
			'none'	:{'lab':'電線なし', 'borderColor':'rgba(0,0,0,0)', 	'fillColor':'rgba(0,0,0,0)', 	'txtColor':'rgba(0,0,0,0)'}
	};
	this._drawWireLabel = function(cd, i, posXYArray){
		var c = this._getColorVal(i);
		_this._drawTxt(cd, _this.colorMap[c].lab, posXYArray, _this.colorMap[c].txtColor);
	}
	this._drawTwistedWire = function(cd, i){
		_this._setWireColor(cd, i);
		cd.register('beginPath');
		cd.register('moveTo',_this.offsetMv([-1*(_this.options.wireLength/2),	-1*((_this.cnt-1)*_this.options.wireSpace/2)+_this.options.wireSpace*i,	CanvasDrawing.MODE_SCA]));
		cd.register('lineTo',[_this.options.wireLength*0.45, 	0,							CanvasDrawing.MODE_REL]);
		cd.register('lineTo',[_this.options.wireLength*0.05,	-1*(i*_this.options.wireSpace)-_this.options.wireSpace/2,	CanvasDrawing.MODE_REL]);
		cd.register('lineTo',[_this.options.wireLength*0.05,	i*_this.options.wireSpace+_this.options.wireSpace/2,		CanvasDrawing.MODE_REL]);
		cd.register('lineTo',[_this.options.wireLength*0.45, 	0,							CanvasDrawing.MODE_REL]);
		cd.register('lineTo',[0, 								_this.options.wireWidth,	CanvasDrawing.MODE_REL]);
		cd.register('lineTo',[-1*_this.options.wireLength*0.45-_this.options.wireWidth,		0,							CanvasDrawing.MODE_REL]);
		//上線の上下移動距離と下線の上下移動距離の差は三角関数で求めるべきだが、簡略化して「10*this.options.wireWidth」としている。
		cd.register('lineTo',[-1*_this.options.wireLength*0.05+_this.options.wireWidth,		-1*(i*_this.options.wireSpace)-_this.options.wireSpace/2+_this._twistHdiff(),	CanvasDrawing.MODE_REL]);
		cd.register('lineTo',[-1*_this.options.wireLength*0.05+_this.options.wireWidth,		i*_this.options.wireSpace + _this.options.wireSpace/2 - _this._twistHdiff(),		CanvasDrawing.MODE_REL]);
		cd.register('lineTo',[-1*_this.options.wireLength*0.45-_this.options.wireWidth,		0,							CanvasDrawing.MODE_REL]);
		cd.register('lineTo',[0,								-1*_this.options.wireWidth,	CanvasDrawing.MODE_REL]);
		cd.register('stroke');
		cd.register('closePath');
		cd.register('fill');
	}
	/*
	 * ツイスト表示の頂点部分に関して
	 * 【上線の上下移動距離 - 下線の上下移動距離】を求める
	 * これは、 (上線と下線の距離) - (上線と下線の元々の距離)で求められる。
	 * [上線と下線の距離]：頂点の角度より三角関数で求められるが、ここでは簡略化している
	 * [上線と下線の元々の距離]:wireWidthに等しい
	 */
	this._twistHdiff = function(){
		if(_this.cnt <= 2){
			return Math.sqrt(5)*this.options.wireWidth - this.options.wireWidth;
		}else if(_this.cnt == 3){
			return Math.sqrt(15)*this.options.wireWidth - this.options.wireWidth;
		}else if(_this.cnt <= 6){
			return Math.sqrt(30)*this.options.wireWidth - this.options.wireWidth;
		}else{
			return Math.sqrt(100)*this.options.wireWidth - this.options.wireWidth;
		}
	}
	
	this._drawLength = function(cd){
		var shape = _this.quote._getVal('shape');
		var leftX = -1*(_this.options.wireLength/2);
		if(shape != '1'){
			leftX += _this.options.partsWidth;
		}
		var rightX = _this.options.wireLength/2;
		if(shape != '1' && shape != '2' && shape != '3'){
			rightX -= _this.options.partsWidth;
		}
		var y = _this.options.wireSpace/2*(_this.cnt-1)+_this.options.wireWidth + _this.options.wireSpace*0.3;	//_this.options.wireSpace*0.3 は余白
		var height = _this.options.wireSpace - _this.options.wireSpace*0.3;
		
		
		
		cd.register('beginPath');
		cd.register('lineWidth', [_this.options.lineWidth]);
		cd.register('strokeStyle', ['rgb(0,0,0)']);
		
		//left vertical
		cd.register('moveTo', _this.offsetMv([leftX, y, CanvasDrawing.MODE_SCA]));
		cd.register('lineTo', [0, height, CanvasDrawing.MODE_REL]);
		
		//right vertical
		cd.register('moveTo', _this.offsetMv([rightX, y, CanvasDrawing.MODE_SCA]));
		cd.register('lineTo', [0, height, CanvasDrawing.MODE_REL]);
		
		//left arrow
		cd.register('moveTo', _this.offsetMv([
				leftX+height/4,
				y+height/4,
				CanvasDrawing.MODE_SCA
			]));
		cd.register('lineTo', [-1*height/4, height/4, CanvasDrawing.MODE_REL]);
		cd.register('lineTo', [height/4, height/4, CanvasDrawing.MODE_REL]);
		
		//right arrow
		cd.register('moveTo', _this.offsetMv([
				rightX-height/4,
				y+height/4,
				CanvasDrawing.MODE_SCA
			]));
		cd.register('lineTo', [height/4, height/4, CanvasDrawing.MODE_REL]);
		cd.register('lineTo', [-1*height/4, height/4, CanvasDrawing.MODE_REL]);
		
		//length line
		cd.register('moveTo', _this.offsetMv([leftX, y+height/2, CanvasDrawing.MODE_SCA]));
		cd.register('lineTo', [rightX - leftX, 0, CanvasDrawing.MODE_REL]);
		
		cd.register('stroke');
		
		//text
		var sizeX = _this.quote._getVal('sizeX');
		var s = '■電線長さ:' + (	(sizeX != null && sizeX != 0) ? sizeX : '   '	) + ' mm';
		_this._drawTxt(
					cd, s, 
					_this.offsetMv([-5*_this.options.fontSize,	y+height/2-_this.options.fontSize*0.2])
				);
	}
	
	this._drawSpecDescription = function(cd){
		//■UL:   ■サイズ：　　■極数：	 ■ツイスト加工：あり    ■配線：ストレートorクロス
		var wireUl = _this.quote._getVal('wireUl');
		var wireDiameter = _this.quote._getVal('wireDiameter');
		var twist = _this.quote._getVal('optionTwisted');
		var wiring = _this.quote._getVal('optionWiringPattern');
		
		var s = '';
		if(wireUl != null){
			s += ('■UL:' + _this.quote.wireUlLab(wireUl) + '    ');
		}
		if(wireDiameter != null){
			s += ('■サイズ:' + _this.quote.wireDiameterLab(wireDiameter) + '    ');
		}
		s += ('\n■極数:' + _this.cnt + '    ');
		if(twist == '1'){
			s += ('■ツイスト加工：あり' + '    ');
		}
		if(wiring != null){
			s += ('■配線：' + _this.quote.optionWiringPatternLab(wiring));
		}
		
		_this._drawTxt(
					cd, s, 
					_this.offsetMv(
						[-1*(_this.options.wireLength/2),																	//position X
						((_this.cnt-1)*_this.options.wireSpace/2) + _this.options.wireWidth + _this.options.lineFeed(2.5)]	//position Y
					)
				);
	}
	
	this._hasHousing = function(){
		var shape = _this.quote._getVal('shape');
		if(shape == '3' || shape == '4' || shape == '6'){
			return true;
		}else{
			return false;
		}
	}
	this._drawHousingImg = function(cd){
		var left = false;
		var right = false;
		var shape = _this.quote._getVal('shape');
		if(shape == '3' || shape == '4' || shape == '6'){
			left = true;
		}
		if(shape == '6'){
			right = true;
		}
		if(!left && !right)	return null;		//描画必要なければここで終了
		
		
		
		
		if(left){
			var img = new Image();
			img.crossOrigin = "Anonymous";
			img.src = _this._getImageLeftPath();
			cd.register('drawImage', 
							_this.offsetMv([
										img, 
										-1*(_this.options.wireLength/2)-_this.options.sideTextWidth,
										((_this.cnt-1)*_this.options.wireSpace/2) + _this.options.wireWidth + _this.options.lineFeed(1.5)*5,
										_this.options.housingImgWidth,
										_this.options.housingImgHeight,
										CanvasDrawing.MODE_SCA]
							,1)
						);
		}
		if(right){
			var img = new Image();
			img.crossOrigin = "Anonymous";
			img.src = _this._getImageRightPath();
			cd.register('drawImage', 
							_this.offsetMv([
										img,
										_this.options.wireLength/2 + _this.options.sideTextWidth - _this.options.housingImgWidth,
										((_this.cnt-1)*_this.options.wireSpace/2) + _this.options.wireWidth + _this.options.lineFeed(1.5)*5,
										_this.options.housingImgWidth,
										_this.options.housingImgHeight,
										CanvasDrawing.MODE_SCA]
							,1)
						);
		}
		
		return img;
	}
	this._getImageLeftPath = function(){
		return _this._getImagePath('leftSideHousingNo', 'leftSidePartsSeries');
	}
	this._getImageRightPath = function(){
		return _this._getImagePath('rightSideHousingNo', 'rightSidePartsSeries');
	}
	this._getImagePath = function(housingNoPropName, partsSeriesPropName){
		var path = '';
		var housingSeries = _this.quote._getVal(partsSeriesPropName);
		var housingNo = _this.quote._getVal(housingNoPropName);
		if(housingNo){
			if(housingSeries == 'D2000'){
				if(housingNo == '1-1318120-3'){
					path = '//www.p-ban.com/kiban/img/est/hns/housing/TE_D-2100S.jpg';
				}else{
					path = '//www.p-ban.com/kiban/img/est/hns/housing/TE_D-2100D.jpg';
				}
			}else if(housingSeries == 'D3000'){
				if(housingNo.indexOf('1-178288-') == 0){
					path = '//www.p-ban.com/kiban/img/est/hns/housing/TE_D-3100S.jpg';
				}else if(housingNo.indexOf('178289-') == 0){
					path = '//www.p-ban.com/kiban/img/est/hns/housing/TE_D-3100D.jpg';
				}
			}else if(housingSeries == 'D1000'){
				path = '//www.p-ban.com/kiban/img/est/hns/housing/TE_D-1100D.jpg';
			}else if(housingSeries == 'EH'){
				path = '//www.p-ban.com/kiban/img/est/hns/housing/JST_EH.jpg';
			}else if(housingSeries == 'PH'){
				path = '//www.p-ban.com/kiban/img/est/hns/housing/JST_PH.jpg';
			}else if(housingSeries == 'SH'){
				path = '//www.p-ban.com/kiban/img/est/hns/housing/JST_SH.jpg';
			}else if(housingSeries == 'VH'){
				path = '//www.p-ban.com/kiban/img/est/hns/housing/JST_VH.jpg';
			}else if(housingSeries == 'XH'){
				path = '//www.p-ban.com/kiban/img/est/hns/housing/JST_XH.jpg';
			}else if(housingSeries == 'ZH'){
				path = '//www.p-ban.com/kiban/img/est/hns/housing/JST_ZH.jpg';
			}else if(housingSeries == 'SHL'){
				path = '//www.p-ban.com/kiban/img/est/hns/housing/JST_SHL.jpg';
			}else if(housingSeries == 'SHLD'){
				path = '//www.p-ban.com/kiban/img/est/hns/housing/JST_SHLD.jpg';
			}
		}
		return path;
	}
	
	this._drawContact = function(cd){
		var shape = _this.quote._getVal('shape');
		var left = (shape == '2' || shape == '5');
		var right = (shape == '4' || shape == '5');
		if(!left && !right){
			return;
		}
		
		//figure
		cd.register('lineWidth', [_this.options.lineWidth]);
		cd.register('strokeStyle', ['rgb(0,0,0)']);
		cd.register('fillStyle', ['rgb(255,255,255)']);
		for(var i=0; i < _this.cnt; i++){
			//「電線なし」の場合は描画不要
			if(_this.quote._getVal('cl_'+i) == 'none'){
				continue;
			}
			
			cd.register('beginPath');
			if(left){
				cd.register('rect', _this.offsetMv([-1*(_this.options.wireLength/2)-1,
										-1*((_this.cnt-1)*_this.options.wireSpace/2)+_this.options.wireSpace*i-2,
										_this.options.partsWidth,
										_this.options.wireWidth+4,
										CanvasDrawing.MODE_SCA]));
			}
			if(right){
				cd.register('rect', _this.offsetMv([(_this.options.wireLength/2)-_this.options.partsWidth,
										-1*((_this.cnt-1)*_this.options.wireSpace/2)+_this.options.wireSpace*i-2,
										_this.options.partsWidth+1,
										_this.options.wireWidth+4,
										CanvasDrawing.MODE_SCA]));
			}
			cd.register('stroke');
			cd.register('closePath');
			cd.register('fill');
		}
		
		//text
		if(left){
			var contactNoL = _this.quote.getLeftContactNo();	//_this.quote._getVal('contactNo');ではコンタクトのみの場合に値がとれないことに注意
			if(contactNoL){
				contactNoL = 'コンタクト型番:\n' + contactNoL;
			}
			_this._drawLeftTxt(cd, contactNoL);
		}
		if(right){
			var contactNoR = _this.quote.getRightContactNo();	//_this.quote._getVal('contactNo');ではコンタクトのみの場合に値がとれないことに注意
			if(contactNoR){
				contactNoR = 'コンタクト型番:\n' + contactNoR;
			}
			_this._drawRightTxt(cd, contactNoR);
		}
	}
	this._drawHousing = function(cd){
		var shape = _this.quote._getVal('shape');
		var left = (shape == '3' || shape == '6' || shape == '4');
		var right = (shape == '6');
		if(!left && !right){
			return;
		}
		
		//figure
		cd.register('lineWidth', [_this.options.lineWidth]);
		cd.register('strokeStyle', ['rgb(0,0,0)']);
		cd.register('fillStyle', ['rgb(255,255,255)']);
		if(left){
			cd.register('beginPath');
			cd.register('rect', _this.offsetMv([-1*(_this.options.wireLength/2)-1,
									-1*((_this.cnt-1)*_this.options.wireSpace/2)/*+_this.options.wireSpace*i*/-2,
									_this.options.partsWidth,
									_this.options.wireSpace*_this.cnt+_this.options.wireWidth+4-_this.options.wireSpace,
									CanvasDrawing.MODE_SCA]));
			cd.register('stroke');
			cd.register('closePath');
			cd.register('fill');
		}
		if(right){
			cd.register('beginPath');
			cd.register('rect', _this.offsetMv([(_this.options.wireLength/2)-_this.options.partsWidth,
									-1*((_this.cnt-1)*_this.options.wireSpace/2)/*+_this.options.wireSpace*i*/-2,
									_this.options.partsWidth+1,
									_this.options.wireSpace*_this.cnt+_this.options.wireWidth+4-_this.options.wireSpace,
									CanvasDrawing.MODE_SCA]));
			cd.register('stroke');
			cd.register('closePath');
			cd.register('fill');
		}
		
		//numbering
		var _arrays = _this.quote.getPinNumberingArrays();
		if(left && _arrays.left_side_pin_numbering_array){
			_this._drawLeftNumbering(cd, eval(_arrays.left_side_pin_numbering_array));
		}
		if(right && _arrays.right_side_pin_numbering_array){
			_this._drawRightNumbering(cd, eval(_arrays.right_side_pin_numbering_array));
		}
		
		//text
		if(left){
			_this._drawLeftTxt(cd, _this._leftHousingNo()+_this._leftContactNo());
		}
		if(right){
			_this._drawRightTxt(cd, _this._rightHousingNo()+_this._rightContactNo());
		}
	}
	this._drawLeftNumbering = function(cd, ar){
		var txtmvY = _this._drawNumberingTxtMarginBottom();
		
		var txtMaxLen = _this._txtMaxLen(ar);
		for(var i=0; i < ar.length; i++){
			var txtmvX = _this._oneLetterWidth()	//デフォルトのマージン約1文字
							+ (txtMaxLen - ar[i].length) * _this._oneLetterWidth();	//右合わせ
			_this._drawTxt(cd, ar[i], 
									_this.offsetMv(
										[-1*(_this.options.wireLength/2)+_this.options.partsWidth+txtmvX, -1*((ar.length-1)*_this.options.wireSpace/2)+_this.options.wireSpace*i-txtmvY]
									)
								);
		}
	}
	
	this._drawRightNumbering = function(cd, ar){
		var isCross = _this.quote._getVal('optionWiringPattern') == '2';
		if(isCross){
			ar = ar.reverse();
		}
	
		var txtmvY = _this._drawNumberingTxtMarginBottom();
		for(var i=0; i < ar.length; i++){
			var txtmvX = _this._oneLetterWidth() * ar[i].length
							+ _this.options.fontSize*0.5;					//右端からの適当なマージン
			_this._drawTxt(cd, ar[i], 
								_this.offsetMv(
									[(_this.options.wireLength/2)-_this.options.partsWidth-txtmvX, -1*((ar.length-1)*_this.options.wireSpace/2)+_this.options.wireSpace*i-txtmvY]
								)
			);
		}
	}
	this._drawNumberingTxtMarginBottom = function(){
		return _this.options.lineFeed(1.5)		//_drawTxtがラインフィード分調整してしまうのを相殺する為。
				+ _this.options.fontSize*0.2;	//下からの適当なマージン
	}
	/*
	 * 数字文字の縦横比を1:0.6と適当に見積もっている（かなりいい加減なfunctionです）
	 */
	this._oneLetterWidth = function(){
		return _this.options.fontSize*0.6
	}
	this._txtMaxLen = function(ar){
		var len = 0;
		for(var i=0; i < ar.length; i++){
			if(len < ar[i].length){
				len = ar[i].length;
			}
		}
		return len;
	}
	this._leftHousingNo = function(){
		return _this._cmnHousingNo('leftSideHousingNo');
	}
	this._rightHousingNo = function(){
		return _this._cmnHousingNo('rightSideHousingNo');
	}
	this._cmnHousingNo = function(propName){
		var housingNo = _this.quote._getVal(propName);
		if(housingNo){
			housingNo = 'ハウジング型番:\n' + housingNo;
		}
		return housingNo;
	}
	this._leftContactNo = function(){
		return _this._cmnContactNo(_this.quote.getLeftContactNo());		//_this.quote._getVal('contactNo');では取れない値であることに注意
	}
	this._rightContactNo = function(){
		return _this._cmnContactNo(_this.quote.getRightContactNo());	//_this.quote._getVal('contactNo');では取れない値であることに注意
	}
	this._cmnContactNo = function(contactNo){
		if(contactNo){
			contactNo = contactNo.replace(/ /g, '\n');
			contactNo = '\n\nコンタクト型番:\n' + contactNo;
		}
		return contactNo;
	}
	this._drawProcessing = function(cd){
		var leftProcessing = _this.quote.getLeftProcessing();
		var rightProcessing = _this.quote.getRightProcessing();
		if(leftProcessing){
			_this._drawLeftTxt(cd, leftProcessing);
		}
		if(rightProcessing){
			_this._drawRightTxt(cd, rightProcessing);
		}
	}
	this._drawLeftTxt = function(cd, txt){
		if(txt == null || txt == undefined || txt == ''){
			return;
		}
		_this._drawTxt(cd, txt, 
							_this.offsetMv(
								[-1*(_this.options.wireLength/2)-_this.options.sideTextWidth, -1*_this.options.lineFeed(1.5)]
							)
		);
	}
	this._drawRightTxt = function(cd, txt){
		if(txt == null || txt == undefined || txt == ''){
			return;
		}
		_this._drawTxt(cd, txt, 
							_this.offsetMv(
								[(_this.options.wireLength/2)+10, -1*_this.options.lineFeed(1.5)]
							)	
		);
	}
	this._drawTxt = function(cd, txt, posXYArray, color){
		if(color){
			cd.register('fillStyle', [color]);
		}else{
			cd.register('fillStyle', ['rgb(0,0,0)']);
		}
		cd.register('font', [_this.options.fontDescript()]);
		cd.register('moveTo', [posXYArray[0], posXYArray[1], CanvasDrawing.MODE_SCA]);
		
		var ary = txt.split('\n');
		for(var i=0; i < ary.length; i++){
			cd.register('fillText', [ary[i], 0, _this.options.lineFeed(1.5), CanvasDrawing.MODE_REL]);
		}
	}
	this.initColorTable = function(){
		if(!_this.colorTable)	return;
		
		_this.colorTable.html('');		//clear all
		for(var i=0; i < _this.cnt; i++){
			this.colorTable.append(_this._colorTableRowHTMLStr(i))
		}
		
		//色変更イベントハンドラ設置1（初期値設定時も動作させる）
		_this.colorTable.find('.colorTableInput').on('change.colorChange1', _this._colorChangeHandler1);
		
		//hiddenのパラメータ値があれば適用
		if(_this.cols != null){
			//var vals = eval(cols);
			for(var i=0; i < this.cols.length; i++){
				_this.quote._setVal('cl_' + i, this.cols[i]);
			}
		}
		
		//色変更イベントハンドラ設置2（初期値設定時は動作不要）
		_this.colorTable.find('.colorTableInput').on('change.colorChange2', _this._colorChangeHandler2);
	}
	this._colorChangeHandler1 = function(event){
		if(_this._validateWiring()){
			_this._drawCanvas();
			_this._updColorDisp(this);
		}else{
			//変更をキャンセル（というか手抜きでデフォルトに強制変更）
			_this.quote._setVal(event.target.name, 'k');
		}
	}
	this._colorChangeHandler2 = function(event){
		//電線なし⇔電線ありの変更に備えて、価格再計算（変更キャンセルの場合も元に戻らず、デフォルトに変更されるので再計算する）
		_this.quote.autoExec();
	}
	this._validateWiring = function(){
		return _this._validateNoWiring() && _this._validateTwistedWiring();
	}
	this._validateNoWiring = function(){
		var noWiring = true;
		for(var i=0; i < _this.cnt; i++){
			if(_this.quote._getVal('cl_' + i) != 'none'){
				noWiring = false;
				break;
			}
		}
		if(noWiring){
			alert('全てを「電線なし」にすることはできません。');
		}
		return !noWiring;
	}
	this._validateTwistedWiring = function(){
		var valid = _this.validateTwistedWiring();
		if(!valid){
			alert('「ツイスト加工：あり」の場合、電線は2本以上必要です。');
		}
		return valid;
	}
	/**
	 * public method ... HnsQuoteからの利用あり
	 */
	this.validateTwistedWiring = function(){
		if(_this.quote._getVal('optionTwisted') == '1'){
			var wiringCnt = 0;
			for(var i=0; i < _this.cnt; i++){
				if(_this.quote._getVal('cl_' + i) != 'none'){
					wiringCnt++;
				}
			}
			if(wiringCnt < 2){
				return false;
			}
		}
		return true;
	}
	this.getWireColors = function(){
		var colors = new Array();
		for(var i=0; i < _this.cnt; i++){
			colors.push( _this.quote._getVal('cl_' + i) );
		}
		return colors;
	}
	this._colorTableRowHTMLStr = function(rowindex){
		return '<tr><td>' + (rowindex+1) + '</td>'
				+ '<td><div class="color_disp" id="color_disp_' + rowindex + '" style="background-color:' + _this.colorMap['k'].fillColor + '"></div><select name="cl_' + rowindex + '" data-index="' + rowindex + '" class="colorTableInput">'
				+ _this._colorTableOptionsStr(rowindex);
				+ '</select></td></tr>';
	}
	this._colorTableOptionsStr = function(rowindex){
		var str = '';
		var _hasHousing = _this._hasHousing();
		//各電線色選択肢
		for(var i in _this.colorMap){
			//「電線なし」はハウジングありのみ
			if(i != 'none' || _hasHousing){
				str += '<option value="' + i + '" style="background-color:' + _this.colorMap[i].fillColor + '" >' + _this.colorMap[i].lab + '</option>';
			}
		}
		return str;
	}
	this._hasHousing = function(){
		var _shape = _this.quote._getVal('shape');
		return (_shape == '3' || _shape == '4' || _shape == '6');
	}
	this._updColorDisp = function(slctelem){
		var slctobj = $(slctelem);
		var idx = slctobj.attr('data-index');
		var val = slctobj.val();
		$('#color_disp_' + idx ).css('background-color', _this.colorMap[val].fillColor);
	}
	
	this.imageData = function(){
		return this.viewport.find('canvas').get(0).toDataURL().substring(22);
	}
}