/**s
 * @author tomohiro tsutsumi
 */


var colorBalloon = ""; 
colorBalloon += '<div id="color-balloon">';
colorBalloon += '	<div class="inner">';
colorBalloon += '		<div class="description">';
colorBalloon += '			<p class="product-img"><img src="/common/asset_img/v1/sample/product_detail_sample_03_tt.jpg" /></p>';
colorBalloon += '			<p class="product-txt"><span class="col-num">801</span><br /><span class="col-txt">abcde</span></p>';
colorBalloon += '		</div>';
colorBalloon += '	</div>';
colorBalloon += '	<p><img src="/common/asset_img/v1/product_detail_balloon_bottom.gif" width="278" height="12" alt="" title="" /></p>';
colorBalloon += '</div>';


var colorBalloon2 = ""; 
colorBalloon2 += '<div id="color-balloon">';
colorBalloon2 += '	<div class="inner">';
colorBalloon2 += '		<div class="description2">';
colorBalloon2 += '			<p class="product-img"><img src="/common/asset_img/v1/sample/product_detail_sample_03_tt.jpg" /></p>';
colorBalloon2 += '			<p class="product-txt"><span class="col-num">801</span></p>';
colorBalloon2 += '		</div>';
colorBalloon2 += '	</div>';
colorBalloon2 += '	<p><img src="/common/asset_img/v1/product_detail_balloon_bottom.gif" width="278" height="12" alt="" title="" /></p>';
colorBalloon2 += '</div>';


var product_detail = function(){
	
	var browser = checkBroswer();
	var isIE = (browser.indexOf('ie') != -1);
	var isUpdown = false;
	
	function init(){
		try{
			if (!!youtubeCode) {
				var yt = new Youtube();
				yt.embedCode = youtubeCode;
				yt.btnId = '.movieSection01A img';
				yt.init();
			}
		}catch(e){}
		
		try{
			if(!!cosmetic_ingredientCode) $('body').append(cosmetic_ingredientCode);
		}catch(e){}
		
		isUpdown = $('.productColorList01A').hasClass('updown');
		/*console.log('=== isUpdown =====');
		console.log(isUpdown);*/
		
		if(isUpdown){
			$('body').append(colorBalloon2);
		}else{
			$('body').append(colorBalloon);
		}
		
		
		_initColor();
		_initDetail();
		_initRecommend();
	}
	
	/*=============================**
	* color
	*==============================*/
	
	function _initColor(){
		var txt = $('#color-balloon .product-txt');
		
		$('.productColorList01A li img').each(function(){
			var src = $(this).attr('src');
			src = src.replace('.jpg', '_tt.jpg');
			$('<img>').attr('src', src);
		})
		
		var tooltip = new Tooltip();
		tooltip.init(".productColorList01A li img", $('#color-balloon'), {
			'mouseover' : function($target){
				var src = $target.attr('src');
				src = src.replace('.jpg', '_tt.jpg');
				var img = tooltip.tooltip.find('.product-img img');
				img.attr('src', src);
				
				var alt = $target.attr('alt');
				alt = alt.replace(/　/g," ");
				alt = alt.split(' ');
				
				var alt_num = alt.shift();
				var alt_color = '';
				if(alt.length){
					alt_color = alt.join(' ');
				}
				
				tooltip.tooltip.find('.product-txt span.col-num').html(alt_num);
				tooltip.tooltip.find('.product-txt span.col-txt').html(alt_color);
				//
				if(!isUpdown){
					var imgH = img.height();
					var txtH = txt.height();
					txt.css({
						"padding-top" : (imgH - txtH) >> 1
					});
				}
				
			}
		});
	}
	
	/*=============================**
	* detail
	*==============================*/
	
	function _initDetail(){
		var btn = $("#ingredient-btn");
		var detailContainer = $("#ingredient");
		
		var detail = detailContainer.children('.inner');
		var close = detail.find("p.close");
		
		var lightbox = new Lightbox();
		lightbox.target = $('body');
		lightbox.boxContainer = detailContainer;
		lightbox.box = detail;
		lightbox.boxW = detail.width();
		lightbox.boxH = detail.height();
		lightbox.close = close;
		lightbox.destroyCallback = hide;
		lightbox.init();
		
		function show(){
			
			if(Common.isIE()){
				detail.css({
					visibility : 'visible'
				});
			}else{
				detail.css({
					visibility : 'visible',
					opacity : 0,
					top : '10px'
				}).stop().animate({
					'top' : '0',
					'opacity' : 1
				}, 200, "easeOutQuart");
			}
		}
		
		function hide(){
			if (Common.isIE()) {
				detail.css({
					visibility: 'hidden'
				});
			}else {
				detail.stop().animate({
					'top': '-10px',
					'opacity': 0
				}, 200, "easeOutQuart", function(){
					$(this).css({
						visibility: 'hidden'
					});
				});
			}
			
		}
		
		btn.click(function(){
			detail.css("visibility", "visible");
			lightbox.show();
			show();
		});
	}
	
	
	/*=============================**
	* Recommend
	*==============================*/
	
	function _initRecommend(){
		var REC_VIEW_NUM = 4;
		var NOENABLED_IMG = "/common/asset_img/v1/arrow_06_ns.gif";
		
		var isMoving = false;
		
		var ul = $("#recommendThumbs ul");
		var ulP = ul.parent();
		ulP.css("position", "relative");
		ul.css({
			"position" : "relative"
		});
		
		var liList = [];
		var lis = $("#recommendThumbs ul li");
		lis.each(function(){
			var li = $(this);
			liList.push(li);
		});
		var liNum = lis.length;
		var rec_index = 0;
		
		
		//left right btns
		$("<img>").attr("src", NOENABLED_IMG);
		var leftBtn = $("#recommendThumbs .recommendNavLeft img");
		var rightBtn = $("#recommendThumbs .recommendNavRight img");
		leftBtn.css({opacity : 0});
		rightBtn.css({opacity : 0});
		var leftBtnSrc = leftBtn.attr("src");
		var rightBtnSrc = rightBtn.attr("src");
		
		if(checkBtns()){
			//右移動、左移動ができるだけ数があれば、マウスホイールを可
			/*ulP.mousewheel(function(event, delta){
				event.stopPropagation();
				event.preventDefault();
				if(isMoving) return;
				if(delta > 0){
					moveLeft();
				}else{
					moveRight();
				}
			});*/
		}
		
		leftBtn.click(function(){
			moveLeft();
		}).hover(function(){
			if($(this).attr("src") == NOENABLED_IMG) return;
			$(this).stop().animate({
				opacity : 0.7
			}, 100);
		}, function(){
			$(this).stop().animate({
				opacity : 1
			}, 100);
		});
		rightBtn.click(function(){
			moveRight();
		}).hover(function(){
			if($(this).attr("src") == NOENABLED_IMG) return;
			$(this).stop().animate({
				opacity : 0.7
			}, 100);
		}, function(){
			$(this).stop().animate({
				opacity : 1
			}, 100);
		});
		
		function moveLeft(){
			if(rec_index <= 0) return;
			rec_index += -1;
			move();
			checkBtns();
		}
		
		function moveRight(){
			if ((rec_index + 1) * REC_VIEW_NUM >= liNum) return;
			rec_index += 1;
			move();
			checkBtns();
		}
		
		function checkBtns(){
			if(liNum <= REC_VIEW_NUM){
				enabled(rightBtn);
				enabled(leftBtn);
				return false;
			}
			
			if ((rec_index + 1) * REC_VIEW_NUM >= liNum){
				enabled(rightBtn);
				enabled(leftBtn, leftBtnSrc);
			}else if(rec_index <= 0){
				enabled(leftBtn);
				enabled(rightBtn, rightBtnSrc);
			}else{
				enabled(leftBtn, leftBtnSrc);
				enabled(rightBtn, rightBtnSrc);
			}
			
			return true;
		}
		
		function enabled(target, imgSrc){
			if(!!imgSrc){
				target.css("cursor", "pointer").attr("src", imgSrc);
			}else{
				target.css("cursor", "default").attr("src", NOENABLED_IMG);
			}
		}
		
		function move(){
			isMoving = true;
			var tmpNum = REC_VIEW_NUM * rec_index;
			var targetLeft = liList[tmpNum].position().left;
			ul.stop().animate({
				"left" : -targetLeft
			}, 500, "easeOutExpo", function(){
				isMoving = false;
			});
		}
		
		
		leftBtn.stop().delay(50).css('visibility', 'visible').animate({
			opacity : 1
		}, 600);
		rightBtn.stop().delay(100).css('visibility', 'visible').animate({
			opacity : 1
		}, 600);
	}
	
	
	/*=============================**
	* publc API
	*==============================*/
	return{
		init : init
	}
}();

$(function(){
	product_detail.init();
});