///TODO: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/plotoptions/series-datagrouping-approximation

//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() );
					});
				}
			});
//column chart story 6
//https://polar-ice.org/focus-areas/polar-data-stories/as-ocean-temperatures-increase-how-will-icefish-do/			
			
			var navi_helper = {
				current_page:1,
				min_page:1,
				max_page:9,
				contentSets:{
					1:1,
					
					2:2,
					3:3,
					4:4,
					5:5,
					6:6,
					7:6,
					8:6,
					9:6
					
				},
				
				pictureGame: {
					picPos:0,
					picId: '#pic-rot-game',
					baseImg:'https://polar-ice.org/wp-content/uploads/2018/06/',
					values:{ 
						microPlastic: 0,
						otherItem: 0
					},
					picList:[
						'IMG_2064.jpg',
						'IMG_2066.jpg',
						'IMG_2085.jpg',
						'IMG_2090.jpg',
						'IMG_2095.jpg',
						'IMG_2314.jpg',
						'IMG_2352.jpg',
						'IMG_2354.jpg',
					],
					nextPic: function () {
						this.picPos++;
						if( this.picPos >= this.picList.length) {
							this.picPos = 0;
						}
						console.log('{Next} Current Pic Position: `', this.picPos ,'`');
						return this.updatePic();
					},
					prevPic: function () {
						this.picPos--;
						if( this.picPos < 0 ) {
							this.picPos = this.picList.length - 1;
						}
						console.log('{Prev} Current Pic Position: `', this.picPos ,'`');
						return this.updatePic();
					},
					updatePic: function () {
						console.log('PicPos: `', this.picPos,'`; PicList: `',this.picList[ this.picPos ],'`')
						jQuery( this.picId ).prop({
							src: ( this.baseImg + this.picList[ this.picPos ] )
						})
						return true;
					},
					resetGame: function () {
						this.values.microPlastic=0;
						this.values.otherItem=0;
						
						this.updateText('var-microplastic');
						this.updateText('var-other-item');
					},
					incrementVar: function (varId) {
						switch(varId){
							case 'var-microplastic':
								this.values.microPlastic++;
								break;
							case 'var-other-item':
								this.values.otherItem++;
								break;
							default:
								return false;
								break;
						}
						this.updateText(varId);
						return true;
					},
					decrementVar: function (varId) {
						switch(varId){
							case 'var-microplastic':
								this.values.microPlastic--;
								if( this.values.microPlastic < 0 ) { 
									this.values.microPlastic = 0;
								}
								break;
							case 'var-other-item':
								this.values.otherItem--;
								if( this.values.otherItem < 0 ) { 
									this.values.otherItem = 0;
								}
								break;
							default:
								return false;
								break;
						}
						this.updateText(varId);
						return true;
					},
					updateText: function (varId) {
						switch(varId){
							case 'var-microplastic':
								jQuery('#' + varId).val(this.values.microPlastic);
								break;
							case 'var-other-item':
								jQuery('#' + varId).val(this.values.otherItem);
								break;
							default:
								break;
						}
						
						jQuery('#found-total').text(
							this.values.microPlastic + this.values.otherItem
						);
						
						return true;
					}
					
				},
				
				
				
				
				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:{
						
						'fjordx':{ //M COVE
							'microfragments':{
								color:'darkred',
								surface: 830,
								depth: 616
							},
							'microfibers':{
								color:'lightcoral',
								surface: 178,
								depth: 230
							}
						},
						'fjordy':{ //BB
							'microfragments':{
								color:'indigo',
								surface: 446,
								depth: 1064
							},
							'microfibers':{
								color:'mediumpurple',
								surface: 54,
								depth: 69
							}
						}
						
					}, 
					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;
					},
					synchronizeSubchart: function (setNum){
						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 == 4 ) {
							
							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-4-graph', {
						        chart: {
						        	id:'set-4-graph',
						            type: 'column',
									spacingRight: 10,
						        },
								legend:{
									enabled: true
								},
								plotOptions: {
									column: {
										dataLabels: {
											enabled: true,
											//useHTML:true,
											align:'center',
											color: 'black' || (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: "Microplastic Overall Count"
						        },
								subtitle:{
									text:'Fjord Marion Cove',
									useHTML:true
								},
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
						        xAxis: {
						            title: {
										
						            },
									categories: [
										'Surface (0m)',
										'Depth (80m)',
									]
						        },
						        yAxis: {
						            title: {
						                text: 'Counts',
										useHTML:true
						            },
									labels:{
										
									},
									min:0,
									max:1250
									//max:9,
									//tickInterval:3,
						        },
								series: [{	
									id: 'microfrag',
									name: 'Microfragments',
									type:'column',
									stack:'fjordx',
									stacking:"normal",
									data: [
										[0,this.seriesSets.fjordx.microfragments.surface],
										[1,this.seriesSets.fjordx.microfragments.depth]
									],
									color:this.seriesSets.fjordx.microfragments.color,
								},
								{	
									id: 'microfib',
									name: 'Microfibers',
									type:'column',
									stack:'fjordx',
									stacking:"normal",
									data:[
										[0,this.seriesSets.fjordx.microfibers.surface],
										[1,this.seriesSets.fjordx.microfibers.depth]
									],
									color:this.seriesSets.fjordx.microfibers.color,
								}
]
						    });
						    return true;
						}else if( setNum == 5 ) {
							
							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-5-graph', {
						        chart: {
						        	id:'set-5-graph',
						            type: 'column',
									spacingRight: 10,
						        },
								legend:{
									enabled: true
								},
								plotOptions: {
									column: {
										dataLabels: {
											enabled: true,
											//useHTML:true,
											align:'center',
											color: 'black' || (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: "Microplastic Overall Count"
						        },
								subtitle:{
									text:'Fjord Borgen Bay',
									useHTML:true
								},
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
						        xAxis: {
						            title: {
										
						            },
									categories: [
										'Surface (0m)',
										'Depth (80m)',
									]
						        },
						        yAxis: {
						            title: {
						                text: 'Counts',
										useHTML:true
						            },
									labels:{
										
									},
									min:0,
									max:1250
									//max:9,
									//tickInterval:3,
						        },
								series: [{	
									id: 'microfrag',
									name: 'Microfragments',
									type:'column',
									stack:'fjordy',
									stacking:"normal",
									data: [
										[0,this.seriesSets.fjordy.microfragments.surface],
										[1,this.seriesSets.fjordy.microfragments.depth]
									],
									color:this.seriesSets.fjordy.microfragments.color,
									
								},
								{	
									id: 'microfib',
									name: 'Microfibers',
									type:'column',
									stack:'fjordy',
									stacking:"normal",
									data:[
										[0,this.seriesSets.fjordy.microfibers.surface],
										[1,this.seriesSets.fjordy.microfibers.depth]
									],
									color:this.seriesSets.fjordy.microfibers.color,
								}
]
						    });
						    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-graph', {
						        chart: {
						        	id:'set-6-graph',
						            type: 'column',
									spacingRight: 10,
						        },
								legend:{
									enabled: true
								},
								plotOptions: {
									column: {
										dataLabels: {
											enabled: true,
											//useHTML:true,
											align:'center',
											color: 'black' || (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: "Microplastic Overall Count"
						        },
								subtitle:{
									text:'Fjord Marion Cove vs Fjord Borgen Bay',
									useHTML:true
								},
						        tooltip:{
						        	useHTML:true,
						        	enabled:false
						        },
						        xAxis: {
						            title: {
										
						            },
									categories: [
										'Surface (0m)',
										'Depth (80m)',
									]
						        },
						        yAxis: {
						            title: {
						                text: 'Counts',
										useHTML:true
						            },
									labels:{
										
									},
									min:0,
									max:1250,
									//max:9,
									//tickInterval:3,
						        },
								series: [{	
									id: 'microfrag',
									name: 'Microfragments (darker colors)',
									type:'column',
									stack:'fjordx',
									stacking:"normal",
									data: [
										[0,this.seriesSets.fjordx.microfragments.surface],
										[1,this.seriesSets.fjordx.microfragments.depth]
									],
									color:this.seriesSets.fjordx.microfragments.color,

								},
								{	
									id: 'microfib',
									name: 'Microfibers (lighter colors)',
									type:'column',
									stack:'fjordx',
									stacking:"normal",
									data:[
										[0,this.seriesSets.fjordx.microfibers.surface],
										[1,this.seriesSets.fjordx.microfibers.depth]
									],
									color:this.seriesSets.fjordx.microfibers.color,
								},{	
									name: 'Microfragments',
									type:'column',
									stack:'fjordy',
									linkedTo:'microfrag',
									stacking:"normal",
									data:[
										[0,this.seriesSets.fjordy.microfragments.surface],
										[1,this.seriesSets.fjordy.microfragments.depth]
									],
									color:this.seriesSets.fjordy.microfragments.color,
								},
								{	
									name: 'Microfibers',
									type:'column',
									linkedTo:'microfib',
									stack:'fjordy',
									stacking:"normal",
									data:[
										[0,this.seriesSets.fjordy.microfibers.surface],
										[1,this.seriesSets.fjordy.microfibers.depth]
									],
									color:this.seriesSets.fjordy.microfibers.color,
								}
]
						    });
							jQuery('svg.highcharts-root .highcharts-legend .highcharts-series-0 rect').remove()
							jQuery('svg.highcharts-root .highcharts-legend .highcharts-series-1 rect').remove()
						    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]);
					
					
					if ( this.contentSets[this.current_page] == 6 ) {
						if( this.current_page == 6 ) {
							jQuery('.display-page-7').hide();	
						}else{
							jQuery('.display-page-7').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/08/story_8_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-8-div').html(myHTML);
					
					console.log('HTML Loaded. Loading other items.');
					afterLoad();
				});
				/*
				jQuery('#story-8-div').load('https://polar-ice.org/wp-content/uploads/2018/11/story_8_html_20181116.txt', null, function () {
					afterLoad();
				});
				*/
			});