//Jquery should already be loaded.
			//Just because IE incase the console doesn't exist (LTE IE9).
			var console = console ? console : {
				log: function () {},
				info: function () {}, 
				warn: function () {}, 
				error: function () {} 
			};
			jQuery(function () {
				//WARNING: THIS METHOD WILL NOT WORK IF YOU UPGRADE JQUERY TOO FAR
				//if( jQuery.browser.msie || ( jQuery.browser.version=='11.0' && jQuery.browser.mozilla )/* IE 11 is weird and reporting mozilla flag?.*/ ){
				if( window.document.documentMode ) {
					console.warn('Using Internet Explorer!');
					jQuery('#play-slider-1').on('change', function () {
						//console.log('Changed slider 1');
						navi_helper.pause_images(1);
						navi_helper.go_to_picture(1, jQuery(this).val() );
					});
					jQuery('#play-slider-2').on('change', function () {
						//console.log('Changed slider 2');
						navi_helper.pause_images(2);
						navi_helper.go_to_picture(2, jQuery(this).val() );
					});
				}else {
					jQuery('#play-slider-1').on('input', function () {
						//console.log('Changed slider 1');
						navi_helper.pause_images(1);
						navi_helper.go_to_picture(1, jQuery(this).val() );
					});
					jQuery('#play-slider-2').on('input', function () {
						//console.log('Changed slider 2');
						navi_helper.pause_images(2);
						navi_helper.go_to_picture(2, jQuery(this).val() );
					});
				}
			});
			
			
			var navi_helper = {
				current_page:1,
				min_page:1,
				max_page:7,
				contentSets:{
					0:0,
					1:1,
					
					2:2,
					3:3,
					4:4,
					5:5,
					6:5,
					7:5,
					
				},
				
				picRotName: '{0}map.jpg', //use replace{} 
				supportsTouch: (typeof Touch == "object"),
				
				
				contentSetInfo:{
				
				},	
				fps: 3, //show two frames every second. (1000 ms/#)
				my_timer: {
					1: null,
					2: null
				},
				
				dynamic_images:{ //You'll need to update if you want dynamic year and month. Currently hardcoded into feb 2015


				},
				
				//This module is for pictures only. (e.g. slide 4)
				pictureModule: {
					myFPS:1, //a picture will be shown ever ( 1000 / myFPS ) ms 
					picturePointer: {
						
						3: {
							imgID:'#set-3-dynamo-image',
							sliderID:'#picture-slider-set-3',
							imgSet:[
								'2010s_Map1_IceCovered',
								'2010s_Map2_w_SeasonalIce',
								'2010s_Map3_w_SporadicIce',
								'2010s_Map4_w_OpenWater',
							],
							legendSet:'#2010s-img-', //0
							currentPointer:0,
							syncToGraph: false,
						},
						4: {
							imgID:'#set-4-dynamo-image',
							sliderID:'#picture-slider-set-4',
							imgSet:[
								'1980s_Map1_IceCovered',
								'1980s_Map2_w_SeasonalIce',
								'1980s_Map3_w_SporadicIce',
								'1980s_Map4_w_OpenWater',
							],
							legendSet:'#1980s-img-',
							currentPointer:0,
							syncToGraph: false,
						},
					},
					pictureTimer: {
						//Slide number
						3:null,
						4:null
					},
					setLegendSet: function (setNum) {
						for(var i=0;i<this.picturePointer[setNum].imgSet.length;i++) {
							if( i <= this.picturePointer[setNum].currentPointer ) {
								jQuery(this.picturePointer[setNum].legendSet + i).show();
							}else{
								jQuery(this.picturePointer[setNum].legendSet + i).hide();
							}
						}
						return true;
					},
					resetImg: function (setNum){
						console.log('Resetting Image for set `',setNum,'`');
						this.picturePointer[setNum].currentPointer = 0;
						//var newSrc = navi_helper.picRotName.replace('{0}', this.picturePointer[setNum].imgSet[this.picturePointer[setNum].currentPointer] );
						var newSrc = this.picturePointer[setNum].imgSet[this.picturePointer[setNum].currentPointer] + '.png';
						
						jQuery(this.picturePointer[setNum].imgID).prop({
							src: 'https://polar-ice.org/wp-content/uploads/2018/05/' + newSrc
						});
						
						
						jQuery(this.picturePointer[setNum].sliderID).val(this.picturePointer[setNum].currentPointer);
						
						return this.setLegendSet(setNum);
						/*
						jQuery(this.picturePointer[setNum].imgID+'-title').text(
							this.picturePointer[setNum].imgSet[this.picturePointer[setNum].currentPointer]
						);
						*/
					},
					stopAll: function () {
						for(var i in this.pictureTimer) {
							if(this.pictureTimer[i]){
								this.pause(i);	
							}
							this.resetImg(i);
							
							/*if( this.picturePointer[i].syncToGraph ) {
								this.synchronizeGraph(i);
							}*/
							
						}
						
						return true;
					},
					play: function ( setNum ) {
						console.log('[Set: '+ setNum +'] Play');
						//let's stop whatever is going on
						this.pause(setNum);	
						
						if( this.pictureTimer[setNum] ) {
							console.log('Already playing...');
							return true;
						}
						
						this.pictureTimer[setNum] = setInterval( function () {
							
							//Make sure this works on other browsers.
							navi_helper.pictureModule.picturePointer[setNum].currentPointer++;
							if (
								navi_helper.pictureModule.picturePointer[setNum].currentPointer > navi_helper.pictureModule.picturePointer[setNum].imgSet.length-1
							) { 
								//If we go over to the next one, we'll stop here.
								navi_helper.pictureModule.picturePointer[setNum].currentPointer = navi_helper.pictureModule.picturePointer[setNum].imgSet.length-1;
								navi_helper.pictureModule.pause(setNum);
								return true;
							}
							
							//var newSrc = navi_helper.picRotName.replace('{0}', navi_helper.pictureModule.picturePointer[setNum].imgSet[navi_helper.pictureModule.picturePointer[setNum].currentPointer] );
							var newSrc = navi_helper.pictureModule.picturePointer[setNum].imgSet[navi_helper.pictureModule.picturePointer[setNum].currentPointer] + '.png';
						
							jQuery(navi_helper.pictureModule.picturePointer[setNum].imgID).prop({
								src: 'https://polar-ice.org/wp-content/uploads/2018/05/' + newSrc
							});
							
							navi_helper.pictureModule.setLegendSet(setNum);
							
							
							
							/*
							jQuery(navi_helper.pictureModule.picturePointer[setNum].imgID+'-title').text(
								navi_helper.pictureModule.picturePointer[setNum].imgSet[navi_helper.pictureModule.picturePointer[setNum].currentPointer]
							);
*/
							jQuery(navi_helper.pictureModule.picturePointer[setNum].sliderID).val(navi_helper.pictureModule.picturePointer[setNum].currentPointer);

							if( navi_helper.pictureModule.picturePointer[setNum].syncToGraph ) {
								navi_helper.pictureModule.synchronizeGraph(setNum);
							}
							
						}, (1000 / this.myFPS));
						
						//Let's now refresh
						
					},
					pause: function (setNum) {
						console.log('[Set: '+ setNum +'] Pause');
						if( !this.pictureTimer[setNum] ) {
							console.log('Already paused or stopped...');
						}
						clearInterval(this.pictureTimer[setNum]);
						this.pictureTimer[setNum]=null;

						/*
						if( this.pictureTimer[page_num] ) {
							clearInterval(this.pictureTimer[page_num]);
							this.pictureTimer[page_num]=null;
						}
						*/
					},
					sliderGoTo: function (setNum, value) {
						console.log('[Set: '+ setNum +'] Slider Value: {'+value+'}');
						this.pause(setNum);
						
						
						navi_helper.pictureModule.picturePointer[setNum].currentPointer = value;


						if (
							navi_helper.pictureModule.picturePointer[setNum].currentPointer > navi_helper.pictureModule.picturePointer[setNum].imgSet.length-1
						) { 
							//stop here.
							navi_helper.pictureModule.picturePointer[setNum].currentPointer = navi_helper.pictureModule.picturePointer[setNum].imgSet.length-1;
							return true;
							//navi_helper.pictureModule.picturePointer[setNum].currentPointer = 0;
						}else if (
								navi_helper.pictureModule.picturePointer[setNum].currentPointer < 0
						) { 
							
							navi_helper.pictureModule.picturePointer[setNum].currentPointer = 0;
							return true;
							//navi_helper.pictureModule.picturePointer[setNum].currentPointer = navi_helper.pictureModule.picturePointer[setNum].imgSet.length-1;
						}


						jQuery(navi_helper.pictureModule.picturePointer[setNum].sliderID).val(navi_helper.pictureModule.picturePointer[setNum].currentPointer);
						
						
						var newSrc = navi_helper.pictureModule.picturePointer[setNum].imgSet[navi_helper.pictureModule.picturePointer[setNum].currentPointer] + '.png';
						
						jQuery(navi_helper.pictureModule.picturePointer[setNum].imgID).prop({
							src: 'https://polar-ice.org/wp-content/uploads/2018/05/' + newSrc
						});
						
						navi_helper.pictureModule.setLegendSet(setNum);
						/*
						jQuery(this.picturePointer[setNum].imgID+'-title').text(
							this.picturePointer[setNum].imgSet[this.picturePointer[setNum].currentPointer]
						);
*/
						if( navi_helper.pictureModule.picturePointer[setNum].syncToGraph ) {
							navi_helper.pictureModule.synchronizeGraph(setNum);
						}
						
					},
					step: function (setNum, stepUp) {
						console.log('[Set: '+ setNum +'] Step: {'+(stepUp ? 'Up' : 'Back')+'}');
						this.pause(setNum);
						
						if( stepUp ){
							//Next year
							navi_helper.pictureModule.picturePointer[setNum].currentPointer++;
							if (
								navi_helper.pictureModule.picturePointer[setNum].currentPointer > navi_helper.pictureModule.picturePointer[setNum].imgSet.length-1
							) { 
								//stop here.
								navi_helper.pictureModule.picturePointer[setNum].currentPointer = navi_helper.pictureModule.picturePointer[setNum].imgSet.length-1;
								return true;
								//navi_helper.pictureModule.picturePointer[setNum].currentPointer = 0;
							}
						}else{
							//previous year
							navi_helper.pictureModule.picturePointer[setNum].currentPointer--;
							if (
								navi_helper.pictureModule.picturePointer[setNum].currentPointer < 0
							) { 
								
								navi_helper.pictureModule.picturePointer[setNum].currentPointer = 0;
								return true;
								//navi_helper.pictureModule.picturePointer[setNum].currentPointer = navi_helper.pictureModule.picturePointer[setNum].imgSet.length-1;
							}
						}


						jQuery(navi_helper.pictureModule.picturePointer[setNum].sliderID).val(navi_helper.pictureModule.picturePointer[setNum].currentPointer);
						
						var newSrc = navi_helper.pictureModule.picturePointer[setNum].imgSet[navi_helper.pictureModule.picturePointer[setNum].currentPointer] + '.png';
						
						jQuery(navi_helper.pictureModule.picturePointer[setNum].imgID).prop({
							src: 'https://polar-ice.org/wp-content/uploads/2018/05/' + newSrc
						});
						
						navi_helper.pictureModule.setLegendSet(setNum);
						/*
						var newSrc = navi_helper.picRotName.replace('{0}', this.picturePointer[setNum].imgSet[this.picturePointer[setNum].currentPointer] );
						jQuery(this.picturePointer[setNum].imgID).prop({
							src: './images/story2/hinter-maps/' + newSrc
						});
						jQuery(this.picturePointer[setNum].imgID+'-title').text(
							this.picturePointer[setNum].imgSet[this.picturePointer[setNum].currentPointer]
						);
						*/

						if( navi_helper.pictureModule.picturePointer[setNum].syncToGraph ) {
							navi_helper.pictureModule.synchronizeGraph(setNum);
						}
						return true;
					},
					
					synchronizeGraph: function (setNum) {
						//alert(setNum);
						console.log('[synchronizeGraph] No graphs to synchronize in this set ('+ navi_helper.contentSets[navi_helper.current_page] +').');
						return true;
					},
					
					
				},

				initializeButtons: function () {

					jQuery('#add-park-outlines').on('click', function () {
						jQuery('#slide-7-8-10-pic').prop({
							src:'https://polar-ice.org/wp-content/uploads/2018/02/AnchorageAK_Slides7-8-10_withboxes.png'
						});
					});
					jQuery('#remove-park-outlines').on('click', function () {
						jQuery('#slide-7-8-10-pic').prop({
							src:'https://polar-ice.org/wp-content/uploads/2018/02/AnchorageAK_Slides7-8-10.png'
						});
					});
					
					
					jQuery('button','.button-panel').on('click', function () {
						if( jQuery(this).data('action-for') == "picture" ) {
							switch(jQuery(this).data('action')) {
								case 'step-back':
									navi_helper.pictureModule.step( jQuery(this).data('pic-set'), false );
									break;
								case 'play':
									navi_helper.pictureModule.play( jQuery(this).data('pic-set') );
									break;
								case 'pause':
									navi_helper.pictureModule.pause( jQuery(this).data('pic-set') );
									break;
								case 'step-up':
									navi_helper.pictureModule.step( jQuery(this).data('pic-set'), true );
									break;
								default:
									break;
							}
						}else if( jQuery(this).data('action-for') == "graph" ) {
							switch(jQuery(this).data('action')) {
								case 'step-back':
									navi_helper.chartModule.step( jQuery(this).data('pic-set'), false );
									break;
								case 'play':
									navi_helper.chartModule.play( jQuery(this).data('pic-set') );
									break;
								case 'pause':
									navi_helper.chartModule.pause( jQuery(this).data('pic-set') );
									break;
								case 'step-up':
									navi_helper.chartModule.step( jQuery(this).data('pic-set'), true );
									break;
								default:
									break;
							}
						}
					});


					jQuery('input[type="range"]','.slider-panel').on('input', function () {
			//jQuery(this).data('set')
						if( jQuery(this).data('action-for') == "picture" ) {

							//console.log('Debug #graph-slider-set-4 ON INPUT: `'+jQuery(this).val()+'`')
							navi_helper.pictureModule.sliderGoTo(jQuery(this).data('set'), jQuery(this).val() );
						}else if( jQuery(this).data('action-for') == "graph" ) {
							//console.log('Debug #graph-slider-set-4 ON INPUT: `'+jQuery(this).val()+'`')
							navi_helper.chartModule.sliderGoTo(jQuery(this).data('set'), jQuery(this).val() );
						}
					});
					/*
					jQuery('#graph-slider-set-4').on('change', function () {
						console.log('Debug #graph-slider-set-4 ON CHANGE: `'+jQuery(this).val()+'`')
					});
					jQuery('#graph-slider-set-4').on('input', function () {
						console.log('Debug #graph-slider-set-4 ON INPUT: `'+jQuery(this).val()+'`')
					});
					*/
					
					
					return true;
				},
				
				chartModule: {
					chart: null,
					subcharts: {
						1: null,
						2: null,
						3: null
					},
					seriesSets:{
						'dox-vs-ocean-temp':[],
						'heat-tol-ice':{
							'color':'dodgerblue',
							'color-alt':'skyblue',
							'temp':{
								'data':12.975,
								'err':1.385146
							},
							'temp-high-ox':{
								'data':13.155,
								'err':1.835724847
							},
						},
						'heat-tol-rock':{
							'color':'red',
							'color-alt':'tomato',
							'temp':{
								'data':16.4133,
								'err':0.644263145
							},
							'temp-high-ox':{
								'data':17.1522,
								'err':0.568017997
							},
								


						},
						'heat-tol-ice-vs-rock-err':[],
						'heat-tol-ice-vs-rock-oxy':[],
					}, 
					initializeGraphs: function () {
						console.log('[Chart Module]: Initalizing Graphs');
						Highcharts.setOptions({global: { useUTC: true } });
						this.seriesSets['dox-vs-ocean-temp'] = [[-1.888,7.572],[-1.659,8.908],[-1.631,7.461],[-1.606,7.82],[-1.582,8.875],[-1.552,7.517],[-1.519,7.386],[-1.486,8.717],[-1.442,7.456],[-1.391,7.571],[-1.338,7.786],[-1.272,8.995],[-1.207,7.568],[-1.113,8.071],[-1.006,7.408],[-0.883,8.519],[-0.739,7.656],[-0.644,7.661],[-0.434,7.983],[-0.199,8.136],[0.086,7.849],[0.417,8.052],[0.881,7.906],[1.388,7.416],[1.973,7.784],[2.549,7.706],[3.129,7.304],[3.763,7.427],[4.367,7.865],[5.027,7.387],[5.647,7.138],[6.334,7.179],[6.994,6.818],[7.621,6.831],[8.307,6.409],[9.022,6.535],[9.722,6.403],[10.457,6.383],[11.232,6.402],[12.157,6.256],[13.016,6.051],[13.883,6.033],[14.79,5.713],[15.625,5.829],[16.451,5.642],[17.235,5.567],[17.984,5.434],[18.671,5.369],[19.303,5.389],[19.936,5.287],[20.536,5.2],[21.113,5.096],[21.685,5.067],[22.249,4.968],[22.786,4.994],[23.288,4.877],[23.773,4.901],[24.249,4.902],[24.698,4.857],[25.248,4.767],[25.504,4.776],[25.718,4.74],[25.955,4.841],[26.153,4.77],[26.36,4.757],[26.552,4.764],[26.737,4.646],[26.896,4.712],[27.038,4.633],[27.174,4.674],[27.293,4.671],[27.402,4.62],[27.517,4.676],[27.659,4.598],[27.794,4.547],[27.941,4.553],[28.116,4.545],[28.281,4.502],[28.424,4.528],[28.541,4.39],[28.677,4.479],[28.807,4.485],[29.007,4.547],[29.305,4.524]];
						this.seriesSets['heat-tol-ice-vs-rock']=[];
					},
					clearChartData: function () {
						//console.log(this.my_chart);
						while(this.my_chart.series.length > 0) {
							this.my_chart.series[0].remove(true);
						}
					},
					clickEnabled:false,
					chartClickEvent: function ( event ) {
						
					},

					myFPS:1.5, //a picture will be shown ever ( 1000 / myFPS ) ms 
					chartPointer: {

						
					},
					imgBreakPoints:[
						
					],
					chartTimer: {
						//Set number
					},
					stopAll: function () {
						
						for(var i in this.chartTimer) {
							if(this.chartTimer[i]){
								this.pause(i);	
							}
							this.resetImg(i);
							
							/*if( this.picturePointer[i].syncToGraph ) {
								this.synchronizeGraph(i);
							}*/
							
						}
						
						return true;
					},
					resetImg: function (setNum){
						console.log('Graph: Reset Image for set `',setNum,'`')
						this.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].min;

						if(this.chartPointer[setNum].syncToPic){
						
							jQuery(navi_helper.chartModule.chartPointer[setNum].imgID+'-title').text(
								this.findImgBreakpoint(navi_helper.chartModule.chartPointer[setNum].currentPointer)
							);
							jQuery(navi_helper.chartModule.chartPointer[setNum].imgID).prop({
								src:'./images/story4/ice-loss/'+ this.findImgBreakpoint(navi_helper.chartModule.chartPointer[setNum].currentPointer) +'_ice-loss-anim_revised.jpg'
							});
						}
					},
					findImgBreakpoint: function (myYear){
						var i=0;

						//console.log('findImgBreakpoint: `'+ myYear +'`');
						for(i;i<this.imgBreakPoints.length;i++){
							//console.log('Looking for: `'+ myYear +'` Between `'+ this.imgBreakPoints[i].min +'` and `'+ this.imgBreakPoints[i].max +'`');
							if ( this.imgBreakPoints[i].min <= myYear && myYear <= this.imgBreakPoints[i].max ) {
								//console.log('Found `'+this.imgBreakPoints[i].img+'`');
								return 	this.imgBreakPoints[i].img;
							}
						}
						return '';
					},
					synchronizePicture: function (setNum){
						console.log('[synchronizePicture] No pictures to synchronize in this set ('+ navi_helper.contentSets[navi_helper.current_page] +').');
						return true;
						if( 
								setNum == 1 ||
								setNum == 2 ||
								//setNum == 3 ||
								//setNum == 4 ||
								setNum == 5 ||
								setNum == 6 ||
								setNum == 7 ||
								setNum == 8
						) {
							
							console.log('[synchronizePicture] No pictures to synchronize in this set ('+ navi_helper.contentSets[navi_helper.current_page] +').')
							
						}
						

						return true;
					},
					synchronizeSubchart: function (setNum){

						if( 
							setNum == 1 ||
							setNum == 2 ||
							setNum == 3 ||
							setNum == 4 ||
							setNum == 5 ||
							setNum == 6 ||
							setNum == 7 ||
							setNum == 8 
							//|| setNum == 4 
						) {
							
							console.log('[synchronizeSubchart] No subcharts for this set ('+ navi_helper.contentSets[navi_helper.current_page] +').')
							
						}
						return true;

					},
					play: function ( setNum ) {
						console.log('[Set: '+ setNum +'] Play');
						//let's stop whatever is going on
						this.pause(setNum);	
						
						if( this.chartTimer[setNum] ) {
							console.log('Already playing...');
							return true;
						}
						
						this.chartTimer[setNum] = setInterval( function () {
							//console.log( navi_helper.chartModule.chartPointer[setNum]);
							//console.log(navi_helper.chartModule.chartPointer[setNum].currentPointer);
							navi_helper.chartModule.chartPointer[setNum].currentPointer++;
							console.log(navi_helper.chartModule.chartPointer[setNum].currentPointer);
							
							if (
								navi_helper.chartModule.chartPointer[setNum].currentPointer > navi_helper.chartModule.chartPointer[setNum].max
							) { 
								//console.log('Chart pointer is maxxed out. Stopping...',navi_helper.chartModule.chartPointer[setNum].currentPointer, navi_helper.chartModule.chartPointer[setNum].max );
								navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].max;
								navi_helper.chartModule.pause(setNum);
								return true;
							}

							var translateI = navi_helper.chartModule.chartPointer[setNum].currentPointer - navi_helper.chartModule.chartPointer[setNum].min;
							
							navi_helper.chartModule.chart.series[0].setData( 
								navi_helper.chartModule.seriesSets[navi_helper.chartModule.chartPointer[setNum].useChart].slice(0, translateI+1) 
							);

							jQuery(navi_helper.chartModule.chartPointer[setNum].sliderID).val(navi_helper.chartModule.chartPointer[setNum].currentPointer);

							if( navi_helper.chartModule.chartPointer[setNum].syncToPic ) {
								navi_helper.chartModule.synchronizePicture(setNum);
							}

							if( navi_helper.chartModule.chartPointer[setNum].syncToSubchart ) {
								navi_helper.chartModule.synchronizeSubchart(setNum);
							}

						}, (1000 / this.myFPS));
						
						//Let's now refresh
						
					},
					pause: function (setNum) {
						console.log('[Set: '+ setNum +'] Pause');
						if( !this.chartTimer[setNum] ) {
							console.log('Already paused or stopped...');
						}
						clearInterval(this.chartTimer[setNum]);
						this.chartTimer[setNum]=null;
					},
					sliderGoTo: function (setNum, value) {
						console.log('[Set: '+ setNum +'] Slider Value: {'+value+'}');
						navi_helper.chartModule.pause(setNum);

						navi_helper.chartModule.chartPointer[setNum].currentPointer = value;

						if (
								navi_helper.chartModule.chartPointer[setNum].currentPointer > navi_helper.chartModule.chartPointer[setNum].max
						) { 
							navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].max;
							return true;
						}else if (
								navi_helper.chartModule.chartPointer[setNum].currentPointer < navi_helper.chartModule.chartPointer[setNum].min
						) { 
							navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].min;
							return true;
						}

						var translateI = navi_helper.chartModule.chartPointer[setNum].currentPointer - navi_helper.chartModule.chartPointer[setNum].min;
						
						navi_helper.chartModule.chart.series[0].setData( 
							navi_helper.chartModule.seriesSets[navi_helper.chartModule.chartPointer[setNum].useChart].slice(0, translateI+1) 
						);

						//jQuery().val(navi_helper.chartModule.chartPointer[setNum].currentPointer);
						
						if( navi_helper.chartModule.chartPointer[setNum].syncToPic ) {
							navi_helper.chartModule.synchronizePicture(setNum);
						}

						if( navi_helper.chartModule.chartPointer[setNum].syncToSubchart ) {
							navi_helper.chartModule.synchronizeSubchart(setNum);
						}
					},
					step: function (setNum, stepUp) {
						console.log('[Set: '+ setNum +'] Step: {'+(stepUp ? 'Up' : 'Back')+'}');
						this.pause(setNum);
						
						if( stepUp ){
							//Next year
							navi_helper.chartModule.chartPointer[setNum].currentPointer++;

							if (
								navi_helper.chartModule.chartPointer[setNum].currentPointer > navi_helper.chartModule.chartPointer[setNum].max
							) { 
								navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].max;
								return true;
							}
						}else{
							//previous year
							navi_helper.chartModule.chartPointer[setNum].currentPointer--;
							if (
								navi_helper.chartModule.chartPointer[setNum].currentPointer < navi_helper.chartModule.chartPointer[setNum].min
							) { 
								navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].min;
								return true;
							}
						}


						var translateI = navi_helper.chartModule.chartPointer[setNum].currentPointer - navi_helper.chartModule.chartPointer[setNum].min;
						
						navi_helper.chartModule.chart.series[0].setData( 
							navi_helper.chartModule.seriesSets[navi_helper.chartModule.chartPointer[setNum].useChart].slice(0, translateI+1) 
						);

						jQuery(navi_helper.chartModule.chartPointer[setNum].sliderID).val(navi_helper.chartModule.chartPointer[setNum].currentPointer);
						
						if( navi_helper.chartModule.chartPointer[setNum].syncToPic ) {
							navi_helper.chartModule.synchronizePicture(setNum);
						}

						if( navi_helper.chartModule.chartPointer[setNum].syncToSubchart ) {
							navi_helper.chartModule.synchronizeSubchart(setNum);
						}
						return true;
					},
					destroyAllCharts: function () {

						if(this.chart){
							this.chart.destroy();
							this.chart=null;
						}
						if(this.subcharts['1']){
							this.subcharts['1'].destroy();
							this.subcharts['1']=null;
						}
						if(this.subcharts['2']){
							this.subcharts['2'].destroy();
							this.subcharts['2']=null;
						}
						if(this.subcharts['3']){
							this.subcharts['3'].destroy();
							this.subcharts['3']=null;
						}
						return true;
					},
					updateGraphState: function ( setNum ) {
						console.log('[Func(): navi_helper.chartModule.updateGraphState] `' + setNum + '` ');

						if(
								setNum == 1 ||
								setNum == 2 ||
								setNum == 3 ||
								setNum == 4 ||
								setNum == 5 ||
								setNum == 6 ||
								setNum == 7 ||
								setNum == 8
						){
							console.log('[updateGraphState] No graphs in this set ('+ navi_helper.contentSets[navi_helper.current_page] +').');
							return true;
						}						
						return true;	

					}
				},
				
				my_popups:{
					1:[], //None
					2:[], //None
					3:[], //None
					4:[],
					5:[],
					6:[]
				},
				

				go_to_page: function ( page_num ) {
					jQuery('span.hover-box,span.hover-box-img').slideUp();

					jQuery('.standard-set').show();
					jQuery('.ext-set').hide();
					
					//console.info('[navi_helper]: Go to page `'+ page_num +'`.');
					if( page_num == 'next' ) {
						this.current_page++;
					}else if( page_num == 'prev' ) {
						this.current_page--;
						if( this.current_page < this.min_page) {
							this.current_page = this.min_page;
						}
					}else{
						this.current_page = parseInt(page_num);
					}
					
					if( this.current_page < this.min_page) {
						this.current_page = this.min_page;
					}else if ( this.max_page < this.current_page ) {
						this.current_page = this.max_page;
					}
					
					if( this.current_page == 11 ){
						console.log('End!');
					}

					this.pictureModule.stopAll();
					this.chartModule.stopAll();

					this.chartModule.updateGraphState(navi_helper.contentSets[navi_helper.current_page]);
					this.chartModule.synchronizePicture(navi_helper.contentSets[navi_helper.current_page]);
					this.chartModule.synchronizeSubchart(navi_helper.contentSets[navi_helper.current_page]);
					
/*
					//Specials by Content set
					if( this.contentSets[this.current_page] == 1 ){
						//If this page is 1, add hovers, and remove the background.
						if( this.current_page == 1 ) {
							jQuery('.is-clickable', '#mosaic-page-'+this.current_page+'-right' )
							.on('click', function (event) {
								jQuery('span.hover-box-img').html(
										navi_helper.contentSetInfo[navi_helper.contentSets[navi_helper.current_page]][jQuery(this).data(
										'text-set'
									)]
								).slideDown();
								console.log('Clicking');
							});
							//jQuery('span.display-page-1').show();
						}

					}else if( this.contentSets[this.current_page] == 2 ){

						if( this.current_page == 2 ) {
							//jQuery('#set-2-right-pic').prop({src:'/polar_ice/images/story4/globe-90-60N.jpg'});			
							jQuery('.display-page-2').show();
							jQuery('.display-page-3').hide();
						}else if( this.current_page == 3 ) {
							//jQuery('#set-2-right-pic').prop({src:'/polar_ice/images/story4/AlaskaBodySpring.jpg'});		
							jQuery('.display-page-2').hide();		
							jQuery('.display-page-3').show();				
						}

						
					}else if( this.contentSets[this.current_page] == 3 ){
console.log('Content Set 3');

						if( this.current_page == 4 ) {
							jQuery('.display-page-4').show();
							jQuery('.display-page-5').hide();		
						}else if( this.current_page == 5 ) {
							jQuery('.display-page-4').hide();	
							jQuery('.display-page-5').show();		
						}

						
					}else if ( this.contentSets[this.current_page] == 4 ) {

						
					}else if ( this.contentSets[this.current_page] == 5 ) {

						if( this.current_page == 10 ) {
							jQuery('.display-page-10').show();
							jQuery('.display-page-11').hide();
							
						}else if( this.current_page == 11 ) {
							jQuery('.display-page-10').hide();
							jQuery('.display-page-11').show();
						}
						
					}else if ( this.contentSets[this.current_page] == 6 ) {

						
					}else if ( this.contentSets[this.current_page] == 7 ) {
						jQuery('.display-page-6').show();	
					}else if ( this.contentSets[this.current_page] == 8 ) {
						jQuery('.display-page-9').show();	
					}
*/
					
					
					
					this.update_info_bubbles();
					
					jQuery('button','#mosaic-button-nav').removeClass('current-page');
					jQuery('button[data-page-id="'+ this.current_page +'"]','#mosaic-button-nav').addClass('current-page');
					
					jQuery('.switch-page','#mosaic-page-content').removeClass('view-page');
					jQuery('#mosaic-page-' + this.current_page + '-left','#mosaic-page-content').addClass('view-page');
					jQuery('#mosaic-right-content-set-' + this.contentSets[this.current_page], '#mosaic-page-content').addClass('view-page');
					
					//jQuery('#play-controls-1').css({display: ( this.current_page > 3 ? 'block' : 'none' ) } );
					
					//this.update_image_information();
					
					return this.next_button_state() && this.prev_button_state();
				},
				update_info_bubbles: function () {
				
					jQuery('span.marker').remove();
					var my_icons = navi_helper.my_popups[ this.current_page ];

//console.log('Updating info bubbles.');
					for(var index in my_icons ) {
						var create_icon = my_icons[index];

						
						//Only picture-frame-1 is currently getting icons
						var target = jQuery('#image-wrapper-1');
						//console.log(create_icon);
						
						if( create_icon.icon == '' ) {
							//
							jQuery('<span class="marker"/>')
							.css({
								top: create_icon.position.top,
								left: create_icon.position.left
							}).html('<i class="fa fa-1pt25x">&nbsp;&nbsp;&nbsp;&nbsp;</i><span class="caption '+create_icon.position.align+' '+create_icon.size+'">'+ create_icon.content +'</span>').
							appendTo(target);
						}else if( create_icon.icon == 'info' ) {
							jQuery('<span class="marker"/>')
							.css({
								top: create_icon.position.top,
								left: create_icon.position.left
							}).html('<i class="fa fa-info-circle fa-1pt25x"></i><span class="caption '+create_icon.position.align+' '+create_icon.size+'">'+ create_icon.content +'</span>').
							appendTo(target);
						}else if( create_icon.icon == 'penguin' ) {
						
							jQuery('<span class="marker penguin is-clickable"/>')
							.css({
								top: create_icon.position.top,
								left: create_icon.position.left
							}).html('<i class="fa fa-does-not-exist fa-1pt25x"></i><span class="caption '+create_icon.position.align+' '+create_icon.size+'">'+ create_icon.content +'</span>').
							appendTo(target);
							
							for(var i in create_icon.icon_position){
								var new_pos = create_icon.icon_position[i];
								jQuery('<span class="marker penguin"/>')
								.css({
									top: new_pos.top,
									left: new_pos.left
								}).html('<img src="/polar_ice/images/story4/icon_penguin.png" style="max-width:35px;"/>').
								appendTo(target);
							}							
						}else if( create_icon.icon == 'whale' ) {
						
							jQuery('<span class="marker whale is-clickable"/>')
							.css({
								top: create_icon.position.top,
								left: create_icon.position.left
							}).html('<i class="fa fa-does-not-exist fa-1pt25x"></i><span class="caption '+create_icon.position.align+' '+create_icon.size+'">'+ create_icon.content +'</span>').
							appendTo(target);
							
						
							for(var i in create_icon.icon_position){
								var new_pos = create_icon.icon_position[i];
								jQuery('<span class="marker whale"/>')
								.css({
									top: new_pos.top,
									left: new_pos.left
								}).html('<img src="/polar_ice/images/story4/icon_whale.png" style="max-width:60px;"/>').
								appendTo(target);
							}
						}else if( create_icon.icon == 'plankton' ) {
							//Are amoebas plankton? Probably. No longer questioning it.
							jQuery('<span class="marker plankton is-clickable"/>')
							.css({
								top: create_icon.position.top,
								left: create_icon.position.left
							}).html('<i class="fa fa-does-not-exist fa-1pt25x"></i><span class="caption '+create_icon.position.align+' '+create_icon.size+'">'+ create_icon.content +'</span>').
							appendTo(target);
							
							for(var i in create_icon.icon_position){
								var new_pos = create_icon.icon_position[i];
								jQuery('<span class="marker plankton"/>')
								.css({
									top: new_pos.top,
									left: new_pos.left
								}).html('<img src="/polar_ice/images/story4/amoeba-159483_960_720.png" style="max-width:55px;"/>').
								appendTo(target);
							}
						}
					}
					
					jQuery('span.marker').on('click', function() {
						var $marker = jQuery(this),
							$caption = jQuery('span.caption', $marker);
						//console.log($caption);
						if( $caption.length < 1 ) {
							if( $marker.hasClass('penguin') ) {
								jQuery('span.marker.penguin.is-clickable').trigger('click');
							}else if( $marker.hasClass('whale') ) {
								jQuery('span.marker.whale.is-clickable').trigger('click');
							}else if( $marker.hasClass('plankton') ) {
								jQuery('span.marker.plankton.is-clickable').trigger('click');
							}
							
						}else{
						
							if ($caption.is(':hidden')) {
								$caption.slideDown(300);
							} else {
								$caption.slideUp(300);
							}
						}

					});
					//Fix anchor links in the span marker click to avoid event propagation
					// and other bad behavior
					
					jQuery('span.marker a').on('click', function (event) {
						event.stopPropagation();
						return true;
					});
					
					
					return true;
				},
				update_image_information: function () {
					return true;
				
					this.pause_images(1);
					this.pause_images(2);
					
					if( this.current_page < 4 ) {
					
						jQuery('#picture-frame-1').removeClass('dual-image');
						jQuery('#picture-frame-2').removeClass('dual-image').hide();
						
						jQuery('#image-changer-1').prop({src: this.static_image});
						jQuery('#play-controls-1').hide();
						
						return true;
					}
					
					jQuery('#play-controls-1').show();
					jQuery('#picture-frame-1').removeClass('dual-image');
					jQuery('#picture-frame-2').removeClass('dual-image').hide();
					
					var my_rules = this.dynamic_images[ this.current_page ];
					
					
					
					if( my_rules.num_images == 1 ) {
						this.dynamic_images[ this.current_page ].frames[1].show_picture = 0;
						jQuery('#play-slider-1').val(0).prop({max:this.dynamic_images[ this.current_page ].frames[1].pictures.length-1}); 
						var pad = "00";
						var str_day = '' + this.dynamic_images[ this.current_page ].frames[1].curr_day;
						var str_hr = '' + this.dynamic_images[ this.current_page ].frames[1].curr_hr;
						
						jQuery('#image-changer-1').prop({
							src: this.dynamic_images[ this.current_page ].location + 
							'201502' + 
							pad.substring(0, pad.length - str_day.length) + str_day + 
							'T' +
							pad.substring(0, pad.length - str_hr.length) + str_hr + 
							'00.png'
						});//.removeClass('dual-image');
						
						jQuery('#picture-frame-2').css({display:'none'});
						
					}else{
						jQuery('#play-slider-1').val(0).prop({max:this.dynamic_images[ this.current_page ].frames[1].pictures.length-1});
						jQuery('#play-slider-2').val(0).prop({max:this.dynamic_images[ this.current_page ].frames[2].pictures.length-1});
						
						this.dynamic_images[ this.current_page ].frames[1].show_picture = 0;
						this.dynamic_images[ this.current_page ].frames[2].show_picture = 0;
						
						jQuery('#picture-frame-1').addClass('dual-image');
						jQuery('#picture-frame-2').addClass('dual-image').css({display:'inline-block'});
						
						var pad = "00";
						var str_day = '' + this.dynamic_images[ this.current_page ].frames[1].curr_day;
						var str_hr = '' + this.dynamic_images[ this.current_page ].frames[1].curr_hr;
						
						var str_day2 = '' + this.dynamic_images[ this.current_page ].frames[2].curr_day;
						var str_hr2 = '' + this.dynamic_images[ this.current_page ].frames[2].curr_hr;
						
						jQuery('#image-changer-1').prop({
							src: this.dynamic_images[ this.current_page ].location + 
							'201502' + 
							pad.substring(0, pad.length - str_day.length) + str_day + 
							'T' +
							pad.substring(0, pad.length - str_hr.length) + str_hr + 
							'00.png'
						});
						jQuery('#image-changer-2').prop({
							src: this.dynamic_images[ this.current_page ].location + 
							'201502' + 
							pad.substring(0, pad.length - str_day2.length) + str_day2 + 
							'T' +
							pad.substring(0, pad.length - str_hr2.length) + str_hr2 + 
							'00.png'
						});
					}
					
					if( this.current_page == 4 || this.current_page == 6 ){
						if( my_rules.num_images == 1 ) {
							this.play_images(1);
						}else{
							this.play_images(1);
							this.play_images(2);
						}
					}
					
					
					
					return true;
				},
				play_images: function (frame_id) {
					this.pause_images(frame_id);
					this.my_timer[frame_id] = setInterval( function () {
						//console.log('Image change.');
						navi_helper.forward_image_source(frame_id);
					}, ( 1000 / this.fps ) );
				},
				pause_images: function (frame_id) {
					if( this.my_timer[frame_id] !== null ) {
						clearInterval( this.my_timer[frame_id] );
						this.my_timer[frame_id] = null;
					}
				},
				step_forward: function (frame_id) {
					this.pause_images(frame_id);
					this.forward_image_source(frame_id);
				},
				step_back: function (frame_id) { 
					this.pause_images(frame_id);
					this.previous_image_source(frame_id);
				},
				go_to_picture: function (frame_id, picture_id){
					this.dynamic_images[ this.current_page ].frames[frame_id].show_picture = picture_id;
					this.show_images(frame_id);
				},
				forward_image_source: function (frame_id) {
					
					this.dynamic_images[ this.current_page ].frames[frame_id].show_picture++;
					if( this.dynamic_images[ this.current_page ].frames[frame_id].show_picture >= this.dynamic_images[ this.current_page ].frames[frame_id].pictures.length  ) {
						this.dynamic_images[ this.current_page ].frames[frame_id].show_picture=0;
					}
					//console.log(this.dynamic_images[ this.current_page ]);
					jQuery('#play-slider-' + frame_id).val( this.dynamic_images[ this.current_page ].frames[frame_id].show_picture ) ;
					this.show_images(frame_id);
					return true;
				},
				previous_image_source: function (frame_id) {
					
					this.dynamic_images[ this.current_page ].frames[frame_id].show_picture--;
					if( this.dynamic_images[ this.current_page ].frames[frame_id].show_picture < 0 ) {
						this.dynamic_images[ this.current_page ].frames[frame_id].show_picture=this.dynamic_images[ this.current_page ].frames[frame_id].pictures.length-1;
					}
					jQuery('#play-slider-' + frame_id).val( this.dynamic_images[ this.current_page ].frames[frame_id].show_picture ) ;
					this.show_images(frame_id);
					return true;
				},
				show_images: function (frame_id) {
				
					var my_rules = this.dynamic_images[ this.current_page ].frames[frame_id];
					
					var pad = "00";
					var str_day = '' + this.dynamic_images[ this.current_page ].frames[frame_id].curr_day;
					var str_hr = '' + this.dynamic_images[ this.current_page ].frames[frame_id].curr_hr;
					
					jQuery('#image-changer-' + frame_id).prop({
						src: this.dynamic_images[ this.current_page ].frames[frame_id].pictures[ this.dynamic_images[ this.current_page ].frames[frame_id].show_picture ]
					});
					///polar_ice/maps/justmap_new_160212/tidalcurrents_20150208T0100.png
					/*
					jQuery('#image-changer-' + frame_id).prop({
						src: this.dynamic_images[ this.current_page ].location + 
						'201502' + 
						pad.substring(0, pad.length - str_day.length) + str_day + 
						'T' +
						pad.substring(0, pad.length - str_hr.length) + str_hr + 
						'00.png'
					});
					*/
					return true;
				},
				prev_button_state: function () {
					jQuery('#mosaic-prev-button').prop({disabled: (this.current_page == 1) });
					return true;
				},
				next_button_state: function () {
					jQuery('#mosaic-next-button').prop({disabled: (this.current_page == this.max_page) });
					return true;
				},
				preload_all_images: function() {
					return true;
				},
				initialize_pictures: function () {
					
					var my_dynamic_images = this.dynamic_images;
					for(var page in my_dynamic_images){
						var my_frames = this.dynamic_images[page].frames;
						for(var my_frame in my_frames){
						
							//We'll need to calculate then push (in order)
							var total_time = (this.dynamic_images[ page ].frames[my_frame].curr_day * 100) + this.dynamic_images[ page ].frames[my_frame].curr_hr;
							var end_time = (this.dynamic_images[ page ].frames[my_frame].end_day * 100) + this.dynamic_images[ page ].frames[my_frame].end_hr;
							
							while( total_time < end_time ) {
								
								this.dynamic_images[ page ].frames[my_frame].curr_hr++;
								if( this.dynamic_images[ page ].frames[my_frame].curr_hr >= 24 ) {
									this.dynamic_images[ page ].frames[my_frame].curr_day++;
									this.dynamic_images[ page ].frames[my_frame].curr_hr=0;
								}
								//e.g. day = 8 (or '08') hour = 11 (or '11'), total time = 811 or ('0811') vs end time of 2200 for day 22, hour 00
								total_time = (this.dynamic_images[ page ].frames[my_frame].curr_day * 100) + this.dynamic_images[ page ].frames[my_frame].curr_hr;
								
								var pad = "00";
								var str_day = '' + this.dynamic_images[ page ].frames[my_frame].curr_day;
								var str_hr = '' + this.dynamic_images[ page ].frames[my_frame].curr_hr;
					
								this.dynamic_images[ page ].frames[my_frame].pictures.push(
									this.dynamic_images[ page ].location + 
									'201502' + 
									pad.substring(0, pad.length - str_day.length) + str_day + 
									'T' +
									pad.substring(0, pad.length - str_hr.length) + str_hr + 
									'00.png'
								);
							}
							console.info('Page: `'+ page +'`, Frame: `'+ my_frame +'` initialized');
						}
					}
					
				
					return true;
				},
				loadStaticCharts: function () {
					//Loading static cahrts
					console.log('[Func(): loadStaticCharts]');

					console.log('No static charts.');
					return true;
				}
				
			};
			
			
			function afterLoad() {

				jQuery('#mosaic-prev-button').prop({disabled:true});
				jQuery('#mosaic-next-button').prop({disabled:false});
				
				jQuery('button','#mosaic-button-nav').on('click', function () {
					navi_helper.go_to_page( jQuery(this).data('page-id') );
				});
				
				//We're going to remove the #sidebar for now and make #main width 100%
				jQuery('#sidebar').hide();
				jQuery('#main').css({width:'100%'});
				
				jQuery('.ext-page').on('click', function () {
					console.log(jQuery(this).data('extpage') );
					jQuery('.standard-set').hide();
					jQuery('#' + jQuery(this).data('extpage') ).show();
					
				});
				navi_helper.chartModule.initializeGraphs();
				navi_helper.initializeButtons();
				navi_helper.loadStaticCharts();
				
				
				navi_helper.go_to_page(1);

				jQuery('span.hover-box').on('click', function () {
					jQuery(this).slideUp();
				});
				jQuery('span.hover-box-img').on('click', function () {
					jQuery(this).slideUp();
				});
			}
			
			//There might be a conflict with the shorthand Dollar sign ($), so we'll just use jQuery instead
			jQuery(function () {
				console.log('[jQuery loaded]');
				
				jQuery.get('https://polar-ice.org/wp-content/uploads/2020/04/story_7_eng.html.txt', function(data) {
					console.log('THE DATA: ', data);
					
					var myHTML = data.replace(/REPLACE_OPEN_ANGLE_BRACKET/g, '<');
					
					myHTML = myHTML.replace(/REPLACE_CLOSE_ANGLE_BRACKET/g, '>');
					jQuery('#story-7-div').html(myHTML);
					
					console.log('HTML Loaded. Loading other items.');
					afterLoad();
				});
				/*
				jQuery('#story-7-div').load('https://polar-ice.org/wp-content/uploads/2018/05/story_7_html.txt', null, function () {
					afterLoad();
				});
				*/
			});