/*=============================**
* 製品情報
*==============================*/
$(function(){
	
	var PHOTO_SIZE = 360;
	var LARGE_PHOTO_SIZE = 720;
	
	var _photoNum;
	var _selected = 0;
	
	var _isIE = false;
	var _isIE6 = false;
	if ($.browser.msie) {
		_isIE = true;
		if($.browser.version == 6) _isIE6 = true;
	}
	
	
	////////////////////////////////////////////
	//	colorSample
	////////////////////////////////////////////
	
	var _sample = $('ul.colorSample')
	var _list = [];
	
	_sample.children('li').each(function(i){
		$.data($(this).get(0), 'id', i);
		$(this).click(function(){
			 _onSampleClick($(this));
			 return false;
		});
		if(i == 0) $(this).addClass('current');
		_list.push($(this));
	});
	_photoNum = _list.length;
	
	function _onSampleClick(target){
		var tmpId = $.data(target.get(0), 'id');
		if(_selected == tmpId) return;
		
		var past = _list[_selected];
		past.removeClass('current');
		
		_selected = tmpId;
		var selectedObj = _list[tmpId];
		selectedObj.addClass('current');
		
		$('.colorName').text(_colorDetailList[tmpId]);
		
		//
		_changePhoto(tmpId);
	}
	
	////////////////////////////////////////////
	//	photo
	////////////////////////////////////////////
	
	var _photo = $('.photo');
	var _photoImg = _photo.children('img');
	var _photoOffset = _photo.offset();
	var _photoURLs = [];
	var _largePhotoURLs = [];
	var _largeImg = $('<img>');
	var _colorDetailList = [];
	var _intervalId;
	
	
	_photo.css({
		width : '360px',
		height : '360px',
		overflow : 'hidden'
	}).hover(function(e){
		_photoOffset = _photo.offset();
		_hideZoomIcon();
		_showLargePhoto(_selected);
		
		var pos = _getLargePos(e);
		_largeImg.css({
			top : pos.top + 'px',
			left : pos.left + 'px'
		});
		
		$(this).css({
			cursor : 'move',
			border : '1px solid #EBE7E0'
		}).mousemove(function(e){
			_checkMouse(e, $(this));
		});
	}, function(){
		$(this).css({
			cursor : 'auto',
			border : 'none'
		});
		_showZoomIcon();
		_hideLargePhoto();
		$(this).unbind('mousemove');
		if (_intervalId) {
			clearInterval(_intervalId);
			_intervalId = null;
		}
	}).click(function(){
		showLightbox(_largePhotoURLs[_selected]);
	}).append(_largeImg);
	
	_photoImg.css({
		position : 'absolute'
	});
	
	_largeImg.attr({
		width : LARGE_PHOTO_SIZE, height : LARGE_PHOTO_SIZE
	}).css({
		display : 'none',
		position : 'absolute'
	});
	
	//
	if($('.colorImgBtn').length){
		$('.colorImgBtn').each(function(i){
			$(this).attr('href', 'javascript:void(0);');
			$(this).unbind('click');
			
			var imgData = $(this).attr('rel').split('|');
			var tmpURL = '/asset/products/upload_img/'+imgData[0]+'/products_'+imgData[1]+'_m.jpg';
			_photoURLs.push(tmpURL);
			var tmpLargeURL = '/asset/products/upload_img/'+imgData[0]+'/products_'+imgData[1]+'_l.jpg';
			_largePhotoURLs.push(tmpLargeURL);
			if (i != 1) $('<img>').attr('src', tmpURL);
			$('<img>').attr('src', tmpLargeURL);
			
			//
			_colorDetailList.push(imgData[2]);
		});
	}else{
		var tmpURL = _photo.children('img').attr('src');
		tmpURL = tmpURL.replace('m.jpg', 'l.jpg');
		_largePhotoURLs.push(tmpURL);
	}
	
	
	
	function _changePhoto(id){
		_photoImg.attr('src', _photoURLs[id]);
	}
	
	function _showPhoto(){
		var tmpd = 34;
		var size = PHOTO_SIZE+tmpd*2;
		_photoImg.css({
			width : size+'px', height : size+'px',
			top : -tmpd, left : -tmpd,
			'display': 'block'
		}).stop().animate({
			width : PHOTO_SIZE+'px', height : PHOTO_SIZE+'px',
			top : 0, left : 0
		}, 250, 'easeOutQuart');
	}
	
	function _showLargePhoto(id){
		_photoImg.stop().css('display', 'none');
		_largeImg.attr('src', _largePhotoURLs[id]).css('display', 'block');
	}
	
	function _hideLargePhoto(){
		_largeImg.css('display' , 'none').attr({
			'src':''
		});
		_showPhoto();
	}
	
	var tl, tt;
	var p2 = PHOTO_SIZE/2;
	var max = -(LARGE_PHOTO_SIZE - PHOTO_SIZE);
	function _checkMouse(e, target){
		var pos = _getLargePos(e);
		tl = pos.left, tt = pos.top;
		
		var left = _largeImg.position().left;
		var top = _largeImg.position().top;
		
		if(!_intervalId){
			_intervalId = setInterval(function(){
				left += (tl - left) / 5;
				top += (tt - top) / 5;
				_largeImg.css({
					top : top + 'px',
					left : left + 'px'
				});
			}, 1);
		}
	}
	
	function _getLargePos(e){
		var cdl = (e.pageX - _photoOffset.left) - p2;
		var cdt = (e.pageY - _photoOffset.top) - p2;
		
		var tl = -p2 - cdl * 1.4;
		var tt = -p2 - cdt * 1.4;
		if(tl > 0) tl = 0;
		if(tt > 0) tt = 0;
		if(tl < max) tl = max;
		if(tt < max) tt = max;
		
		return { left : tl, top : tt }
	}
	
	////////////////////////////////////////////
	//	zoomIcon
	////////////////////////////////////////////
	var _zoomIcon = $('.zoom');
	_zoomIcon.css({
		'z-index' : 1000,
		opacity : 1
	}).mouseover(function(){
		_photo.mouseover();}
	);
	
	function _showZoomIcon(){
		_zoomIcon.css('display', 'block').stop().animate({
			opacity : 1
		},400);
	}
	function _hideZoomIcon(){
		_zoomIcon.stop();
		_zoomIcon.css({
			opacity : 0,
			display : 'none'
		});
	}
	
	////////////////////////////////////////////
	//	lightbox
	////////////////////////////////////////////
	
	function showLightbox(targetSrc){
		var bg = $('<div>');
		var position = (_isIE6) ? 'absolute' : 'fixed';
		bg.css({
			'position' : position,
			'top' : '0px',
			'left' : '0px',
			'z-index' : 10000,
			'background-color' : '#AB9F8F',
			opacity : 0.6
		});
		
		bg.resize = function(){
			bg.css({
				'width' : $(window).width() + 'px',
				'height' : $(window).height() + 'px'
			});
			if(_isIE6){
				bg.css({
					'left' : $(window).scrollLeft() + "px",
					'top' : $(window).scrollTop() + "px"
				});
				fixCenter(img, LARGE_PHOTO_SIZE, LARGE_PHOTO_SIZE);
			}
		}
		
		bg.destroy = function(){
			bg.stop();
			img.stop();
			$(window).unbind("resize scroll");
			$('body').unbind('click');
			bg.remove();
		}
		
		//img
		var img = $('<img>');
		img.attr('src', targetSrc).css({
			'z-index': 10001,
			'border' : '#AB9F8F solid 2px'
		});
		
		$(window).bind('resize', bg.resize);
		if(_isIE6){
			img.css({ position : 'absolute' });
			$(window).bind('scroll', bg.resize);
		}else{
			setFixCenterCSS(img, LARGE_PHOTO_SIZE, LARGE_PHOTO_SIZE);
		}
		
		bg.stop().animate({
			opacity : 0.8
		}, 300, 'easeOutQuart', function(){
			
			$('body').click(function(){
				bg.destroy();
				img.remove();
			});
		});
		
		$('body').append(bg).append(img);
		bg.resize();
		
		return bg;
	}
	
	function setFixCenterCSS(target, width, height){
		if(_isIE6) return;
		width = (width) ? width : target.width();
		height = (height) ? height : target.height();
		
		var ml = -(width >> 1);
		var mt = -(height >> 1);
		target.css({
			'position' : 'fixed',
			'top' : '50%',
			'left' : '50%',
			'margin-left' : ml + 'px',
			'margin-top' : mt + 'px'
		});
	}
	
	function fixCenter(target, width, height){
		var tmpObjH = (height) ? height : target.height();
		var tmpObjW = (width) ? width : target.width();
		
		var tmpTop = (($(window).height() - tmpObjH) >> 1) + $(window).scrollTop();
		var tmpLeft = (($(window).width() - tmpObjW) >> 1) + $(window).scrollLeft();
		
		target.css({
			top : tmpTop + 'px',
			left : tmpLeft + 'px'
		});
	}
	
	////////////////////////////////////////////
	//	TAB
	////////////////////////////////////////////
	
	//要素が入っているか調べて、無かったらタブを押せないようにする
	btnEnableArray = new Array(2);
	btnEnableArray[0] = $('#tabBtn1').children().hasClass('btn_enable');
	btnEnableArray[1] = $('#tabBtn2').children().hasClass('btn_enable');
	btnEnableArray[2] = $('#tabBtn3').children().hasClass('btn_enable');
	function btnEnableCheck(){
		if(btnEnableArray[0]==false){
				$('#tabBtn1').hide();
		}
		if(btnEnableArray[1]==false){
				$('#tabBtn2').hide();
		}
		if(btnEnableArray[2]==false){
				$('#tabBtn3').hide();
		}

/*		if(btnEnableArray[0]==false){
				$('#tabBtn1 img').attr('src','/asset/products/img/btn_tab_feature_none.png');
		}
		if(btnEnableArray[1]==false){
				$('#tabBtn2 img').attr('src','/asset/products/img/btn_tab_reviewlist_none.png');
		}
		if(btnEnableArray[2]==false){
				$('#tabBtn3 img').attr('src','/asset/products/img/btn_tab_function_none.png');
		}
*/
	}
	btnEnableCheck();
	
	//tabBtn1
	$('#tabBtn1').click(function(){
		var btnEnable = $(this).children().hasClass('btn_enable');
		if(btnEnable == true){
				$('#tab1').show();
				$('#tab2').hide();
				$('#tab3').hide();
				$('#tabBtn1 img').attr('src','/asset/products/img/btn_tab_feature_active.png');
				$('#tabBtn2 img').attr('src','/asset/products/img/btn_tab_reviewlist.png');
				$('#tabBtn3 img').attr('src','/asset/products/img/btn_tab_function.png');
				$(this).addClass("active");
				$('#tabBtn2').removeClass("active");
				$('#tabBtn3').removeClass("active");
				btnEnableCheck();
			}
		}
	)
	$('#eventFeature').click(function(){
		var btnEnable = $('#tabBtn1').children().hasClass('btn_enable');
		if(btnEnable == true){
				$('#tab1').show();
				$('#tab2').hide();
				$('#tab3').hide();

				if(event){ event.preventDefault(); }else if(window.event){ window.event.returnValue = false; }
				var targetId = $(this).attr('href');
				var pos = $(targetId).offset();
				var ty = Math.min(pos.top, ($(document).height() - $(window).height()));
				$('html,body').animate({ scrollTop: ty }, 500, 'swing');

				$('#tabBtn1 img').attr('src','/asset/products/img/btn_tab_feature_active.png');
				$('#tabBtn2 img').attr('src','/asset/products/img/btn_tab_reviewlist.png');
				$('#tabBtn3 img').attr('src','/asset/products/img/btn_tab_function.png');
				$(this).addClass("active");
				$('#tabBtn2').removeClass("active");
				$('#tabBtn3').removeClass("active");
				btnEnableCheck();
			}
		}
	)
	$('#eventrelated').click(function(){
		var btnEnable = $('#tabBtn1').children().hasClass('btn_enable');
		if(btnEnable == true){
				$('#tab1').show();
				$('#tab2').hide();
				$('#tab3').hide();

				$('#tabBtn1 img').attr('src','/asset/products/img/btn_tab_feature_active.png');
				$('#tabBtn2 img').attr('src','/asset/products/img/btn_tab_reviewlist.png');
				$('#tabBtn3 img').attr('src','/asset/products/img/btn_tab_function.png');
				$(this).addClass("active");
				$('#tabBtn2').removeClass("active");
				$('#tabBtn3').removeClass("active");
				btnEnableCheck();
			}
		}
	)


	//tabBtn2
	$('#tabBtn2').click(function(){
		var btnEnable = $(this).children().hasClass('btn_enable');
		if(btnEnable == true){
				$('#tab1').hide();
				$('#tab2').show();
				$('#tab3').hide();
				$('#tabBtn1 img').attr('src','/asset/products/img/btn_tab_feature.png');
				$('#tabBtn2 img').attr('src','/asset/products/img/btn_tab_reviewlist_active.png');
				$('#tabBtn3 img').attr('src','/asset/products/img/btn_tab_function.png');
				$(this).addClass("active");
				$('#tabBtn1').removeClass("active");
				$('#tabBtn3').removeClass("active");
				btnEnableCheck();
			}
		}
	)
	$('#eventReview').click(function(){
		var btnEnable = $('#tabBtn2').children().hasClass('btn_enable');
		if(btnEnable == true){
				$('#tab1').hide();
				$('#tab2').show();
				$('#tab3').hide();

				$('#tabBtn1 img').attr('src','/asset/products/img/btn_tab_feature.png');
				$('#tabBtn2 img').attr('src','/asset/products/img/btn_tab_reviewlist_active.png');
				$('#tabBtn3 img').attr('src','/asset/products/img/btn_tab_function.png');
				$(this).addClass("active");
				$('#tabBtn1').removeClass("active");
				$('#tabBtn3').removeClass("active");
				btnEnableCheck();
			}
		}
	)


	//tabBtn3
	$('#tabBtn3').click(function(){
		var btnEnable = $(this).children().hasClass('btn_enable');
		if(btnEnable == true){
				$('#tab1').hide();
				$('#tab2').hide();
				$('#tab3').show();
				$('#tabBtn1 img').attr('src','/asset/products/img/btn_tab_feature.png');
				$('#tabBtn2 img').attr('src','/asset/products/img/btn_tab_reviewlist.png');
				$('#tabBtn3 img').attr('src','/asset/products/img/btn_tab_function_active.png');
				$(this).addClass("active");
				$('#tabBtn1').removeClass("active");
				$('#tabBtn2').removeClass("active");
				btnEnableCheck();
			}
		}
	)
	$('#eventFunction').click(function(){
		var btnEnable = $('#tabBtn3').children().hasClass('btn_enable');
		if(btnEnable == true){
				$('#tab1').hide();
				$('#tab2').hide();
				$('#tab3').show();

				$('#tabBtn1 img').attr('src','/asset/products/img/btn_tab_feature.png');
				$('#tabBtn2 img').attr('src','/asset/products/img/btn_tab_reviewlist.png');
				$('#tabBtn3 img').attr('src','/asset/products/img/btn_tab_function_active.png');
				$(this).addClass("active");
				$('#tabBtn1').removeClass("active");
				$('#tabBtn2').removeClass("active");
				btnEnableCheck();
			}
		}
	)



});