/* When the site is marked as responsive_site, this responsive.js is loaded in the header */
var g_viewportWidth = 0;
var g_viewportHeight = 0;
var g_currSiteBodyDivWidth=0;
var g_isMobileMenuOpen=0; 
var g_mobileMenu=null;
var g_mobileMenuItems=null; 
var g_pageHasSlideshows=false;  
var g_origSiteBodyDivWidth=0; // set below 
var g_currTopMenuTableWidth=0;// may or may not exist
var g_currFooterMenuDivWidth=0; // may or may not exist
var g_screenWidthChangedFromOrig = false;
var g_screenGrewWider=false; 
var g_screenGrewNarrower=false;
var g_isMediumOrDesktopSize=true;
function responsive_init() {
	if(!isRespSite) return;
	setViewport(true); // returns current calculated width of SiteBodyDiv probably 1024 at first 
	g_origSiteBodyDivWidth=g_currSiteBodyDivWidth; 	// probably 1024 at first 
	g_mobileMenu = $("#topMenuMobile");
	g_mobileMenuItems = $("#topMenuMobileItems");
	setDevice(true); // true is first init
} 
function responsive_adjust() {
	if(!isRespSite) return;
	setViewport(false);// returns current calculated width of SiteBodyDiv  
	setDevice(false);  // false is not first init
}
function setViewport(init) {
	g_viewportWidth = $(window).width(); 
	g_viewportHeight = $(window).height();   
	if(!$("#SiteBodyDiv")) { console.log("PROBLEM: NO SiteBodyDiv on this page!"); return 0; } // SiteBodyDiv is on EVERY template, including cart pages
	g_currSiteBodyDivWidth=$("#SiteBodyDiv").width();// calculated width 1024 (or whatever we last set it to)
	g_isMediumOrDesktopSize=true;
	if(g_viewportWidth <= g_mobileWidth && g_viewportWidth <= 450) g_isMediumOrDesktopSize=false;  
} 
function setDevice(init) {  
	setMainSiteElementWidths();
	if(isPho) changeToMobileDevice(init);
	else changeToComputer(init);	
	if(init||g_pageHasSlideshows) adjustSlideshowFrames(init);
	//if(typeof(isMenuPage) && isMenuPage==1) doLoadServiceMenu(true); // let's see if bxSlider handles this by itself  reload it like it's brand new
	//adjustSmBoxSizes();// (g_currSiteBodyDivWidth) service menu boxes and also new gallery boxes 
}  
function changeToMobileDevice(init) { // this function can be redefined in user header scripts to do certain things on transition to mobile		 
	if(g_isMobileMenuOpen) positionMobileMenu();// repositions and adjusts the width of the menu that is open already
	else closeMobileMenu(); // sets it closed, and enables clicks for opening it
} 
function changeToComputer(init) { // this function can be redefined in user header scripts to do certain things on transition from mobile   
	closeMobileMenu(); // sets it closed, 
	findTopMenuPlace(); // in cute_kart_net.js
} 
function setMainSiteElementWidths() { // this works in conjunction with mobile CSS at 620 to set tablet and wider phone widths etc prior to  
	if(g_viewportWidth<=g_mobileWidth) isPho=1; //global from templates - (is phone) 
	else  isPho=0;// global from templates (is not phone)   
	var useW=g_origSiteBodyDivWidth; 
	if(g_viewportWidth<=g_origSiteBodyDivWidth || isPho) useW=g_viewportWidth;
	if(!useW) return; // ??
	setTemplateWidths(useW); 
	g_currTopMenuTableWidth=0;
	if(isPho) return;
	// we are in computer mode, so we cannot have the top menu table width greater than the SiteBodyWidth, they then must be the same
	 
	var tmt=$("#topMenuTable");// may or may not exist on a main site
	if(!tmt) return;  
	g_currTopMenuTableWidth=$(tmt).width(); 
	if(g_currTopMenuTableWidth>useW) setTemplateWidths(g_currTopMenuTableWidth,true);  ;// the width we use cannot be less than the width of the top menu when we are in computer type mode (maybe a narrower tablet, but still computer mode)  
}  
function setTemplateWidths(useW,redoing) {
	if(!redoing) redoing=false;
	$("#SiteBodyDiv").width(useW);
	$("#SiteVeryTopDiv").width(useW); 
	$("#PageBodyDiv").width(useW);
	$("#footerCredits").width(useW);
	//$(".kristiTopSubDiv").width(useW); // this isn't a responsive idea, it's only on w3now.com  
	var hasPbtAttr;
	$("#PageBodyTable").each(function() { 
		hasPbtAttr = doesAttributeExist(this,"data-orig-pbt-width"); // doesAttributeExist() now in util.js
		if( $(this).width() > useW ) { // do not change the PageBodyTable width unless it's now greater than the site width 
			if(!hasPbtAttr) $(this).attr("data-orig-pbt-width", $(this).width()); // save the original width, do not repeat 
			$(this).width(useW); 
		}
		else if(hasPbtAttr) $(this).width( $(this).attr("data-orig-pbt-width") ); // save it back to it's original width
	});
	//console.log("setting site body width to: " +useW + " redo? " +redoing); 
	g_currSiteBodyDivWidth=useW; 
	g_screenWidthChangedFromOrig = (g_currSiteBodyDivWidth != g_origSiteBodyDivWidth);
	g_screenGrewWider = ( g_screenWidthChangedFromOrig && g_currSiteBodyDivWidth > g_origSiteBodyDivWidth);
	g_screenGrewNarrower = (!g_screenGrewWider && g_screenWidthChangedFromOrig && g_currSiteBodyDivWidth < g_origSiteBodyDivWidth);
}
function positionMobileMenu() {
	$(g_mobileMenu).css({"width":$(window).width()+"px"}); // be sure the width of the main menu container is right 
	if(!g_mobileMenuItems) return;	 
	var left = ($(window).width() - $(g_mobileMenuItems).outerWidth()) / 2;// outerWidth(true)  includes any margin on the table, we don't want to do
	if(left<0) left=0; 
	$(g_mobileMenuItems).css({"margin-left":left+"px"}); 
}
function openMobileMenu() {  
	g_isMobileMenuOpen=1; 
	$(g_mobileMenu).css({"width":$(window).width()+"px"}); // be sure the width of the main menu container is right
	positionMobileMenu(); // position it properly, before showing it
	$(g_mobileMenuItems).slideDown(900, "linear", function() { 
	   // Animation complete. 
	});		
	$(g_mobileMenu).off("click").on("click", function() {
		closeMobileMenu();
	}); 
}
function closeMobileMenu() {
	if(g_isMobileMenuOpen) {; 
		$(g_mobileMenuItems).slideUp("fast", "linear", function() { 
		    // Animation complete.  
			//$(g_mobileMenuItems).css({"display":"none"});// close mobile menu "margin-left":"0px",
		});   
	}
	g_isMobileMenuOpen=0; 
	if(!isPho||!g_mobileMenu) return; // we are not in mobile mode right now, so we will not be using the mobile menu
	$(g_mobileMenu).off("click").on("click", function() {
		openMobileMenu();
	});
} 
function doSlideshowAdjustment(elem,init) {	
	var currW=$(elem).width()*1; // get calculated width in integer pixels
	var currH=$(elem).height()*1; // get calculated width in integer pixels
	if(!currW || !currH) return;
	var pct=0; 
	if(init || !doesAttributeExist(this,"data-orig-pct")) {
		pct=(currH/currW); // 200h/1024w=.1953       or if H>W then it gives: 1024h/200w=5.1200 
		$(elem).attr("data-orig-pct", pct.toFixed(4));// toFixed() returns a string so remember to *1 to make it numeric when we want to use this later 
		$(elem).attr("data-orig-width", currW);
		$(elem).attr("data-orig-height", currH);
	} 
	var origW=$(elem).attr("data-orig-width")*1;
	//var origH=$(elem).attr("data-orig-height")*1;
	if(g_screenWidthChangedFromOrig) $(elem).css({"width":"100%"}); // if the template size has been reduced,or if template has been increased(someone turned device sideways), keep it at 100%  
	else $(elem).css({"width":origW+"px"}); 
	// fine tune the adjustments:
	if($(elem).css("width")>g_currSiteBodyDivWidth) $(elem).css({"width":g_currSiteBodyDivWidth+"px"});// be sure it does not somehow outgrow the current site body width
	if(!g_screenGrewWider && $(elem).css("width")>origW) $(elem).css({"width":origW+"px"});// be sure it's not bigger than original, unless the screen width grew	
	if(isK&&0)console.log("responsive just set iframe id: "+ $(elem).attr("id") +" 's width to: "+$(elem).css("width")); //if you want the information whether it comes from the style attribute or a stylesheet, jQuery's CSS function does just that 
	var h;
	if(typeof(elem.contentWindow.resizePhotoWidth)=="function") {
		// this function will probably NOT exists on init (because iframe is not loaded yet to have the function inside of it), but we can calc it below for now, and the frame will run this itself, once it is loaded and finalize the height
		h=elem.contentWindow.resizePhotoWidth(1,g_viewportWidth); // 1 means we called this function down inside this iframe, from responsive.js 
		if(h) {
			$(elem).css({"height":h+"px"});
			return;
		}
	} 
	// calculate frame height for the moment, if we do not have function inside frame to calc it for us for now
	if(!pct) pct=$(elem).attr("data-orig-pct")*1; // we must make it a number with 1
	if(!pct) return;// weird?
	// get newly assigned calculated width in pixels from above, so we can use it with pct to calculate height 
	h=($(elem).width() * pct) // calculate proper height now 
	h=h.toFixed(0);// round to nearest integer, toFixed returns a STRING, which is OK in this case:
	$(elem).css({"height":h+"px"});
	if(isK&&0)console.log("responsive just calculated iframe id: "+ $(elem).attr("id") +" 's height to: "+$(elem).css("height"));//if you want the information whether it comes from the style attribute or a stylesheet, jQuery's CSS function does just that   
}
function adjustSlideshowFrames(init) {// doing for slideshows (videos are done in a different way with class="videoSize" mobile = "100% )  
	if(!init && !g_pageHasSlideshows) return;	  
	$("iframe").each(function() { // for every iframe on the page 
		if(doesAttributeExist(this,"id") && $(this).attr("id").indexOf("w3scslideshow")==0) { // if it is a slideshow  (it could be a form)	
			doSlideshowAdjustment(this,init);	  
		}
	});
} 
/* this was an experiement that did not work, but the code below worked well
function adjustSmBoxSizes() {// NEW Service Menu boxes and mobile Gallerys
	var sm2table=$("table#sm2"); // all sm2Outerboxes are in sm2 table 
	if(!sm2table) return;
	var smbox=$(".sm2OuterBox"); // if no sm boxes (service menus or new gallery pages)  on page, return
	if(!smbox) return; 
	var smboxwidth = $(smbox).width(); // calculated width 256 
	if(!smboxwidth) return;  
	// WORK ON CENTERING BOXES ACROSS
	var nbrboxesacross = parseInt(g_currSiteBodyDivWidth / smboxwidth);
	var sm2wid=parseInt(smboxwidth * nbrboxesacross);
	if(!sm2wid) return;
	//console.log("setting sm2 table width to: " +sm2wid +" there are " + nbrboxesacross + " in a SiteBodyDiv width of: " +g_currSiteBodyDivWidth+ ", the width of each box is: " + smboxwidth);
	//$(sm2table).width(sm2wid).css({"margin-left":"0"});
	//if(g_currSiteBodyDivWidth>=g_origSiteBodyDivWidth) $(sm2table).css({"margin-left":"auto","margin-right":"auto"});
	//$(sm2table).attr("align","center");
	// NOW LET'S WORK ON BOX HEIGHT
	var mb = $(".sm2Scrollbox");
	if(!mb) return; 
	var viewportheight=$(window).height(); 
	var adjustedViewportHeight=viewportheight-35; // for our purposes here we want to subtract some so to leave some room at the bottom	
	var boxheight = $(mb).height();
	//console.log("adjustedviewport height is now: " + adjustedViewportHeight+ " and boxheight is: " + boxheight);	
	if(boxheight <= adjustedViewportHeight) { // checking the first one in this class, since we keep them all the same   
		if(!doesAttributeExist(mb,"data-orig-heightpx")) return; // all good the window height has never gone smaller (as in someone had turned their phone sideways and how has it durned back upright ) 
		var origBoxHeight = $(mb).attr("data-orig-heightpx") * 1; // 350 we must make it a number
		var useBoxHeight=origBoxHeight;
		if(adjustedViewportHeight < origBoxHeight) useBoxHeight=adjustedViewportHeight
		//console.log("new USE HEIGHT is: "+useBoxHeight);  
		if(useBoxHeight > boxheight) {   
			$(".sm2Scrollbox").each(function() {   
				$(this).height(useBoxHeight);
				//console.log("RESETTING NEW BOX HEIGHT to: " +useBoxHeight);
			});	 
		}
		return; 
	}	 
	//console.log("box  height: "+boxheight+" is now greater than the viewport height: " + adjustedViewportHeight);
	// the box height is now > greater than the window height (someone turned their phone sideways from vertical), so adjust it
	var newheight = adjustedViewportHeight;
	$(".sm2Scrollbox").each(function() {  
		if(!doesAttributeExist(this,"data-orig-heightpx")) {
			//console.log("setting attribute data-orig-heightpx: "+$(this).height() );
			$(this).attr("data-orig-heightpx",$(this).height() );
		}
		$(this).height(newheight);
		//console.log("setting NEW BOX HEIGHT to: " +newheight);
	});
}*/
// WEB FORMS DO NOT STAY IN IFRAMES ON MAIN REAL SITE, THEY ARE SERVED VIA srv/productsWebForms.cfm