﻿//Javascript 6_7_10
//Copyright PcKernow 2010
//All PcKernow methods can be used with reference to PcKernow Ltd. 

//Methods to change styles dynamically.
//Alert methods are used for debugging purposes

//Operation is to identify if user has set a cookie with their preferences, 
//read this cookie in if set and set screen up accordingly
//If no cookie screen size is read and page set up to match
//User can then specify screen sizes and alter text fonts to suit

//Last operation is to save screen requirements to cookie with a time out

var CssCookieName = "CssSet=";
var SelectedStyle;  //Css Sheet to be used
//var to store font values
var P_TagSize, A_TagSize, H1_TagSize, H2_TagSize, H3_TagSize;
var UserMadeChanges = "false";
var CookieDataWritten = "false";

//On page load 
//First Method identifies if any cookies are present 
//if not the style is selected by screen size
//if cookies are present we then test to see if our cookie is present
//if not, we then set style based on screen size
//if our cookie present we then read in the information and set the styles accordingly


function OnPageLoad()
{
	var StyleCookieRead = "False";
	var CookieInformationOut;
	var CookiesEnabled = CheckIfCookiesEnabled();
	//alert("SETTING UP");
	if (CookiesEnabled == "YesCookies" )
	{
		//Look for our cookie
		var CssCookiePresent = CookiesPresentCheck(CssCookieName);
		//alert(CssCookiePresent);
		if (CssCookiePresent == "Present")
		{
			//alert("cookie present");
			//Find our cookie start pos
			var startpos = FindCookieStart(CssCookieName);
			if(startpos != 0)
			{
				//Find end pos
				var endpos = FindCookieEnd(CssCookieName, startpos);
				var AnyInfo = CookieContainUsefulInfo(CssCookieName, startpos, endpos);
				//Read in cookie information
				if(AnyInfo == "Present")
				{
				CookieInformationOut = ReadCookieInformation(startpos,endpos);
				//alert("CookieInformationOut " + CookieInformationOut);
				
				//if values contain valid data
				if (CookieInformationOut != undefined && CookieInformationOut != "")
					{
						//alert("Breaking Up " + CookieInformationOut);
						//Digest information by splitting cookie terms up
						var CookieItems = ReadInStyleInformation(CookieInformationOut);
						//alert("CookieItems " + CookieItems);
						
						
						if(CookieItems != "Error")
						{
						//alert("CookieItems " + CookieItems);
							//if data split not a failure
							//Set style sheets
						 StyleCookieRead = StyleProcess(CookieItems);
							//alert("StylesProcessed " +  StyleCookieRead);

						}
					}
				}
			}	
		
		}

	}
	if(StyleCookieRead == "False")
	{
		//if a style has not been read
		//catch here and set the style based on screen size
		//alert("No cookies baby");
		//Check now for any variables in the url - if they are ours set page accorindingly
		var StyleItems = ReadUrlData();
		if (StyleItems != "NotPresent")
		{
			//alert("Detected Url Data");
			StyleCookieRead = StyleProcess(StyleItems);
		
		}
		
	
	}
	if(StyleCookieRead == "False")
	{
	//if no style information available, read screen size and process
		ReadScreenSize();
	}
	
	//Write Font Sizes to screen
	//flush variable 
	CookieInformationOut = "";
	DisplayCurrentFontSizes();
	return;	
}
////////////////////////////////
//read any information attached with url

function ReadUrlData()
{
	var UrlStyleOut = "NotPresent"; 
	//alert("Reading URL");
	//read in current location
	var UrlStyle = window.location.search;
	//check for our information by splitting on ?
	//url should have ? cover both options
	 if (UrlStyle.substring(0, 1) == '?') 
	 {
    		UrlStyle = UrlStyle.substring(1);
  		}
  		//split information into sub parts
  	//Check if got some information
  	
  		
  		//alert(UrlStyle);
  		
	UrlStyleElements = ReadInStyleInformation(UrlStyle);
	if(UrlStyleElements != "Error")
	{
		UrlStyleOut = UrlStyleElements;
		return UrlStyleOut;
	
	}

	return UrlStyleOut;

}

///////////////
//Process Style information
function StyleProcess(StyleItems)
{
	//Process Styles
	//alert(StyleItems);
	var StyleCookieRead = "False";
	//check got valid values for security and safety
	
	if (StyleItems[0] == "Small800Css" || StyleItems[0] == "Medium1200Css" || StyleItems[0] == "Large1500Css")
	{
		//alert("Stylepassed");
		SelectCssStyle(StyleItems[0]);
		//alert("Number 5 " + isNaN(StyleItems[5]));
		//alert(isNaN(StyleItems[1]) + isNaN(StyleItems[2]) + isNaN(StyleItems[3]) + isNaN(StyleItems[4]) + isNaN(StyleItems[5]));
		if((isNaN(StyleItems[1]) == false) && (isNaN(StyleItems[2]) == false) && (isNaN(StyleItems[3]) == false) && (isNaN(StyleItems[4]) == false) && (isNaN(StyleItems[5]) == false))
			{
							
							//alert("P Value " + StyleItems[4]);
							//Take values out of array
					
							P_TagSize = StyleItems[1];
							A_TagSize = StyleItems[2];
							H1_TagSize = StyleItems[3];
							H2_TagSize = StyleItems[4];
							H3_TagSize = StyleItems[5];
	
							//Now set tag value according to stored vale
	
							ChangeTagFontSize("p", P_TagSize);
							ChangeTagFontSize("a", A_TagSize);
							ChangeTagFontSize("h1", H1_TagSize);
							ChangeTagFontSize("h2", H2_TagSize);
							ChangeTagFontSize("h3", H3_TagSize);
							
							//Success has been achieved change style select result
							StyleCookieRead = "True";
							 //alert("Writing " + SelectedStyle + ": "+ P_TagSize + ": "+ A_TagSize + ": "+ H1_TagSize + ": "+ H2_TagSize + ": "+ H3_TagSize);
							// alert("StylesProcessed " +  StyleCookieRead);
				
	
		 }
	}
							
	return StyleCookieRead;
}

//Identify the screen size and display appropiate CssStyle to suit.

function ReadScreenSize()
{
	screenWidth = screen.width;
	//alert(screenWidth);
	if (screenWidth <= 1190)
	{
	SelectCssStyle("Small800Css");
	return;
	}
	if (screenWidth <= 1490)
	{
	SelectCssStyle("Medium1200Css");
	return;
	}
	else{ SelectCssStyle("Large1500Css"); return;}
	

}

///////////////
//If user changes screen width apply correct formatting

function UserChangeStyle(SelectedStyleIn)
{
//alert("User Changed Style");

SelectCssStyle(SelectedStyleIn);
UserMadeChanges = "true";
DisplayCurrentFontSizes();
return;

}

//////////////////////////////
//Change page style accorrding to style sheet selected

function SelectCssStyle(SelectedStyleIn)
{
	//Catch an error in SelectedStylesheet name and return
	//alert(SelectedStyleIn);
	var StyleSet = "false";
	if (SelectedStyle != "")
	{
	//Read in all available style sheets
		var i, Css_Links;
		//read in array of links
		
		//alert("Hi");
		for(i= 0, Css_Links = document.getElementsByTagName("link"); i < Css_Links.length; i++ )
		{
			//identify stylesheet links by reading the rel attribute
			//alert("SelectedStyle " + SelectedStyle);
			
			//Check got a title attribute and css
			if (Css_Links[i].getAttribute("title") != -1)
			{	
			//disable style sheets until find one to use	
			 	Css_Links[i].disabled = true;					
			 if (Css_Links[i].title == SelectedStyleIn)
			 	{
			 	//if Slected style sheet matches passed in
			 	//alert ("Oh Yeah");
			 	Css_Links[i].disabled = false;
			 	StyleSet = "true";
			 	//alert("StyleSet " + StyleSet);
			 	}
			 }
		}
	}
	if (StyleSet == "false") 
	{
		//alert("Still false");
		//catch if all style sheets have failed -set to smallest screen size
		ReadScreenSize();
		
	}
			//store selected style sheet for next browsing session
			//if going to store - now doing based on screen dimensions
	SelectedStyle = SelectedStyleIn;
	
	//Set tag values for text size helps with change tag size if value present already
	//Note problem in keeping sync - any additional sites MAY have to be changed here
		if (SelectedStyle == "Small800Css")
				{
					P_TagSize = 12;
					A_TagSize = 12;
					H1_TagSize = 16;
					H2_TagSize = 14;
					H3_TagSize = 14;				
				}
				
		if (SelectedStyle == "Medium1200Css")
				{
					P_TagSize = 14;
					A_TagSize = 14;
					H1_TagSize = 18;
					H2_TagSize = 16;
					H3_TagSize = 16;	
				
				}
		if (SelectedStyle == "Large1500Css")
		{ 
			//alert("SelectedStyle " + SelectedStyleIn);
		//Large Screen size resoultion
					P_TagSize = 18;
					A_TagSize = 18;
					H1_TagSize = 22;
					H2_TagSize = 20;
					H3_TagSize = 20;	
		 }
		 //alert("Writing " + SelectedStyle + ": "+ P_TagSize + ": "+ A_TagSize + ": "+ H1_TagSize + ": "+ H2_TagSize + ": "+ H3_TagSize);
	
	//StyleForCookie = CreateFullStyleList(SelectedStyle, P_TagSize, A_TagSize, H1_TagSize, H2_TagSize, H3_TagSize);	
	//alert(StyleForCookie);
	//var WritingSuccess = CssWriteCookie(StyleForCookie);
	UserMadeChanges = "false";

	return;
}



//////////////////////////////
//Identify cookie information parts
//split using ':' marks

function ReadInStyleInformation(CookieInformationIn)
{
	var ResultOfTest = "Error";
	//alert("Read in Style " + CookieInformationIn);
	
	CookieInformationIn = unescape(CookieInformationIn);
	//alert("Read in Style " + CookieInformationIn);

	if (CookieInformationIn == "")
	{
	return ResultOfTest;
	}

//split cookie information up
		var CookieItems = CookieInformationIn.split(":");
		//alert(CookieItems.length);
		//alert("CookieItems " + CookieItems);
//Set Stylesheet based on stylesheet selected
	//CATCH AN ERROR HERE
	
	if (CookieItems.length != 6)
	{
		return ResultOfTest;
	}
	
//Return cookie items for processing
	return CookieItems;	
}

/////////////////////////

//The following method changes the tag values to the correct font size based on the stored
//cookie values.
//if fonts sizes have not been changed then the default css values will be used

function ChangeTagFontSize(TagIn, FontSizeValue)
{
	//read in all tags with value of TagIn
	//alert("Changing Tag " + TagIn +" : " + FontSizeValue);
	
	
	
	var Paras =  document.getElementsByTagName(TagIn);
	//alert(Paras.length);

	if (FontSizeValue != 0)
	{
	for(t=0; t<Paras.length; t++)
		{
	//change value
		//alert("change value");
		Paras[t].style.fontSize = FontSizeValue + "px";
		
		//alert(Paras[t].style.fontSize);
		}
	}

return;

}
///////////////////////////////
//Method to store current font sizes on web page
//this helps us in cookie creation, or passing to next web page
//use url variables if no cookies to pass information through

function DisplayCurrentFontSizes()
{
	//Get hold of table on web page
	//alert(SelectedStyle + "P: "+ P_TagSize + "A: "+ A_TagSize + "H1: "+ H1_TagSize + "H2: "+ H2_TagSize + "H3: "+ H3_TagSize);
	var StyleSettingsTable = document.getElementById("StyleSettingsTable");
	//Write style information into table
		StyleSettingsTable.rows[0].cells[1].childNodes[0].data = P_TagSize;	
		StyleSettingsTable.rows[1].cells[1].childNodes[0].data = A_TagSize;	
		StyleSettingsTable.rows[2].cells[1].childNodes[0].data = H1_TagSize;	
		StyleSettingsTable.rows[3].cells[1].childNodes[0].data = H2_TagSize;
		StyleSettingsTable.rows[4].cells[1].childNodes[0].data = H3_TagSize;
		StyleSettingsTable.rows[5].cells[1].childNodes[0].data = SelectedStyle;
	//alert("Writing Success");



}

/////////////////

function ReadCurrentFontSizes()
{
	//Get hold of table on web page
	//alert(SelectedStyle + ": "+ P_TagSize + ": "+ A_TagSize + ": "+ H1_TagSize + ": "+ H2_TagSize + ": "+ H3_TagSize);
	var StyleSettingsTable = document.getElementById("StyleSettingsTable");
	//Read table information in
		P_TagSize = StyleSettingsTable.rows[0].cells[1].childNodes[0].data;	
		A_TagSize = StyleSettingsTable.rows[1].cells[1].childNodes[0].data;		
		H1_TagSize = StyleSettingsTable.rows[2].cells[1].childNodes[0].data;	
		H2_TagSize = StyleSettingsTable.rows[3].cells[1].childNodes[0].data;
		H3_TagSize = StyleSettingsTable.rows[4].cells[1].childNodes[0].data;
		SelectedStyle = StyleSettingsTable.rows[5].cells[1].childNodes[0].data;
		//alert(SelectedStyle + ": "+ P_TagSize + ": "+ A_TagSize + ": "+ H1_TagSize + ": "+ H2_TagSize + ": "+ H3_TagSize);
	//alert("Writing Success");
	return;
}

/////////////////////

//Method to change tag sizes 
//need to write out new value once completed

function ChangeFontSize(ChangeUpDownStr, TagValue)
{
	//alert("Test Size " + ChangeUpDownStr + TagValue);
	
//Make variable for tags
	if (ChangeUpDownStr == ""){return;}
	
	//CHECK WE HAVE A VALID HTML TAG WE CAN CHANGE FONT SIZE ON
	//If default set screen using screen size
	if (TagValue == "Default")
	{
		//Clear Cookie details and reset all
	
		ClearCssSettings();
		
		return;
	}
var NewFontSize;
		
if (TagValue == "p" || TagValue == "h1" || TagValue == "a" || TagValue == "h2" || TagValue == "h3")
	{
	
	//get all tags with tagvalue
	var Paras =  document.getElementsByTagName(TagValue);
	
	if (Paras.length > -1){
	//alert(TagValue);
	//See if a font-size has been set and identify which style sheet has been choosen
	
		var CurrentFontSize;
		//IF FONT SIZE HAS BEEN SET OUT OF CSS READ IN VALUE HERE
		if (Paras[0].style.fontSize) 
		{
			//alert("Size");
			//Read current fontsize
			CurrentFontSize = parseInt(Paras[0].style.fontSize.replace("px","")); //Remove the px value and convert to int
		
		}
		else 
		{
			//IF USER HAS NOT ALREADY CHANGED SIZE READ IN VALUE HERE 
			//NEED TO READ IN STYLES FOR OTHER TAGS LIKE a and h1  
			//alert("Getting Tag value");
			CurrentFontSize = CurrentFontSizeCal(TagValue);
			//catch an error
			//alert("CurrentFontSize " + CurrentFontSize);

			if (CurrentFontSize == undefined || CurrentFontSize == 0 || CurrentFontSize == null  || CurrentFontSize == "NotSet")
			{
			
			CurrentFontSize = 12;
			}
		}
	
	if(ChangeUpDownStr == "Smaller")
	{
		//Change Size down
		
		var DecreaseBy = 2;
		//Check not going to below 0
		NewFontSize = CurrentFontSize - DecreaseBy;
		
		if (NewFontSize != 0)
		{
		
			for(t=0; t<Paras.length; t++)
			{
				Paras[t].style.fontSize = NewFontSize + "px";
		
			}
		}
		UserMadeChanges = "true";
		
	}

	
	if(ChangeUpDownStr == "Larger")
	{
		//Change Size Up
		var IncreaseBy = 2;
		NewFontSize = CurrentFontSize + IncreaseBy;
		for(t=0; t<Paras.length; t++)
		{
			Paras[t].style.fontSize = NewFontSize + "px";
		
		}
		UserMadeChanges = "true";
	
	}
  }
	
}	

//Update table with new values updating tag values in the process

					switch(TagValue){
						case 'p': P_TagSize = NewFontSize; break;
						case 'a': A_TagSize = NewFontSize; break;
						case 'h1': H1_TagSize = NewFontSize; break;
						case 'h2': H2_TagSize = NewFontSize; break;
						case 'h3': H3_TagSize = NewFontSize; break;
						}
	
	DisplayCurrentFontSizes();
	UserMadeChanges = "true";
		
	
	return;

}

///////////////////

//Method to read current tag font size and return value

function CurrentFontSizeCal(TagValue)
{
//set default value to 12 - if any errors at least information should be displayed
	//alert("Calculate " + TagValue);
	var CurrentFontSize = "NotSet";
	var Paras =  document.getElementsByTagName(TagValue);
	
	//check document has these tags in it.
	if (Paras.length > -1)
	{
	
		if (Paras[0].style.fontSize) 
		{
		CurrentFontSize = parseInt(Paras[0].style.fontSize.replace("px","")); //Remove the px value and convert to int
		}
		else
		{
		//if font size not been set for whatever reason - use following sizes
			if (SelectedStyle == "Small800Css")
				{
					switch(TagValue){
						case 'p': CurrentFontSize = 12; break;
						case 'a': CurrentFontSize = 12; break;
						case 'h1': CurrentFontSize = 16; break;
						case 'h2': CurrentFontSize = 14; break;
						case 'h3': CurrentFontSize = 14; break;
					}				
				}
				
			if (SelectedStyle == "Medium1200Css")
				{
					switch(TagValue){
						case 'p': CurrentFontSize = 14; break;
						case 'a': CurrentFontSize = 14; break;
						case 'h1': CurrentFontSize = 18; break;
						case 'h2': CurrentFontSize = 16; break;
						case 'h3': CurrentFontSize = 16; break;	
					}
				
				}
			if (SelectedStyle == "Large1500Css")
				{ 
			//alert("SelectedStyle " + SelectedStyleIn);
		//Large Screen size resoultion
					switch(TagValue){
						case 'p': CurrentFontSize = 18; break;
						case 'a': CurrentFontSize = 18; break;
						case 'h1': CurrentFontSize = 22; break;
						case 'h2': CurrentFontSize = 20; break;
						case 'h3': CurrentFontSize = 20; break;
						}
		 		}
		
		}
		
	}
	//alert("CurrentFontSize " + CurrentFontSize);
	return CurrentFontSize;
}

/////////////////

//method to write cookie data including all style information.

function WriteStyleCookie()
{
	//test if cookies enabled
	//See if user made any changes - if not return without saving cookie
	//alert("WriteCookie");
	
	//************************
	
	var CookiesEnabled = CheckIfCookiesEnabled();
	
	ReadCurrentFontSizes();
	
	var CookieData = CreateFullStyleList();
	//alert("CookieData: " + CookieData);
	
	if( CookiesEnabled == "YesCookies")
	{
	//if cookies but user made no changes no point processing
		//alert("Cookie Enabled");
		if(UserMadeChanges == "false"){
			//alert("User not made any changes");
			CookieDataWritten = "True";
			return CookieData;
		}
		
		//form full cookie string
		
		//identify a cookie clear date
		var ExpireCookie = IdentifyCookieClearDate();
		//alert("Writing" + CssCookieName + " " + CookieData + " " + ExpireCookie);
		WriteCookie(CssCookieName, CookieData, ExpireCookie);
		CookieDataWritten = "True";
		return CookieData;

	}
		alert("CookieData2: " + CookieData);
		return CookieData;
}
/////////////////////

//Method to create string to save in cookie with all the selected fontsizes
//method takes in style sheet, and tag vales, creates full string, with tag and value
//styles are stored in the following format
//stylesheet:P_TagSize:A_TagSize:H1_Tag_Size:H2Tag_Size:H3_TagSize


function CreateFullStyleList()
{
	
	//alert("Create FulL " + stylesheet + ":" + P_TagSize + ":" + A_TagSize + ":" + H1_Tag_Size + ":" + H2Tag_Size + ":" + H3_TagSize);
	CompleteStyle = SelectedStyle + ":" + P_TagSize + ":" + A_TagSize + ":" + H1_TagSize + ":" + H2_TagSize + ":" + H3_TagSize;

	//alert(CompleteStyle);
	CompleteStyle = escape(CompleteStyle);
	//alert(CompleteStyle);
	
	return CompleteStyle;

}

////////////////
//method to clear user settings and insure no cookie stored
function ClearCssSettings()
{
	UserMadeChanges = "false";
	delete_cookie(CssCookieName);
	window.location.reload(true);
	//alert("Delete return");
	return;

}

//////////
//Method to pass data when user clicks on hyper link within site
//this method passes the style information via the url query string

function PageNavigation(UrlIn)
{
	//if user not made any changes then don't worry
	//return to browser
	//alert("InternalNav: " + UrlIn);
	//If back button pressed assign correct details to url
	if (UrlIn == "Exit") 
	{
		
		
		UrlIn = 'index.html';	
		
	}
	
	//write style to cookie or prepare url data
	var UrlStyle = WriteStyleCookie();
	
	//alert(UrlStyle);
	
	//if (CookieDataWritten = "false")
	//{
	//if no cookie written amend style unformation to url
	if(UrlStyle != undefined){
	UrlIn = UrlIn + "?" +  UrlStyle;
	}
	//}
	//navigate to new page
	//Clear cookie written check
	CookieDataWritten = "false";
	window.location = UrlIn;
	


}


