// Wherever possible, standard javascript (as opposed to jQuery) has been used to manipulate page content on initial page load. This has been done to avoid the dreaded FOUC (Flash Of Unstyled Content).

var winWidth=findWinWidth(990);// find current window width set default width to 990

winWidth=setResSplits(winWidth);

applyHTMLClass(winWidth);// apply HTML class as page is loading (to avoid FOUC)

function hideIDs(arrIDsToHide){
	// hide resize enabled images/image containers
	var IDCounter=0;
	var strID;
	var objTopImg;

	while(IDCounter<arrIDsToHide.length){
		strID=arrIDsToHide[IDCounter].replace('#','');
		objTopImg=document.getElementById(strID);

		if(objTopImg!=null){
			objTopImg.style.display='none';
		}

		IDCounter++;
	}
}

function findWinWidth(winWidth){
	// returns current browser window width
	if(document.body&&document.body.offsetWidth){
		winWidth=document.body.offsetWidth;
	}
	
	if(document.compatMode=='CSS1Compat'&&
		document.documentElement&&
		document.documentElement.offsetWidth){
			winWidth=document.documentElement.offsetWidth;
	}

	if (window.innerWidth&&window.innerHeight){
		winWidth=window.innerWidth;
	}

	return winWidth;
}

function applyHTMLClass(winWidth){
	//applies relevant class (based on browser window size) to HTML tag
	switch(winWidth){
		case 1680:
			document.documentElement.className+=' res1680';
			break;
		case 1280:
			document.documentElement.className+=' res1280';
			break;
	}
}

function setResSplits(winWidth){
	//setup predefined resolution splits
	if(winWidth>=1646){
		winWidth=1680;
	}
	else if	(winWidth>=1246&&winWidth<=1645){
		winWidth=1280;
	}
	else {
		winWidth=990;// 990 is default
	}

	return winWidth;
}

function enableResizeImages(strSelector,winWidth){
	//applies resize to those images that are flagged to use it
	var objImg=$(strSelector);

	var strImgSrc;
	var strDefaultImgSrc=new Array;
	var strFileName;
	var strFileExt;

	var regExFileName=/([a-z0-9\s\/\_\-]*)(\.[a-z]{3,4})$/i;
	var regExImgExt=/_[\0-9]{0,5}$/;

	objImg.each(function(i){
		strImgSrc=$(this).attr('src');
		strDefaultImgSrc[i]=strImgSrc;

		strFileName=strImgSrc.replace(regExFileName,'$1');//get image path/name without file extension
		strFileName=strFileName.replace(regExImgExt,'');//if resolution specific suffix is present, remove it

		strFileExt=strImgSrc.replace(regExFileName,'$2');//get file extension

		/*
		if(winWidth==0){//default screen size
			strImgSrc=strFileName+strFileExt;//so use default image
		}
		else {
			strImgSrc=strFileName+'_'+winWidth+strFileExt;//apply resolution specific suffix (e.g. '_1280')
		}
		*/

		strImgSrc=strFileName+'_'+winWidth+strFileExt;//apply resolution specific suffix (e.g. '_1280')

		$(this).attr('src',strImgSrc);//set image src to new image

		/*$(this).error(function(){//error handling - if no larger image available, then show default image
			$(this).attr('src',strDefaultImgSrc[i]);
		});*/
	});
	
}

function removeHTMLClasses(){
	//removes resolution specific classes from HTML otherwise whenever applyHTMLClass is called it will retain currently applied class and add another to the list. Not good.
	$('html').removeClass('res1280 res1680');
}

$(document).ready(function(){
	var strResizeImageSelectors='.resizeimg';//selectors to call resize image functionality on

	//these functions use jQuery so can only be called once DOM has loaded.
	enableResizeImages(strResizeImageSelectors,winWidth);//call on page load

	var tempWinWidth=setResSplits(winWidth);//temporary variable - used lower down to ensure that functions are only called when required

	$(window).resize(function(){//jQuery resize function - much easier/tidier than standard
		winWidth=$(window).width();//get Window width with jQuery

		if(setResSplits(winWidth)!=tempWinWidth){//only call these functions when resSplit has changed
			tempWinWidth=setResSplits(winWidth);//set new temporary variable

			removeHTMLClasses();

			applyHTMLClass(tempWinWidth);
			enableResizeImages(strResizeImageSelectors,tempWinWidth);
		}
	});
});