/*global gw$*/

var Cerise = Cerise || {};

Cerise.widget = (function() {
	'use strict';

	var api = {};
	var endpoint = '/nav';
	var widgetXHR;
	var _opts = {
		baseURL: '//marvel.com',
		useIFrameTracking: false,
		includeNavFtr: true,
		includeNavTop: true,
		includeLogin: true,
		includeAds: true,
		shouldLoadJS: true,
		shouldLoadCSS: true,
		shouldLoadJanrain: true,

		selectors: {
			navTop: '#navigation-container-nav-top',
			navFtr: '#navigation-container-nav-ftr'
		},

		currentSection: null,
		adContext: 'default',
		footerAdOptions: null,
		settings: null // used to populate _qs
	};
	var _qs = {
		nav_top_include_search: true,
		nav_top_include_social: true,

		nav_ftr_include_search: true,
		nav_ftr_include_links: true,
		nav_ftr_include_social: true,
		nav_ftr_include_legals: true,

		/**
		** No Default
		home_url: null,
		nav_ftr_custom_terms: null,
		**/

		// Populated from _opts
		include_nav_ftr: null,
		include_nav_top: null,
		nav_top_include_login: null,
		nav_ftr_include_ads: null,
		adContext: null,

		nav_top_small: true, // NOT SUPPORTED
		exclude_avatar: false // NOT SUPPORTED
	};
	var url;
	var numAssets = 0;
	var navigationResponse;

	var assetsURLs;

	var load = api.load = function( options ) {
		if( options && options.baseURL ) {
			for( var key in options ) {
				_opts[ key ] = options[ key ];
			}

			if( _opts.includeNavFtr || _opts.includeNavTop ) {
				_qs.include_nav_ftr = _opts.includeNavFtr;
				_qs.include_nav_top = _opts.includeNavTop;
				_qs.nav_top_include_login = _opts.includeLogin;
				_qs.nav_ftr_include_ads = _opts.includeAds;
				if( _opts.includeAds ) {
					_qs.adContext = _opts.adContext;
				}

				if( _opts.settings ) {
					for( var setting in _opts.settings ) {
						_qs[ setting ] = _opts.settings[ setting ];
					}
				}
				//console.log( 'marvel-nav-widget.js/load qs:' );
				//console.log( _qs );

				url = _opts.baseURL + endpoint;
				url = _appendQueryStrings( url, _qs );
				_makeJSONPRequest( url, _onEndPointLoad );
			}
		}
	};

	function _makeJSONPRequest( url, callback ) {
		//var now = new Date();
		//var name = 'mvl_nav_widget_' + now.getTime();
		var name = 'mvl_nav_widget';
		if( url.match( /\?/ ) ) {
			url += '&callback=' + name;
		} else {
			url += '?callback=' + name;
		}

		var script = document.createElement( 'script' );
		script.type = 'text/javascript';
		script.src = url;

		window[ name ] = function( data ){
			callback.call( window, data );
			document.getElementsByTagName( 'head' )[ 0 ].removeChild( script );
			script = null;
			delete window[ name ];
		};

		document.getElementsByTagName( 'head' )[ 0 ].appendChild( script );
	}

	function _loadAssets( urls ) {
		if( _opts.shouldLoadJS || _opts.shouldLoadCSS ) {
			//console.log( 'marvel-nav-widget.js/_loadAssets' );
			for( var key in urls ) {
				var assetList = urls[ key ];
				for( var i = assetList.length - 1; i >= 0; i-- ) {
					var path = assetList[ i ];
					var asset;
					switch( key ) {
						case 'js':
							if( _opts.shouldLoadJS ) {
								asset = document.createElement( 'script' );
								asset.type = 'text/javascript';
								asset.src = path;
								asset.addEventListener( 'load', _onAssetLoad );
							}
						break;
						case 'css':
							if( _opts.shouldLoadCSS ) {
								asset = document.createElement( 'link' );
								asset.rel = 'stylesheet';
								asset.type = 'text/css';
								asset.href = path;
								_checkIfStyleheetIsLoaded( asset );
							}
						break;
					}
					if( asset ) {
						document.getElementsByTagName( 'head' )[ 0 ].appendChild( asset );
						numAssets++;
					}
				}
			}
		}
		if( numAssets === 0 ) {
			_appendAndInitNavigation();
		}
	}

	function _checkIfStyleheetIsLoaded() {
		var el  = document.createElement( 'nav' );
		el.setAttribute( 'id', 'mvl-nav-top' );
		document.getElementsByTagName( 'body' )[ 0 ].appendChild( el );
		window.Juggernaut = null;
		var checks = 0;
		var check = window.setInterval(
			function() {
				//console.log( checks );
				//console.log( getComputedStyle( el )[ 'box-sizing' ] );
				if( getComputedStyle( el )[ 'box-sizing' ] === 'border-box' || checks > 60 ) {
					window.clearInterval( check );
					_onAssetLoad();
					document.getElementsByTagName( 'body' )[ 0 ].removeChild( el );
				}
				checks++;
			},
			200
		);
	}

	function _appendAndInitNavigation() {
		//console.log( 'marvel-nav-widget.js/_appendAndInitNavigation' );
		if( window.gw$ && navigationResponse ) { //Gwen/gw$ should get loaded with the navigation JavaScript
			var gw$topContainer;
			var gw$ftrContainer;
			if( navigationResponse.navTop ) {
				gw$topContainer = gw$.findEl( _opts.selectors.navTop );
				gw$.setElHTML( gw$topContainer, navigationResponse.navTop );
			}
			if( navigationResponse.navFtr ) {
				gw$ftrContainer = gw$.findEl( _opts.selectors.navFtr );
				gw$.setElHTML( gw$ftrContainer, navigationResponse.navFtr );
			}
			if( ( gw$topContainer || gw$ftrContainer ) && Cerise.mvlNav ) {
				var navOptions = {
					useIFrameTracking: _opts.useIFrameTracking,
					currentSection: _opts.currentSection,
					hasUserMenu: _opts.includeLogin,
					hasNavFtr: _opts.includeNavFtr,
					hasNavTop: _opts.includeNavTop,
					includeAds: _opts.includeAds,
					shouldLoadJanrain: _opts.shouldLoadJanrain,
					janrainOptions: navigationResponse.janrain
				};
				if( navigationResponse.otherURLs ) {
					navOptions.insiderURL = navigationResponse.otherURLs.loyaltyUrl;
					navOptions.iframeTrackingURL = navigationResponse.otherURLs.tealium;
					if( navigationResponse.siteNameURLs ) {
						navOptions.resendConfirmationURL = '//' +
							navigationResponse.siteNameURLs.marvel +
							navigationResponse.otherURLs.resendConfirmationUrl;
					}
				}
				if( navigationResponse.userInfo ) {
					navOptions.userEmail = navigationResponse.userInfo.emailAddress;
					navOptions.userLoggedIn = true;
				} else {
					navOptions.userLoggedIn = false;
				}
				if( _opts.includeAds ) {
					navOptions.footerAdOptions = _parseFooterAdOptions();
				}
				Cerise.mvlNav.init( navOptions );
			}
		}
	}

	function _parseFooterAdOptions() {
		var data;
		if( _opts.footerAdOptions ) {
			data = _opts.footerAdOptions;
		}

		if(
			_opts.adContext &&
			navigationResponse.adData
		) {
			data = data || {};

			data.networkCodeBase =
				data.networkCodeBase ||
				'/' + navigationResponse.adData.networkId + '/' + navigationResponse.adData.baseSite + '/';

			if(
				navigationResponse.adData.footer ||
				data.bannerSect ||
				navigationResponse.adData.overrideSect
			) {
				data.bannerSect = data.bannerSect ||
					navigationResponse.adData.overrideSect ||
					navigationResponse.adData.footer.sect;
			}

			if(
				navigationResponse.adData.footerLinks ||
				data.boxSect ||
				navigationResponse.adData.overrideSect
			) {
				data.boxSect = data.boxSect ||
					navigationResponse.adData.overrideSect ||
					navigationResponse.adData.footerLinks.sect;
			}
		}
		//console.log( 'marvel-nav-widget.js/_parseAdData data:' );
		//console.log( data );
		return data;
	}

	function _appendQueryStrings( url, qsObj ) {
		url += '?';
		var first = true;
		for( var key in qsObj ) {
			key = _fixedEncodeURIComponent( key );
			var value = _fixedEncodeURIComponent( qsObj[ key ] );
			if( !first ) {
				url += '&';
			}
			url += key + '=' + value;
			first = false;
		}
		return url;
	}

	function _fixedEncodeURIComponent( str ) {
		return encodeURIComponent( str ).replace(
			/[!'()*]/g,
			function( c ) {
				return '%' + c.charCodeAt( 0 ).toString( 16 );
			}
		);
	}

	function _onEndPointLoad( response ) {
		//console.log( 'marvel-nav-widget.js/_onEndPointLoad response:' );
		//console.log( response );
		navigationResponse = response;
		Cerise.otherURLs = response.otherURLs;
		Cerise.siteNameURLs = response.siteNameURLs;
		Cerise.analyticsData = response.analyticsData;
		Cerise.adData = response.adData;
		assetsURLs = response.assets;
		_loadAssets( assetsURLs );
	}

	function _onAssetLoad() {
		//console.log( 'marvel-nav-widget.js/_onAssetLoad' );
		numAssets--;
		if( numAssets === 0 ) {
			_appendAndInitNavigation();
		}
	}
	if( window.onMarvelNavigationWidget ) {
		window.onMarvelNavigationWidget( api );
	}
	return api;
})();