// Usage
//
//   require.register("browser/debug.js", function(module, exports, require){
//     // Module code goes here
//   });
//
//   var debug = require("browser/debug.js");

function require(p) {
	var path = require.resolve(p);
	var mod = require.modules[path];
	if (!mod) throw new Error('failed to require "' + p + '"');
	if (!mod.exports) {
		mod.exports = {};
		mod.call(mod.exports, mod, mod.exports, require.relative(path));
	}
	return mod.exports;
}

require.modules = {};

require.resolve = function(path) {
	var orig = path;
	var reg = path + ".js";
	var index = path + "/index.js";
	return (
		(require.modules[reg] && reg) ||
		(require.modules[index] && index) ||
		orig
	);
};

require.register = function(path, fn) {
	require.modules[path] = fn;
};

require.relative = function(parent) {
	return function(p) {
		if ("." != p.charAt(0)) return require(p);
		var path = parent.split("/");
		var segs = p.split("/");
		path.pop();

		for (var i = 0; i < segs.length; i++) {
			var seg = segs[i];
			if (".." == seg) path.pop();
			else if ("." != seg) path.push(seg);
		}

		return require(path.join("/"));
	};
};
require.register("modules/module.js", function(module, exports, require) {
	module.exports = {
		smallPicBox,
		videoBox,
		zoomBox
	};
});





// ==========================================================
// 	小圖hover效果及切換功能
// ==========================================================
function smallPicBox() {
	$(".productView .moreview").on('mouseleave', function() {
		$(".productView .zoonbox").removeAttr('style');
	}).on('click','.picitem', function() {
		let thisIndex = -1
		if($(this).parent().hasClass('moreview')) {
			thisIndex = $(this).index()
		} else {
			thisIndex = $(this).parent().index()
		}

		$(this).parents('.productView').find('.picitem').removeClass('now')
			   .end().end().addClass('now')
			   .parents('.productView').find('.zoonbox').removeAttr('style')
			   .eq(thisIndex).addClass('now')
			   .siblings('.zoonbox').removeClass('now')
	}).on('mouseover','.picitem', function() {
		let thisIndex = -1
		if($(this).parent().hasClass('moreview')) {
			thisIndex = $(this).index()
		} else {
			thisIndex = $(this).parent().index()
		}

		$(".productView .zoonbox").eq(thisIndex).css('display','block')
								  .siblings('.zoonbox').css('display','none')
	});
}





// ==========================================================
// 	影片效果
// ==========================================================
	function videoBox(){
		//影片控制
		$(".moreview").on('click','.video_control',function(){
		  var video = document.getElementById("Video");
		  if(video.paused){
			  $(this).addClass('fa-pause').removeClass('fa-play');
			  video.play();
		  }else{
			  $(this).addClass('fa-play').removeClass('fa-pause');
			  video.pause();
		  }
		});

		//影片預覽圖
		if(document.getElementById("Video")){
			document.getElementById("Video").oncanplay=function(){
				var video = $("#Video").get(0);
				var canvas = document.getElementById("video_review");
					canvas.getContext('2d').drawImage(video, 0, 0, 66, 92);
			};
		}
	}





// ==========================================================
// 	
// ==========================================================
 function zoomBox(){
	var ImgBox,ImgBox_h,ImgBox_w,viewbox,viewbox_h,viewbox_w,mouseY,mouseX,preview,preview_img,scale_h,scale_w;
		preview_str = '<div class="preview">';
		ImgBox = $('.productImg .now').offset();


	$('.productView').off('mouseenter mousemove mouseleave','.picbox');

	$('.productView').on('mouseenter','.picbox',function(){

		var preview_str = '<div class="preview">';

		var zoonbox_now = $(this).parents('.zoonbox'),
		big_pic = zoonbox_now.attr('big-pic') || $(this).find('img').attr('src');

		preview_str += '<img src="'+big_pic+'"></div>';
		zoonbox_now.append(preview_str);
		preview = zoonbox_now.find('.preview');
		preview.css({
			height: '80%',
			width: '80%'
		});
	// console.log(zoonbox_now);

		var _this = $(this),
			previewBox = $('.productView .preview');
			viewbox = _this.find('.viewbox');
			// console.log(viewbox)
	   var image = new Image();
		image.src = big_pic;
		image.onload = function() {
			// 原始圖片高度
			ImgBox_h = image.height; 
			// 原始圖片寬度
			ImgBox_w = image.width; 

			// 若原始圖片高度 < 放大框高度，縮小比例為1
			scale_h = (previewBox.height() / ImgBox_h < 1) ? previewBox.height() / ImgBox_h : 1;
			// 若原始圖片寬度 < 放大框寬度，縮小比例為1
			scale_w = (previewBox.width() / ImgBox_w < 1) ? previewBox.width() / ImgBox_w : 1 ;

			// 取得觀看範圍的高：圖框高 * 放大高 / 原始高
			viewbox_h = _this.height() * (scale_h);
			// 取得觀看範圍寬：圖框寬 * 放大寬 / 原始寬
			viewbox_w = _this.width() * (scale_w);

			// 滑鼠可移動 Y 軸範圍
			mouseY = _this.height() - viewbox_h;
			// 滑鼠可移動 X 軸範圍
			mouseX = _this.width() - viewbox_w;

			viewbox.css({
				'opacity': 1,
				'height': viewbox_h,
				'width': viewbox_w,
			});
			// zoonbox_now.html(preview_str);
			// console.log(preview_str);
			// console.log(preview)
			preview_img = preview.find('img');
		}
	})
	.on('mousemove','.picbox',function(e){
		previewBox = $('.productView .preview');
		// 取得圖框距離網頁上方的值
		const canvusTop = $(this).offset().top;
		// 取得圖框距離網頁左方的值
		const canvusLeft = $(this).offset().left;

		// 取得滑鼠目前位置距離網頁上方的值
		const mouseTop = e.pageY;
		// 取得滑鼠目前位置距離網頁左方的值
		const mouseLeft = e.pageX;

		if ((mouseLeft - canvusLeft) < viewbox_w / 2) {
			preview_img.css({
				left: 0
			})
			viewbox.css({
				left: 0
			})
		} else if((mouseLeft - canvusLeft) > ($(this).width() - viewbox_w / 2)){
			preview_img.css({
				left: (ImgBox_w - previewBox.width()) * -1
			})
			viewbox.css({
				left: mouseX
			})
		} else {
			preview_img.css({
				left: (mouseLeft - canvusLeft - viewbox_w / 2) * ImgBox_w / $(this).width() * -1
			});
			viewbox.css({
				left: mouseLeft - canvusLeft - viewbox_w / 2
			})
		}


		if ((mouseTop - canvusTop) < viewbox_h / 2) {
			preview_img.css({
				top: 0
			})
			viewbox.css({
				top: 0
			})
		} else if((mouseTop - canvusTop) > ($(this).height() - viewbox_h / 2)){
			preview_img.css({
				top: (ImgBox_h - previewBox.height()) * -1
			})
			viewbox.css({
				top: mouseY
			})
		} else {
			preview_img.css({
				top: (mouseTop - canvusTop - viewbox_h / 2) * ImgBox_w / $(this).height() * -1
			});
			viewbox.css({
				top: mouseTop - canvusTop - viewbox_h / 2
			})
		}
	})
	.on('mouseleave','.picbox',function(){
		$('.productImg .viewbox').css({
			'opacity':0,
		});
		$('.productImg .preview').remove();
		preview_str= '<div class="preview">';
	});
 }