/* 
 *  This script is used for image replacement on H1 HTML elements.
 *  This script preloads an image for replacement, 
 *  loads that image as a css bg image on the H1
 *	adds a class to the span to hide it off the page
 */

/* ---------- GLOBALS START ---------- */
var theHOne;
var theSpan;
var theText;
var theImageFolder = 'appearance/images/titles/';
var theSeason;
var theUrl;
var theImage = new Image();

/* ---------- GLOBALS END ---------- */


/* ---------- EXCUTION FUCNTION START ---------- */
// on load execution function
function go() {
	// get elements
	//check if both span and h1 are present
	if(getPageElements()){
		getPageSeason();	
		// get image
		imagePreload('.gif', theSeason);
	}
	else {
		// no h1 or span on page
		return;
	}
}
/* ---------- EXCUTION FUCNTION END ---------- */

/* ---------- PAGE FUCNTIONS START ---------- */

// get elements
function getPageElements() {
	// get h1 by tag
	var theH1s = document.getElementsByTagName('h1');
	// check h1 exsists
	if((document.getElementsByTagName('h1').length < 1)) {
		return false;
	}
	for(var x = 0; x < theH1s.length; x++) {
		// set h1 to global var
		theHOne = theH1s[x];
	}
	if(theHOne.firstChild.nodeType != 1) {
		return false;
	}
	// set span inside h1 to global var
	theSpan = theHOne.firstChild;
	// get text inside span
	var theTxt = theSpan.firstChild.nodeValue.toLowerCase();
	// test for ampersands in h1 text
	var regExp = new RegExp(/& /gi);
	if(regExp.test(theTxt)) {
		// remove ampersand
		theTxt = theTxt.replace(regExp, '');
	}
	// replace spaces with dashes
	theTxt = theTxt.replace(/\s/gi, '-');
	// set text to global var
	theText = theTxt;
	return true;
}

//function to get the page season - used for selection of image colour
function getPageSeason() {
	var thePage = document.getElementById('page-wrapper');
	var regExp = new RegExp('summer');
	if((regExp.test(thePage.className))) {
		// page is summer
		theSeason = 'title-sum-';
	}
	else {
		// deafult is winter
		theSeason = 'title-win-';
	}
}

// get image
function imagePreload(fileType, season) {
	addEvent(theImage, 'load', bgImageSet, false);
	// concat elemets to get image url
	theUrl = theImageFolder + theSeason + theText + fileType;
	// create new image based on concat
	theImage.src = theUrl;
}

// function to add event listener regardless of browser 
// el is the DOM element, 
// eType is the event type, 
// fn is the function to execute and uC is the propogation type - true to propogate, false to not
function addEvent(el, eType, fn, uC) {
    if (el.addEventListener) {
        el.addEventListener(eType, fn, uC);
    }
    // IE Specific
    else if (el.attachEvent) {
		el.attachEvent('on' + eType, fn);
    }
    else {
		el['on' + eType] = fn;
    }
}
// set image
function bgImageSet(e) {
	var defaultImageHeight = 36;
	var theHeightNoTag = 37;
	var thePaddingNoTag = 44;
	var theHeightWithTag = 81;
	// there is a tag line, set this styling
	//alert(theHOne.firstChild.nextSibling);
	if(theHOne.firstChild.nextSibling != null){
		// set image as bg on global h1
		theHOne.style.backgroundImage = 'url(' + theUrl + ')';
		theHOne.style.backgroundRepeat = 'no-repeat';
		if(theHOne.className == 'double-height-title'){
			theHOne.style.height = theHeightNoTag + 'px';
			theHOne.style.paddingTop = (thePaddingNoTag * 2) + 'px';
		}
		else {
			theHOne.style.height = theHeightNoTag + 'px';
			theHOne.style.paddingTop = thePaddingNoTag + 'px';
		}
		// hide span
		hideSpan();
	}
	// there is NO tag line, set this styling
	else {
		// set image as bg on global h1
		theHOne.style.backgroundImage = 'url(' + theUrl + ')';
		theHOne.style.backgroundRepeat = 'no-repeat';	
		theHOne.style.height = theHeightWithTag + 'px';
		// hide span
		hideSpan();
	}
}

// remove span
function hideSpan() {
	// set class on span
	theSpan.className = 'accessibility';
}
	
/* ---------- PAGE FUCNTIONS END ---------- */

//window.onload = go; CALLED FROM IMAGE-SELECTOR