/**
* Article 에서 사용되는 Component 기능을 정의한다.
*/
(function($, window, document) {

	var $leftSns = $('.share_article > dl'),
		ARTICLE_SIZE = {
			body: 580,
			topDuplicationMargin: 40
		},
		apiPath = utils.config('apiPath'),
		nowDate = new Date();

	function getLeftSnsPosition() {
		var offsetTop = $leftSns.offset() ? $leftSns.offset().top : 0,
			h = $leftSns.height() + 20 || 0;

		return offsetTop + h;
	}

	// DESC : 컴포넌트가 상단에 위치하는 경우, 왼쪽 SNS 버튼과 겹치지 않도록 위치 조절
	function setPosition($html) {
		var targetOffset = $html.offset(),
			css = { 'margin-left': 0 },
			htmlMarginLeft = parseInt($html.css('margin-left').replace('px', ''), 10);

		if (targetOffset.top < getLeftSnsPosition()) {
			//css.width = ARTICLE_SIZE.body - ARTICLE_SIZE.topDuplicationMargin;

			if ($html.hasClass('ab_subtitle')) {
				css['margin-left'] = 0;//ARTICLE_SIZE.topDuplicationMargin + htmlMarginLeft;
			} else {
				css['margin-left'] = ARTICLE_SIZE.topDuplicationMargin + htmlMarginLeft;
			}

			$html.css(css);
		}
	}

	function setPictorialHtml(obj) { /*parent, src, count, type, items*/

		var $t = obj.parent,
			src = utils.getPdsFullPath(obj.src),
			$html = $('<div class="ab_photo photo_center" data-type="' + obj.type + '" data-count="' + obj.count + '"></div>'),
			$btn = $('<span class="button"><span class="btn_all"><span class="icon">화보사진 모두보기</span>' + obj.count + '</span></span>');

		//$html.on('error', 'img', utils.imageErrorHandler);
		//var html = '<div class="image_center" style="width:466px;height:402px;">'+
		//    '<span class="thumb"><img src="' +src + '" alt=""></span>'+
		//    '<strong class="mg">' +src + '</strong>'+
		//'</div>';

		$html.append('<div class="image"><a href="#" data-viewer="' + obj.type + '" data-id="' + (obj.id || 0) + '"><img src="' + src + '" alt="" onerror="utils.imageErrorHandler(this)"><span class="mask"></span></a></div>');

		if(obj.title) {
			$html.append('<p class="caption">' + obj.title + '</p>');
		}

		$html.data('images', obj.items);
		$html.find('a').append($btn);

		$('a[data-viewer]', $html).imageViewer(obj.items);
		$t.replaceWith($html.css('width', ARTICLE_SIZE.body));
	}

	$.fn.articleComponent = function(options) {

		//utils.log('## load articleComponent');
		var $article = this;

		$article.articleGalleryTag();                                   // 갤러리Tag (old version)
		$('div.tag_photobundle', $article).articlePhotoBundle();        // 사진묶음

		$('div[data-type=sns], div.tag_sns', $article).articleSns();    // sns card
		$('.jtbc_vod, .tag_vod', $article).articleVod();                // legacy : .jtbc_vod, new : .tag_vod

		$('div.tag_pictorial', $article).articlePictorial();            // 화보
		$('div.tag_poll', $article).articlePoll();                      // 투표
		$('div.tag_interview', $article).articleInterview();            // 인터뷰
		$('div.tag_quotation', $article).articleQuotation();            // 인용구
		$('div.tag_audio', $article).audioPlayer();                     // 오디오 서비스
		$('div.tag_jplus_link', $article).articleJplusLink();

		var photoIndex = 0;

		// 사진 크게보기
		$('div.ab_photo.photo_center', $article).each(function(i) {

			var $photo = $(this),
				count = $photo.data('count');

			var imageSize = $photo.css('width').replace('px', '').replace('Px', '').replace('PX', '');
			if (imageSize >= 580) {
			if (!$photo.data('type')) {

				$photo.data('type', 'cut');
				if(!count) {
					$photo.data('count', 1);
				}
				$photo.find('.image').append('<span class="button"><span class="btn_enlarge" ><span class="icon">사진 크게보기</span></span></span>');
				$photo.find('.image').wrapInner('<a href="#" data-viewer="image" data-index="' + photoIndex + '"></a>');
				$photo.find('a').imageViewer();

			} else {
				$photo.find('a').data('index', photoIndex);
			}

			photoIndex += count || 1;
			}
		});
	};

	/**
	 * 속보
	 */
	$.fn.articleNewsflash = function(options) {
		var $articleBody = this;

		if($articleBody.find('.ab_topnews').length == 0) {
			utils.getJsonp({
				url: utils.config('apiPath') + '/static/breakingnews',
				success: render
			});
		}

		function render(d) {
			var html = '',
				template = '<div class="ab_topnews"><a data-bind="link"></a></div>',
				freshTitle = '<img src="' + utils.config('imagePath') + '/pc/common/i_flash_news.png' + '" alt="속보">',
				exculusiveTitle = '<img src="' + utils.config('imagePath') + '/pc/common/i_exclusive_news.png' + '" alt="단독">',
				data = {},
				directives = { link: utils.decorators.link },
				$target = getRenderTarget($articleBody, 4);

			var $etcPhoto = $articleBody.find('div.html_photo_left, div.photo_left, div.html_photo_right, #criteo_network').first(),
				$children = $articleBody.children(),
				etcIndex = $children.index($etcPhoto),
				brIndex = $children.index($target);

			if ($etcPhoto.length > 0 && etcIndex == -1) {
				if (brIndex < 0) {
					$target = $etcPhoto;
				}
			} else {
				if ($etcPhoto.length > 0) {
					if (brIndex < 0) {
						$target = $etcPhoto;
					} else if (etcIndex < brIndex) {
						$target = etcIndex == 0 ? $articleBody : $etcPhoto;
					}
				}
			}

			if (d && d.item && d.item.Title) {
				data = { link: { href: d.item.Link, html: (d.item.IsFresh ? freshTitle + ' ' + d.item.Title : (d.item.IsExclusive ? exculusiveTitle + ' ' + d.item.Title : d.item.Title)) } };
				html = $.renderTemplate({ template: template, data: data, directives: directives });

				if ($target == $articleBody) {
					$target.append(html);
				} else {
					if (etcIndex > -1 && etcIndex < brIndex) {
						$target.before(html);
					} else {
						if (brIndex < 0) {
							$target.before(html);
						} else {
							$target.after(html);
						}
					}
				}

				$(html).find('a').each(function () {
					$(this).attr('href', utils.getClocUrl($(this).attr('href'), 'joongang|article|breaknews'));
				});

				utils.resetArticleSubWidget && utils.resetArticleSubWidget();
			}
		}
	};

	/*
	<div class="tag_subtitle">서브 타이틀</div>
	*/
	/**
	 * 서브타이틀
	 * @param options
	 */
	$.fn.articleSubTitle = function(options) {
		var $articleBody = this,
			defaults = {},
			config = $.extend(true, defaults, options),
			$subTitle = $('#sub_title'),
			subTitle = $subTitle.val(),
			$target = getRenderTarget($articleBody, 2);

		if($subTitle.length && subTitle.length && $target.length) {
			setSubTitle();
		}

		function setSubTitle() {
			var $html = $('<div class="ab_subtitle"><p>' + subTitle + '</p></div>'),
				halfSize = 400,
				isFullSize = false;

			var $etcPhoto = $articleBody.find('div.html_photo_left, div.photo_left, div.html_photo_right, #criteo_network').first(),
				$children = $articleBody.children(),
				etcIndex = $children.index($etcPhoto),
				brIndex = $children.index($target);

			if ($etcPhoto.length > 0 && etcIndex == -1) {
				if (brIndex < 0) {
					$target = $etcPhoto;
				}
			} else {
				if ($etcPhoto.length > 0) {
					if (brIndex < 0) {
						$target = $etcPhoto;
					} else if (etcIndex < brIndex) {
						$target = etcIndex == 0 ? $articleBody : $etcPhoto;
					}
				}
			}

			if ($target == $articleBody) {
				$target.prepend($html);
			} else {
				if (etcIndex > -1 && etcIndex < brIndex) {
					$target.before($html);
				} else {
					$target.after($html);
				}
			}
			setPosition($html);

			if ($html.width() > halfSize) {
				isFullSize = true;
			}

			if (isFullSize) {
				$html.css('float', 'none');
			}

			var loadImageList = [];

			//components 가 위에 있고, 속보의 위치가 sns 높이 안에 있다.
			if ($html.offset().top < getLeftSnsPosition()) {
				$html.prevAll().each(function () {
					var $prev = $(this);

					if ($prev.is('div[class^=ab_]')) {
						var prevImageLength = $prev.find('img').length;

						if (prevImageLength > 0) { // components 안에 img 가 있을 경우
							$prev.find('img').on('load', function () {
								var $img = $(this);

								loadImageList.push($img);

								if (loadImageList.length === prevImageLength) {//해당 이미지들이 모두 로드가 된 후에 위치 조정을 해준다.
									onloadImageComplete($html);
								}
							});
							//return;
						} else { //components 안에 img 가 없을 경우 어떻게 처리를 해야하나
						}
					}
				});
			}

			utils.resetArticleSubWidget && utils.resetArticleSubWidget();
		}

		function onloadImageComplete($target) {
			$target.removeAttr('style');
			setPosition($target);
		}
	};

	function renderComponent($target, html) {
		if($target == $(DOM_SELECTOR.articleBody)) {
			$target.prepend(html);
		} else {
			$target.before(html);
		}
	}

	function getRenderTarget($container, pos) {
		return $container.find('>br').length > pos - 1 ? $container.find('>br').eq(pos - 1) : $container;
	}

	/*
	<div class="tag_quotation">{인용구}</div>
	*/
	/**
	 * 인용구
	 */
	$.fn.articleQuotation = function(options) {
		var defaults = {},
			config = $.extend(true, defaults, options),
			$quotations = this;

		function setQuotation($i, t) {
			var $html = $('<div class="ab_quotation"><p>' + t + '<span class="icon"></span></p></div>');
			$i.replaceWith($html); // DESC : position 조절이 필요한 구조이므로 replaceWith 하면 안됨.
			setPosition($html);
			utils.resetArticleSubWidget && utils.resetArticleSubWidget();
		}

		return this.each(function(i, v) {
			var $i = $(v),
				t = $i.html().replace(/^(<([^>]+)>)|(<\/([^>]+)>)/ig, '');
			setQuotation($i, t);
		});
	};

	/*
	​<div class="tag_jplus_link" data-link="{링크 Url}" data-add-link="{추가 Url 정보}">
		<img class="tag_image" src="{이미지 Url}" alt="" /> 이미지 없는 경우, 태그 안들어옴.
		<div class="tag_title">{타이틀 정보}</div>
		<div class="tag_red">{Read 문 정보}</div>
	</div>
	*/
	/**
	 * 링크 (JPlus)
	 */
	$.fn.articleJplusLink = function() {
		function setHtml($target, data) {

			var $link = $('<div class="ab_url"><span class="icon"></span></div>'),
				imageHtml = '',
				textHtml = '';

			if($target.length == 0) { return; }

			imageHtml = getImageHtml(data);
			textHtml = getTextHtml(data);

			function getImageHtml(data) {
				var html = '';

				if (data.imageSrc) {
					html = '<span class="thumb"><a href="' + data.link + '"><img src="' + data.imageSrc + '" alt="' + data.title + '"></a></span>';
				}

				return html;
			}

			function getTextHtml(data) {
				return '' +
				'<div class="text_wrap">' +
					'<div class="text_center">' +
						'<strong class="tit"><a href="' + data.link + '">' + data.title + '</a></strong>' +
						'<p class="read"><a href="' + data.link + '">' + data.read + '</a></p>' +
						'<em class="lnk_add"><a href="' + data.addLink + '">' + data.addLink + '</a></em>' +
					'</div>' +
					'<span class="valign"></span>' +
				'</div>';
			}

			$link.append(imageHtml).append(textHtml);
			$target.replaceWith($link);

			utils.resetArticleSubWidget && utils.resetArticleSubWidget();
		}

		return this.each(function(i, v) {
			var $c = $(v),
				data = $c.data();

			data.imageSrc = $c.find('img').length > 0 ? $c.find('img').attr('src') : '';
			data.title = $c.find('.tag_title').text() || '';
			data.read = $c.find('.tag_read').text() || '';

			setHtml($c, data);
		});
	};

	/**
	 * 인터뷰
	 * @param options
	 */
	$.fn.articleInterview = function(options) {
		var defaults = {},
			config = $.extend(true, defaults, options),
			cls = {
				question: '.tag_question',
				answer: '.tag_answer',
				shareList: 'share_list'
			},
			$interviewList = this;

		function setInterview($target, interview) {
			if(!$target.length) {
				return;
			}

			var $itemWrap = null,
				question = '<span class="icon"></span><span class="hide">질의 :</span>',
				answer = '<span class="hide">응답 :</span>';

			var $interview = $('<div class="ab_interview"></div>'),
				$l = $('<dl></dl>'),
				$q = $('<dt></dt>').wrapInner(question + interview.question),
				$a = $('<dd></dd>').wrapInner(answer + interview.answer);

			$interview.append($l.append($q).append($a));

			// add interview
			$target.replaceWith($interview);

			utils.resetArticleSubWidget && utils.resetArticleSubWidget();

		}

		return this.each(function(i, v) {
			var $i = $(v),
				$question = $i.find(cls.question),
				$answer = $i.find(cls.answer);

			setInterview($i, {
				question: $question.html(),
				answer: $answer.html()
			});
		});
	};

	/**
	 * 투표
	 * @param options
	 */
	$.fn.articlePoll = function(options) {
		//utils.log('## articlePoll');
		var imagePath = utils.config('pdsPath'),
			isLogin = utils.config('isLogin'),
			POLL_LAYOUT_TYPE = {horizontal: 'horizontal', vertical: 'vertical'},
			POLL_CLASS = {horizontal: 'answer_type01', vertical: 'answer_type02'},
			POLL_ING_CLASS = {ing: 'poll_ing', end: 'poll_end'},
			articleType = utils.config('articleType');

		function setPollHtml($t, pConfig) {
			var data = pConfig.data,
				pCls = POLL_CLASS[pConfig.layoutType],
				totalCount = getTotalCount(data.PollItems),
				startDate = data.StartedDateTime.format('yyyy.MM.dd'),
				endDate = data.EndedDateTime.format('yyyy.MM.dd'),
				$poll = $('<div class="ab_poll"><fieldset class="poll_end"><legend class="hide">투표</legend></fieldset></div>'),
				$hd = $('<div class="hd"><span class="icon"></span><strong>' + data.Title + '</strong><em>참여기간 ' + startDate + ' - ' + endDate + ' / ' + totalCount + '명 참여</em></div>'),
				$bd = $('<div class="bd"><ul class="clearfx"></ul></div>'),
				$ft = $('<div class="ft"><button type="button" class="mg">투표하기</button></div>');

			//utils.log(pConfig);

			// add head, body
			$poll.find('fieldset').append($hd).append($bd);

			//utils.log('pConfig.isPoll : ' + pConfig.isPoll);

			if(pConfig.isPoll) {
				$poll.find('fieldset').addClass(POLL_ING_CLASS.ing).removeClass(POLL_ING_CLASS.end).append($ft);
			}

			// add list type class
			$bd.find('ul').addClass(pCls);

			var countArray = [];

			data.PollItems.forEach(function(v, i) {
				countArray.push(v);
			});

			countArray.sort(function(a, b) {
				return b.VotedCount - a.VotedCount;
			});
			var firstItem = countArray.shift();
			var secondItem = countArray.shift();

			// add items (PollItems)
			data.PollItems.forEach(function(v, i) {
				var cls = '';
				if(v.Id == firstItem.Id) {
					cls = 'answer01';
				}
				if(v.Id == secondItem.Id) {
					cls = 'answer02';
				}
				setItem({list: $bd.find('ul'), data: v, index: i, cls: cls});
			});

			// 투표하기
			$poll.find('button').on('click', function() {
				var val = $poll.find('input[name=articlePollAnswer_' + pConfig.pollId + ']:checked').val();

				if(pConfig.data.IsNeedToLogin == true && !isLogin) {
					return alert('로그인 후 투표가 가능합니다.');
				}

				if(val === undefined) {
					return alert('투표하실 항목을 선택해주세요.');
				}

				utils.ajaxPost({
					url: apiPath + '/poll/' + pConfig.pollId + '/vote',
					data: {
						ItemIds: val
					},
					success: callback
				});

				function callback(res) {
					//utils.log(res);
					var code = res.Code,
						msg = '';

					if(res.IsSuccess == true) {
						alert('투표에 참여하셨습니다.');
						addAnswerCallback(pConfig, val);
					} else {

						switch(code) {
							case 'Duplicated':
								msg = '중복된 참여입니다.';
								break;
							case 'NotPeriod':
								msg = '투표 참여기간이 아닙니다.';
								break;
							default:
								msg = '데이타 처리에 문제가 발생하였습니다.';
								break;
						}
						alert(msg);
					}
				}
			});

			function addAnswerCallback(pConfig, val) {

				try {
					pConfig.data.PollItems.forEach(function(v) {
						if(v.Id == val) {
							v.VotedCount = v.VotedCount + 1;
						}
					});
					pConfig.data.VotedCount = pConfig.data.VotedCount + 1;
				} catch(e) {
					//utils.log('-----------------------' + val);
				};

				setPollHtml(pConfig.$p, pConfig);
			};

			// add poll
			if($t.hasClass('tag_poll')) {
				$t.before($poll);
			} else {
				$t.replaceWith($poll);
			}

			pConfig.$p = $poll;

			if(articleType == ARTICLE_TYPE.piki) {
				var parentWidth = $poll.parent().width();
				$poll.width(parentWidth);
				$hd.width(parentWidth);

			} else {
				setPosition($poll);
				$hd.width($poll.width());
			}

			function getPercent(c) {
				var percent = Math.round(c / totalCount * 100);
				return isNaN(percent) ? 0 : percent;
			}

			function getTotalCount(list) {
				var count = 0;
				list.forEach(function(v) {
					count += (v.VotedCount || 0);
				});
				return count;
			}

			function setItem(condition) {
				var percent = getPercent(condition.data.VotedCount),
					html = '',
					bar = '<span class="bar"><span class="bg"><span class="fg" style="width:' + (totalCount == 0 ? 50 : percent) + '%;"></span></span></span>',
					opt = '',
					txt = '<span class="txt">' + condition.data.Title + '</span>',
					$item = null;

				//utils.log('## setItem');
				//utils.log(condition.data);

				opt += '<span class="opt">';
				opt += '<input type="radio" id="survey_' + pConfig.pollId + '_' + condition.index + '" value="' + condition.data.Id + '" name="articlePollAnswer_' + pConfig.pollId + '">';
				opt += '<label for="survey_' + pConfig.pollId + '_' + condition.index + '">';
				opt += '<strong>' + percent + '%</strong> | ';
				opt += '<em>' + condition.data.VotedCount + '명</em>';
				html += '</label>';
				opt += '</span>';

				html += '<li class="' + condition.cls + '">';
				if(condition.data.ImageName) {
					html += '<span class="thumb"><img src="' + imagePath + condition.data.ImagePath + condition.data.ImageName + '" alt=""><span class="mask"></span></span>';
				}
				if(pConfig.layoutType == POLL_LAYOUT_TYPE.horizontal) {
					html += bar + opt + txt;
				} else {
					html += '<span class="text_wrap">';
					html += '<span class="text_center">';
					html += opt + bar + txt;
					html += '</span>';
					html += '<span class="valign_fix"></span>';
					html += '</span>';
				}
				
				html += '</li>';

				$item = $(html);

				condition.list.append($item);

				utils.resetArticleSubWidget && utils.resetArticleSubWidget();
			}
		}

		function getPollUse(d) {
			// 일시중지 상태 조건 추가.
			var ts = nowDate.getTime(),
				isUse = true;

			if (d.Status == 'Pause') {
				isUse = false;
			} else {
				if (ts < d.StartedDateTime || ts > d.EndedDateTime) {
					isUse = false;
				}
			}
			return isUse;
		}

		function getTimeStamp(d) {
			if(d.indexOf('.') > -1) {
				d = d.substr(0, d.indexOf('.'));
			}
			return typeof d == 'string' ? d.toDateISO8061() : d;
		}

		return this.each(function(i, v) {
			var $p = $(v),
				id = $p.data('id');

			utils.getJsonp({
				url: apiPath + '/poll/' + id,
				success: callback
			});

			function callback(resData) {
				var poll = resData.poll;

				if (poll.Status == 'Delete') {
					return;
				}
				poll.StartedDateTime = getTimeStamp(poll.StartedDateTime);
				poll.EndedDateTime = getTimeStamp(poll.EndedDateTime);

				var
					pollConfig = {
						$p: $p,
						pollId: id,
						data: poll,
						layoutType: (poll.PollItems.length > 2 ? POLL_LAYOUT_TYPE.vertical : POLL_LAYOUT_TYPE.horizontal),
						isPoll: getPollUse(poll) // 진행중 여부.
					};

				setPollHtml($p, pollConfig);
			}
		});
	};

	/**
	 * 화보
	 * @param options
	 */
	$.fn.articlePictorial = function() {
		return this.each(function(i, v) {
			var $p = $(v),
				id = $p.data('id');

			if(!id) { return; }

			utils.getJsonp({
				url: apiPath + '/gallery/' + id,
				success: callback
			});

			function callback(resData) {
				var objPictorial = {
					parent: $p,
					src: '',
					count: 0,
					type: 'photo',
					items: []
				};

				try {
					$.each(resData.List, function(i, v) {
						v.FileUrl = utils.getPdsFullPath(v.Image);
					});

					objPictorial.id = id;
					objPictorial.title = resData.Photo.Title;
					objPictorial.src = resData.List[0].FileUrl;
					objPictorial.count = resData.Photo.Count;
					objPictorial.items = resData.List;
				} catch (e) { utils.log(e); };

				setPictorialHtml(objPictorial);
			}
		});
	};

	/**
	* 사진묶음
	*/
	$.fn.articlePhotoBundle = function() {
		return this.each(function(i, v) {
			var $p = $(v),
				$items = $p.find('img'),
				data = [];

			if(!$items.length) { return; }

			$items.each(function() {

				var $this = $(this),
					obj = {};

				obj.Image = $this.data('src') || $this.attr('src');
				obj.Description = $this.data('desc') || $this.attr('caption');

				data.push(obj);
			});

			//utils.log(data);
			//utils.log('## articlePhotoBundle');

			setPictorialHtml({
				parent: $p,
				src: data[0].Image,
				title: data[0].Description,
				count: $items.length,
				type: 'image',
				items: data
			});
		});
	};

	/**
	 * 갤러리 Tag
	 * @param options
	 */
	$.fn.articleGalleryTag = function(options) {
		var defaults = {},
			config = $.extend(true, defaults, options),
			$articleBody = this,
			oldTextFilter = '<!--@gallery_in_article_tag@-->',
			$imgItems = $("> div > .html_photo_center > img", $articleBody),
            $oldImgItems = $("img[src^='/component/htmlphoto_mmdata/']", $articleBody),
			imageList = [];

		// 기사내 화보 관련 함수들 시작
		var gallery_in_article_logging_type = 0;
		var images_index_in_gallery = 0;
		var images_count_in_article = 0;
		var images_in_article = new Array();

		function migration_to_gallery() {
			try {
				var _check_str = $("#article_content").html();
				if(_check_str.indexOf("<!--@gallery_in_article_tag@-->") != -1 && $("#article_content > div div img").length >= 2) {

					// 작업으로 인한 br 제거
					var nMaxRemoveCount = $("#article_content > div > .html_photo_center > img").length;
					var PVCount = $("img[orgImg]", $("#article_content")).length;

					if(PVCount > 0) {
						fnGetPhotoViewer("g", 0);
					}

					var bDeletable = false;
					for(var x = 0; x < 3; x++) {
						var sPrevTag = "";
						var nContinuousTag = 0;
						$("#article_content").children().each(function(idx, item) {
							if(this.tagName.toLowerCase() == "div" && sPrevTag != "div") {
								bDeletable = true;
							}
							if(this.tagName.toLowerCase() == "div" && sPrevTag == "div") {
								nContinuousTag++;
							}
							if(this.tagName.toLowerCase() == "div" && this.className == "article_msn_ad") {
								return false;
							} // 본문내 광고 영역을 만나면 탈출
							if(nContinuousTag >= (nMaxRemoveCount - 1)) {
								return false;
							} // 화보용 이미지 개수보다 많은 div가 연속되서 나와도 탈출 (-1은 최초 div가 연속이 아니라서)

							if(bDeletable == true && this.tagName.toLowerCase() == "br") {
								$(item).remove();
								bDeletable = false;
							}
							sPrevTag = this.tagName.toLowerCase();
						});
						bDeletable = false;
					}

					$("#article_content > div").each(function(idx, item) {
						var x = $(item).children(".html_photo_center").children("img").attr("src");
						if(typeof (x) != "undefined") {
							images_in_article[images_count_in_article++] = x;
							$(item).remove();
						}
					});

					/*$("#article_content").children().each(function(idx, item) { // 작업으로 인한 br 제거
						if( this.tagName.toLowerCase() == "br") { $(item).remove(); }
						else { return false; }
					});*/

					var rq_url = document.location.href.toString().toLowerCase();
					if(rq_url.indexOf("/article/aid/") >= 0) {
						gallery_in_article_logging_type = 1;
					}

					// 이제 이미지 노출 시작
					var codes_for_gallery_in_article = "<div class=\"article_photo\">";
					codes_for_gallery_in_article += "	<div class=\"bd cfx\">";
					codes_for_gallery_in_article += "		<span class=\"prv\" title=\"prev\" onclick=\"javascript:refresh_image_in_gallery('left',''," + PVCount + ");\"><span>prev</span></span>";
					codes_for_gallery_in_article += "		<!--  article photo -->";
					codes_for_gallery_in_article += "		<span class=\"article_photo_area\">";
					codes_for_gallery_in_article += "			<iframe title=\"빈프레임\" id=\"gallery_in_article_f\" src=\"about:blank\" style=\"width:600px;height:200px;border:0px;\" scrolling=\"no\" frameborder=\"0\"></iframe>";
					codes_for_gallery_in_article += "		</span>";
					codes_for_gallery_in_article += "		<!--  //article photo -->";
					codes_for_gallery_in_article += "		<span class=\"nxt\" title=\"next\" onclick=\"javascript:refresh_image_in_gallery('right',''," + PVCount + ");\"><span>next</span></span>";
					codes_for_gallery_in_article += "	</div><!-- /bd -->";
					codes_for_gallery_in_article += "	<div class=\"ft\">";
					codes_for_gallery_in_article += "		<ul>";
					for(var x = 0; x < images_in_article.length && x < 6; x++) {
						codes_for_gallery_in_article += "		<li id=\"thumbnail_in_gallery_" + x + "\"><span class=\"photo\"><a href=\"javascript:refresh_image_in_gallery('set','" + x + "'," + PVCount + ");\" class=\"photo\"><img alt=\"\" src=\"" + images_in_article[x] + ".tn_120.jpg\" onerror=\"this.src='http://images.joins.com/ui_portal/portal2010/common/v_noimg_110_120.gif'\" /></a></span><em></em></li>";
					}
					codes_for_gallery_in_article += "		</ul>";
					codes_for_gallery_in_article += "	</div><!-- /ft -->";
					codes_for_gallery_in_article += "</div>";
					//$("#articlebody").prepend(codes_for_gallery_in_article);
					$("#article_content").prepend(codes_for_gallery_in_article);
					gallery_in_article_show(0, PVCount); // 최초 호출시에는 카운트 로그 안되도록 조정, 썸네일을 찍거나 좌우 버튼을 이용할때 로깅
				}
			} catch(ex) {
			}
		}

		//관련포토/관련화보
		function getRelateGallery(type, cid, areaName) {
			var sCompPath,
				sCompHtml,
				sGalleryLinkUrl;
			if(type.toString().length <= 0 || cid.toString() == "0" || cid.toString().length <= 0) {
				if(areaName && areaName.length > 0) {
					$("#" + areaName).css({"display": "none"});
				}
				return;
			}
			type = type.toUpperCase();
			if(type == "P") {
				//콤포넌트에서 관리하는 내용들은 콤포넌트에서 관리하므로 콤포넌트 아이디로 js를 생성하지만
				//이건 포토기사 아이디가 넘어오므로 기사아이디로 파일을 생성한다.
				//다만 겹칠수 있기때문에.. 앞에 "P_" or "G"를 붙여준다.
				//중간 경로는 sourcecode로 생성하지 않고 comptype("P" or "G")로 생성한다.
				sCompPath = sStaticCompDomain + "component/" + type + "/" + cid.substring(cid.length - 3) + "/P_" + cid + ".js";
				$.getScript(sCompPath, function() {
						try {
							if(typeof (P_JSON) != "undefined") {
								sCompHtml = "";
								/*
							P_JSON.data[nIdx].num
							P_JSON.data[nIdx].total_id
							P_JSON.data[nIdx].title
							P_JSON.data[nIdx].path
							P_JSON.data[nIdx].title
							*/
								for(var nIdx = 0; nIdx < P_JSON.data.length; nIdx++) {
									if(P_JSON.data[nIdx].path.indexOf(".jpg") > 0 || P_JSON.data[nIdx].path.indexOf(".JPG") > 0) {
										sCompHtml += "<span>";
										sCompHtml += "	<a href=\"" + sPhotoPageUrl + "total_id=" + P_JSON.data[nIdx].total_id + "\"><img src=\"" + sPdsServerDomain + P_JSON.data[nIdx].path + ".tn_350.jpg\" style=\"height:190px;\" /></a>";
										sCompHtml += "	<em><a href=\"" + sPhotoPageUrl + "total_id=" + P_JSON.data[nIdx].total_id + "\"><img src=\"http://images.joins.com/ui_portal/portal2010/common/i_more_p.png\" alt=\"사진더보기\" class=\"png24\" /></a></em>";
										sCompHtml += "</span>";
										sCompHtml += "<a href=\"" + sPhotoPageUrl + "total_id=" + P_JSON.data[nIdx].total_id + "\">" + P_JSON.data[nIdx].title + "</a>";
									}
								}
								if(areaName && areaName.length > 0) {
									$("#" + areaName).html(sCompHtml).css({"display": ""});
									displayArticleArea("PHOTO");
								} else {
									return sCompHtml;
								}
							} else {
								fnCallMakeJson(cid, type, "getRelateGallery('" + type + "', '" + cid + "', '" + areaName + "')");
							}
						} catch(e) {
							if(areaName && areaName.length > 0) {
								$("#" + areaName).css({"display": "none"});
							}
							alertErrorMsg(e);
						}
					}
				);
			} else if(type == "G") {
				//콤포넌트에서 관리하는 내용들은 콤포넌트에서 관리하므로 콤포넌트 아이디로 js를 생성하지만
				//이건 포토기사 아이디가 넘어오므로 기사아이디로 파일을 생성한다.
				//다만 겹칠수 있기때문에.. 앞에 "P_" or "G"를 붙여준다.
				//중간 경로는 sourcecode로 생성하지 않고 comptype("P" or "G")로 생성한다.
				sCompPath = sStaticCompDomain + "component/" + type + "/" + cid.substring(cid.length - 3) + "/G_" + cid + ".js";
				$.getScript(sCompPath, function() {
						try {
							if(typeof (G_JSON) != "undefined") {
								sCompHtml = "";
								/*
							G_JSON.data[nIdx].m_id
							G_JSON.data[nIdx].title
							G_JSON.data[nIdx].path
							G_JSON.data[nIdx].desc
							*/
								for(var nIdx = 0; nIdx < G_JSON.data.length; nIdx++) {
									sGalleryLinkUrl = "window.open('" + sGallaryPageUrl + "m_id=" + G_JSON.data[nIdx].m_id + "&g_type=first', 'photo_gallery','toolbar=no,location=no,directory=no,status=no,menubar=no,scrollbars=no,resizable=no,top=0,left=0,width=960,height=715');";
									sCompHtml += "<span>";
									sCompHtml += "	<a onclick=\"" + sGalleryLinkUrl + "\" style=\"cursor:pointer;\"><img src=\"" + sPdsServerDomain + G_JSON.data[nIdx].path + "\" style=\"height:190px;\" /></a>";
									sCompHtml += "	<em><a onclick=\"" + sGalleryLinkUrl + "\" style=\"cursor:pointer;\"><img src=\"http://images.joins.com/ui_portal/portal2010/common/i_more_p.png\" alt=\"사진더보기\" class=\"png24\" /></a></em>";
									sCompHtml += "</span>";
									sCompHtml += "<a onclick=\"" + sGalleryLinkUrl + "\" style=\"cursor:pointer;\">" + G_JSON.data[nIdx].title + "</a>";
								}
								if(areaName && areaName.length > 0) {
									$("#" + areaName).html(sCompHtml).css({"display": ""});
									displayArticleArea("GALLERY");
								} else {
									return sCompHtml;
								}
							} else {
								fnCallMakeJson(cid, type, "getRelateGallery('" + type + "', '" + cid + "', '" + areaName + "')");
							}
						} catch(e) {
							if(areaName && areaName.length > 0) {
								$("#" + areaName).css({"display": "none"});
							}
							alertErrorMsg(e);
						}
					}
				);
			} else {
				if(areaName && areaName.length > 0) {
					$("#" + areaName).css({"display": "none"});
				}
			}
		}

		function setGalleryForOld() {
			var src = $imgItems.first().data('src') || $imgItems.first().attr('src'),
				data = [];

			$imgItems.each(function() {
				var $this = $(this),
					obj = {};

				obj.Image = $this.data('src') || $this.attr('src');
				obj.Name = $this.data('name') || $this.attr('name');
				obj.Description = $this.data('desc') || $this.attr('alt');

				data.push(obj);
			});

			setPictorialHtml({
				parent: $imgItems.first().parent().parent(),
				src: src,
				title: data[0].Description,
				count: $imgItems.length,
				type: 'image',
				items: data
			});

			removeItem();

			function removeItem() {
				$imgItems.each(function(idx, item) {
					var $imageWrap = $(item).parent().parent();
					removeBr($imageWrap);
					$imageWrap.remove();
				});

				function removeBr($d) {
					var $next = $d.next();

					if($next.length > 0 && $next[0].tagName.toLowerCase() == 'br') {
						$next.remove();
						removeBr($d);
					}
				}
			}
		}

	    //2010년도 이전 이미지 수정 (경로가 "/component/htmlphoto_mmdata"로 시작하는 이미지에 도메인 붙여넣기)
		$oldImgItems.each(function () {
		    var pdsPath = utils.config('pdsPath');
		    $(this).attr("src", pdsPath + "/news" + $(this).attr("src"));
		});

		return this.each(function() {
			var bodyHtml = $articleBody.html();
			// old version check
			if(bodyHtml.indexOf(oldTextFilter) != -1 && $imgItems.length > 1) {
				//utils.log('## articleGallery init');
				setGalleryForOld();
			}
			// TODO : new version check.
		});
	};
	/**
	 *
	 * @param options
	 * <div id='div_NV10108435' class='jtbc_vod'></div>
	 */
	//http://news.jtbc.joins.com/vod/getvod.aspx?vod_id=NV10010001
	//http://home.jtbc.joins.com/vod/getvod.aspx?vod_id=VO10010109
	$.fn.articleVod = function(options) {
		//utils.log('## articleVod');
		var defaults = {
				body: '#article_body',
				vodIds: []
			},
			refType = {joongang: '1', ilgan: '2'},
			cRefType = refType.joongang, // 중앙
			articleType = utils.config('articleType'),
			config = $.extend(true, defaults, options);

		var VodPlayList = {};

		// 일간 (http://isplus.joins.com, http://isplus.live.joins.com)
		if(location.host.indexOf('isplus') > -1) {
			cRefType = refType.ilgan;
		}

		function mobile_device_detect() {
			var UserAgent = navigator.userAgent,
				rtn = "W";

			if(UserAgent.match(/iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null) {
				rtn = "M";
			} else if(UserAgent.match(/iPad|iphone/i) != null) {
				rtn = "P";
			}

			return rtn;
		}

		function fnVodPlayNews(vod_id, ref, options, $ele) {
			//utils.log('##fnVodPlayNews');
			// 기본 옵션
			var default_options = {width: 579, height: 353, image: "", userid: "", ad_presn: "", ad_postsn: "", ad_vt: "N"};
			// param으로 들어온 옵션을 기본 옵션과 병합
			var opts = $.extend({}, default_options, options);

			var _vod_memid = "";
			try {
				_vod_memid = getCookieA("MemArray", "MemID");
			} catch(e) {
			}

			var device_info = mobile_device_detect();
			var url = 'http://news.jtbc.joins.com/vod/getvod.aspx?vod_id=' + vod_id + "&m=" + device_info;

			utils.getJsonp({
				url: url,
				success: function (res) {
					//utils.log('## fnVodPlayNews : success');
					//utils.log('url : ' + url);
					//utils.log(res);

					if (res != null && res != {}) {
						var vodInfo = res;
						var params = {};
						params.width = opts.width;
						params.height = opts.height;
						params.flashplayer = "http://fs.jtbc.joins.com/common/ctl/player/player.swf";
						params.skin = "http://fs.jtbc.joins.com/common/ctl/player/glow.zip";

						/* option으로 이미지정보가 들어오는 경우 동영상 썸네일 이미지를 그것으로 대체, 기본은 동영상에 연결된 섬네일로 보임 */
						if (opts.image != "") {
							params.image = opts.image;
						} else {
							params.image = vodInfo.img_url;
						}
						if (!vodInfo.file_url) {
							return; /* 동영상 파일정보 없음 */
						}

						if (typeof (vodInfo.file_url) != "undefined" && vodInfo.file_url.indexOf("rtmp://") > -1) {
							var arr_file_url = vodInfo.file_url.split("&file=");
							params.provider = "rtmp";
							params.streamer = escape(arr_file_url[0]);
							params.file = escape(arr_file_url[1]);
						} else {
							params.file = vodInfo.file_url;
							params.provider = vodInfo.file_url.substring(0, 4);
						}

						var _vod_packcode = "",
							_vod_pay = "N",
							_vod_paydiv = "00",
							_vod_payamount = "0";

						//utils.log(params);
						//utils.log('## vod_id : ' + vod_id);

						if ($ele.length > 0) {
							if (device_info == "W") {
								var so = new SWFObject(params.flashplayer, 'player_' + vod_id, params.width, params.height, '9', '#000000');
								so.addParam('allowfullscreen', 'true');
								so.addParam('allowscriptaccess', 'always');
								so.addParam('wmode', 'opaque');
								so.addVariable('stretching', 'fill');
								//  so.addVariable('icons','false');
								so.addVariable('type', params.provider); // Protocol(고정)
								so.addVariable('streamer', params.streamer); // VOD URL Path
								so.addVariable('file', params.file); // VOD URL 중 파일명
								so.addVariable('image', params.image); // Thumbnail Image URL - VOD에 따라 변경
								so.addVariable('skin', params.skin);

								/*if (opts.ad_presn != "" || opts.ad_postsn != "") {
									// 광고 연결
									var ad_url = 'http://dgate.jtbc.joins.com/xc.aspx?presn=' + opts.ad_presn + '&postsn=' + opts.ad_postsn + '&vt=' + opts.ad_vt;
									so.addVariable('plugins', 'adtvideo');						// AD Plugin(고정)
									so.addVariable('adtvideo.config', ad_url); 					// AD 정보 XML 파일 URL
									if (typeof (console) == "object") { console.log("load ad : " + ad_url); }
								}*/
								so.addVariable('controlbar', 'bottom');
								var $newDiv = $('<div id="div_' + vod_id + '" class="player"></div>');

								//utils.log('---------------');
								//utils.log('vod_id : ' + vod_id);

								$ele.replaceWith($newDiv);
								//utils.log(document.getElementById('div_' + vod_id));
								so.write('div_' + vod_id);

								if ($("#player_" + vod_id).length > 0) {
									VodPlayList[vod_id] = "false";
									// Play Log
									if (jwplayer && jwplayer('player_' + vod_id)) {
										jwplayer('player_' + vod_id).onPlay(function () {
											if (VodPlayList[vod_id] == "false") {
												VodPlayList[vod_id] = "true"; // 최초 1회만 로그카운트 기록 수행
												//if (typeof (fnLogCounter) == "function") {
												//fnLogCounter(vod_id, vodInfo.vod_section, opts.userid);
												var vod_logger = "http://counter.jtbc.joins.com/bin/ArticleCounterLogger.dll?Total_ID=" + vod_id + "&Ctg_ID=00&Master_Code=&comm1=" + _vod_pay + "&comm2=" + _vod_paydiv + "&comm3=" + _vod_payamount + "&memid=" + opts.userid + "&gubun=" + device_info + "&cloc=&ref=" + ((typeof (ref) != "undefined") ? ref : "") + "&svc=T";
												$("body").append("<iframe src='" + vod_logger + "' width='0' height='0' style='display:none'></iframe>");
												//}
											}
										});
									}
								}
							} // end of Web
							else if (device_info == "M" || device_info == "P") {
								$("#div_" + vod_id).after("<a href='" + vodInfo.mobile_file_url + "'><img src='" + params.image + "' width='" + params.width + "' height='" + params.height + "'/>" +
									"<em class='i_vod'><img alt='VOD' src='http://images.joins.com/ui_joins/joins/common/i_vod.png'></em></a>");

								//$("#div_" + vod_id).html("<video id='player_" + vod_id + "' width='" + params.width + "' height='" + params.height + "' poster='" + params.image + "'  controls><source src='" + vodInfo.mobile_file_url + "'   /></video>");

								// Video Tag용 Play Log
								VodPlayList[vod_id] = "false";
								$("#player_" + vod_id).bind("play", function () {
									if (VodPlayList[vod_id] == "false") {
										VodPlayList[vod_id] = "true";
										var vod_logger = "http://counter.jtbc.joins.com/bin/ArticleCounterLogger.dll?Total_ID=" + vod_id + "&Ctg_ID=00&Master_Code=&comm1=" + _vod_pay + "&comm2=" + _vod_paydiv + "&comm3=" + _vod_payamount + "&memid=" + opts.userid + "&gubun=" + device_info + "&cloc=&ref=" + ((typeof (ref) != "undefined") ? ref : "") + "&svc=T";
										$("head").append("<iframe src='" + vod_logger + "' width='0' height='0' style='display:none'></iframe>");
									}
								});
							}
						} // end of check "div_"+ vod_id area

						utils.resetArticleSubWidget && utils.resetArticleSubWidget();
					}
				}
			});
		}

		function fnVodPlayWizard(vod_id, ref, options, $ele) {
			// 기본 옵션
			var default_options = {width: 480, height: 299, adsn: "14"};
			// param으로 들어온 옵션을 기본 옵션과 병합
			var opts = jQuery.extend({}, default_options, options);

			var _vod_memid = "",
				_vod_packcode = "",
				_vod_pay = "N",
				_vod_paydiv = "00",
				_vod_payamount = "0";
			try {
				_vod_memid = getCookieA("MemArray", "MemID");
			} catch(e) {
			}

			var device_info = "W";
			if(typeof (mobile_device_detect) == "function") {
				device_info = mobile_device_detect();
			}

			var url = 'http://news.jtbc.joins.com/vod/getvod3.aspx?vod_id=' + vod_id + "&m=" + device_info;
			utils.getJsonp({
				url: url,
				success: function (res) {

					//utils.log('## fnVodPlayWizard')
					//utils.log('url : ' + url);
					//utils.log(res);

					if (res != null && res != { }) {
						var vodInfo = res;
						var params = {};
						params.width = opts.width;
						params.height = opts.height;
						params.image = vodInfo.img_url;

						if(typeof (vodInfo.file_url) != "undefined" && vodInfo.file_url.indexOf("rtmp://") > -1) {
							var arr_file_url = vodInfo.file_url.split("&file=");
							params.provider = "rtmp";
							params.streamer = escape(arr_file_url[0]);
							params.file = escape(arr_file_url[1]);
						} else {
							params.file = vodInfo.file_url;
							params.provider = "http";
						}

						if($("#div_" + vod_id).length > 0) {
							if(device_info == "W") {
								if(params.file == "") {
									$("#div_" + vod_id).html("<img src='" + params.image + "' alt='' width='630' height='354' onError=\"this.src='http://images.joins.com/ui_jtbc/common/v_noimg_630_354.png'\"/>");
								} else {
									params.flashplayer = "http://fs.jtbc.joins.com/common/ctl/player/player.swf";
									params.skin = "http://fs.jtbc.joins.com/common/ctl/player/glow.zip";

									var so = new SWFObject(params.flashplayer, 'ply' + vod_id, params.width, params.height, '9', '#000000');
									so.addParam('allowfullscreen', 'true');
									so.addParam('allowscriptaccess', 'always');
									so.addParam('wmode', 'opaque');
									so.addVariable('stretching', 'fill');
									//  so.addVariable('icons','false');
									so.addVariable('provider', params.provider); // Protocol(고정)
									so.addVariable('streamer', params.streamer); // VOD URL Path
									so.addVariable('file', params.file); // VOD URL 중 파일명
									so.addVariable('image', params.image); // Thumbnail Image URL - VOD에 따라 변경
									so.addVariable('skin', params.skin);
									/*if (opts.ad_presn != "" || opts.ad_postsn != "") {
										// 광고 연결
										var ad_url = 'http://dgate.jtbc.joins.com/xc.aspx?presn=' + opts.ad_presn + '&postsn=' + opts.ad_postsn + '&vt=' + opts.ad_vt;
										so.addVariable('plugins', 'adtvideo');						// AD Plugin(고정)
										so.addVariable('adtvideo.config', ad_url);					// AD 정보 XML 파일 URL
										if (typeof (console) == "object") { console.log("load ad : " + ad_url); }
									}*/
									so.addVariable('controlbar', 'bottom');

									var $newDiv = $('<div id="div_' + vod_id + '" class="player"></div>');
									$("#div_" + vod_id).replaceWith($newDiv);
									so.write("div_" + vod_id);

									if ($("#ply" + vod_id).length > 0) {
										VodPlayList[vod_id] = "false";
										// Play Log
										if (jwplayer && jwplayer('ply' + vod_id)) {
											jwplayer('ply' + vod_id).onPlay(function () {
												if (VodPlayList[vod_id] == "false") {
													VodPlayList[vod_id] = "true"; // 최초 1회만 로그카운트 기록 수행

													var vod_logger = "http://counter.jtbc.joins.com/bin/ArticleCounterLogger.dll?Total_ID=" + vod_id + "&Ctg_ID=00&Master_Code=" + _vod_packcode + "&comm1=" + _vod_pay + "&comm2=" + _vod_paydiv + "&comm3=" + _vod_payamount + "&memid=" + _vod_memid + "&gubun=" + device_info + "&cloc=&ref=" + ((typeof (ref) != "undefined") ? ref : "") + "&svc=B";
													$("body").append("<iframe src='" + vod_logger + "' width='0' height='0' style='display:none'></iframe>");
												}
											});
										}
									}
								}
							} // end of web player
							else if(device_info == "M" || device_info == "P") { // Molbile Player 처리
								if(vodInfo.mobile_file_url == "") {
									$("#div_" + vod_id).after("<img src='" + params.image + "' alt='' Width='630' Height='354' onError=\"this.src='http://images.joins.com/ui_jtbc/common/v_noimg_630_354.png'\"/>");
								} else {
									$("#div_" + vod_id).after("<a href='" + vodInfo.mobile_file_url + "'><img src='" + params.image + "' width='" + params.width + "' height='" + params.height + "'/>" +
										"<em class='i_vod'><img alt='VOD' src='http://images.joins.com/ui_joins/joins/common/i_vod.png'></em></a>");

									//$("#mediaspace").html("<video id='ply' width='" + params.width + "' height='" + (params.height - 29) + "' poster='" + params.image + "' controls><source src='" + vodInfo.mobile_file_url + "' /></video>");

									// Video Tag용 Play Log
									VodPlayList[vod_id] = "false";
									$("#ply").bind("play", function() {
										if(VodPlayList[vod_id] == "false") {
											VodPlayList[vod_id] = "true";
											var vod_logger = "http://counter.jtbc.joins.com/bin/ArticleCounterLogger.dll?Total_ID=" + vod_id + "&Ctg_ID=00&Master_Code=" + _vod_packcode + "&comm1=" + _vod_pay + "&comm2=" + _vod_paydiv + "&comm3=" + _vod_payamount + "&memid=" + _vod_memid + "&gubun=" + device_info + "&cloc=&ref=" + ((typeof (ref) != "undefined") ? ref : "") + "&svc=B";
											$("body").append("<iframe src='" + vod_logger + "' width='0' height='0' style='display:none'></iframe>");
										}
									});
								}
							}
						}
						utils.resetArticleSubWidget && utils.resetArticleSubWidget();
					}
				}
			});
		}

		var SERVICE_TYPE = {
			jtbc: 'jtbc',
			news: 'news',
			youtube: 'youtube',
			wsj: 'wsj', // wallstreet journal.
			ovp: 'ovp',
			ovplive: 'ovplive'
		};

		function setVodPlayerForYouTube($target, config, options) {
			var id = getYouTubId(config.id),
				url = 'https://www.youtube.com/embed/' + id + '?wmode=transparent',
				width = options.width,
				wrap_style = {};

			$target.replaceWith('<div class="player"><iframe width="' + width + '" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe></div>');

			utils.resetArticleSubWidget && utils.resetArticleSubWidget();

			function getYouTubId(url) {
				var arrUrl = url.split('/');
				return arrUrl[arrUrl.length - 1];
			}
		}

		function setVodPlayerForWSJ($target, config, options) {
			var
				url = config.id,
				$iframe = $('<iframe></iframe>'),
				iframeAttr = {allowfullscreen: true, webkitallowfullscreen: true, mozallowfullscreen: true, frameborder: 0, scrolling: 'no', width: options.width, height: options.height};

			iframeAttr.src = url;

			$target.replaceWith($iframe.attr(iframeAttr));

			utils.resetArticleSubWidget && utils.resetArticleSubWidget();
		}

		function setVodPlayerForOvp($target, config, options) {
		    var params = config.id.slice(config.id.indexOf('?') + 1).split('&');
		    var type;
		    var ovpRecommendType = 0;

		    for (var j = 0; j < params.length; j++) {
		        if (params[j].indexOf("ro=") >= 0) {
		            type = params[j].slice(params[j].indexOf('=') + 1);
		            break;
		        }
		    }

		    for (var i = 0; i < params.length; i++) {
		        if (params[i].indexOf("rc=") >= 0) {
		            ovpRecommendType = params[i].slice(params[i].indexOf('=') + 1);
		            break;
		        }
		    }
		    
		    var szHtml = [];
		    var url = config.id;

		    url = url.substring(0, url.indexOf('?wmode'));
        
		    jQuery.ajax({
		        type: 'GET',
		        url: utils.config('apiPath') + '/Video/getOvpUrlInfo?mediaKey=' + url.substring(url.lastIndexOf('/') + 1, url.length) + "&ro=" + type,
		        dataType: 'json',
		        ro: type,
		        target: $target,
		        success: function (res) {
		            var width=580; height=326;
		            $(this.target).removeAttr('data-service');
		            $(this.target).removeAttr('data-src');
		            $(this.target).removeAttr('class');
		            if (this.ro == 2) {
		                szHtml.push('<div class="ovp_player ovp_player1-1">');
		                width = 435; height = 435;
		            }
		            else if (this.ro == 3) {
		                szHtml.push('<div class="ovp_player ovp_player9-16">');
		                width = 326; height = 580;
		            }
		            else {
		                szHtml.push('<div class="ovp_player ovp_player16-9">');
		                //$(this.target).addClass("ovp_player ovp_player16-9");
		            }
		            szHtml.push('<div class="player_area">');
		            szHtml.push('<button type="button" class="btn_ovpplay" title="동영상 재생"><span>동영상 재생</span></button>');
		            szHtml.push('<img src="' + res.img + '" width="'+width+'" height="'+height+'"/>');
		            szHtml.push('<iframe id="kollus_ovp" show_controls_paused="true" show_poster_ended="true" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0" scrolling="no" style="display:none" width="' + width + '" height="' + height + '"></iframe>');
		            szHtml.push('</div>');
		            szHtml.push('</div>');
		            $(this.target).html(szHtml.join(''));
		            
		            if ($(this.target).attr('data-id').indexOf('&autoplay') >= 0) {
		                var option = "&autoplay&wmode=transparent&show_controls_paused=true&show_poster_ended=true";
		                if ($(this.target).attr('data-id').indexOf('&mute') >= 0) {
		                    option = option + '&mute';
		                }
		                $(this.target).attr('data-id', res.url.replace("sr?key", "s?key"));
		                $(this.target).find('iframe').attr('src', $(this.target).attr('data-id') + option);

		                $(this.target).removeAttr('data-id');
		                $(this.target).find('img').remove();
		                $(this.target).find('button').remove();
		                $(this.target).find('iframe').show();
		            }
		            else {
		                var option = '&autoplay&wmode=transparent&show_controls_paused=true&show_poster_ended=true';
		                if ($(this.target).attr('data-id').indexOf('&mute') >= 0) {
		                    option = option + '&mute';
		                }
		                $(this.target).attr('data-id', res.url.replace("sr?key", "s?key") + option);
		                
		                
		                $(this.target).find(".player_area").on('click', function (e) {
		                    e.preventDefault();
		                    e.stopPropagation();
		                    $(this).find('iframe').attr('src', $(this).parent().parent().attr('data-id'));
		                    $(this).parent().parent().removeAttr('data-id');
		                    var target = $(this);
		                    setTimeout(function () {
		                        target.find('img').remove();
		                        target.find('button').remove();
		                        target.find('iframe').show();
		                    }, 300);
		                    $(this).off('click');
		                });
		            }
                    
		            
		            if (this.ro != 3 && ovpRecommendType > 0) setOvpRecommend(this.target, this.ro, ovpRecommendType); //추천동영상
		            
		        },
		        error: function (request, status, error) {
		            utils.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
		        }

		    });
		    
		    utils.resetArticleSubWidget && utils.resetArticleSubWidget();
		}

		function setOvpRecommend($player, ro, type) {
		    var PDS_DOMAIN = "http://pds.joins.com"; //utils.config('pdsPath')
		    var szHtml = [];
		    var opt = (type == 3) ? 2 : 1;
		    var cruzUrl = [];
		    var cnt = 9;
		    if (ro == "2") cnt = 6;
		    
		    cruzUrl.push('http://cruz.joins.com/vod?');
		    cruzUrl.push("th=Y");
		    //cruzUrl.push('pcid=' + utils.getCookie("PCID"));
		    cruzUrl.push("&tid=" + utils.getTotalId());
		    cruzUrl.push("&cnt=" + cnt);
		    cruzUrl.push("&rnd=Y");
		    cruzUrl.push("&opt=" + opt);
		    if (type == 1) {
		        cruzUrl.push('&scd=' + $("#servcode").val());
		        cruzUrl.push('&from=7d');
		    } else if (type == 2) {
		        cruzUrl.push('&from=3d');
		    } else if (type == 3) {
		        cruzUrl.push('&from=3d');
		    }
		    
		    jQuery.ajax({
		        type: 'GET',
		        //url: utils.config('staticPath') + '/scripts/data/ovp_recommend.json',
		        url: cruzUrl.join(''),
		        dataType: 'json',
		        success: function (res) {
		            
		            if (res.length > 0) {
		                szHtml.push('<div class="ovp_recommend"> ');
		                szHtml.push('   <div class="hd">');
		                //szHtml.push('       <strong class="tit">추천영상</strong>');
		                //szHtml.push('       <span class="txt"><a href="' + utils.getUrlFormat("article", res[0].total_id) + '?cloc=joongang|article|vodrecom1" target="_blank">' + res[0].art_title + '</a></span>');
		                szHtml.push('       <button type="button" class="btn_more" title="추천영상 더보기"><span>추천영상 더보기</span></button>');
		                szHtml.push('   </div>');
		                szHtml.push('   <div class="bd">');
		                szHtml.push('       <ul class="clearfx ovp_recommend_ul">');

		                $.each(res, function (i, r) {
		                    szHtml.push('   <li>');
		                    szHtml.push('   <span class="thumb"><a href="' + utils.getUrlFormat("article", r.total_id) + '?cloc=joongang|article|vodrecom2" target="_blank"><img src="' + utils.getIrPath(utils.getPdsFullPath(r.art_thumb).replace("dev.", ""), 146, 82, "", "ebebeb") + '" alt=""><span class="icon_video"></span></a></span>');
		                    szHtml.push('   <span class="text_area">');
		                    szHtml.push('   <strong class="headline"><a href="' + utils.getUrlFormat("article", r.total_id) + '?cloc=joongang|article|vodrecom2">' + r.art_title + '</a></strong>');
		                    szHtml.push('   </span>');
		                    szHtml.push('   </li>');
		                });
	                
		                szHtml.push('       </ul>');
		                szHtml.push('       <button type="button" class="btn-prev"><span>추천영상 이전</span></button>');
		                szHtml.push('       <button type="button" class="btn-next"><span>추천영상 다음</span></button>');
		                szHtml.push('   </div>');
		                szHtml.push('</div>');

		                $player.find(".player_area").after(szHtml.join(''));

		                $player.find(".ovp_recommend").find(".btn_more").on('click', function (e) {
		                    e.preventDefault();
		                    e.stopPropagation();
		                    $(this).parent().parent().toggleClass("open");
		                });

		                var recommnedCount = 0;

		                if (ro == 1) {
		                    recommnedCount = 3
		                } else if (ro == 2) {
		                    recommnedCount = 2
		                }


		                $player.find('.ovp_recommend_ul').slideMotion({
		                    infinite: true,
		                    slidesToShow: recommnedCount,
		                    slidesToScroll: 1,
		                    swipe: false,
		                    prevArrow: $player.find('.btn-prev'),
		                    nextArrow: $player.find('.btn-next')
		                });
		            }
		        }
		    });
		}

		function setVodPlayerForOvpLive($target, config, options) {
		    var url = config.id,
                $iframe = $('<div class="ovp_player ovp_player16-9"><div class="player_area"><iframe id="kollus_ovp"></iframe></div></div>'),
				iframeAttr = { allowfullscreen: true, webkitallowfullscreen: true, mozallowfullscreen: true, frameborder: 0, scrolling: 'no', width: options.width, height: options.height };

		    iframeAttr.src = url;
		    iframeAttr.width = 580;
		    iframeAttr.height = 326;
		    $iframe.find('#kollus_ovp').attr(iframeAttr);
		    $target.replaceWith($iframe);
		    utils.resetArticleSubWidget && utils.resetArticleSubWidget();
		}

		function getParamString(params) {
		    var strParams = '';//'?';
		    $.each(params, function (i, v) {
		        if (v != '') {
		            if (strParams.length > 0) {
		                strParams += "&"
		            }
		            strParams += i + '=' + v;
		        }
		    });
		    return '?' + strParams;
		}

		function getVodId($ele) {
			var id = '';
			// Legacy 대응.
			if($ele.hasClass('jtbc_vod')) {
				id = $ele[0].id.substr(4);
			} else {
				id = $ele.data('id');
			}
			return id;
		}

		function getService(id) {
			var s = ''; // default : youtube.
			if(id.substring(0, 2) == "NV") {
				s = SERVICE_TYPE.jtbc;
			} else if(id.substring(0, 2) == "VO") {
				s = SERVICE_TYPE.news;
			}
			return s;
		}

		return this.each(function(i, v) {
			var $ele = $(v),
				vodConfig = {id: '', service: SERVICE_TYPE.jtbc},
				ratio = 0.6,
				width = ARTICLE_SIZE.body,
				height = parseInt(width * ratio, 10),
				options = {'width': width, 'height': height, "ad_presn": 309, "ad_postsn": 324};

			// Legacy Code
			//$ele.css({ "width": $('#article_body').width(), "text-align": "center"});

			// TODO : * Vod List 정보에 대한 처리.
			// TODO : config 로 들어오는 vodIds 정보와 비교하여 Content 에서 삭제되어 있는 동영상에 대한 Dom 을 추가 해주는 작업이 Legacy 에 존재함.
			// TODO : 당일 정보로 들어오던 vodId 가 리스트 형식으로 바뀔 예정임으로 작업 대기.
			vodConfig.id = getVodId($ele);
			vodConfig.service = getService(vodConfig.id) || $ele.data('service');

			//utils.log('^^^^^^^^^^^^^^^^^^^^');
			//utils.log(vodConfig);

			if(!vodConfig.id) {
				return;
			}

			if(articleType == ARTICLE_TYPE.piki || articleType == ARTICLE_TYPE.live) {

			}

			if(utils.config('pageType') == PAGE_TYPE.article || utils.menu.getPageMenuKey().toLowerCase().indexOf('election2017') !== -1) {
				options.width = $ele.parent().width();
				options.height = parseInt(options.width * ratio, 10);
			} else {
				options.width = $ele.outerWidth();
				options.height = $ele.outerHeight(); //parseInt(options.width * ratio, 10);
			}

			if ((vodConfig.service == SERVICE_TYPE.jtbc || vodConfig.service == SERVICE_TYPE.news) && $ele.outerWidth() <= 0) {
				if (location.host.indexOf('jcms.') > -1) {
					options.width = 380;
					options.height = parseInt(options.width * ratio, 10);
				}
			}

			//utils.log($ele.parent());
			//utils.log('$$$ options');
			//utils.log(options);

			// 뉴스용 플레이어입니다. Jucode의 앞 두자리로 비교해서 분기문 처리 해서 방송, 제보쪽 작업 진행하셔야 할듯...
		    // GetVod는 news도메인에 있는 뉴스DB를 조회하게 되니 이쪽으로 id넘겨봐야 데이타 없어요.
			if(vodConfig.service == SERVICE_TYPE.jtbc) {
				$ele.attr('id', 'div_' + vodConfig.id);
				fnVodPlayNews(vodConfig.id, cRefType, options, $ele);
			} else if(vodConfig.service == SERVICE_TYPE.news) { // WIZARD에서 동영상 보기
				$ele.attr('id', 'div_' + vodConfig.id);
				fnVodPlayWizard(vodConfig.id, cRefType, options, $ele);
			} else if(vodConfig.service == SERVICE_TYPE.youtube) { // Youtube
				setVodPlayerForYouTube($ele, vodConfig, options);
			} else if(vodConfig.service == SERVICE_TYPE.wsj) {
				setVodPlayerForWSJ($ele, vodConfig, options);
			} else if (vodConfig.service == SERVICE_TYPE.ovp) {
			    setVodPlayerForOvp($ele, vodConfig, options);
			} else if (vodConfig.service == SERVICE_TYPE.ovplive) {
			    setVodPlayerForOvpLive($ele, vodConfig, options);
			}
			else {
				utils.error('ARTICLE COMPONENT ERROR : not defined vod service.', true);
			}
		});
	};

	/**
	 * SNS Card 컴포넌트
	 */
	$.fn.articleSns = function () {
		var services = {
			load: {
				twitter: function (v, id) {
					//if (window.twttr === undefined) {
						scriptLoader('twitter-wjs', 'https://platform.twitter.com/widgets.js');
					//}
				},
				facebook: function () {
					if (window.FB) {
						window.FB.init({appId: '1011513095546498', version: 'v2.4' });
						window.FB.XFBML.parse();
					} else {
						scriptLoader('facebook-jssdk', '//connect.facebook.net/ko_KR/all.js#xfbml=1&version=v2.2');
					}
				},
				google: function(v, id) {
					scriptLoader('google-sdk', 'https://apis.google.com/js/platform.js');
				},
				pinterest: function(v, id) {
					scriptLoader('pinterest-sdk', '//assets.pinterest.com/js/pinit_main.js');
				},
				instagram: function (v, id) {
					if (window.instgrm) {
						instgrm.Embeds.process()
					} else {
						scriptLoader('instagram', '//platform.instagram.com/en_US/embeds.js');
					}
				}
			},
			html: {
				twitter: '<div class="ab_sns" data-twttr-id="twttr-sandbox-0"><span class="icon_twitter">twitter</span><blockquote class="component_sns twitter-tweet" lang="ko"><a href="{data.url}"></a></blockquote></div>',
				facebook: '<div class="ab_sns"><span class="icon_facebook">facebook</span><div class="component_sns fb-post" data-href="{data.url}" data-width="{WIDTH}"></div></div>',
				google: '<div class="ab_sns"><span class="icon_googleplus">googleplus</span><div class="component_sns g-post" data-href="{data.url}"></div></div>',
				pinterest: '<div class="ab_sns"><span class="icon_pinterest">pinterest</span><a class="component_sns" data-pin-do="embedPin" href="{data.url}"></a></div>',
				instagram: '<div class="ab_sns"><span class="icon_instagram">instagram</span><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" style="width:{WIDTH}px"><a href="{data.url}"></a></blockquote></div>'
			}
		};

		var articleType = utils.config('articleType');

		function scriptLoader(id, src, options) {
			//utils.log('## scriptLoader id : ' + id);
			var d = document,
				s = 'script',
				js,
				fjs = d.getElementsByTagName('head')[0],
				ele = d.getElementById(id);

			if (ele) {
			    if (ele.remove) {
			        ele.remove();
			    }
			    else {
			        $(ele).remove();
			    }
			}
			js = d.createElement(s);
			js.id = id;
			js.type = 'text/javascript';
			js.src = src;
			js.async = true;
			js.defer = true;

			$(fjs).append(js);
		}

		return this.each(function(i, v) {
			var $dom = $(v),
				service = $dom.data('service'),
				id = $dom.data('id'),
				url = $dom.data('url'),
				width = '',
				load = services.load[service],
				html = services.html[service] || '';

			var browserVersion = (service == 'google' || service == 'facebook' ? 8: 9);

			if(utils.browser && utils.browser.msie == true && parseInt(utils.browser.version, 10) < browserVersion) {
				$dom.browserNotice();
			} else {
				if(html && html.length > 0) {
					if(articleType == ARTICLE_TYPE.piki)  width = "350";
					else if (articleType == ARTICLE_TYPE.live) width = "380";
					else if (utils.menu.getPageMenuKey().toLowerCase().indexOf('election2017') !== -1) width = "580";
					else width = "500";

					html = $(html.replace('{data.url}', url).replace('{WIDTH}', width));
					$dom.replaceWith(html); // position 조절이 필요한 구조이므로 replaceWith 하면 안됨.

					utils.resetArticleSubWidget && utils.resetArticleSubWidget();

					if(articleType == ARTICLE_TYPE.piki || articleType == ARTICLE_TYPE.live) {
						html.find('span[class^=icon]').remove();
					} else {
						if(service != 'google') {
							setPosition(html);
						}
					}
				}

				if($.isFunction(load)) {
					load(v, id);
				}
			}
		});
	};

	/*
	* 사운드 클라우드 widget
	* @params
	*/
	$.fn.audioPlayer = function(options) {
		var defaults = {
				src: '',
				auto_play: false,
				buying: false,
				liking: false,
				download: false,
				sharing: false,
				show_artwork: false,
				show_playcount: false,
				show_user: false,
				start_track: 0
			},
			config = $.extend(defaults, options || {});

		return this.each(function(i, v) {
			var data = $(v).data(),
				param = '',
				$contents = '';

			config = $.extend(config, data || {});
			config.src = data.src || data.id;
			param = $.param(config).replace(/^src\=/, '');

			$contents = $('<iframe src="https://w.soundcloud.com/player/?url=' + param + '" style="width:100%;border:0"></iframe>');

			if(utils.browser.msie && parseInt(utils.browser.version, 10) < 9) {
				//$contents = '<p>지원하지 않습니다.</p>';
				$(v).browserNotice();
			}

			$(v).replaceWith($contents);

			utils.resetArticleSubWidget && utils.resetArticleSubWidget();
		});
	};
})(jQuery, window, document);