//エリア変更
$(function() {
	var toggleAreaBox = {
		openAreaPopup: function() {
			var picTop = $('#areaPic').position().top,
				areaLeft = $('#areaPos').position().left;

			// サイドバーより右にボックスを出さない仕様のため
			if (areaLeft > 493 ) {
				areaLeft = 493;
			}

			//縦棒がない場合を考慮
			var leftHosei = 0;
			if (areaLeft > 119) {
				leftHosei = 5;
			}
			$('.areaBoxWrapper').css({display: 'block'});
			$('#areaBox').css({
				top: (picTop + 20.5) + 'px',
				left: (areaLeft + leftHosei) + 'px'
			});
			$(document).on('mousedown', this.closeAreaPopup);
		},
		closeAreaPopup: function(e) {
			if (toggleAreaBox.isCloseArea($(e.target))) {
				$('.areaBoxWrapper').css({display: 'none'});
				$(document).off('mousedown', this.closeAreaPopup);
			}
		},
		isCloseArea: function($elem) {
			var elems = $elem.parents().addBack(),
				closeStatus;

			for (var i = 0, max = elems.length; i < max; i++) {
				if ($(elems[i]).prop('id') != 'areaBox') {
					closeStatus = true;
				} else {
					closeStatus = false;
					break;
				}
			}
			if ($elem.hasClass('jscCloseAreaPopup') || $elem.parent().hasClass('jscCloseAreaPopup')) {
				closeStatus = true;
			}
			return closeStatus;
		}
	};

	$('.jscPopupArea').on("click", function() {
		toggleAreaBox.openAreaPopup();
		return false;
	});
});