/**
* Central Javascript file used by the website currently relies on:
*
* BrowserDetect.js
* cookies.js
* CSSLoader.js
* md5.js
*
* Author: Andrew Powell, Copyright © 2008
* Version: 1.0
* Date: 01/08/2008
**/


var COOKIE_SDTC_MEMBERS_LOGIN = "sdtcMembersLogin";

/*
* Called when the window loads. Please make sure you use the following code in all subsequent pages that also need the window.onload functionality
*	var tmpWindowLoad = window.onload;
*	window.onload = function() {
*		if(tmpWindowLoad != undefined) {
*			tmpWindowLoad();
*		}
*	}
*/
window.onload = function() {
	float(document.getElementById("floaty"), 227, 0);
	checkBrowser();
	checkCookies();
	
	// find the styleSelection components and set the current style if any
	if(document.getElementById("styleSelection") != undefined) {
		
		// If false hide the component
		if(testPersistentCookie() == false) {
			document.getElementById("styleChangerPanel").style.display = "none";
		}
		
		// Load style selection
		var styleIndex = getCookieValue("sdtcStyle");
		var cssIndex = 9999;
		if(styleIndex != undefined) {
			cssIndex = parseInt(styleIndex);
		}
		document.getElementById("styleSelection").value = cssIndex;
	}
}

/*
* Check to see if the browser is compatible/tested, if not then display a warning floater
*/
function checkBrowser() {
	if(((isIE && Detector.getVersion() > 6) || isFirefox || isSafari || isOpera || isNavigator) == false) {
		//alert(this.agentString + "\n" + this.platform + "\n" + this.appName);
		var browserFloater = document.createElement("div");
		browserFloater.className = "browserFloater";
		
		var content = "<div class='browserWarningTitle'>Browser Note:</div><br/><div class='browserWarningText'>It is recommended that you use one of the listed browser below to view this page.<br/><br/>Firefox 3<br/>Internet Explorer 7<br/>Safari 3<br/>Navigator 9<br/>Opera 9</div>";
		browserFloater.innerHTML = content;
		document.body.appendChild(browserFloater);
	}
}

/*
* Check to see if cookies are enabled, if not then display a warning floater
*/
function checkCookies() {
	if(testPersistentCookie() == false) {
		var cookieFloater = document.createElement("div");
		cookieFloater.className = "cookieFloater";
		
		var content = "<div class='browserWarningTitle'>Cookie Note:</div><br/><div class='browserWarningText'>Please enable cookies otherwise this site may not function correctly</div>";
		cookieFloater.innerHTML = content;
		document.body.appendChild(cookieFloater);
	}
}

/*
* Fixes for internet explorer 6 only, concerning fixed positioning
* ##########################################################################
*/

/*
* Test to see if we are using an older version of Internet Explorer 6 and below.
* @param element The element that you wish to float
* @param elementHeight The elements height
* @param elementWidth The elements width
*/
function float(element, elementHeight, elementWidth) {
	// If we have internet explorer 6 then create a timer that adjusts the floater constantly
	if(isIE == true && Detector.getVersion() <= 6) {
		window.setInterval(function() { refreshFloat(element, elementHeight); }, 100);
	}
}

/*
* Continually move the element to give the illusion that the image is position: fixed
* @param element The element to position
* @param elementHeight The height of the element to position
*/
function refreshFloat(element, elementHeight) {
	// Set the style to be absolute
	element.style.position = "absolute";
	
	var width = document.documentElement.clientWidth;
	var height = document.documentElement.clientHeight;
	
	element.style.top = ((document.documentElement.scrollTop + height) - elementHeight) + "px";
	element.style.left = document.documentElement.scrollLeft + "px";
}

/*
* Create the Members login panel, floating div
*/
function membersLogin() {
	
	//new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
	
	if(testPersistentCookie() == false) {
		alert("In order to see this page you must enable cookies! please try again when you have done this");
		return;
	}
	
	var alreadyLoggedIn = getCookieValue(COOKIE_SDTC_MEMBERS_LOGIN);
	if(Boolean(alreadyLoggedIn) == true) {
		document.location.href = hex_md5("shrewsMembers") + ".html";
		return false;
	}
	
	var blurFill = document.createElement("div");
	blurFill.id = "blurFill";
	blurFill.className = "modalEffect";
	document.body.appendChild(blurFill);
	
	if(document.getElementById("floatingLogin")) {
		document.getElementById("floatingLogin").style.display = "block";
		return;
	}
	var floatingLogin = document.createElement("div");
	floatingLogin.id = "floatingLogin";
	floatingLogin.className = "loginFloater";
	
	var content = '<div class="loginFloater">';
	content += '<div class="topLoginPanel"></div>';
    content += '<div class="contentLoginPanel">';
    content += '<form id="loginForm">';
    content += '<fieldset>';
    content += '<legend>Members Login</legend>';
	content += '<dl>';
	content += '<dt>';
    content += '<label for="txtLoginName">Name: </label>';
	content += '</dt>';
    content += '<dd>';
    content += '<input type="text" id="txtLoginName" size="16" tabindex="1"/>';
    content += '</dd>';
	content += '<dt>';
	content += '<label for="txtLoginPassword">Password: </label>';
    content += '</dt>';
    content += '<dd>';
    content += '<input type="password" id="txtLoginPassword" size="16" tabindex="2"/>';
    content += '</dd>';
    content += '</dl>';
    content += '<div class="loginButtonCenter">';
    content += '<input type="button" value="Login" onclick="login()" class="inputButton" tabindex="3"/>&nbsp;';
	content += '<input type="button" value="Cancel" onclick="loginCancel()" class="inputButton" tabindex="4"/>';
    content += '</div>';
	
//content += '<br/>';
    content += '</fieldset>';
    content += '</form>';
    content += '</div>';
	
    content += '<div class="bottomLoginPanel"></div>';
    content += '</div>';
	
	floatingLogin.innerHTML = content;
	document.body.appendChild(floatingLogin);
	centerInWindow(document.getElementById("floatingLogin"), 220, 130);
	
	// Set focus on the name text field
	document.getElementById("txtLoginName").focus();
}

/*
* Called when the user clicks the Login button
* Uses the md5.js to hide name and password
*/
function login() {
	var name = document.getElementById("txtLoginName").value;
	var pass = document.getElementById("txtLoginPassword").value;
	// Check that the MD5 string match, signifying that the user has entered the correct credentials
	if(hex_md5(name) == "5107d7d3dd6084332c81ab07ff1a3cda" && hex_md5(pass) == "a1e034736c5bc129aae479c604ac0833") {
		document.getElementById("blurFill").style.display = "none";	
		document.getElementById("floatingLogin").style.display = "none";
		document.location.href = hex_md5("shrewsMembers") + ".html";
		// Store the logged in cookie for 1 hour
		writePersistentCookie(COOKIE_SDTC_MEMBERS_LOGIN, "true", "hours", 1);
		return false;
	}
	alert("Incorrect Details, Please Try Again!");
}

/*
* Called when the user wishes to logout of the members page
*/
function logout(forwardPage) {
	var alreadyLoggedIn = getCookieValue(COOKIE_SDTC_MEMBERS_LOGIN);
	if(Boolean(alreadyLoggedIn) == true) {
		deleteCookie(COOKIE_SDTC_MEMBERS_LOGIN);
	}
	document.location.href = forwardPage;
}

/*
* Called when the login fails, removes the floatingLogin div element
*/
function loginCancel() {
	document.getElementById("blurFill").style.display = "none";	
	document.body.removeChild(document.getElementById("blurFill"));
	
	document.getElementById("floatingLogin").style.display = "none";
	document.body.removeChild(document.getElementById("floatingLogin"));
}

/**
* A Method that centers the component in the browser window. Cycles through parent nodes to find any offset's that may interfear with alignment.
* @param {Object} element The element to center in the brower window e.g. a div element
* @param {int} width The width of the element if one is not defined - Note will not be able to read css width's
* @param {int} height The height of the element if one is not defined - Note will not be able to read css height's
*/
function centerInWindow(element, width, height) {
    if(element) {
        var elWidth = element.style.width || width;
        var elHeight = element.style.height || height;
		
		if(elWidth == undefined && elHeight == undefined) {
			alert("Please specify a width and height as the element does not contain one");
		}
		
        var bWidth = browserWidth();
        var bHeight = browserHeight();
        var leftOffset = 0;
        var topOffset = 0;
        var xParent = element.parentNode;
        while(xParent) {
            if(xParent.offsetLeft) {
                leftOffset += parseInt(xParent.offsetLeft);
            }
            if(xParent.offsetTop) {
                topOffset += parseInt(xParent.offsetTop);
            }
            xParent = xParent.parentNode;
        }
        element.style.left = ((parseInt(bWidth) / 2) - (parseInt(elWidth) / 2)) + "px"; 
        element.style.top = ((parseInt(bHeight) / 2) - (parseInt(elHeight) / 2)) + "px";
    } else {
        alert("Element does not exist!");
    }
}

/**
* Gets the current browsers width
* @return Number - The browsers width
*/
function browserWidth() {
    if(document.body.clientWidth) {
        return document.body.clientWidth;
    } else {
        return windowWidth = document.width;
    }   
}

/**
* Gets the current browsers height
* @return Number - The browsers height
*/
function browserHeight() {
	if(document.documentElement != undefined && document.documentElement.clientHeight != undefined) {
		return document.documentElement.clientHeight;
	} else {
		return window.innerHeight;
	}
	
    if(document.body.clientHeight) {
        return document.body.clientHeight;
    } else {
        return windowWidth = document.height;
    }   
}