/**
 * CciFrameworkUrl
 * 
 * Defines the servlet location for fetching the JSON city list.
 */
var CciFrameworkUrl = "//framework.cox.com/presentation/rest/3.0/locations/cities/";

/**
 * @class CCIPF
 * 
 * Creates the CCIPF framework API object
 * 
 * Revision History
 * 
 * 	v1.0: Initial API creation.
 * 	v1.1: Added support for handing both TSW and Emergence Header/Footer Styles.
 * 	v1.2: Added new 'isResponsive' flag to load responsive header and footer. Made header/footer optional.
 * 	v1.3: Added support to load header/footer 2nd time if it fails.
 */
var CCIPF = window.CCIPF = new function() {
	// prevent console.log errors in IE8
	if (!(window.console && console.log)) {
		console = {
			log: function(){}
		};
	}
	
	var errorCounter = 0;
	var errorContent = "<div class='pf-error'>We're sorry, we can't find this part of the page right now.</div>";
	var loaderContent = "<div class='pf-loader pf-loader-active'></div>";
	
	var tswJsUrl				= "//images.cox.com/presentation/tsw/residential/js/presentation.js.jgz";
	var tswCssUrl				= "//images.cox.com/presentation/tsw/residential/css/presentation.css.jgz";
	var tswCssResponsiveUrl	= "//images.cox.com/presentation/tsw/residential/css/presentation-responsive.css.jgz";
	var emergenceJsUrl		= "//images.cox.com/presentation/emergence/corp/en/js/gnav.js.jgz";
	var emergenceCssUrl		= "//images.cox.com/presentation/emergence/corp/en/css/gnav.css.jgz";
	
	// default header content (if ajax fails)
	var defaultHeaderContent = "" +
		"<div class=\"pf-constrain-width pf-tsw\">" +
		"	<div id=\"pf-header\"><\/div>" +
		"	<div id=\"pf-nav\" class=\"pf-nav\">" +
		"		<ul class=\"pf-nav-groups\">" +
		"			<li class=\"pf-nav-logo\">" +
		"				<a href=\"https:\/\/www.cox.com\/residential\/home.html\"><img src=\"\/\/images.cox.com\/presentation\/tsw\/residential\/img\/interface\/header\/logo-cox.png\" alt=\"Cox Communications\"><\/a>" +
		"			<\/li>" +
		"			<li class=\"pf-nav-group\">" +
		"				<ul class=\"pf-nav-items\">" +
		"					<li class=\"pf-nav-item\"><a href=\"https:\/\/store.cox.com\/residential-store\/shop.cox\" title=\"Shop\">Shop<\/a><\/li>" +
		"					<li class=\"pf-nav-item\"><a href=\"https:\/\/www.cox.com\/resaccount\/home.cox\" title=\"My Account\">My Account<\/a><\/li>" +
		"					<li class=\"pf-nav-item\"><a href=\"https:\/\/webmail.cox.net\" title=\"WebMail\">WebMail<\/a><\/li>" +
		"					<li class=\"pf-nav-item\"><a href=\"http:\/\/myconnection.cox.com\" title=\"My Connection\">My Connection<\/a><\/li>" +
		"					<li class=\"pf-nav-item\"><a href=\"https:\/\/www.cox.com\/residential\/support.cox\" title=\"Support\">Support<\/a><\/li>" +
		"				<\/ul>" +
		"			<\/li>" +
		"			<li class=\"pf-nav-group pf-nav-triggers\">" +
		"				<a class=\"pf-toggle pf-nav-trigger-contact\" href=\"https:\/\/www.cox.com\/residential\/support\/contact-us.cox\" title=\"Contact\">Contact<\/a>" +
		"			<\/li>" +
		"		<\/ul>" +
		"	<\/div>" +
		"<\/div>";

	// build end date variable for footer
	var now = new Date();
	var endYear = now.getFullYear();

	// default footer content (if ajax fails)
	var defaultFooterContent = "" +
		"<div id=\"pf-footer\">" +
		"	<!-- top footer -->" +
		"	<div class=\"pf-top-footer\">" +
		"		<div class=\"pf-top-footer-inner pf-constrain-width\">" +
		"			<!-- footer column content -->" +
		"			<div class=\"pf-footer-content pf-clearfix\">" +
		"				<ul>" +
		"					<li class=\"pf-footer-content-header\">I want to...<\/li>" +
		"					<li><a href=\"https:\/\/www.cox.com\/ibill\/home.cox\" title=\"View &amp; Pay My Bill\">View &amp; Pay My Bill<\/a><\/li>" +
		"					<li><a href=\"https:\/\/www.cox.com\/resaccount\/home.cox\" title=\"Manage My Account\">Manage My Account<\/a><\/li>" +
		"					<li><a href=\"https:\/\/webmail.cox.net\" title=\"Check My WebMail\">Check My WebMail<\/a><\/li>" +
		"				<\/ul>" +
		"				<ul>" +
		"					<li class=\"pf-footer-content-header\">&#160;<\/li>" +
		"					<li><a href=\"https:\/\/www.cox.com\/residential\/support.cox\">Get Support for My Home Services<\/a><\/li>" +
		"					<li><a href=\"https:\/\/www.cox.com\/business\/support.cox\">Get Support for My Business Services<\/a><\/li>" +
		"					<li><a href=\"https:\/\/www.cox.com\/aboutus\/contact-us\/cox-centers.html\">Find a Retail Location<\/a><\/li>" +
		"				<\/ul>" +
		"				<ul class=\"pf-footer-skip-col\">" +
		"					<li class=\"pf-footer-content-header\">&nbsp;<\/li>" +
		"				<\/ul>" +
		"				<ul class=\"pf-footer-skip-col\">" +
		"					<li class=\"pf-footer-content-header\">Shop<\/li>" +
		"					<li><a href=\"https:\/\/store.cox.com\/residential-shop\/shop.cox\" title=\"TV\">TV<\/a><\/li>" +
		"					<li><a href=\"https:\/\/store.cox.com\/residential-shop\/shop.cox?hsi=w\" title=\"Internet\">Internet<\/a><\/li>" +
		"					<li><a href=\"https:\/\/store.cox.com\/residential-shop\/shop.cox?dt=w\" title=\"Home Phone\">Home Phone<\/a><\/li>" +
		"					<li><a href=\"https:\/\/store.cox.com\/store\/ordernow.cox\">Cox Business Services<\/a><\/li>" +
		"				<\/ul>" +
		"			<\/div>" +
		"		<\/div>" +
		"	<\/div><!-- \/top footer -->" +
		"	<!-- bottom footer -->" +
		"	<div class=\"pf-bottom-footer\">" +
		"		<div class=\"pf-bottom-footer-inner pf-constrain-width\">" +
		"			<!-- footer other businesses section -->" +
		"			<div class=\"pf-other-businesses pf-clearfix\">" +
		"				<!-- social media icons section -->" +
		"				<div class=\"pf-social-icons\">" +
		"					<a target=\"_blank\" href=\"http:\/\/www.youtube.com\/user\/CoxCommTV\" title=\"YouTube\" class=\"pf-social-you-tube\">YouTube<\/a>" +
		"					<a target=\"_blank\" href=\"https:\/\/www.facebook.com\/coxcommunications\" title=\"Facebook\" class=\"pf-social-facebook\">Facebook<\/a>" +
		"					<a target=\"_blank\" href=\"https:\/\/twitter.com\/coxcomm\" title=\"Twitter\" class=\"pf-social-twitter\">Twitter<\/a>" +
		"					<a target=\"_blank\" href=\"https:\/\/plus.google.com\/u\/0\/+coxcommunications\/posts\" title=\"Google+\" class=\"pf-social-google-plus\">Google+<\/a>" +
		"				<\/div>" +
		"			<\/div>" +
		"			<!-- section containing general info like policies, agreements and copyrights -->" +
		"			<div class=\"pf-general-info pf-clearfix\">" +
		"				<div class=\"pf-copyright\">" +
		"					&copy; 1998-" + endYear + " Cox Communications, Inc." +
		"				<\/div>" +
		"			<\/div>" +
		"		<\/div>" +
		"	<\/div>" +
		"	<!-- \/bottom footer -->" +
		"<\/div>";
		
		
	/**
	 * CCIPF.init
	 */
	this.init = function(headerUrl, footerUrl, isResponsive) {
		console.log("CCIPF.init");
		
		// set up header container if url is defined
		if (headerUrl != "") {
			this._initHeader(headerUrl);
		}
		// set up footer container if url is defined
		if (footerUrl != "") {
			this._initFooter(footerUrl);
		}
		
		// set up loading of appropriate framework css and js files
		if (headerUrl.indexOf("tsw") > 0 || footerUrl.indexOf("tsw") > 0) {
			this._CCIURL = tswJsUrl;
			if (isResponsive == "true") {
				// For prototypes only to also load presentation.css because these only get built in the presentation cvs module
				// Need to remove this comment line and _loadCss below when added to the presentation cvs module.
				this._loadCss(tswCssUrl, this._loadCCICssFailure);

				this._CCIcssURL = tswCssResponsiveUrl;
			} else {
				this._CCIcssURL = tswCssUrl;
			}
		// backwards compatibility with gnav design (emergence)
		} else {
			this._CCIURL = emergenceJsUrl;
			this._CCIcssURL = emergenceCssUrl;
		};

		this._loadCss(this._CCIcssURL, this._loadCCICssFailure); // load the framework css file
		this._loadJS(this._CCIURL, this._loadJSSuccess, this._loadCCIJSFailure); // load the framework js file
	};

	/**
	 * _script
	 */
	this._script = null;
	
	/**
	 * _currentUrl
	 * 
	 * Get the current url from the browser (encoded) and remove bad url characters.
	 */
	this._currentUrl = function() {
		var pageUrl = window.location.href;
		
		// remove invalid characters creeping up in some urls causing 403 errors to idm
		pageUrl = pageUrl.replace("'", ""); // remove any tick from the url
		pageUrl = pageUrl.replace("%27", ""); // remove any encoded tick from the url
		
		return encodeURIComponent(pageUrl);
	};
	
	/**
	 * _initHeader
	 * 
	 * Create the CoxPFHeader header div and load the throbber.
	 */
	this._initHeader = function(headerUrl) {
		console.log("CCIPF._initHeader");
		this.headerDiv = "CoxPFHeader";

		// create the header div at the top of the body DOM
		var bodyTop = document.body.children[0];
		var bodyTopElem = document.createElement("div");
		bodyTopElem.id = this.headerDiv;
		document.body.insertBefore(bodyTopElem, bodyTop);

		// add the loading animation into the header
		document.getElementById(this.headerDiv).innerHTML = loaderContent;

		// get the current page url and add it as a query param to the header
		this.headerUrl = headerUrl + ((headerUrl.indexOf('?') == -1) ? '?' : '&') + '_pf.myurl=' + this._currentUrl();
	};
	
	/**
	 * _initFooter
	 * 
	 * Create the CoxPFFooter footer div and load the throbber.
	 */
	this._initFooter = function(footerUrl) {
		console.log("CCIPF._initFooter");
		
		this.footerDiv = "CoxPFFooter";

		// create the footer div at the bottom of the body DOM
		var bodyBotElem = document.createElement("div");
		bodyBotElem.id = this.footerDiv;
		document.body.appendChild(bodyBotElem);

		// add the loading animation into the footer
		document.getElementById(this.footerDiv).innerHTML = loaderContent;

		this.footerUrl = footerUrl;
	};

	/**
	 * _loadCss
	 * 
	 * Load any external Css files and add to the HTML HEAD and issue a failure callback if it fails.
	 */	
	this._loadCss = function(url, fail) {
		console.log("CCIPF_loadCss");
		
		var head = document.getElementsByTagName("head")[0];
		if (!head) {
			fail();
			return;
		}
		this._loadCCICssFailure = fail;
		this._css = document.createElement('link');
		this._css.rel = 'stylesheet';
		this._css.href = url;
		head.appendChild(this._css);
	};
	
	/**
	 * _loadCCICssFailure
	 * 
	 * Display an error in the header if the external Css fails to load instead of displaying the actual header.
	 */
	this._loadCCICssFailure = function() {
		console.log("CCIPF_loadCCICssFailure");
		
		document.getElementById(CCIPF.headerDiv).innerHTML = errorContent;
	};

	/**
	 * _loadJS
	 * 
	 * Load any external JavaScript files and add to the HTML HEAD and issue a success or failure callback.
	 */
	this._loadJS = function(url, succ, fail) {
		console.log("CCIPF_loadJS");
		
		var head = document.getElementsByTagName("head")[0];
		if (!head) {
			fail();
			return;
		}
		this._loadJSSucc = succ;
		this._loadJSFail = fail;
		this._script = document.createElement('script');
		this._script.type = 'text/javascript';
		this._script.onload = succ;
		this._script.onerror = fail;
		this._script.onreadystatechange = function() {
        	if (this.readyState == 'loaded' || this.readyState == 'complete') {
				CCIPF._loadJSSucc();
        	}
    	};
		this._script.src = url;
		head.appendChild(this._script);
	};
	
	/**
	 * _loadCCIJSFailure
	 * 
	 * Display an error in the header if the external JavaScript fails to load instead of displaying the actual header.
	 */
	this._loadCCIJSFailure = function() {
		console.log("CCIPF_loadCCIJSFailure");
		
		document.getElementById(CCIPF.headerDiv).innerHTML = errorContent;
	};

	/**
	 * _loadJSSuccess
	 * 
	 * Load the header and footer files if the external JavaScript files have loaded successfully.
	 */
	this._loadJSSuccess = function() {
		console.log("CCIPF_loadJSSuccess");

		if (CCIPF.headerUrl) {
			CCIPF._loadComponentXHR(CCIPF.headerUrl, CCIPF.headerDiv);
		}
		
		if (CCIPF.footerUrl) {
			CCIPF._loadComponentXHR(CCIPF.footerUrl, CCIPF.footerDiv);
		}
	};

	/**
	 * _loadComponentXHR
	 * 
	 * Load an html file and inject the contents into a given DOM element.
	 */
	this._loadComponentXHR = function(url, target) {
		console.log("CCIPF_loadComponentXHR: " + target);
		
		if (target === "CoxPFHeader" ) {
			var displayContent = defaultHeaderContent;
		}

		if (target === "CoxPFFooter" ) {
			var displayContent = defaultFooterContent;
		}
		
		var contentRequest = CCIPF._createCORSRequest("get", url);
		if (contentRequest) {
			contentRequest.onload = function() {
				document.getElementById(target).innerHTML = contentRequest.responseText;
				console.log("CCIPF content loaded for: " + target);
				if (target == "CoxPFHeader") addCoxHeaderListeners();
				if (target == "CoxPFFooter") addCoxFooterListeners();
			};
			contentRequest.onerror = function() {
				console.log("CCIPF content error for: " + target);
				
				// sometimes the request comes back with a 302 so we need to try to load it again to prevent the error
				if (errorCounter < 1) {
					console.log("CCIPF trying again for: " + target);
					CCIPF._loadComponentXHR(url, target);
					errorCounter += 1;
				} else {
					errorCounter = 0; // reset counter so header and footer counts stay separate
					console.log("CCIPF quitting load for: " + target);
					document.getElementById(target).innerHTML = displayContent;
				}
				
			};
			contentRequest.timeout = 10000;
			contentRequest.ontimeout = function () {
				console.log("CCIPF content timeout for: " + target);
				document.getElementById(target).innerHTML = displayContent;
			};
			contentRequest.send();
		} else {
			console.log("CCIPF load content failure");
			document.getElementById(target).innerHTML = displayContent;
		}
	};

	/**
	 * _createCORSRequest
	 * 
	 * XDomain Ajax Method 
	 */		
	this._createCORSRequest = function(method, url) {
		console.log("CCIPF_createCORSRequest");
		
		var xhr = new XMLHttpRequest();
		if ("withCredentials" in xhr){
			xhr.open(method, url, true); // XHR for Chrome/Safari/Firefox
			xhr.withCredentials = true; // Allows for cookie sharing
		} else if (typeof XDomainRequest != "undefined"){ //IE: http://msdn.microsoft.com/en-us/library/cc288060%28VS.85%29.aspx
			xhr = new XDomainRequest();
			if (xhr) {
				xhr.open(method, url);
			} else {
				console.log("XDomainRequest error");
			}
		} else {
			xhr = null;
		}
		return xhr;
	};
	
};