$(function()
{
	//-----------------------------------------
	//
	// variable
	//
	//-----------------------------------------
	
	var THUMB_MIN_WIDTH = 45;
	var IS_IE = false;
	
	var itemNum = 0;
	var nowCurrentID = 0;
	
	var prevLocateID = 0;
	var locateID = 0;
	var thumbClickCount = 0;
	
	var _timerInterval;
	
	//-----------------------------------------
	//
	// instance
	//
	//-----------------------------------------
	
	var _dataJson;
	
	var _timer;
	
	var _mainImgContainer = $("#slides-promo");
	var _thumbImgContainer = $("#slides-thumbContainer");
	var _bannerContainer = $("#slides-banner");
	
	var _locateList = [];
	
	var _ishover = $(".ishover");
	
	//-----------------------------------------
	//
	// flag
	//
	//-----------------------------------------
	
	var isLocate = false;
	
	//-----------------------------------------
	//
	// method
	//
	//-----------------------------------------
	
	
	/* ------------------------------
		json
	------------------------------ */
	
	$.getJSON(
		'./include/config.json',
		function(json)
		{
			_dataJson = json;
			setup();
		}
	);
	
	/* ------------------------------
		event
	------------------------------ */
	
	function onSmartOpacityOver(event)
	{
		$(this).stop().animate({ "opacity": 1 }, { duration: 300 });
	}
	
	function onSmartOpacityOut(event)
	{
		$(this).stop().animate({ "opacity": 0.7 }, { duration: 300 });
	}
	
	function onThumbMouseOver(event)
	{
		setLocate($(this));
		$(this).stop().animate({ "opacity": 1 }, { duration: 300 });
	}
	
	function onThumbMouseOut(event)
	{
		resetLocate($(this));
		$(this).stop().animate({ "opacity": 0.7 }, { duration: 300 });
	}
	
	// init
	_ishover.bind("mouseenter", onSmartOpacityOut);
	_ishover.bind("mouseleave", onSmartOpacityOver);
	
	/* ------------------------------
		set
	------------------------------ */
	
	function setup()
	{
		// browser check
		if(jQuery.support.noCloneChecked || jQuery.support.cssFloat) IS_IE = false;
		else IS_IE = true;
		
		// thumbnail
		itemNum = _dataJson.data.length;
		
		if(itemNum <= 8)
		{
			// main
			_mainImgContainer.append("<a><img></a>");
			_mainImgContainer.find("img").attr({ "src": _dataJson.data[0].mainImage }).end()
							.find("a").attr({ "href": _dataJson.data[0].href, "target": _dataJson.data[0].target });
			
			// addEventListener
			_mainImgContainer.bind("mouseenter", onSmartOpacityOut);
			_mainImgContainer.bind("mouseleave", onSmartOpacityOver);
			
			for(var i = 0; i < itemNum; ++i)
			{
				// add item
				var self = $("<li><a><img></a></li>")
				$("ul", _thumbImgContainer).append(self);
				$("li:eq(" + (itemNum - 1) + ")", _thumbImgContainer).attr({ "class": "last" });
				
				// setting
				self.find("img").attr({ "src": _dataJson.data[i].thumbImage, "id": i });
				
				// addEventListener
				$("li:eq(" + i + ")", _thumbImgContainer).bind("click", onThumbClick);
				$("img:eq(" + i + ")", _thumbImgContainer).bind("mouseenter", onThumbMouseOver);
				$("img:eq(" + i + ")", _thumbImgContainer).bind("mouseleave", onThumbMouseOut);
				
				// visual
				self.find("a").attr({ "href": _dataJson.data[i].mainImage });
				$("img:eq(" + i + ")", _thumbImgContainer).animate({ "opacity": 0.7 }, { duration: 0 });
			}
			
			// timer
			_timerInterval = parseInt(_dataJson.timerCount);
			
			// init
			imgFade(0, _mainImgContainer.find("a"), $("li:eq(0)", _thumbImgContainer), $("li:eq(0)", _thumbImgContainer).find("a").attr("href"), true);
		}
		else
		{
			$("#slides").append("<br><p>json data is over limit. > 8</p>");
			
			_mainImgContainer.remove();
			_thumbImgContainer.remove();
			_bannerContainer.remove();
		}
	}
	
	/* ------------------------------
		locate set/reset
	------------------------------ */
	
	function setLocate(selector)
	{
		locateID = selector.attr("id");
		
		if(selector.width() > THUMB_MIN_WIDTH)
		{
			$("li:eq(" + selector.attr("id") + ")", _thumbImgContainer).stop().animate({ width: 155 }, { duration: 500 });
		}
	}
	
	function resetLocate(selector)
	{
		if(selector.width() > THUMB_MIN_WIDTH)
		{
			$("li:eq(" + selector.attr("id") + ")", _thumbImgContainer).stop().animate({ width: 40 }, { duration: 500 });
		}
	}
	
	/* ------------------------------
		each thumbnail click
	------------------------------ */
	
	function onThumbClick(event)
	{
		// init
		clearTimeout(_timer);
		
		// common
		nowCurrentID = $(this).find("img").attr("id");
		
		// init
		var main = _mainImgContainer.find("a");
		var thumb = $(this).find("a");
		var targetLink = thumb.attr("href");
		
		imgFade(nowCurrentID, main, thumb, targetLink);
	}
	
	/* ------------------------------
		timer
	------------------------------ */
	
	function onTimerComplete()
	{
		// init
		clearTimeout(_timer);
		
		// common
		if(nowCurrentID == (itemNum - 1)) nowCurrentID = 0;
		else ++nowCurrentID;
		
		// init
		var main = _mainImgContainer.find("a");
		var thumb = $("li:eq(" + nowCurrentID + ")", _thumbImgContainer).find("a");
		var targetLink = thumb.attr("href");
		
		// method
		setLocate($("img:eq(" + nowCurrentID + ")", _thumbImgContainer));
		imgFade(nowCurrentID, main, thumb, targetLink);
	}
	
	/* ------------------------------
		img fade
	------------------------------ */
	function imgFade(cnt, m, t, l, isSkip)
	{
		// remove
		for(var i = 0; i < itemNum; ++i)
		{
			$("a:eq(" + i + ")", _thumbImgContainer).removeAttr("href");
			$("li:eq(" + i + ")", _thumbImgContainer).unbind("click", onThumbClick);
			$("img:eq(" + i + ")", _thumbImgContainer).unbind("mouseenter", onThumbMouseOver);
			$("img:eq(" + i + ")", _thumbImgContainer).unbind("mouseleave", onThumbMouseOut);
			$("img:eq(" + i + ")", _thumbImgContainer).stop().animate({ "opacity": 0.7 }, { duration: isSkip == true ? 0 : 300 });
		}
		_mainImgContainer.unbind("mouseenter", onSmartOpacityOut);
		_mainImgContainer.unbind("mouseleave", onSmartOpacityOver);
		
		// reset
		if(isLocate)
		{
			resetLocate($("img:eq(" + prevLocateID + ")", _thumbImgContainer));
			isLocate = false;
		}
		
		if($("img:eq(" + locateID + ")", _thumbImgContainer).width() > THUMB_MIN_WIDTH)
		{
			prevLocateID = locateID;
			isLocate = true;
		}
		
		// main
		if(!IS_IE)
		{
			_mainImgContainer.animate({ "opacity": 0 }, { duration: isSkip == true ? 0 : 500, complete: function()
			{
				$("img", this).attr("src", function()
				{
					return l;
				})
				.one("load", function()
				{
					// main
					_mainImgContainer.animate({ "opacity": 1 }, { duration: isSkip == true ? 0 : 600, 
						complete: function()
						{
							//
						}
					});
					
					// set link/target
					if(_dataJson.data[cnt].href != "" && _dataJson.data[cnt].target != "")
					{
						m.attr({ "href": _dataJson.data[cnt].href, "target": _dataJson.data[cnt].target });
						
						_mainImgContainer.bind("mouseenter", onSmartOpacityOut);
						_mainImgContainer.bind("mouseleave", onSmartOpacityOver);
					}
					else
					{
						m.removeAttr("href").end()
							.removeAttr("target");
							
						_mainImgContainer.unbind("mouseenter", onSmartOpacityOut);
						_mainImgContainer.unbind("mouseleave", onSmartOpacityOver);
					}
					
					// thumbnail
					for(i = 0; i < itemNum; ++i)
					{
						if(i != cnt)
						{
							$("a:eq(" + i + ")", _thumbImgContainer).attr({ "href": _dataJson.data[i].mainImage });
							$("li:eq(" + i + ")", _thumbImgContainer).bind("click", onThumbClick);
							$("img:eq(" + i + ")", _thumbImgContainer).bind("mouseenter", onThumbMouseOver);
							$("img:eq(" + i + ")", _thumbImgContainer).bind("mouseleave", onThumbMouseOut);
						}
						else
						{
							t.removeAttr("href");
						}
					}
					
					$("img:eq(" + cnt + ")", _thumbImgContainer).stop().animate({ "opacity": 1 }, { duration: isSkip == true ? 0 : 300 });
					
					_timer = setTimeout(onTimerComplete, 1000 * (_timerInterval + 1));
				});
			}});
			return false;
		}
		else
		{
			_mainImgContainer.animate({ "opacity": 0 }, { duration: isSkip == true ? 0 : 500, complete: function()
			{
				$("img", this).attr("src", function()
				{
					return l;
				})
				.each(function()
				{
					// main
					_mainImgContainer.animate({ "opacity": 1 }, { duration: isSkip == true ? 0 : 600, 
						complete: function()
						{
							//
						}
					});
					
					// set link/target
					if(_dataJson.data[cnt].href != "" && _dataJson.data[cnt].target != "")
					{
						m.attr({ "href": _dataJson.data[cnt].href, "target": _dataJson.data[cnt].target });
						
						_mainImgContainer.bind("mouseenter", onSmartOpacityOut);
						_mainImgContainer.bind("mouseleave", onSmartOpacityOver);
					}
					else
					{
						m.removeAttr("href").end()
							.removeAttr("target");
							
						_mainImgContainer.unbind("mouseenter", onSmartOpacityOut);
						_mainImgContainer.unbind("mouseleave", onSmartOpacityOver);
					}
					
					// thumbnail
					for(i = 0; i < itemNum; ++i)
					{
						if(i != cnt)
						{
							$("a:eq(" + i + ")", _thumbImgContainer).attr({ "href": _dataJson.data[i].mainImage });
							$("li:eq(" + i + ")", _thumbImgContainer).bind("click", onThumbClick);
							$("img:eq(" + i + ")", _thumbImgContainer).bind("mouseenter", onThumbMouseOver);
							$("img:eq(" + i + ")", _thumbImgContainer).bind("mouseleave", onThumbMouseOut);
						}
						else
						{
							t.removeAttr("href");
						}
					}
					
					$("img:eq(" + cnt + ")", _thumbImgContainer).stop().animate({ "opacity": 1 }, { duration: isSkip == true ? 0 : 300 });
					
					_timer = setTimeout(onTimerComplete, 1000 * (_timerInterval + 1));
				});
			}});
			return false;
		}
	}
})

/**
 * youtube
 */
function onYouTubePlayerReady(playerId)
{
	if(playerId == "player1")
	{
		var player1 = document.getElementById("ytmovie");
		player1.mute();
	}
	if(playerId == "player2")
	{
		var player2 = document.getElementById("faci_movie");
		player2.mute();
	}
}