//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:0,
				min_page:0,
				max_page:11,
				contentSets:{
					0:1,
					1:1,
					
					2:2,
					3:3,
					4:4,
					5:5,
					6:6,
					
					7:7,
					8:8,

					9:9,
					10:9,
					11:9
					
				},
				
				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.5, //a picture will be shown ever ( 1000 / myFPS ) ms 
					picturePointer: {
						
					},
					pictureTimer: {
						//Slide number
						
					},
					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] );
						jQuery(this.picturePointer[setNum].imgID).prop({
							src: './images/story4/ice-loss/' + newSrc
						});
						
						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] );
							jQuery(navi_helper.pictureModule.picturePointer[setNum].imgID).prop({
								src: './images/story2/hinter-maps/' + newSrc
							});
							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.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);
						}
						
					},
					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.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: {
						//index is content set
						3:{
							imgID:'',
							labelID:'',
							sliderID:'',
							useChart:'dox-vs-ocean-temp',
							min:-5,
							max:30,
							currentPointer:30,
							syncToPic: false,
							syncToSubchart: false,
							subchartDetails: []
						},
						6: {
							//imgIDs:['#set-2-dynami-image-1', '#set-2-dynami-image-2'],
							imgID:'',
							labelID:'',
							sliderID:'',
							useChart:'heat-tol-ice-vs-rock',
							errorData:'heat-tol-ice-vs-rock-err',
							min:1990,
							max:2017,
							currentPointer:1990,
							syncToPic: false,
							syncToSubchart: false,
							subchartDetails: []
						},
						7:{
							imgID:'',
							labelID:'',
							sliderID:'',
							useChart:'dox-vs-ocean-temp',
							min:-5,
							max:30,
							currentPointer:30,
							syncToPic: false,
							syncToSubchart: false,
							subchartDetails: []
						},
						8: {
							//imgIDs:['#set-2-dynami-image-1', '#set-2-dynami-image-2'],
							imgID:'',
							labelID:'',
							sliderID:'',
							useChart:'heat-tol-ice-vs-rock',
							errorData:'heat-tol-ice-vs-rock-err',
							min:1990,
							max:2017,
							currentPointer:1990,
							syncToPic: false,
							syncToSubchart: false,
							subchartDetails: []
						},
						9: {
							//imgIDs:['#set-2-dynami-image-1', '#set-2-dynami-image-2'],
							imgID:'',
							labelID:'',
							sliderID:'',
							useChart:'heat-tol-ice-vs-rock',
							errorData:'heat-tol-ice-vs-rock-err',
							min:1990,
							max:2017,
							currentPointer:1990,
							syncToPic: false,
							syncToSubchart: false,
							subchartDetails: []
						},
						
					},
					imgBreakPoints:[
						
					],
					chartTimer: {
						//Set number
						3: null
					},
					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 == 6 ||
								setNum == 7 ||
								setNum == 8
						) {
							
							console.log('[synchronizePicture] No pictures to synchronize in this set ('+ navi_helper.contentSets[navi_helper.current_page] +').')
							
						}else if (setNum == 5) {
							jQuery(navi_helper.chartModule.chartPointer[setNum].labelID).text(navi_helper.chartModule.chartPointer[setNum].currentPointer);
							jQuery(navi_helper.chartModule.chartPointer[setNum].sliderID).val(navi_helper.chartModule.chartPointer[setNum].currentPointer);	
						}
						

						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;
						}else if( setNum == 3 ){
							
							this.destroyAllCharts();
							console.log('[updateGraphState]  Updating ('+ navi_helper.contentSets[navi_helper.current_page] +').');
							console.log('[updateGraphState] Preparing Est. Spruce Infestation.');
						    this.chart = Highcharts.chart('set-3-chart', {
						        chart: {
						        	id:'set3',
						            type: 'spline',
									spacingRight: 10,
						        },
						        plotOptions:{},
						        title: {
						            text: 'Dissolved Oxygen vs Ocean Temperature'
						        },
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
						        xAxis: {
						            title: {
										useHTML:true,
						            	text: "Ocean Temperature (&deg;C)"
						            },
						            type: 'linear',
						            min:-5,
						            max:30,
									labels:{

									},
        plotLines: [{
            color: '#C0C0C0',
            width: 1,
            value: 0
        }]
									//tickInterval:5,
						        },
						        yAxis: {
						            title: {
						                text: 'Dissolved Oxygen (mg/L)'
						            },
									labels:{
										
									},
									tickInterval:1,
									min:0,
									max:10
						        },

						        series: [{
									type: 'scatter',
						            name: 'Temperature',
						            data: navi_helper.chartModule.seriesSets['dox-vs-ocean-temp'],
						        	color:'darkblue'
						        },{
									type: 'line',
						            name: 'Trend Line',
						            data: [/*[-5,8.3835],*/[-2,8.0274],[0,7.792],[65.66,0]], //y= -.1187x + 7.79 //[-5,10.58],
						        	color:'orange',
									marker:{ enabled:false },
									enableMouseTracking:false,
						        }]
						    });

						    navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].max;
						    navi_helper.chartModule.synchronizeSubchart(setNum);
						    return true;
						}else if( setNum == 6 ){
							
							this.destroyAllCharts();
							console.log('[updateGraphState]  Updating ('+ navi_helper.contentSets[navi_helper.current_page] +').');
							console.log('[updateGraphState] Preparing Est. Spruce Infestation.');
						    this.chart = Highcharts.chart('set-6-chart', {
						        chart: {
						        	id:'set6',
						            type: 'column',
									spacingRight: 10,
						        },
						        plotOptions:{},
						        title: {
									useHTML:true,
									text: "Heat Tolerance (&deg;C)"
						        },
								subtitle:{
									text:'<span style=\"color:dodgerblue;\">Icefish (-Hb)</span> vs. <span style=\"color:red;\">Rockcod (+Hb)</span> ',
									useHTML:true
								},
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
								legend:{
									enabled:false
								},
						        xAxis: {
						            title: {
										
						            },
									categories: [
										'Icefish <br/> (-Hb, C. aceratus)',
										'Rockcod <br/> (+Hb, N. coriiceps)',
									],
						        },
						        yAxis: {
						            title: {
						                text: 'Heat Tolerance Temperature (&deg; C)',
										useHTML:true
						            },
									labels:{
										
									},
									min:0,
									max:18,
									tickInterval:3
						        },
								series: [{	
									name: 'Water Temperature At Normal Oxygen Levels',
									data: [{
										name: 'Icefish <br/> (-Hb, C. aceratus)',
										color: navi_helper.chartModule.seriesSets['heat-tol-ice'].color,
										y: navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']
									}, {
										name: 'Rockcod <br/> (+Hb, N. coriiceps)',
										color: navi_helper.chartModule.seriesSets['heat-tol-rock'].color,
										y: navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data'],
									}]
								},
								{
									type: 'errorbar',
									data: [
										[0,
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']-navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']+navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['err']
										],
										[1,
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data']-navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data']+navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['err']
										],
									]
								}]
						    });

						    navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].max;
						    navi_helper.chartModule.synchronizeSubchart(setNum);
						    return true;
						} else if( setNum == 7 ){
							
							this.destroyAllCharts();
							console.log('[updateGraphState]  Updating ('+ navi_helper.contentSets[navi_helper.current_page] +').');
							console.log('[updateGraphState] Preparing Est. Spruce Infestation.');
							
						    this.chart = Highcharts.chart('set-7-chart', {
						        chart: {
						        	id:'set7',
						            type: 'spline',
									spacingRight: 10,
						        },
						        plotOptions:{},
						        title: {
						            text: 'Dissolved Oxygen vs Ocean Temperature'
						        },
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
						        xAxis: {
						            title: {
										useHTML:true,
						            	text: "Ocean Temperature (&deg;C)"
						            },
						            type: 'linear',
						            min:-5,
						            max:30,
									labels:{

									},
        plotLines: [{
            color: '#C0C0C0',
            width: 1,
            value: 0
        }]
									//tickInterval:5,
						        },
						        yAxis: {
						            title: {
						                text: 'Dissolved Oxygen (mg/L)'
						            },
									labels:{
										
									},
									min:0,
									max:10,
									tickInterval:1,
						        },

						        series: [{
									type: 'scatter',
						            name: 'Temperature',
						            data: navi_helper.chartModule.seriesSets['dox-vs-ocean-temp'],
						        	color:'darkblue'
						        },{
									type: 'line',
						            name: 'Trend Line',
						            data: [/*[-5,8.3835],*/[-2,8.0274],[0,7.792],[65.66,0]], //y= -.1187x + 7.79 //[-5,10.58],
						        	color:'orange',
									marker:{ enabled:false },
									enableMouseTracking:false,
									
						        }]
						    });
						    this.subcharts['1'] = Highcharts.chart('set-7-subchart-1', {
						        chart: {
						        	id:'set7',
						            type: 'column',
									spacingRight: 10,
						        },
						        plotOptions:{},
						        title: {
									useHTML:true,
									text: "Heat Tolerance (&deg;C)"
						        },
								subtitle:{
									text:'<span style=\"color:dodgerblue;\">Icefish (-Hb)</span> vs. <span style=\"color:red;\">Rockcod (+Hb)</span> ',
									useHTML:true
								},
								legend:{
									enabled:false
								},
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
						        xAxis: {
						            title: {
										
						            },
									categories: [
										'Icefish <br/> (-Hb, C. aceratus)',
										'Rockcod <br/> (+Hb, N. coriiceps)',
									]
						        },
						        yAxis: {
						            title: {
						                text: 'Heat Tolerance Temperature (&deg; C)',
										useHTML:true
						            },
									labels:{
										
									},
									min:0,
									max:18,
									tickInterval:3,
						        },
								series: [{	
									name: 'Water Temperature At Normal Oxygen Levels',
									data: [{
										name: 'Icefish <br/> (-Hb, C. aceratus)',
										color: navi_helper.chartModule.seriesSets['heat-tol-ice'].color,
										y: navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']
									}, {
										name: 'Rockcod <br/> (+Hb, N. coriiceps)',
										color: navi_helper.chartModule.seriesSets['heat-tol-rock'].color,
										y: navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data'],
									}]
								},
								{
									type: 'errorbar',
									data: [
										[0,
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']-navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']+navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['err']
										],
										[1,
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data']-navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data']+navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['err']
										],
									]
								}]
						    });

						    navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].max;
						    navi_helper.chartModule.synchronizeSubchart(setNum);
						    return true;
						}else if( setNum == 8 ){
							
							this.destroyAllCharts();
							console.log('[updateGraphState]  Updating ('+ navi_helper.contentSets[navi_helper.current_page] +').');
							console.log('[updateGraphState] Preparing Est. Spruce Infestation.');
							
						    this.chart = Highcharts.chart('set-8-chart', {
						        chart: {
						        	id:'set8',
						            type: 'column',
									spacingRight: 10,
						        },
								legend:{
									enabled:false
								},
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
					//useHTML:true,
					align:'center',
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
					inside:true,
                    style: {
						color:'contrast',
						//contrast:'black',
						fontSize:'1em',
						textOutline:'none',
                        //textShadow: '0 0 3px black'
                    },
                    formatter: function () {
                        return this.point.name;
                    }
                }
            }
        },
						        title: {
									useHTML:true,
									text: "Heat Tolerance (&deg;C)"
						        },
								subtitle:{
									text:'<span style=\"color:dodgerblue;\">Icefish (-Hb)</span> vs. <span style=\"color:red;\">Rockcod (+Hb)</span> ',
									useHTML:true
								},
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
						        xAxis: {
						            title: {
										
						            },
									categories: [
										'Icefish <br/> (-Hb, C. aceratus)',
										'Rockcod <br/> (+Hb, N. coriiceps)',
									]
						        },
						        yAxis: {
						            title: {
						                text: 'Heat Tolerance Temperature (&deg; C)',
										useHTML:true
						            },
									labels:{
										
									},
									min:0,
									max:18,
									tickInterval:3,
						        },
								series: [{	
									name: 'Water Temperature At Normal Oxygen Levels',
									data: [{
										name: 'Normal <br/> Oxygen',
										color: navi_helper.chartModule.seriesSets['heat-tol-ice'].color,
										y: navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']
									}, {
										name: 'Normal <br/> Oxygen',
										color: navi_helper.chartModule.seriesSets['heat-tol-rock'].color,
										y: navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data'],
									}]
								},
								{
									type: 'errorbar',
									data: [
										[0,
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']-navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']+navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['err']
										],
										[1,
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data']-navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data']+navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['err']
										],
									]
								},{	
									name: 'Water Temperature At Higher Oxygen Levels',
									data: [{
										name: 'Added <br/> Oxygen',
										color: navi_helper.chartModule.seriesSets['heat-tol-ice']['color-alt'],
										y: navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['data']
									}, {
										name: 'Added <br/> Oxygen',
										color: navi_helper.chartModule.seriesSets['heat-tol-rock']['color-alt'],
										y: navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['data'],
									}]
								},
								{
									type: 'errorbar',
									data: [
										[0,
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['data']-navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['data']+navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['err']
										],
										[1,
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['data']-navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['data']+navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['err']
										],
									]
								}]
						    });

						    navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].max;
						    navi_helper.chartModule.synchronizeSubchart(setNum);
						    return true;
						}else if( setNum == 9 ){
							
							this.destroyAllCharts();
							console.log('[updateGraphState]  Updating ('+ navi_helper.contentSets[navi_helper.current_page] +').');
							console.log('[updateGraphState] Preparing Est. Spruce Infestation.');
							
						    this.chart = Highcharts.chart('set-9-chart', {
						        chart: {
						        	id:'set9',
						            type: 'spline',
									spacingRight: 10,
						        },
						        plotOptions:{},
						        title: {
						            text: 'Dissolved Oxygen vs Ocean Temperature'
						        },
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
						        xAxis: {
						            title: {
										useHTML:true,
						            	text: "Ocean Temperature (&deg;C)"
						            },
						            type: 'linear',
						            min:-5,
						            max:30,
									labels:{

									},
        plotLines: [{
            color: '#C0C0C0',
            width: 1,
            value: 0
        }]
									//tickInterval:5,
						        },
						        yAxis: {
						            title: {
						                text: 'Dissolved Oxygen (mg/L)'
						            },
									labels:{
										
									},
									min:0,
									max:10,
									tickInterval:1,
						        },

						        series: [{
									type: 'scatter',
						            name: 'Temperature',
						            data: navi_helper.chartModule.seriesSets['dox-vs-ocean-temp'],
						        	color:'darkblue'
						        },{
									type: 'line',
						            name: 'Trend Line',
						            data: [/*[-5,8.3835],*/[-2,8.0274],[0,7.792],[65.66,0]], //y= -.1187x + 7.79 //[-5,10.58],
						        	color:'orange',
									marker:{ enabled:false },
									enableMouseTracking:false,
						        }]
						    });
						    this.chart = Highcharts.chart('set-9-subchart-1', {
						        chart: {
						        	id:'set9-1',
						            type: 'column',
									spacingRight: 10,
						        },
								legend:{
									enabled:false
								},
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
					//useHTML:true,
					align:'center',
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
					inside:true,
                    style: {
						color:'contrast',
						fontSize:'1em',
                        textOutline:'none'
                    },
                    formatter: function () {
                        return this.point.name;
                    }
                },
				groupPadding:0,
            }
        },
						        title: {
									useHTML:true,
									text: "Heat Tolerance (&deg;C)"
						        },
								subtitle:{
									text:'<span style=\"color:dodgerblue;\">Icefish (-Hb)</span> vs. <span style=\"color:red;\">Rockcod (+Hb)</span> ',
									useHTML:true
								},
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
						        xAxis: {
						            title: {
										
						            },
									categories: [
										'Icefish <br/> (-Hb, C. aceratus)',
										'Rockcod <br/> (+Hb, N. coriiceps)',
									]
						        },
						        yAxis: {
						            title: {
						                text: 'Heat Tolerance Temperature (&deg; C)',
										useHTML:true
						            },
									labels:{
										
									},
									min:0,
									max:18,
									tickInterval:3,
						        },
								series: [{	
									name: 'Normal Oxygen Levels',
									data: [{
										name: 'Normal <br/> Oxygen',
										color: navi_helper.chartModule.seriesSets['heat-tol-ice'].color,
										y: navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']
									}, {
										name: 'Normal <br/> Oxygen',
										color: navi_helper.chartModule.seriesSets['heat-tol-rock'].color,
										y: navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data'],
									}]
								},
								{
									type: 'errorbar',
									data: [
										[0,
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']-navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['data']+navi_helper.chartModule.seriesSets['heat-tol-ice']['temp']['err']
										],
										[1,
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data']-navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['data']+navi_helper.chartModule.seriesSets['heat-tol-rock']['temp']['err']
										],
									]
								},{	
									name: 'Higher Oxygen Levels',
									data: [{
										name: 'Added <br/> Oxygen',
										color: navi_helper.chartModule.seriesSets['heat-tol-ice']['color-alt'],
										y: navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['data']
									}, {
										name: 'Added <br/> Oxygen',
										color: navi_helper.chartModule.seriesSets['heat-tol-rock']['color-alt'],
										y: navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['data'],
									}]
								},
								{
									type: 'errorbar',
									data: [
										[0,
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['data']-navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['data']+navi_helper.chartModule.seriesSets['heat-tol-ice']['temp-high-ox']['err']
										],
										[1,
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['data']-navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['err'],
										navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['data']+navi_helper.chartModule.seriesSets['heat-tol-rock']['temp-high-ox']['err']
										],
									]
								}]
						    });

						    navi_helper.chartModule.chartPointer[setNum].currentPointer = navi_helper.chartModule.chartPointer[setNum].max;
						    navi_helper.chartModule.synchronizeSubchart(setNum);
						    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]);
					
					
					
					
/*					
					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]);
					this.pictureModule.synchronizeGraph(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.current_page == 2 ) {
							//jQuery('span.display-page-1').hide();
						}*/

					}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.current_page == 6 ) {
							jQuery('.display-page-4').hide();
							jQuery('.display-page-5').hide();			
						}*/

						
					}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]');

					Highcharts.chart('static-chart-13-1', {
				        chart: {
				        	id:'static-13-1',
				            type: 'spline',
							className: 'static-13-1',
				        },
						plotOptions:{},
						title: {
							text: 'Normal Oxygen Levels'
						},
						subtitle:{
							text:'Control'
						},
						tooltip:{
							useHTML:true,
							enabled:false
						},
						xAxis: {
							title: {
										useHTML:true,
								text: "Water Temperature (&deg;C)"
							},
							type: 'linear',
							min:0,
							max:20,
							labels:{

							},
							//tickInterval:5,
						},
						yAxis: {
							title: {
								text: 'Dissolved Oxygen (mg/L)'
							},
							labels:{
								
							},
							min:0,
							max:45,
							tickInterval:5,
						},

						series: [{
							type: 'scatter',
							name: 'Temperature',
							data: [[0.439,10.64],[1.398,10.35],[2.717,9.98],[4.063,9.67],[5.514,9.38],[6.813,9.08],[8.02,8.35],[9.361,8.34],[10.712,7.98],[12.05,7.76],[13.449,7.49],[14.745,7.03],[16.129,6.65],[17.415,6.45]],
							color:'darkblue'
						},{
							type: 'line',
							name: 'Trend Line',
							data: [[0,10.67],[18,6.2384]], //y= -.1187x + 7.79 //[-5,10.58],
							color:'orange',
									marker:{ enabled:false },
									enableMouseTracking:false,
						}]
				    });
					Highcharts.chart('static-chart-13-2', {
				        chart: {
				        	id:'static-13-2',
				            type: 'spline',
							className: 'static-13-2',
				        },
						plotOptions:{},
						title: {
							text: 'Increased Oxygen Levels',
						},
						subtitle:{
							text:'Treatment'
						},
						tooltip:{
							useHTML:true,
							enabled:false
						},
						xAxis: {
							useHTML:true,
							title: {
										useHTML:true,
								text: "Water Temperature (&deg;C)"
							},
							type: 'linear',
							min:0,
							max:20,
							labels:{

							},
							//tickInterval:5,
						},
						yAxis: {
							title: {
								text: 'Dissolved Oxygen (mg/L)'
							},
							labels:{
								
							},
							min:0,
							max:45,
							tickInterval:5,
						},

						series: [{
							type: 'scatter',
							name: 'Temperature',
							data: [[0.522,30.89],[1.044,34.1],[1.67,36.29],[2.37,37.88],[3.089,37.22],[3.775,37.78],[4.454,37.8],[5.076,36.76],[5.796,36.93],[6.535,37.33],[7.142,35.89],[7.87,35.14],[8.543,33.72],[9.238,32.72],[9.928,32.04],[10.614,32.04],[11.297,30.92],[12.001,29.89],[12.678,28.57],[13.353,28.8],[14.05,27.38],[14.745,27.06],[15.366,26.82],[15.891,26.33],[16.582,24.8],[17.177,24.61],[17.867,24.81]],
							color:'darkblue'
						},{
							type: 'line',
							name: 'Trend Line',
							data: [/*[-5,8.3835],*/[0,38.912],[18,25.4408]], //y= -.1187x + 7.79 //[-5,10.58],
							color:'orange',
									marker:{ enabled:false },
									enableMouseTracking:false,
						}]
				    });

				}
				
			};
			
			
			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(0);

				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_6_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-6-div').html(myHTML);
					
					console.log('HTML Loaded. Loading other items.');
					afterLoad();
				});

				/*
				jQuery('#story-6-div').load('https://polar-ice.org/wp-content/uploads/2020/03/story_6_eng.html.txt', null, function () {
					afterLoad();
				});
				*/
			});