<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css">
<script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/publish/js/content.js"></script>


<script type="text/javascript">


$(document).ready(function (){
	
	$('.preiew_img').hide();
	$('.prePhoto').hide();
	
	//최초 화면 문자열 길이 체크해주기
	var strCon = $('#smsTxt').val();
	fnByteString(strCon);
	
	
	// 발신자 전화번호 입력시 '-' 문자 입력해주기
	/* $('#callFrom').keyup(function(e){
		
		var callFrom = addDash($('#callFrom').val());
		$('#callFrom').val(callFrom);
		
	}); */
	
	// 수신자 전화번호 입력시 '-' 문자 입력해주기
	/* $('#callTo').keyup(function(e){
		
		var callTo = addDash($('#callTo').val());
		$('#callTo').val(callTo);
		
	}); */
	
	//일반문자, 광고문자 텍스트 내용 추가해주기
	$('input[name=send_adYn]').change(function(){
	
		advMsgInsert();
		
	});
	
	function advMsgInsert(){
		
		var advStr = '<div class="ad_txt"><p>(광고)</p></div>';
		var advDenyStr = '<div class="deny_txt"> <p>무료 거부 080-0000-0000</p> </div>';
		
		var preAdvStr = '<p class="ad_tit">(광고)</p>';
		var preAdvDenyStr = '<p class="deny_receipt">무료 거부 080-0000-0000</p>';
		
		//광고 및 무료수신거부 텍스트 추가
		if ($('input[name=send_adYn]:checked').val() == 'Y'){
			
			//문자 내용에 광고 문자 추가해주기
			$(advStr).insertBefore('textarea[name=smsTxt]'); 
			$(advDenyStr).insertBefore('div[name=afterDeny]');
			
			//미리보기에 광고 문자 추가해주기
			$(preAdvStr).insertBefore('.none_txt');
			$(preAdvDenyStr).insertAfter('.realtime');
			
			//$('#smsTxt').val(advStr + "\r\n" + contents + "\r\n" + advDenyStr);
			
			
		}else{ //광고 및 무료수신거부 텍스트 삭제
			
			//문자내용 광고문자 삭제하기
			$('.ad_txt').remove();
			$('.deny_txt').remove();
			
			//미리보기 광고 문자 삭제하기
			$('.ad_tit').remove();
			$('.deny_receipt').remove();
			
			/* contents = contents.replace(advStr + "\n","")
								.replace("\n" + advDenyStr, "");
			
			$('#smsTxt').val(contents); */
			
		}
		
		//문자 바이트수 계산하기
		fnByteString($('#smsTxt').val());
		
	}
	
	
	
	//문자 내용 입력시 바이트수 계산하기
	$('#smsTxt').keyup(function(e){
		
		var contents = $(this).val();
		fnByteString(contents);
		
	});//문자 바이트수 계산하기 끝
	
	//최초 문자샘플 탭 리스트 데이터 불러오기
	fnLetterListAjax();
	
	//문자 바이트수 계산하기 함수
	function fnByteString(contents){
		var totalByte = 0; 
		var content = contents;
		$('#msgLeng').html("");
		$('#limitLeng').html("");
		var conLeng = conByteLeng(content);
		
		var photoSts = $('.delLi').length;
		if(photoSts > 0){
			
			$('#msgLeng').html(conLeng + " / ");
			$('#limitLeng').html("2000");
			$('.msg_com').html("그림");
			$('#msgType').val("6"); // 메세지 타입 설정
			
			$('.msg_com').removeClass("msg_short"); //단문 클래스 삭제하고
			$('.put_left').removeClass("short"); //내용 입력 박스 클래스 삭제
			$('.msg_com').removeClass("msg_long"); //장문 클래스 삭제하고
			$('.put_left').removeClass("long"); //내용 입력 박스 클래스 삭제
			$('.msg_com').addClass("msg_photo"); // 그림 클래스 삽입
			$('.put_left').addClass("photo");  // 내용 입력 박스에 클래스 삽입
			$('.put_left').css("display","block");  // 내용 입력 박스에 클래스 삽입
			
			
			document.getElementById("mmsSubject").disabled = false;
			
		}else{
			
			if(conLeng > 90){
				
				$('#msgLeng').html(conLeng + " / ");
				$('#limitLeng').html("2000");
				$('.msg_com').html("장문");
				$('#msgType').val("6"); // 메세지 타입 설정
				
				$('.msg_com').removeClass("msg_short"); //단문 클래스 삭제하고
				$('.put_left').removeClass("short"); //내용 입력 박스 클래스 삭제
				$('.msg_com').addClass("msg_long"); // 장문 클래스 삽입
				$('.put_left').addClass("long");  // 내용 입력 박스에 클래스 삽입
				
				document.getElementById("mmsSubject").disabled = false;
				
			}else{
				
				$('#msgLeng').html(conLeng + " / ");
				$('#limitLeng').html("90");
				$('.msg_com').html("단문");
				$('#msgType').val("4"); // 메세지 타입 설정
				$('.msg_com').removeClass("msg_long"); //단문 클래스 삭제하고
				$('.put_left').removeClass("long"); //내용 입력 박스 클래스 삭제
				$('.msg_com').addClass("msg_short"); // 장문 클래스 삽입
				$('.put_left').addClass("short");  // 내용 입력 박스에 클래스 삽입
				
				//제목 비활성화로 내용 지워주기
				$('#mmsSubject').val("");
				document.getElementById("mmsSubject").disabled = true;
				
			}
			
		}
		
		
		// 미리보기 데이터 입력해 주기 , 줄바꿈 문자 변환해주기
		var repContent = "";
		repContetnt = content.replace(/(?:\r\n|\r|\n)/g, '<br/>');
		$('.none_txt').text(content);
		
		// 2000byte 초과시 메세지 알림
		if(conLeng > 2000){
			
			alert("문자 내용은 2000byte를 넘을 수 없습니다.");
			return false;
			
		}
		
		//결제 금액 계산해보기
		var totalPrice  = totalPriceSum();
		$('#totalPrice').text(totalPrice);
		
		$('#smsLen').val(conLeng);
		
	}
	
	

	//문자입력창의 첨부된 이미지 순서를 바꿀 때
	$(document).on('mouseup', '.thumb_wrap img', function (){
		//미리보기 창의 이미지 순서를 변경한다
		setTimeout(function() { 
			var previewHtml = "";
			
			//이미지 갯수만큼 for문 돌림

			for(var i=0; i<imgCnt-1; i++) {
				var imgTag = $(".thumb_wrap li:eq("+i+") div").html(); // 썸네일에 있는 이미지 태그 가져오기
				previewHtml += '<div class="img_box preBoxF on_scroll_img" id="preBoxF'+(i+1)+'">'
				previewHtml += imgTag;
				previewHtml += '</div>'
			}
			$('.preViewShort div').remove(); //미리보기 영역에 있던 이미지 다 지우고
			$('.preViewShort').append(previewHtml);  //새로 sorting된 이미지 그려주기
		}, 100);
		
	});
	
	//문자 샘플 탭, 그림문자 샘플 탭 선택시 옵션 초기화
	$('.tab').click(function(){

		var index = $(this).index();
		var form = document.letterForm;
		
		if($(this).hasClass("active") === true){
			
			if(index == 0){
				
				form.pageIndex.value = 1;
				form.letterType.value = "S";
				form.categoryCode.value = "";
				form.hashTag.value = "";
			
			}else if(index == 1){
				
				form.pageIndex.value = 1;
				form.letterType.value = "P";
				form.categoryCode.value = "";
				form.hashTag.value = "";
				
			}else if(index == 2){
				
				setTimeout(function(){ 
			    	map.relayout();
			    	map.setCenter(testcoords);
			    }, 0);
				
			}
		
		}
		
	});
	
	
	//이미지 선택시 그림문자 처리
	var imgCnt = 1;
	$(document).on('click', '.photoOnImg', function(){ 
	/* $('.photoOnImg').click(function(){ */
		
		$('.preShort').hide();
		$('.prePhoto').show();
		
		if($('.msg_com').hasClass("msg_short") === true){
			
			$('.msg_com').removeClass("msg_short"); //단문 클래스 삭제하고
			$('.msg_com').addClass("msg_photo"); // 그림문자용 클래스 삽입
			$('.put_left').removeClass("short");
			$('.put_left').addClass("photo");
			$('.msg_com').html("그림");
			$('#msgType').val("6"); // 메세지 타입 설정
			
			//제목 입력 항목 활성화
			document.getElementById("mmsSubject").disabled = false;
			
		}else{
			
			$('.msg_com').removeClass("msg_long"); //장문 클래스 삭제하고
			$('.msg_com').addClass("msg_photo"); // 그림문자용 클래스 삽입
			$('.put_left').removeClass("long");
			$('.put_left').addClass("photo");
			$('.msg_com').html("그림");
			$('#msgType').val("6"); // 메세지 타입 설정
			
			//제목 입력 항목 활성화
			document.getElementById("mmsSubject").disabled = false;
			
		}
		
		var imgSrc = $(this).attr("src");
		var imgId = $('#photoOnImg_'+imgCnt).val();
		
		if(imgCnt > 3){
			
			alert("이미지는 3장만 선택할 수 있습니다.");
			return false;
			
		}else{
			
			//문자 내용 상단에 이미지 이름 영역 객체 추가해주기
			var imgPath = "<img src=\"" + imgSrc + "\" alt=\"thumb1\"/>";
			var liPath = '<li class="delLi" id="delLi'+ imgCnt +'">'
						+ '<div>'
						+ imgPath
						+ '</div>'
						+ '<button type="button" class="file_close"><img src="/publish/images/content/thumb_del.png" alt="첨부파일 삭제"></button>'
						+ '<button type="button" class="file_close_on"><img src="/publish/images/content/thumb_del_on.png" alt="첨부파일 삭제"></button>'
						+ '</li>';
						
						
				/* "<li class=\"delLi\"><p>" + imgPath + "</p><button type=\"button\" class=\"file_close\"><img class=\"delImg\" src=\"/publish/images/content/file_close.png\" alt=\"첨부파일 삭제\"></button></li>" */
			$('.liOnImg').append(liPath);	
				
			//미리보기 보여주기
			$('.preiew_img').show();
			
			var imgHtml = "";
			var imgPath = "<div class=\"img_box preBoxF\" id=preBoxF"+ imgCnt +"><img src=\"" + imgSrc + "\" /></div>";

			if(imgCnt == 1){
				$('.preViewShort').append(imgPath);
				$('.photo_num_01').show();
				$('.photo_num_02').hide();
				$('.photo_num_03').hide();
				//$(".thumb_wrap li:eq(0)").addClass("on");
				
			}else if(imgCnt == 2){
				$('.preViewShort').append(imgPath);
				$('.photo_num_02').show();
				$(".thumb_wrap li").removeClass("on");
				//$(".thumb_wrap li:eq(1)").addClass("on");
				
			}else if(imgCnt == 3){
				$('.preViewShort').append(imgPath);
				$('.photo_num_03').show();
				$(".thumb_wrap li").removeClass("on");
				//$(".thumb_wrap li:eq(2)").addClass("on");
				
			}
			
			// 배열에 선택한 이미지 경로 저장해주기
			imgFilePath.push(imgSrc);
			
			// 배열에 선택한 이미지 아이디 저장해주기 - 내 문자 보관함 저장용으로 사용
			imgFileId.push(imgId);
			//문자 길이 및 타입 변경해주기
			var contents = $('#smsTxt').val();
			fnByteString(contents);
			
			//이미지 카운트 증가시키기
			imgCnt ++;
			
		}
		
		var scrollHei = $(".mCustomScrollBox").height();
		if(scrollHei > 488) {
			$(".img_box").addClass("on_scroll_img");
		}
		
		
	});
	
	
	//그림문자 이미지 삭제 처리 - 동적으로 추가한 객체는 on 함수로 불러올 수 있다.
	$(document).on('click', '.file_close', function(){ 
	  
		var delImgPath = ""; //삭제하려는 이미지 경로 받아오기 
		var index = $(this).index(); // 현재 선택 된 객체 인덱스 번호 받아오기
		
		//선택한 태그의 부모 이미지 li 객체 삭제
		$(this).parent(".delLi").remove();
		
		//미리보기 화면에서의 이미지 객체 삭제
		//삭제하려는 이미지 경로 받아오기
		delImgPath = $('.preBoxF').eq(index).find("img").attr("src");
		
		$('.preBoxF').eq(index).remove();
		
		// 삭제한 이미지 경로 배열에서 삭제해 주기
		for(var i=0; i < imgFilePath.length; i++){
			
			if(imgFilePath[i] === delImgPath){
				
				imgFilePath.splice(i, 1); //이미지 경로 삭제
				imgFileId.splice(i, 1);   //이미지 아이디 삭제 - 내 문자 보관함 저장용으로 사용
				i--;
			}
			
		}
		
		imgCnt--;
		
		//미리보기 포토 1,2,3 번 번호 표시 변경
		$('.photo_num_02').hide();
		$('.photo_num_03').hide();
		if(imgCnt > 2){
			
			$('.photo_num_01').show();
			$('.photo_num_02').show();
			
		}else if(imgCnt > 1){
			
			$('.photo_num_01').show();
			
		}else{
			
			//그림을 모두 삭제 했을때 단문으로 변경
			$('.preShort').show();
			$('.prePhoto').hide();
			
			$('.msg_com').removeClass("msg_photo");
			$('.msg_com').addClass("msg_short");
			$('.put_left').removeClass("photo");
			$('#msgType').val("4"); // 메세지 타입 설정
			
			var contents = $('#smsTxt').val();
			fnByteString(contents);
			
		}
		
		var scrollHei = $(".mCustomScrollBox").height();
		if(scrollHei > 488) {
			$(".img_box").removeClass("on_scroll_img");
		}
		
	}); 
	
	// 초기화 버튼 처리
	$('.btnReset').click(function(){
		
		//일반문자 라이오 선택해 주기
		$("#send_adYnN").prop("checked", true);
		
		$('.delLi').each(function(){
			
			$(this).remove();
			
		});
		
		$('.preBoxF').each(function(){
			
			$(this).remove();
			
		});
		
		//그림을 모두 삭제 했을때 단문으로 변경
		$('.preShort').show();
		$('.prePhoto').hide();
		
		$('.msg_com').removeClass("msg_photo");
		$('.msg_com').addClass("msg_short");
		$('#msgType').val("4"); // 메세지 타입 설정
		
		//메세지 내용 초기화
		$('#smsTxt').val("");
		fnByteString("");
		
	});
	
	// 동적으로 추가해주기 때문에 on 사용
	$(document).on('click', '.letterMsg', function(){ //문자 템플릿 선택시 상단 문자 내용에 입력해주기 
		
		/* var smsTxt = $(this).find('.msg_text').text(); */
		var smsTxtArea = $(this).find('.msg_text').html();
				
		smsTxtArea = smsTxtArea.replace(/(<br>|<br\/>|<br \/>)/g, '\r\n');
		$('#smsTxt').val("");
		$('#smsTxt').val(smsTxt);
		fnByteString(smsTxt);

		var sendOfT=$('.send_top').offset().top;
		$('html,body').stop().animate({'scrollTop':sendOfT-60},250);
		
	});
	
	// 동적으로 추가해주기 때문에 on 사용
	$(document).on('click', '.btnSearchF', function(){ // 검색 기능 실행 
		
		var form = document.letterForm;
	
		if(form.searchKeyword.value == ""){
			
			alert("검색어를 입력해 주세요.");
			return false;
			
		}
		//문자 리스트 불러오기
		fnLetterListAjax();
		
	});
	
	/*
	
		단문 / 장문 탭 옵션 선택시 실행 
	
	**/
	
	$('.tDep1_mType').click(function(){ // 전체,기업, 개인 선택 옵션 처리
		
		var mType = $(this).find('.on_active').text();
		var form = document.letterForm;
		
		
		if(mType == "전체"){
			
			form.memberType.value = "";
			
		}else if(mType == "기업"){
			
			form.memberType.value = "B";
			
		}else{
			
			form.memberType.value = "P";
			
		}
		
		//문자 리스트 불러오기
		form.letterType.value = "S";
		form.categoryCode.value = "";
		form.hashTag.value = "";
		form.pageIndex.value = 1;
		
		//문자 리스트 불러오기
		fnLetterListAjax();
		
	});
	
	$('.tDep1_letType').click(function(){ // 단문, 장문 선택 시 옵션처리
		
		var letterType = $(this).find('.on').attr("value");
		var form = document.letterForm;
		
		form.letterType.value = letterType;
		
		//문자 리스트 불러오기
		fnLetterListAjax();
		
	});
	
	$('.tDep1_cateCode').click(function(){ // 카테고리 선택 시 옵션 처리
		
		var cateCode = $(this).find('.on').attr("value");
		var form = document.letterForm;
		
		if(cateCode == "all"){ //전체 선택시
			
			cateCode = "";	
		
		}
		
		form.categoryCode.value = cateCode;
		form.pageIndex.value = 1;
		
		//문자 리스트 불러오기
		fnLetterListAjax();
		
	});
	
	$('.tDep1_hashTag').click(function(){ // 해시 태그 선택 시 옵션 처리
		
		var hashTag = $(this).find('.on').attr("value");
		var form = document.letterForm;
		
		form.hashTag.value = hashTag;
		form.pageIndex.value = 1;
		
		//문자 리스트 불러오기
		fnLetterListAjax();
		
	});
	
	
	/*
		
		그림문자 탭 옵션 선택시 사용
	
	*/
	
	$('.tDep2_mType').click(function(){ // 전체,기업, 개인 선택 옵션 처리
		
		var mType = $(this).find('.on_active').text();
		var form = document.letterForm;
		
		
		if(mType == "전체"){
			
			form.memberType.value = "";
			
		}else if(mType == "기업"){
			
			form.memberType.value = "B";
			
		}else{
			
			form.memberType.value = "P";
			
		}
		
		//문자 리스트 불러오기
		form.letterType.value = "P";
		form.categoryCode.value = "";
		form.hashTag.value = "";
		form.pageIndex.value = 1;
		
		fnPhotoListAjax();
		
	});
	
	$('.tDep2_letType').click(function(){ // 그림문자 선택 
		
		var letterType = $(this).find('.on').attr("value");
		var form = document.letterForm;
		form.letterType.value = 'P';
		
		//문자 리스트 불러오기
		fnPhotoListAjax();
		
	});
	
	$('.tDep2_cateCode').click(function(){ // 그림 문자 카테고리 선택 시 옵션 처리
		
		var cateCode = $(this).find('.on').attr("value");
		var form = document.letterForm;
		
		if(cateCode == "all"){ //전체 선택시
			
			cateCode = "";	
		
		}
		
		form.categoryCode.value = cateCode;
		form.pageIndex.value = 1;
		
		//문자 리스트 불러오기
		fnPhotoListAjax();
		
	});
	
	$('.tDep2_hashTag').click(function(){ // 그림문자 해시 태그 선택 시 옵션 처리
		
		var hashTag = $(this).find('.on').attr("value");
		var form = document.letterForm;
		
		form.hashTag.value = hashTag;
		form.pageIndex.value = 1;
		
		//문자 리스트 불러오기
		fnPhotoListAjax();
		
	});
	
	
	//받는사람 번호추가 버튼 처리
	$('.addCallToF').click(function(){
		
		var callTo = addDash($('#callTo').val());
		
		if(callTo == ""){
			
			alert("받는사람 번호를 입력해 주세요.");
			return false;
			
		}else if(!_regExp1.test(callTo)){
			
			alert("올바른 받는사람 번호를 입력해 주세요.");
			$('#callTo').val("");
			return false;
			
		}
		
		var isExist = false;
		$('.callNum_list').each(function(){
			
			if($(this).text() == callTo){
				
				isExist = true;
				return false;
				 			
			}
			
		});
		
		if(!isExist){
			
			var addCallHtml = '<div class="list_table list_body">'
				+ '<div class="cb_wrap">'
				+ '<label for="" class="label"></label>'
				+ '<input type="checkbox">'
				+ '</div>'
				+ '<div class="list_table_num callNum_list">'
				+ '<p>' + callTo + '</p>'
				+ '</div>'
				+ '<div class="list_table_name">'
				+ '<p>홍길동</p>'
				+ '</div>'
				+ '</div>';
				
			$('.callList_box').append(addCallHtml);
			$('#callTo').val("");
			
		}else{
			
			alert("이미 추가된 전화번호 입니다.");
			$('#callTo').val("");
			return false;
			
		}
		
		//결제 금액 계산해보기
		var totalPrice  = totalPriceSum();
		$('#totalPrice').text(totalPrice);
		
	});
	
	
	
	$(".fontPlus").click(function () {
		var currentSize = $(".preview_auto").css("fontSize");
		var size = parseInt(currentSize, 10) * 1.2;
		var unit = currentSize.slice(-2);
		$(".preview_auto").css("fontSize", size+unit);
	});
	
	$(".fontMinus").click(function () {
		var currentSize = $(".preview_auto").css("fontSize");
		var size = parseInt(currentSize, 10) / 1.2;
		var unit = currentSize.slice(-2);
		$(".preview_auto").css("fontSize", size+unit);
	});
	
});

function openPhotoEditor() {
    //만들려는 팝업의 크기
    var popup_wid = '950';
    var popup_ht = '760';

    //중앙 정렬을 위해 윈도우 스크린의 width,height 구하는 변수 만듦
    var popup_left = (window.screen.width / 2) - (popup_wid / 2);
    var popup_top =(window.screen.height / 2) - (popup_ht / 2);

    window.open('<c:url value='/web/mjon/msgdata/openImageEditorPopup.do'/>', 'a', 'width=' + popup_wid +', height='+ popup_ht +', left=' + popup_left + ', top='+ popup_top + ', scrollbar=no' );

}
	
</script>
</head>
<body>
    <form id="msgForm" name="msgForm" method="post">
				<input type="hidden" id="msgType" name="msgType" value="4" /><!-- 문자 종류 : 단문 - 4, 장문/그림 - 6 -->
				<input type="hidden" id="imgFilePath" name="imgFilePath" value="" /><!-- 선택 이미지 파일 경로 정보 , 로 구분 최대 3장까지 -->
				<input type="hidden" id="imgFileId" name="imgFileId" value="" /><!-- 선택 이미지 파일 아이디 정보 , 로 구분 최대 3장까지 -->
				<input type="hidden" id="fileCnt" name="fileCnt" value="0" /><!-- 첨부파일 추가 갯수 -->
				<input type="hidden" id="callToList" name="callToList" value=""/><!-- 수신자 전화번호 리스트 -->
				<input type="hidden" id="eachPrice" name="eachPrice" value="0"/> <!-- 문자 개별 단가 금액 -->
				<input type="hidden" id="totPrice" name="totPrice" value="0"/> <!-- 총 결제 금액 -->
				<input type="hidden" id="smsLen" name="smsLen" value="0"/> <!-- 문자 길이 정보 -->
				
				
	            <div class="top_content current hascont" id="tab1_1">
	                <div class="heading">
	                    <h2>문자전송</h2>
	                    <ul class="send_price">
	                        <li><span class="type">단문</span><span class="price sPrice">8.2</span>원</li>
	                        <li class="price_line"><span class="type">장문</span><span class="price  mPrice">24.6</span>원</li>
	                        <li class="price_line"><span class="type">그림</span><span class="price  pPrice">57.3</span>원</li>
	                    </ul>
	                </div>
	                <div class="titBox">
	                    <p>- 90byte 초과 시, 장문으로 전환됩니다. 장문 문자는 최대 2,000byte까지 작성할 수  있습니다.</p>
						<p>- 포토문자 1건에 포토 최대 3장 첨부가능  [권장 사이즈 : 640 x 960픽셀 / 최대용량 : 10MB]</p>
	                    <p>- 광고성 메시지는 반드시 유의사항 확인 후 발송해 주시기 바랍니다. <span> [광고문자 유의사항 보기]</span></p>
	                    <button type="button"><i></i>사용안내</button>
	                </div>
	                <div class="send_general">
	                    <div class="send_left">
	                        <table class="tType1">
	                            <caption>일반 문자보내기 분류 번호 내용 등을 입력하는 표</caption>
	                            <colgroup>
	                                <col style="width: 100px;">
	                                <col style="width: auto;">
	                            </colgroup>
	                            <tbody>
	                                <tr>
	                                    <th scope="row">문자분류</th>
	                                    <td class="send_cf">
	                                        <input id="send_adYnN" type="radio"name="send_adYn" value="N" checked="checked">
	                                        <label for="send_adYnN">일반</label>
	                                        <input id="send_adYnY" type="radio" name="send_adYn" value="Y">
	                                        <label for="send_adYnY">광고</label>
	                                    </td>
	                                </tr>
	                                <tr>
	                                    <th scope="row">발신번호</th>
	                                    <td class="put_num">
	                                        <label for="callFrom" class="label"></label>
	                                        <!-- <input type="text" size="35" id="callFrom" name="callFrom" value="010-6317-0383" placeholder="010-1234-5678" onfocus="this.placeholder=''" onblur="this.placeholder='010-1234-5678'" readonly> -->
	                                        <select id="callFrom" class="sel_number">
												<option value="010-1234-5678">010-1234-5678</option>
												<option value="010-1234-5678">010-1234-5678</option>
												<option value="010-1234-5678">010-1234-5678</option>
												<option value="010-1234-5678">010-1234-5678</option>
											</select>
	                                        <button type="button" class="btnType btnType6">번호변경</button>
	                                    </td>
	                                </tr>
						<tr>
	                                    <th scope="row">제목</th>
	                                    <td>
	                                        <!-- 단문일 때 -->
											<label for="mmsSubject" class="label"></label>
											<input type="text" size="20" id="mmsSubject" name="mmsSubject" class="w100" placeholder=""  onfocus="this.placeholder=''" >
											<!-- 장문일 때 -->
											<!-- <input type="text" size="20" id="mmsSubject" name="mmsSubject" class="w100" placeholder="제목을 입력해주세요 (최대30byte, 발송관리용)" onfocus="this.placeholder=''" onblur="this.placeholder='제목을 입력해주세요 (최대30byte, 발송관리용)'"> -->
	                                    </td>
	                                </tr>
									<!-- 단문 -->
									<tr>
                                        <th scope="row">내용</th>
                                        <td class="putText">
                                            <div class="clearfix">
                                                <div class="put_left short">
                                <!-- 업로드한 이미지의 썸네일 영역 -->
                                                	<ul class="thumb_wrap liOnImg"></ul>
                               	<!-- //업로드한 이미지의 썸네일 영역 -->
                                                	<!-- <div class="ad_txt"><p>(광고)</p></div> -->
                                                    <label for="smsTxt" class="label"></label>
                                                    <textarea id="smsTxt" name="smsTxt" class="put_text">

                                                    </textarea>
                                                    <div class="text_length">
                                                    	<!-- <div>
															<p>무료 거부 080-0000-0000</p>
														</div> -->
														<div name="afterDeny">
                                                        	<p>
	                                                        	<span class="fwMd" id="msgLeng">0 /</span>
	                                                        	<span class="c_002c9a fwMd" id="limitLeng"> 90</span>byte
                                                        	</p>
                                                        	<span class="msg_com msg_short">단문</span>
														</div>
                                                    </div>
                                                </div>
                                                <div class="put_right">
                                                    <button type="button" class="btnType btnType7">특수문자</button>
                                                    <button type="button" class="btnType btnType7">특정문구 일괄변환</button>
                                                    <button type="button" class="btnType btnType7" onclick="javascript:fnGoMyMsg(); return false;">내문자함</button>
                                                    <button type="button" class="btnType btnType8" onclick="openPhotoEditor();">이미지 불러오기</button>
	                                                <div class="send_btnWrap">
	                                                    <button type="button" class="btnType btnType9" onclick="javascript:fn_saveMyMsg(); return false;">문자저장</button>
	                                                    <button type="button" class="btnType btnType9 btnReset">초기화</button>
	                                                </div>
                                            	</div>
	                                        </div>
	                                        <p>* 현재 [단문] <span class="c_e40000 fwBold">120,000</span>건 발송 가능합니다.</p>
	                                    </td>
	                                </tr>
                                <tr>
                                    <th scope="row">받는사람</th>
                                    <td class="send_list">
                                        <div class="list_left">
                                            <div class="add_num">
                                                <label for="callTo" class="label"></label>
                                                <input type="text" id="callTo" name="callTo" placeholder="번호를 입력하세요." onfocus="this.placeholder=''" onblur="this.placeholder='번호를 입력하세요.'">
                                                <button type="button" class="btnType btnType6 addCallToF">번호추가</button>
                                                <span>* 중복번호는 한번만 발송됩니다.</span>
                                            </div>
											<div class="numOfCase">
												<p>총 <span>120</span>건 /</p>
												<p>중복 <span>9</span>건</p>
											</div>
                                            <div>
                                                <div class="listType list01 callList_box">
													<div class="list_table list_head">
														<div class="cb_wrap">
															<label for="" class="label"></label>
															<input type="checkbox">
														</div>
														<div class="list_table_num">
															<p>번호</p>
															<img src="/publish/images/sortUp.png">
															<img src="/publish/images/sortDown.png">
														</div>
														<div class="list_table_name">
															<p>이름</p>
															<img src="/publish/images/sortUp.png">
															<img src="/publish/images/sortDown.png">
														</div>
													</div>
												</div>
                                                <div class="list_bottom">
                                                    <div class="remove_btnWrap">
                                                        <button type="button" class="btnType15"><i class="remove_img"></i>전체삭제</button>
                                                        <button type="button" class="btnType15"><i class="remove_img"></i>선택삭제</button>
                                                        <button type="button" class="btnType15"><i class="remove_img"></i>중복삭제</button>
                                                        <button type="button" class="address_reg2">주소록에 등록</button>
                                                    </div>
													<!--
													<div class="add_btn">
														<button type="button" class="btnType btnType9">주소록에 저장</button>
													</div> -->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add_remove">
                                            <button type="button" class="add"><i></i>추가</button>
                                            <button type="button" class="remove"><i></i>삭제</button>
                                        </div>
                                        <div class="list_right">
											<div style="height: 90px;">
                                            	<div class="list_btnWrap">
                                            	    <button type="button" class="btnType 	btnType12">최근 전송내역</button>
                                            	    <button type="button" class="btnType 	btnType12">자주보내는 번호</button>
                                            	    <button type="button" class="btnType 	btnType12">그룹 보내기</button>
                                            	    <button type="button" class="btnType btnType13 	c1">주소록 불러오기</button>
                                            	    <button type="button" class="btnType btnType13 	c2">Txt파일 불러오기</button>
                                            	    <button type="button" class="btnType btnType13 	c3">액셀 불러오기</button>
                                            	</div>
											</div>
                                            <div>
                                                <div class="listType list02">
													<div class="list_table list_head">
														<div class="cb_wrap">
															<label for="" class="label"></label>
															<input type="checkbox">
														</div>
														<div class="list_table_num">
															<p>번호</p>
															<img src="/publish/images/sortUp.png">
															<img src="/publish/images/sortDown.png">
														</div>
														<div class="list_table_name">
															<p>이름</p>
															<img src="/publish/images/sortUp.png">
															<img src="/publish/images/sortDown.png">
														</div>
													</div>
													<div class="drag_drop">
														<div class="drag_drop_in">
															<div class="drag_top">
																<i></i>
																<p>Drag and Drop</p>
																<span>파일을 여기에 끌어 놓으세요</span>
															</div>
															<div class="drag_txt">
																<span>or</span>
															</div>
															<div class="drag_bottom">
																<p>Ctrl+C → Ctrl+V</p>
																<span>복사해서 붙여넣으세요</span>
															</div>
														</div>
													</div>
												</div>
                                                <div class="list_bottom">
                                                    <div class="remove_btnWrap">
                                                        <button type="button" class="btnType15"><i class="remove_img"></i>선택삭제</button>
                                                        <button type="button" class="btnType15"><i class="remove_img"></i>전체삭제</button>
														<button type="button" class="check_validity">유효성 검사<i></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th colspan="2" class="billingAmount">
                                    	<div>
	                                        <div class="final_pay clearfix">
	                                            <p>결제금액 :</p>
	                                            <p class="price" ><span id="totalPrice">0</span>원<span>(부가세 포함)</span></p>
	                                            <button type="button"><i></i>계산하기</button>
	                                        </div>
	                                        <div class="pay_type clearfix">
												<div>
													<label for="" class="label">충전 금액</label>
													<input id="radio_bill_1" type="radio" name="radio_bill" checked="checked">
													<label for="radio_bill_1">내 충전금 (<span>3,000</span>원)</label>
												</div>
												<div>
													<label for="" class="label">포인트 금액</label>
													<input type="text" placeholder="199,700" readonly>
													<button type="button" class="btnType btnType3">충전</button>
												</div>
											</div>
											<div class="pay_type clearfix">
												<div>
													<input id="radio_bill_1" type="radio" name="radio_bill" checked="checked">
													<label for="radio_bill_1">내 포인트 (<span>300</span>p)</label>
												</div>
												<div>
													<input type="text" placeholder="300" readonly>
													<button type="button" class="btnType btnType3">전체사용</button>
												</div>
											</div>
                                        </div>
                                    </th>
                                </tr>
                                <tr>
                                    <th scope="row">추천인 ID</th>
                                    <td class="check_num">
                                        <input id="radio5" type="radio"name="recom" checked="checked">
                                        <label for="radio5">없음</label>
                                        <input id="radio6" type="radio" name="recom">
                                        <label for="radio6">있음</label>
                                        <div>
                                            <label for="id" class="label"></label>
                                            <input type="text" size="20" id="id" placeholder="추천인 아이디 입력" onfocus="this.placeholder=''" onblur="this.placeholder='추천인 아이디 입력'">
                                            <button type="button" class="btnType btnType9">확인</button>
                                        </div>
                                    </td>
                                </tr>            
                            </tbody>
                        </table>
                    </div>
	                <div class="send_right">
                        <div class="phone">
                        	<div class="phoneIn">
								<div>
									<p><img src="/publish/images/search.png">미리보기</p>
									<div class="text_length2 clearfix preShort">
										<span class="msg_com msg_short">단문</span>
										<div>
											<span>글자크기</span>
											<button type="button" class="fontPlus"><img src="/publish/images/content/font_plus.png"></button>
											<button type="button" class="fontMinus"><img src="/publish/images/content/font_minus.png"></button>
										</div>
									</div>
									<div class="text_length2 clearfix prePhoto">
										<span class="msg_com msg_photo">포토</span>
										<ul class="photo_msg_num">
											<li class="photo_num_01" onclick="imgClick(0);"><a href="#none">1</a></li>
											<li class="photo_num_02" onclick="imgClick(1);"><a href="#none">2</a></li>
											<li class="photo_num_03" onclick="imgClick(2);"><a href="#none">3</a></li>
										</ul>
										<div>
											<span>글자크기</span>
											<button type="button" class="fontPlus"><img src="/publish/images/content/font_plus.png"></button>
											<button type="button" class="fontMinus"><img src="/publish/images/content/font_minus.png"></button>
										</div>
									</div>
									<!-- 텍스트 미리보기 -->
									<div class="text_preview">
										<div class="preiew_img preViewShort"></div>
										<div class="preview_auto">
											<!-- <p class="ad_tit">(광고)</p> -->
											<p class="none_txt"></p>
											<p class="realtime"></p>
											<!-- <p class="deny_receipt">무료 거부 080-0000-0000</p> -->
										</div>
									</div>
									<!-- //텍스트 미리보기 -->
								</div>
							</div>
                            <p class="addText">※ 단말기 설정에 따라 다르게 보일 수 있습니다</p>
						</div>
						<div class="phone_bottom">
                            <div class="send_rev">
                                <div class="rev_radio">
                                    <input id="radio7" type="radio"name="reser" checked="checked">
                                    <label for="radio7">즉시</label>
                                    <input id="radio8" type="radio" name="reser">
                                    <label for="radio8">예약</label>
                                </div>
                                <div>
                                    <div class="rev_top">
                       		            <span>날짜 :</span>
                       		            <div class="calendar">
                       		                <input type="text" title="예약 전송 시 날짜 선택"><button id="txtDate1" value="" title="캘린더 팝업 열기" onclick="fnPopUpCalendar(txtDate1,txtDate1,'yyyy/mm/dd')" class="text_box1 calInput"><img src="/publish/images/calendar/calendarIcon2.png"></button>
                       		            </div>
                       		            <label for="" class="label">시 선택</label>
										<div class="selBox">
                       		            	<select class="selType1">
                       		            	    <option>00시</option>
                       		            	    <option>10시</option>
                       		            	    <option>20시</option>
                       		            	</select>
                       		            	<label for="" class="label">분 선택</label>
                       		            	<select class="selType1">
                       		            	    <option>00분</option>
                       		            	    <option>25분</option>
                       		            	    <option>50분</option>
                       		            	</select>
										</div>
                       		        </div>
                                    <div class="rev_bottom">
                      		            <input type="checkbox">
                      		            <label for="">분할전송</label>
                      		            <select class="selType1">
                      		                <option>00시</option>
                      		                <option>10시</option>
                      		                <option>20시</option>
                      		            </select>
                      		            <label for="">건</label>
                      		            <select class="selType1">
                      		                <option>00분</option>
                      		                <option>25분</option>
                      		                <option>50분</option>
                      		            </select>
                      		            <label>간격</label>
                      		        </div>
                                </div>
                            </div>
                            <div class="send_btn">
                                <button type="button" class="btnType btnType10">테스트 발송<img src="/publish/images/content/qmIcon.png"></button>
                                <button type="button" class="btnType btnType11" onclick="javascript:fn_sendMsgData(); return false;">발송하기</button>
                            </div>
                            </div>
		                </div>
		            </div>
		        </div><!--// tab content1 -->
	        </form>
</body>
</html>