/********************************************************************************

	SYNCER 〜 知識、感動をみんなと同期(Sync)するブログ

	* 配布場所
	https://syncer.jp/how-to-use-faceplusplus-api

	* 最終更新日時
	2015/07/30 23:45

	* 作者
	あらゆ

	** 連絡先
	Twitter: https://twitter.com/arayutw
	Facebook: https://www.facebook.com/arayutw
	Google+: https://plus.google.com/114918692417332410369/
	E-mail: info@syncer.jp

	※ バグ、不具合の報告、提案、ご要望など、お待ちしております。
	※ 申し訳ありませんが、ご利用者様、個々の環境における問題はサポートしていません。

********************************************************************************/


function syncerFaceDetect( obj )
{
	// ID
	var id = 'syncer-face-detect' ;

	// 枠線の色
	var color = '#D36015' ;

	// 画像の大きさ
	var img = {
		top: $( '#' + id ).offset().top - $( '#' + id ).parent().offset().top ,
		left: $( '#' + id ).offset().left - $( '#' + id ).parent().offset().left ,
		width: $( '#' + id ).width() ,
		height: $( '#' + id ).height() ,
	} ;

	// 変数の定義
	var data = obj.face , face = [] , attr_id , attr_class_1 = id + '-' , attr_class_2 = id + '-parts-' , position ;

	// 処理
	for( var i in data )
	{
		// エイリアス
		position = data[i].position ;

		// 顔のデータをまとめる
		face = {
			width: img.width * ( position.width / 100 ) ,
			height: img.height * ( position.height / 100 ) ,
			center: {
				x: img.width * ( position.center.x / 100 ) ,
				y: img.height * ( position.center.y / 100 ) ,
			} ,
			eye: {
				left: {
					x: img.width * ( position.eye_left.x / 100 ) ,
					y: img.height * ( position.eye_left.y / 100 ) ,
				},
				right: {
					x: img.width * ( position.eye_right.x / 100 ) ,
					y: img.height * ( position.eye_right.y / 100 ) ,
				}
			},
			mouth: {
				left: {
					x: img.width * ( position.mouth_left.x / 100 ) ,
					y: img.height * ( position.mouth_left.y / 100 ) ,
				},
				right: {
					x: img.width * ( position.mouth_right.x / 100 ) ,
					y: img.height * ( position.mouth_right.y / 100 ) ,
				}
			},
			nose: {
				x: img.width * ( position.nose.x / 100 ) ,
				y: img.height * ( position.nose.y / 100 ) ,
			},
		} ;

		// 各パーツの値をセット
		var parts = [ face.eye.left , face.eye.right , face.mouth.left , face.mouth.right , face.nose ] ;

		// 顔のIDを定義
		attr_id = attr_class_1 + i ;

		// 顔全体に枠線のHTMLを付ける
		$( '#' + id ).after( '<div id="' + attr_id + '"><b>' + ( Number( i ) + 1 ) + '人目</b></div>' ) ;

		// スタイルシートを適用
		$( '#' + attr_id ).css( {
			position: 'absolute' ,
			width: face.width ,
			height: face.height ,
			top: img.top + face.center.y - ( face.height / 2 ) ,
			left: img.left + face.center.x - ( face.width / 2 ) ,
			background: 'rgba( 255,255,255 , .2 )' ,
			border: '3px solid ' + color ,
			color: '#030303' ,
		} ) ;

		// 各パーツの枠線を配置していく
		for( var ii=0 , ll=parts.length ; ll > ii ; ii++ )
		{
			// IDの決定
			attr_id = attr_class_2 + i + '-' + ii ;

			// 枠線のHTMLを追加する
			$( '#' + id ).after( '<div id="' + attr_id + '"></div>' ) ;

			// HTMLにスタイルシートを適用
			$( '#' + attr_id ).css( {
				position: 'absolute' ,
				width: 10 ,
				height: 10 ,
				top: img.top + parts[ ii ].y - 5 ,
				left: img.left + parts[ ii ].x - 5 ,
				background: color ,
			} ) ;
		}
	}

}