/**
 * 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.
 */
var CCIPF = window.CCIPF = new function() {
	// prevent console.log errors in IE8
	if (!(window.console && console.log)) {
		console = {
			log: function(){}
		};
	}
	
	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";

	/**
	 * 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;
	
	/**
	 * _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=' + encodeURIComponent(window.location.href);
	};
	
	/**
	 * _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);
		
		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() {
				document.getElementById(target).innerHTML = errorContent;
			};
			contentRequest.timeout = 20000;
			contentRequest.ontimeout = function () {
				console.log("CCIPF content timeout");
				document.getElementById(target).innerHTML = errorContent;
			};
			contentRequest.send();
		} else {
			console.log("CCIPF load content failure");
			document.getElementById(target).innerHTML = errorContent;
		}
	};

	/**
	 * _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;
	};
	
};