/*
	PVRI 360vr Exterior
 */
function call_analytics(){}


$.fn.panorama = function(options) {
	this.each(function(){
		var settings = {views_number: 144,views_columns: 36};
		var panoElement = this;
		var panoContainer = $(panoElement);
		var orig_src = $(this).attr("src");
		var loaded = 0;
		var pano_mouse_position_x;
		var pano_mouse_position_y;
		var pano_mouse_delta_x = 0;
		var pano_mouse_delta_y = 0;
		var pano_mouse_delta_y_old = 3;
		var pano_mouse_down = false;
		var pano_current_number;
		var pano_timer;
		var panoLoadingStop = false;
		var pano_width = parseInt(panoContainer.attr("width"));
		var pano_height = parseInt(panoContainer.attr("height"));
		pano_mouse_position_x = parseInt(pano_width/2);
		pano_mouse_position_y = parseInt(pano_height/2);

		this.addEventListener("touchstart", touchHandler, true);
		this.addEventListener("touchmove", touchHandler, true);
		this.addEventListener("touchend", touchHandler, true);
		this.addEventListener("touchcancel", touchHandler, true);

		panoContainer.bind("touchmove",function(e){
			e.preventDefault();
		});
		panoContainer.css("margin", "0 0 0 0").css("padding", "0 0 0 0").wrap('<div class="panorama" style="position: relative; margin: 0 auto; padding: 0; height: '+pano_height+'px; width: '+pano_width+'px; overflow: hidden;"></div>');

		if(options) $.extend(settings, options);
		panoContainer.after('<a class="panoLoadingStop" href="#" style="display: none; color: white; position: absolute; top: 5px; right: 5px; text-decoration: none;">[stop]</a>');

		if (settings.views_columns==settings.views_number) { // exterior
			panoContainer.after('<p class="loadingPersent"><span>0 %</span></p>');
		}

		var src_prefix = orig_src.substr(0, orig_src.lastIndexOf('_')+1);
		var src_number = parseInt(orig_src.substr(orig_src.lastIndexOf('_')+1));
		pano_current_number = src_number;

		var array_data = orig_src.split(".");
		var src_sufix = "."+array_data[array_data.length-1];

		// Loading Button
		//panoContainer.after('<p class="panoLoadingStart"><button class="btnPanoVRStart" role="button"><img src="/content/dam/hyundai/in/en/images/findacar/360vr/btn_start.png" alt="Start" />360° VR Start</button></p>');
		panoContainer.after('<p class="panoLoadingStart"><button class="btnPanoVRStart" role="button"><img src="/etc/designs/hyundai/in/en/images/common/btn_start.png" alt="Start" />360° VR Start</button></p>');
		panoContainer.parent().find(".panoLoadingStop").bind('click', function(){
			panoLoadingStop = true;
			return false;
		});

		panoContainer.parent().bind('click', function(){
			call_analytics();
			if(!panoContainer.parent().hasClass("loadingEnd")){
				panoContainer.parent().addClass("loadingEnd");
				panoContainer.parent().css("cursor", "wait");
				panoContainer.parent().find(".panoLoadingStart").hide();
				panoContainer.parent().find(".loadingPersent").show();

				panoContainer.parent().find(".panoVues").remove();
				var many = 0;
				pano_timer = setTimeout(function(){
					clearTimeout(pano_timer);
					for (var i=0; i<settings.views_number; i++) {
						if (i!=src_number){
							panoContainer.after('<img class="panoVues vue'+i+'" src="'+src_prefix+i+src_sufix+'" style="visibility: hidden;" />');
							panoContainer.parent().find("img.vue"+i).bind('load', function(){

								loaded++;

								if (panoLoadingStop) {
									panoLoadingStop=false;

									panoContainer.parent().css("cursor", "default");
									panoContainer.parent().find(".loadingPersent").hide();
									panoContainer.parent().find(".panoLoadingStart").show();
									panoContainer.parent().find(".loadingPersent span").html('loading');
									pano_timer = setTimeout(function(){
										clearTimeout(pano_timer); window.stop();
									});

								}

								if (parseInt((loaded/settings.views_number)*100) > 90) {
									panoContainer.parent().css("cursor", "pointer");
									panoContainer.parent().find(".loadingPersent").hide();
									panoContainer.parent().find(".pano_loading_masque").hide();
									panoContainer.parent().bind('mousedown', function(e){
										pano_mouse_down = true;
										pano_mouse_position_x = e.clientX;
										pano_mouse_position_y = e.clientY;
										panoContainer.parent().css("cursor", "move");
										e.stopPropagation();
										return false;
									});

									panoContainer.parent().bind('mouseup', function(e){
										pano_mouse_down = false;
										$("div.panorama").css("cursor", "pointer");
										e.stopPropagation();
										return false;
									});

									panoContainer.parent().bind('mousemove', function(e){
										e.preventDefault();
										e.stopPropagation();
										if (pano_mouse_down) {
											pano_mouse_delta_x = parseInt((pano_mouse_position_x - e.clientX)/32);
											pano_mouse_delta_y = parseInt((pano_mouse_position_y - e.clientY)/32);
											if (pano_mouse_delta_x!=0||pano_mouse_delta_y!=0) {
												var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
												var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";

												if (settings.views_columns==settings.views_number) { // exterior
													pano_current_number=pano_current_number - pano_mouse_delta_x - settings.views_columns*pano_mouse_delta_y;
													if (pano_current_number<0) {
														pano_current_number = settings.views_columns-1;
													}
													if (pano_current_number>(settings.views_number-1)) {
														pano_current_number = settings.views_number-settings.views_columns;
													}
												}

												panoContainer.attr('src', src_prefix+pano_current_number+src_sufix);
												pano_mouse_position_x= e.clientX;
												pano_mouse_position_y= e.clientY;
												if(pano_mouse_delta_y > 0){
													pano_mouse_delta_y_old = pano_mouse_delta_y_old+1;
													if(pano_mouse_delta_y_old > settings.views_number/settings.views_columns){
														pano_mouse_delta_y_old = settings.views_number/settings.views_columns;
													}
												}
												if(pano_mouse_delta_y < 0){
													pano_mouse_delta_y_old = pano_mouse_delta_y_old-1;
													if(pano_mouse_delta_y_old < 1){
														pano_mouse_delta_y_old = 1;
													}
												}
											}
										}
									});
								}
								else {
									panoContainer.parent().find(".loadingPersent span").html(parseInt((loaded/settings.views_number)*100) + " %");
								}
							});
						}
					}
				}, 500);

			}


		});
	});
};

function cubeExperience(cate,targetArr,color,option) {
	console.log(targetArr[color]);
	var orig_src = targetArr[color].path;
	var panoramaImg = targetArr[color].path;

	$(".vr360Exterior .experiencePanoramaBox").empty();
	$(".vr360Exterior .experience_large").empty();
	$(".vr360Exterior .experience_option").empty();
	$(".vr360Exterior .experience_option2").empty();
	$(".vr360Exterior .experience_sort_Wrap").removeClass("hideBtn");

	var src_prefix = panoramaImg.substr(0, orig_src.lastIndexOf('_')+1);
	var src_sufix = panoramaImg.substr(orig_src.indexOf(src_number,0)+String(src_number).length);
	var src_number = parseInt(orig_src.substr(orig_src.lastIndexOf('_')+1));

	if (cate=="exterior") {
		// exterior
		$(".vr360Exterior .experience_option2").addClass("wheel");
		if(INcolorName.length>0){
			$(".vr360Exterior .experiencePanoramaBox.exterior").append('<img src="'+panoramaImg+'" class="panorama" width="1120" height="425" alt="" />');
			$(".vr360Exterior .exterior img.panorama").panorama({views_number: 36,views_columns: 36});
		}else{
			$(".vr360Exterior .experiencePanoramaBox.exterior").append('<img src="'+panoramaImg+'" class="panorama" width="1120" height="425" alt="" />');
			$(".vr360Exterior .exterior img.panorama").panorama({views_number: 36,views_columns: 36});
		}		
		$(".vr360Exterior .cube_shadow_interior").hide();
		$(".vr360Exterior .experience_sort_Wrap").html('<div class="experience_option slideArea"><ul class="swiper-wrapper"></ul></div><p class="btn_prev"><button class="prev">prev</button></p><p class="btn_next"><button class="next">next</button></p>');		
		$(".vr360Exterior .experience_sort_Wrap.wheel").html('<div class="experience_option2 slideArea"><ul class="swiper-wrapper"></ul></div><p class="btn_prev"><button class="prev">prev</button></p><p class="btn_next"><button class="next">next</button></p>');		
		$(".vr360Exterior .option1 .leftTitle .title").text("Choose Your Vehicle Colors"); //  add from authoring
		$(".vr360Exterior .option2 .leftTitle .title").text(Granite.I18n.get('msg_wheels'));
		$(".vr360Exterior .option1 .leftTitle .colorName").text(targetArr[color].displayName);
		$(".vr360Exterior .option2 .leftTitle .optionName").text(targetArr[color].displayName);
	}
}

var linkArr = location.href.split('/');

var lastBeforesegment = linkArr[linkArr.length-2];
// Click Color / Texture
$(document).on("click tab", ".vr360Exterior .btnChoiceColor,.vr360Exterior .btnChoiceWheel",function(){
	var cat = $(this).data("category");
	var opt1 = $(this).data("opt1");
	var opt2 = $(this).data("opt2");

	cubeExterienceCustomiz(cat, opt1, opt2);
   dataLayer.push({
		'event': lastBeforesegment+'_colorSelect',
		'pageName': window.location.origin + window.location.pathname,
		'pageType':dataLayerPageType,
		'banner_position': '',
		'banner_title': '',
		'buttonTitle': '',
		'linkName': '',
		'sectionName': 'Exterior 360 view',
		'customerEmail': sessionStorage.getItem('mdEmail')?sessionStorage.getItem('mdEmail'):'',
		'customerMobile': sessionStorage.getItem('mdMobile')?sessionStorage.getItem('mdMobile'):'',
		'carCategory': '',
		'carModel': lastBeforesegment,
		'carModelVariant': '',
		'carColour': EXcolorName[opt1].displayName,
		'carFuelType': '',
		'transmission_type': '',
		'ex_showroom_price': '',
		'customerState': '',
		'customerCity':  '',
		'customerPincode': '',
		'dealerName': '',
		'dealershipType': '',
		'customerGender': '',
		'formSubmissionType': '',
		'videoName': '',
		'search_term': '',
		'ga_client_id': ga_client_id,
		'serviceType': '',
		'ServiceAppointmentDate': '',
		'ServiceAppointmentTime': '',
		'socialLinkName': '',
		'scrollPercentage': '',
		'SHAmob': sessionStorage.getItem('shMob')?sessionStorage.getItem('shMob'):'',
		'SHAemail': sessionStorage.getItem('shEmail')? sessionStorage.getItem('shEmail'):''})

});

function cubeExterienceCustomiz(cateX,color,option){
	var targetArr;
	if(cateX == "exterior") {
		targetArr = EXcolorName;
	} else {
		targetArr = INcolorName;
	}

	var idx = color;
	$('.vr360Exterior .experiencePanoramaBox').attr("class","experiencePanoramaBox exterior");

	cubeExperience(cateX, targetArr, color, option);	

	var TotalLength = targetArr.length;
	for (var i=0; i<TotalLength; i++) {
		var active = "";
		if (i==color){
			active = "on";
		}
		$(".vr360Exterior .experience_option ul").append('<li class="swiper-slide '+active+'"><button class="btnChoiceColor" aria-label="colorchips" data-category="'+cateX+'" data-opt1 = "'+ i+'" data-opt2="0"><img src="'+targetArr[i].icon+'" alt="" /></button></li>');
	}
	//var WheelLength = targetArr[color].option.length;
//	for (var i=0; i<WheelLength; i++) {
//		var active = "";
//		if (i==option){
//			active = "on";
//		}
//		$(".vr360Exterior .experience_option2 ul").append('<li class="swiper-slide '+active+'"><button class="btnChoiceWheel" data-category="'+cateX+'" data-opt1 = "'+ color+'" data-opt2="'+i+'"><img src="'+targetArr[color].option[i].icon+'" alt="" /></button></li>');
//	}
	$(".vr360Exterior .experience_sort_Wrap").each(function(){
		var _target = $(this);
		if(_target.find(".slideArea").hasClass("experience_option")){
			var colorList = new Swiper(_target.find(".slideArea"), {
				nextButton : _target.find(".btn_next"),
				prevButton : _target.find(".btn_prev"),
				breakpoints: {
					// when window width is <= 740
					20000: {
						initialSlide : color,
						slidesPerView: 'auto',
						slidesPerGroup: 7,
						spaceBetween : 12,
						simulateTouch : false						
					},
					// when window width is <= 740
					740: {
						initialSlide : color,
						freeMode: true,
						spaceBetween : 6,
						slidesPerView:'auto',
						visibilityFullFit: true,
						simulateTouch : true
					}
				},
				onProgress: function (swiper) {
					if(swiper.slides.length <= 7){
						_target.addClass("hideBtn");
					}else{
						_target.removeClass("hideBtn");
					}
				}
			});
		}

		// if target has class experience option
		if(_target.find(".slideArea").hasClass("experience_option2")){
			var wheelList = new Swiper(_target.find(".slideArea"), {
				nextButton : _target.find(".btn_next"),
				prevButton : _target.find(".btn_prev"),
				breakpoints: {
					// when window width is <= 740
					20000: {
						initialSlide : option,
						slidesPerView: 'auto',
						slidesPerGroup: 6,
						spaceBetween : 12,
						simulateTouch : false

					},
					// when window width is <= 740
					740: {
						initialSlide : option,
						freeMode: true,
						spaceBetween : 6,
						slidesPerView:'auto',
						visibilityFullFit: true,
						simulateTouch : true
					}
				},
				onProgress: function (swiper) {
					if(swiper.slides.length <= 6){
						_target.addClass("hideBtn");
					}else{
						_target.removeClass("hideBtn");
					}
				}
			});
		}		
	});

}

function touchHandler(event)
{

	var touches = event.changedTouches,
		first = touches[0],
		type = "";

	switch(event.type)
	{
		case "touchstart": type = "mousedown"; break;
		case "touchstart": type = "mousedown"; break;
		case "touchmove":  type="mousemove"; break;
		case "touchend":   type="mouseup"; break;
		default: return;
	}

	var simulatedEvent = document.createEvent("MouseEvent");

	var mult = 2;

	if( navigator.userAgent.match(/Android/i) ) {
		mult = 10;
	}

	simulatedEvent.initMouseEvent(type, true, true, window, 1,
		first.screenX, first.screenY,
		(first.clientX * mult), (first.clientY * mult), false,
		false, false, false, 0/*left*/, null);
	first.target.dispatchEvent(simulatedEvent);
}

function functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {

	for (var i = 0; i < arraytosearch.length; i++) {
		if (arraytosearch[i][key] == valuetosearch) {
			return i;
		}
	}
	return null;
}


(function ( $, responsive ) {
	
	
	$(document).ready(function(){
		// init
		
		// Responsive L:PC, M:Tablet, S:Mobile
		var responsiveType = "L";
		responsive.addListener( 'resize-width', function (e) {
			responsiveType = e.responsiveType;
		});
		
		// Tab
		$(document).on('keyup', '.vr360Exterior [role="tab"]', function(e){
			var keyCode = e.keyCode || e.which;//키보드 코드값  
			if(keyCode == 39 || keyCode ==	40){// 오른쪽방향키 이거나 아래 방향키
				e.preventDefault();
				$(this).next().attr('aria-selected', true).addClass("on").siblings().removeClass("on").attr('aria-selected', false);
				$(this).next().find("a").focus();
			}
			if(keyCode == 37 || keyCode ==38){// 왼쪽방향키 이거나 위쪽 방향키
				e.preventDefault();
				$(this).prev().attr('aria-selected', true).addClass("on").siblings().removeClass("on").attr('aria-selected', false);
				$(this).prev().find("a").focus();

			}	
			if(keyCode == 35){//end 키를 눌렀을 때
				e.preventDefault();
				var tabLast = $(".tabBox .tabWrap .tabArea .tab").last();
				tabLast.attr('aria-selected', true).addClass("on").siblings().removeClass("on").attr('aria-selected', false);
				tabLast.find("a").focus();
			}
			if(keyCode == 36){//home키를 눌렀을 때
				e.preventDefault();
				var tabFirst = $(".tabBox .tabWrap .tabArea .tab").first();
				tabFirst.attr('aria-selected', true).addClass("on").siblings().removeClass("on").attr('aria-selected', false);
				tabFirst.find("a").focus();
			}

		});

		// tab 요소에 클릭 이벤트를 추가한다.
		$(document).on('click', '.vr360Exterior [role="tab"]', function(e) {
			e.preventDefault();
			var targetTab = $(this);
			var targetTabArea = targetTab.closest(".tabArea");
			var selectedId;
			var link = $(this).attr("href") || $(this).children("a").attr("href");
            var linkState = link.substring(0,1) == "#"? true:false;

			if(responsiveType === "S"){
				if($(targetTabArea).hasClass("open")){
					targetTab.attr('aria-selected', true).addClass("on").siblings().attr('aria-selected', false).removeClass("on");
					selectedId = "#"+targetTab.attr('aria-controls');
					
					$(selectedId).addClass('on').siblings().removeClass('on');

					targetTabArea.removeClass("open");

                    if(!linkState){
						document.location.href = link;
                    }
				} else {
					targetTabArea.addClass("open");
				}

			} else {
				targetTab.attr('aria-selected', true).addClass("on").siblings().attr('aria-selected', false).removeClass("on");
				selectedId = "#"+targetTab.attr('aria-controls');
				
				$(selectedId).addClass('on').siblings().removeClass('on');

                if(!linkState){
                    document.location.href = link;
                }
			}
		});

		$(window).resize();
	});

})( jQuery, hmc.responsive );



"use strict";
var handleType = "lhd"; //fixed
var exPath = handleType + '/ex/'; //exterior folder name
var inPath = handleType + '/in/'; //interior folder name;

var EXcolorName = new Array();
var INcolorName = new Array();

var carProduct;

function setData(){
	if(arguments){
		this.code        = arguments[0] ? arguments[0] : "";
		this.displayName = arguments[1] ? arguments[1] : "";
		this.icon        = arguments[2] ? arguments[2] : "";
		this.iconAlt     = arguments[3] ? arguments[3] : "";
		this.path      = arguments[4] ? arguments[4] : "";
	}
}

function setOption(){
	if(arguments){
		this.code        = arguments[0] ? arguments[0] : "";
		this.img         = arguments[1] ? arguments[1] : "";
		this.icon        = arguments[2] ? arguments[2] : "";
		this.iconAlt     = arguments[3] ? arguments[3] : "";
		this.displayName = arguments[4] ? arguments[4] : "";
		this.preview     = arguments[5] ? arguments[5] : "";
	}
}

function fn_get_360ImageData(pwrtrnseq){
	console.log("fn_get function");
	var dataUrl = "/wsvc/in/pip/vr360/list.html";
	var v = pwrtrnseq;
	
	$.ajax({
		type: "GET",
		url: dataUrl,
        data: {
        	seq: v
        },
		dataType : 'json',
		async: false,
		success: function(resData) {
			var retData = resData.data;
			if(retData){
				if(retData.rootPath){
					console.log(retData)
					var imageRoot = retData.rootPath;
					var pathx;
					
					if($("body").hasClass("mobile")) {
						imageRoot += "";  //mobile�때 경로
						pathx = "/mob/"
					}else{
						pathx = "/pc/"
					}
					
					imageRoot += "/";
					if(retData.exterior){

						var obj = retData.exterior;
						for(var i in obj){
							
							var exFilePath = obj[i].folder + pathx + obj[i].folder + "_0.png";
							var wheelItem = [];
//							console.log("exFilePAth :: "+exFilePath);
//							console.log(imageRoot);
//							console.log(exPath);
//							for(var j in obj[i].wheel){
////								wheelItem[j] = new setOption(
////												obj[i].wheel[j].code,
////												imageRoot + exPath + obj[i].wheel[j].folder + exFilePath,
////												obj[i].wheel[j].image,
////												obj[i].wheel[j].imageAlt,
////												obj[i].wheel[j].displayName);
////							}//wheel
////							
//							wheelItem[j] = new setOption(
//									obj[i].code,
//									imageRoot + exFilePath,
//									obj[i].image,
//									obj[i].imageAlt,
//									obj[i].displayName);
//				}//wheel
							console.log(wheelItem[j]);
							EXcolorName[i] = new setData(
											obj[i].code,
											obj[i].displayName,
											obj[i].image,
											obj[i].imageAlt,
											imageRoot + exFilePath);
						}
						console.log(EXcolorName[i]);
						//console.log(EXcolorName[i]);
						//exterior
					}//retData.exterior

					if(retData.interior){
						var obj = retData.interior;
						for(var i in obj){
							var inFilePath =  "/" + obj[i].folder + "/" + obj[i].folder;
							var arTexture = [];
							//console.log("inFilePath :: "+inFilePath);
							for(var j in obj[i].texture){
								arTexture[j] = new setOption(
												obj[i].texture[j].code
												, imageRoot + inPath + obj[i].texture[j].folder + inFilePath + ".jpg"
												, obj[i].texture[j].image
												, obj[i].texture[j].imageAlt
												, obj[i].texture[j].displayName
												, imageRoot + inPath + obj[i].texture[j].folder + inFilePath + "_preview.jpg"
												);
								//console.log(arTexture[j]);
							}//texture
							INcolorName[i] = new setData(
												obj[i].code,
												obj[i].displayName,
												obj[i].image,
												obj[i].imageAlt,
												arTexture);
						}//for i
					}//retData.interior
			   }//retData.rootPath

			}//retData
		}//success
	}); //ajax
}

function initVrPowertrainTrimList(){

	$.ajax({
        type:"GET",
        url: "/wsvc/in/pip/common/powertraintrim/list.html",
        data: {
        	codeType:carProduct
        },
        cache: false,
        success: function (jdata) {
			var tabBoxUL = $('div.vr360Exterior div.tabBox ul.tabArea.colLg6');
			tabBoxUL.empty();
			console.log(jdata);
			if(jdata.length < 1){
				//tabBoxUL.append('<li class="tab col" role="tab" aria-controls="section2" aria-selected="false"><a class="link" href="javascript:;">${"msg_no_trim_information" @ i18n, context="scriptString", locale=inheritedPageProperties.jcr:language}</a></li>');
            } else {
				$.each(jdata, function(key, val){
					var clsStr = "";
					var isSel  = "false"
					if(key == 0){
						getVrContents(val.value);
						//clsStr = "on";
						//isSel  = "true";
					}
					if(jdata.length > 1){
						//tabBoxUL.append('<li class="tab col '+clsStr+'" role="tab" aria-controls="section'+(key+101)+'" aria-selected="'+isSel+'"><a class="link" href="javascript:;" value="'+val.value+'">'+val.text+'</a></li>');
					}
				});
			}
        },
        /* error: function(data) {
			alert("msg_error_powertrain_trim");
        } */
    });	
}

function getVrContents(pwrtrnseq){
	EXcolorName = [];
	//360vr
	if($(".vr360Exterior").length){
		fn_get_360ImageData(pwrtrnseq);
		
		if(EXcolorName.length > 0){
			cubeExterienceCustomiz('exterior','0','0');
			$(".vr360Exterior .chooseColors").removeClass("hide");
		}
	}	
}

$(document).ready(function(){
	carProduct= $('.vr360Exterior').attr('data-attr-carProduct');
	console.log(carProduct);
	// Trim... Selectbox...
	initVrPowertrainTrimList();

	// Trim Tab click event
	$(document).on('click', 'div.vr360Exterior div.tabBox ul.tabArea.colLg6 li.tab.col', function(){
		var seq = $(this).children('a').attr('value');
		getVrContents(seq);
	});
});

$(window).load(function(){
	$('.btnPanoVRStart').click(function(){
		_trackEvent(
	$.extend(_dl, {
       exterior_color_name : $('.colorName').text(),
		exterior_wheel_name : "", // 360VR / Exterior View 
		//interior_color_name : "INTERIOR_COLOR_NAME", // 360VR / Interior View 
		//interior_texture : "INTERIOR_TEXTURE", // 360VR / Interior View 
        //exterior_color_name : EXcolorName[0].displayName, // 360VR / Exterior View
		page_event : {
			content_view_360vr : true, // 360VR View 
		}
	})
);

	});
});