var whaleData=[[1241715360000,1],[1241715720000,1],[1241716080000,3],[1241716440000,5],[1241716800000,7],[1241717160000,8],[1241717520000,9],[1241717880000,10],[1241718240000,6],[1241718600000,5],[1241718960000,8],[1241719320000,9],[1241719680000,10],[1241720040000,7],[1241720400000,6],[1241720760000,5],[1241721120000,7],[1241721480000,9],[,14],[1241722200000,20],[1241722560000,40],[1241722920000,50],[1241723280000,50],[1241723640000,50],[1241724000000,49],[1241724360000,50],[1241724720000,50],[1241725080000,49],[1241725440000,50],[1241725800000,51],[1241726160000,55],[1241726520000,52],[1241726880000,50],[1241727240000,30],[1241727600000,20],[1241727960000,15],[1241728320000,10],[1241728680000,250],[1241729040000,350],[1241729400000,325],[1241729760000,300],[1241730120000,325],[1241730480000,350],[1241730840000,250],[1241731200000,10],[1241731560000,130],[1241731920000,250],[1241732280000,290],[1241732640000,100],[1241733000000,50],[1241733360000,10],[1241733720000,350],[1241734080000,300],[1241734440000,325],[1241734800000,55],[1241735160000,100],[1241735520000,50],[1241735880000,200],[1241736240000,150],[1241736600000,290],[1241736960000,200],[1241737320000,100],[1241737680000,50],[1241738040000,10],[1241738400000,10],[1241738760000,250],[1241739120000,350],[1241739480000,300],[1241739840000,350],[1241740200000,250],[1241740560000,100],[1241740920000,10],[1241741280000,250],[1241741640000,350],[1241742000000,300],[1241742360000,350],[1241742720000,250],[1241743080000,100],[1241743440000,10],[1241743800000,250],[1241744160000,350],[1241744520000,300],[1241744880000,350],[1241745240000,250],[1241745600000,10]];

			//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:9,
				ext_enabled: false,
				dataValues: {
					fakeWhale:[],
					fakeWhaleClick:[],
					fakeKrill:[],
					realKrill:[],
					realWhale:[]
				},
				my_chart: null,
				enable_extension: function () {
					this.ext_enabled=true;
					jQuery('button','#mosaic-button-nav').removeClass('ext-button');
					this.go_to_page('next');
					return true;
				},
				seriesSets: {
					randomSeries: [],
					krillData: [],
					whaleData: [],
					patternWhaleData: []
				},
				initialize_graphs: function () {
					Highcharts.setOptions({global: { useUTC: true } });
					jQuery.get(
						'https://polar-ice.org/wp-content/uploads/2017/10/live_real_data_upd.csv',
						function (csv) {
							//console.log('test');
							navi_helper.seriesSets.krillData = csv;
							//console.log('wtf');
						}
					);
					jQuery.get(
						'https://polar-ice.org/wp-content/uploads/2017/07/whale_data.csv',
						function (csv) {
							var lineSplit = csv.split("\n");
							for(var i in lineSplit) {
								var myData = lineSplit[i].split(',');
								var myTime = (new Date(myData[0]));
								myTime.setHours( myTime.getHours() -4 );
								myTime= myTime.getTime();
								if(myTime < 1241700960000 || myTime > 1241731200000  ) {
								}else{
									//console.log(myTime);
									navi_helper.seriesSets.whaleData.push([myTime,parseFloat(myData[1])]);
								}
							}
							navi_helper.seriesSets.whaleData.shift();
						}
					);
	                var startTime = (new Date('5/7/2009 8:56:00'));
					var i;
	                for (i = 0; i < 85; i++) {
	                	var time = startTime.getTime();
	                    navi_helper.seriesSets.randomSeries.push([
	                        time,
	                        Math.round(Math.random() * 370) + 10
	                    ]);
	                	startTime.setMinutes(startTime.getMinutes() + 6);
	                }
	                //Var whaleData comes from whale extension js
	                navi_helper.seriesSets.patternWhaleData=whaleData;
					Highcharts.setOptions({global: { useUTC: true } });
				    this.my_chart = Highcharts.chart('highcharts-graph-1', {
				        chart: {
				            type: 'spline',
							spacingRight: 10,
				        },
				        plotOptions:{
							
						},
				        title: {
				            text: 'Datos de seguimiento de una ballena'
				        },
				        tooltip:{
				        	useHTML:true,
				        	enabled:false
				        },
				        xAxis: {
				            title: {
				            	text: "Tiempo"
				            },
				            type: 'datetime',
							labels:{
								formatter: function () {
									//console.log(this.value);
									if( this.value === 1241701200000) {
										return '13:00 <br /> Mediodía'
									}
									if( this.value === 1241730000000) {
										return '21:00 <br /> Tarde a la noche'
									}
									var myFormat = (new Date());
									myFormat.setTime(this.value);
									//console.log(myFormat);
									return (myFormat.getHours()+4) + ':' + (myFormat.getMinutes() < 10 ? '0' + myFormat.getMinutes() : myFormat.getMinutes() ) ;
									//return this.value;
								}
							}
				        },
				        yAxis: {
				            title: {
				                text: 'Profundidad (m)'
				            },
							reversed: true,
							labels:{
								formatter: function () {
									//console.log(this.value);
									if( this.value===0 ) {
										return 'Superficie 0';
									}
									if( this.value===400 ) {
										return 'Profundo 400';
									}
									return this.value;
								}
							}
				        },
				        series: [{
				            name: 'Profundidad',
				            data: navi_helper.seriesSets.randomSeries,
				            enableMouseTracking: false,
							lineWidth:3
				        }]
				    });
				    this.my_chart.addSeries({
			            name: 'whale click',
			            showInLegend: false,
			            cursor:'pointer',
			            data: (function () {
			                //Grab the last item in the previous series
			                var data = [];
			                var my_pt = navi_helper.my_chart.series[0].points[ navi_helper.my_chart.series[0].points.length - 1] ;
			                //data.push( );
		                    data.push([
		                    	my_pt.x,
		                    	my_pt.y
		                    ]);
			                //console.log(data);
			                return data;
			            }()),
			            visible:false,
			            allowPointSelect: false,
			            enableMouseTracking: true,
				        marker: {
				            symbol: "url(https://polar-ice.org/wp-content/uploads/2017/10/grey_whale_reverse.png)",
				            width:50,
				            height:28
				        },
				        selected:true,
			            point:{
			            	events:{
			            		click: function(e) {
			            			console.log('selected whale');
			            			console.log(e);
			            			jQuery('span.marker').trigger('click');
			            		}
			            	}
			            },
			            tooltip:{
			            	headerFormat:'',
			            	hideDelay:6000,
			                pointFormatter: null/*function() {
			                    return 'Para saber más sobre las ballenas jorobadas en la Antártida, vean los siguientes recursos: <a target="_blank" href="https://www.fisheries.noaa.gov/">NMFS</a> o <a target="_blank" href="https://www.acsonline.org/">American Cetacean Society</a>';
			                }*/
			            }
			      });
				     this.update_info_bubbles();
				},
				fps: 3, //show two frames every second. (1000 ms/#)
				my_timer: {
					1: null,
					2: null
				},
				dynamic_images:{},
				clearChartData: function () {
					//console.log(this.my_chart);
					while(this.my_chart.series.length > 0) {
						this.my_chart.series[0].remove(true);
					}
				},
				clickEnabled:false,
				myWhalePredictions: [],
				whalePreditionsActive:false,
				chartClickEvent: function ( event ) {
					if( navi_helper.clickEnabled ) {
						navi_helper.my_chart.renderer.image(
							'https://polar-ice.org/wp-content/uploads/2017/10/grey_whale_reverse.png',
	                        event.xAxis[0].axis.toPixels(event.xAxis[0].value)-25,
	                        event.yAxis[0].axis.toPixels(event.yAxis[0].value)-14,
	                        50, //width
	                        28
	                    ).attr({
                            zIndex: 8
                        })
                        .css({
                            color: '#FFFFFF'
                        }).add();
						navi_helper.myWhalePredictions.push({
							img:'https://polar-ice.org/wp-content/uploads/2017/10/grey_whale_reverse.png',
	                        x: event.xAxis[0].axis.toPixels(event.xAxis[0].value)-25,
	                        y: event.yAxis[0].axis.toPixels(event.yAxis[0].value)-14,
	                        w: 50, //width
	                        h: 28
						});
						navi_helper.whalePreditionsActive = true;
                        //.add();
					}
				},
				my_popups:{
					1:[{
						icon:'whale',
						position:{top:'50%', left: '50%', align:''},
						content:'Para saber más sobre las ballenas jorobadas en la Antártida, vean los siguientes recursos:  <a href="http://www.nmfs.noaa.gov/pr/species/mammals/whales/humpback-whale.html" target="_blank">NMFS</a> o <a href="http://acsonline.org/fact-sheets/humpback-whale/" target="_blank">American Cetacean Society</a>',
						size:''
					}], //None
					2:[{
						icon:'whale',
						position:{top:'50%', left: '50%', align:''},
						content:'Para saber más sobre las ballenas jorobadas en la Antártida, vean los siguientes recursos:  <a href="http://www.nmfs.noaa.gov/pr/species/mammals/whales/humpback-whale.html" target="_blank">NMFS</a> o <a href="http://acsonline.org/fact-sheets/humpback-whale/" target="_blank">American Cetacean Society</a>',
						size:''
					}],
					3:[{
						icon:'plankton',
						position:{top:'18%', left: '30%', align:''},
						content:'To learn more about Antarctic krill in Antarctica, check out these resources: <a href="http://www.fao.org/fishery/species/3393/en" target="_blank">FAO</a>, <a href="http://www.iucnredlist.org/details/64239743/0" target="_blank">IUCN</a>, or <a href="http://www.antarctica.gov.au/about-antarctica/wildlife/animals/krill" target="_blank">Australian Antarctic Division</a> or <a href="http://acsonline.org/fact-sheets/humpback-whale/" target="_blank">American Cetacean Society</a>',
						size:''
					}],
					4:[],
					5:[],
					6:[]
				},
				restoreGraphState: function ( page_num ){
					//If page 1 or two, we just have the rando whale data.
					if( page_num == 1 || page_num == 2 || page_num == 3 || page_num == 4) {
						navi_helper.whalePreditionsActive = false;
						navi_helper.myWhalePredictions=[];
					}
					if( page_num == 1 || page_num == 2) {
						navi_helper.whalePreditionsActive = false;
						navi_helper.myWhalePredictions=[];
					    this.my_chart = Highcharts.chart('highcharts-graph-1', {
					        chart: {
					            type: 'spline',
								spacingRight: 20,
					        },
					        plotOptions:{},
					        title: {
					            text: 'Datos de seguimiento de una ballena'
					        },
					        tooltip:{
					        	useHTML:true,
					        	enabled:false
					        },
					        xAxis: {
					            title: {
					            	text: "Tiempo"
					            },
					            type: 'datetime',
								labels:{
									formatter: function () {
										if( this.value === 1241701200000) {
											return '13:00 <br /> Mediodía'
										}
										if( this.value === 1241730000000) {
											return '21:00 <br /> Tarde a la noche'
										}
										var myFormat = (new Date());
										myFormat.setTime(this.value);
										return (myFormat.getHours()+4) + ':' + (myFormat.getMinutes() < 10 ? '0' + myFormat.getMinutes() : myFormat.getMinutes() ) ;
										//return this.value;
									}
								}
					        },
					        yAxis: {
					            title: {
					                text: 'Profundidad (m)'
					            },
								reversed: true,
								labels:{
									formatter: function () {
										//console.log(this.value);
										if( this.value===0 ) {
											return 'Superficie 0';
										}
										if( this.value===400 ) {
											return 'Profundo 400';
										}
										return this.value;
									}
								}
					        },
					        series: [{
					            name: 'Profundidad',
					            data: navi_helper.seriesSets.randomSeries,
					            enableMouseTracking: false,
								lineWidth:3
					        }]
					    });
					    this.my_chart.addSeries({
				            name: 'whale click',
				            showInLegend: false,
				            cursor:'pointer',
				            data: (function () {
				                //Grab the last item in the previous series
				                var data = [];
				                var my_pt = navi_helper.my_chart.series[0].points[ navi_helper.my_chart.series[0].points.length - 1] ;
				                //data.push( );
			                    data.push([
			                    	my_pt.x,
			                    	my_pt.y
			                    ]);
				                //console.log(data);
				                return data;
				            }()),
				            visible:false,
				            allowPointSelect: false,
				            enableMouseTracking: true,
					        marker: {
					            symbol: "url(https://polar-ice.org/wp-content/uploads/2017/10/grey_whale_reverse.png)",
					            width:50,
					            height:28
					        },
					        selected:true,
				            point:{
				            	events:{
				            		click: function(e) {
				            			//console.log('selected whale');
				            			//console.log(e);
				            			jQuery('span.marker').trigger('click');
				            			/*
				            			this
				            			.graphic
				                        .css({'transform': 'rotate(180deg)'})
				                        */
				            		}
				            	}
				            },
				            tooltip:{
				            	headerFormat:'',
				            	hideDelay:6000,
				                pointFormatter: null/*function() {
				                    return 'To learn more about Humpback whales in Antarctica, check out these resources: <a href="#">NMFS</a> or <a href="#">American Cetacean Society</a>';
				                }*/
				            }
				      });
					    //If this is specifically the second Page, we add the whale marker
					    if (page_num==2) {
//console.log(this.my_chart.series);
this.my_chart.series[1].setVisible(true);
						    var p = this.my_chart.series[1].points[ this.my_chart.series[1].points.length - 1];
						    p.update({
						        marker: {
						            symbol: "url(https://polar-ice.org/wp-content/uploads/2017/10/grey_whale_reverse.png)",
						            width:50,
						            height:28
						        },
						        selected:true
					    	});
						    if( !navi_helper.my_chart.get('y-axis-helper') ) {
							    navi_helper.my_chart.addAxis({
							    	id:'y-axis-helper',
							    	title: {
							    		text: 'Cuán lejos de la superficie estaba la ballena',
							    		style:{
							    			fontSize:'large',
							    			color:'black'
							    		}
							    	}
							    },false,true,true);
						    }
						    if( !navi_helper.my_chart.get('x-axis-helper') ) {
							    navi_helper.my_chart.addAxis({
							    	id:'x-axis-helper',
							    	lineWidth:0,
							    	title: {
							    		text: 'Cuándo estuvo acá la ballena',
							    		style:{
							    			fontSize:'large',
							    			color:'black'
							    		}
							    	}
							    },true,true,true);
						    }
					    }
					}else if (page_num==3 || page_num==4 || page_num==5 || page_num==6) {
						this.clearChartData();
						this.my_chart = Highcharts.chart('highcharts-graph-1', {
						    data: {csv:navi_helper.seriesSets.krillData},
						    chart: {
						        type: 'heatmap',
						        zoomType: 'xy',
								colsize: 360000,
								events: {
									click: navi_helper.chartClickEvent
								}
						        //margin: [60, 10, 80, 50]
						    },
						    legend: {
						        align: 'right',
						        layout: 'vertical',
						        margin: 0,
						        padding:0,
						        verticalAlign: 'top',
						        reversed:true,
						        symbolHeight:400,
						        title:'Krill Weight',
						        y:50
						    },
						    boost: {
						        useGPUTranslations: true
						    },
						    title: {
						        text: 'Datos del krill',
						        align: 'center',
						        x: 40
						    },
					        xAxis: {
					            title: {
					            	text: "Tiempo"
					            },
					            type: 'datetime',
								labels:{
									formatter: function () {
										//console.log('[Restore Graph] X Axis: '+ this.value);
										if( this.value === 1241701200000) {
											return '13:00 <br /> Mediodía'
										}
										if( this.value === 1241730000000) {
											return '21:00 <br /> Tarde a la noche'
										}
										var myFormat = (new Date());
										myFormat.setTime(this.value);
										//console.log(myFormat);
										return (myFormat.getHours()+4) + ':' + (myFormat.getMinutes() < 10 ? '0' + myFormat.getMinutes() : myFormat.getMinutes() ) ;
										//return this.value;
									}
								}
					        },
					        yAxis: {
					            title: {
					                text: 'Profundidad (m)'
					            },
								reversed: true,
								labels:{
									formatter: function () {
										//console.log('[Restore Graph] Y Axis: '+ this.value);
										if( this.value===0 ) {
											return 'Superficie 0';
										}
										if( this.value===400 ) {
											return 'Profundo 400';
										}
										return this.value;
									}
								},
								min:0,
								max:400,
						        minPadding: 0,
						        maxPadding: 0,
						        startOnTick: false,
						        endOnTick: false,
						        tickWidth: 1,
								reversed: true,
					        },
						    colorAxis: {
						        stops: [
									[0,'#1589FF'],
						            //[0, '#3060cf'],
						            [0.5, '#fffbbc'],
						            [0.9, '#c4463a'],
						            [1, '#c4463a']
						        ],
						        min: 0,
						        max: 19.2786,
						        startOnTick: false,
						        endOnTick: false,
						        labels: {
						            format: '{value} <WEIGHT UNIT>'
						        }
						    },
						    series: [{
						        boostThreshold: 100,
						        borderWidth: 0,
						        colsize: 360000,
						        rowsize:10,
						        /*colsize: 360000,
						        rowsize: 10,*/
						        nullColor: '#000000',
						        tooltip: {
						            headerFormat: 'Peso del krill en la profundidad<br />',
						            pointFormat: '{point.x:%e %b, %Y %H:%M:%S} - Profundidad:<b>{point.y}</b>, Pseo: <b>{point.value}</b>'
						        },
						        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
						    }/*,{
					            name: 'Depth',
					            type:'spline',
					            data: navi_helper.seriesSets.randomSeries,
					            enableMouseTracking: false
					        }*/]
						});
					    if( !navi_helper.my_chart.get('y-axis-helper') ) {
						    navi_helper.my_chart.addAxis({
						    	id:'y-axis-helper',
						    	title: {
						    		text: 'Cuán lejos debajo de la superficie estaba el krill',
						    		style:{
						    			fontSize:'large',
						    			color:'black'
						    		}
						    	}
						    },false,true,true);
					    }
					    if( !navi_helper.my_chart.get('y-axis-helper-2') ) {
						    navi_helper.my_chart.addAxis({
						    	id:'y-axis-helper',
						    	title: {
						    		text: 'Cantidad de krill (g)',
						    		style:{
						    			fontSize:'medium',
						    			color:'black',
						    			height:'40px',
						    		}
						    		,rotation:270
						    	}, opposite:true
						    },false,true,true);
					    }
					    if( !navi_helper.my_chart.get('x-axis-helper') ) {
						    navi_helper.my_chart.addAxis({
						    	id:'x-axis-helper',
						    	lineWidth:0,
						    	title: {
						    		text: 'Cuándo estuvo el krill ahí',
						    		style:{
						    			fontSize:'large',
						    			color:'black'
						    		}
						    	}
						    },true,true,true);
					    }
					    if( page_num == 5 || page_num == 6 ) {
							if( navi_helper.whalePreditionsActive ) {
								for(var i in navi_helper.myWhalePredictions){
									var whalePred = navi_helper.myWhalePredictions[i];
									navi_helper.my_chart.renderer.image(
										whalePred.img,
										whalePred.x,
										whalePred.y,
										whalePred.w,
										whalePred.h
									).attr({
										zIndex: 8
									})
									.css({
										color: '#FFFFFF'
									}).add();
								}
							}
					    }
					}
				},
				extStage:0,
				extInProgress:false,
				extensionUpdateChart: function (stage){
					if( navi_helper.extInProgress ) {
						return;
					}
					navi_helper.extInProgress=true;
					if( stage ) {
						if( stage == 'prev' ) {
							navi_helper.extStage--;
							if(navi_helper.extStage<0){
								navi_helper.extStage=0;
							}
						}else if( stage == 'replay' ) {
							navi_helper.extStage=navi_helper.extStage;
						}else if( stage == 'next' ) {
							navi_helper.extStage++;
							if(navi_helper.extStage>3){
								navi_helper.extStage=3;
							}
						}
					}else{
						navi_helper.extStage=0;
					}
					var i=0;
					var endI = 0;
					timeInterval = 200; //ms
					if( navi_helper.extStage == 0 ){
						i=0;
						markerStartI = 0;
						endI=19;
						jQuery('#li-resting').hide();
						jQuery('#li-traveling').hide();
						jQuery('#li-exploring').hide();
						jQuery('#li-feeding').hide();
						jQuery('p.exploring-finished').hide();
						jQuery('#li-resting').fadeIn('slow');
						//remove plot bands
						navi_helper.my_chart.xAxis[0].removePlotBand('band-travel',false);
						navi_helper.my_chart.xAxis[0].removePlotBand('band-exploring',false);
						navi_helper.my_chart.xAxis[0].removePlotBand('band-feeding',false);
						navi_helper.my_chart.xAxis[0].removePlotBand('band-resting',false);
						navi_helper.my_chart.xAxis[0].addPlotBand({ // mark the weekend
							id:'band-resting',
				            color:  'rgba(255,255,255,0)',
				            from: Date.UTC(2009, 4, 7, 12, 46 ,00 ),
				            to: 1241721840000,
				            label: { text: "En reposo",
				                style: {
				                    color: 'blue',
				                    fontWeight: 'bold',
				                    fontSize:'x-large'
				                },
			                    y:-5
				            },
				            zIndex:20
				        });
					}else if( navi_helper.extStage == 1 ){
						i=19;
						markerStartI = i-1;
						endI=37;
						jQuery('#li-traveling').hide();
						jQuery('#li-feeding').hide();
						jQuery('#li-exploring').hide();
						jQuery('p.exploring-finished').hide();
						jQuery('#li-traveling').fadeIn('slow');
						navi_helper.my_chart.xAxis[0].removePlotBand('band-travel',false);
						navi_helper.my_chart.xAxis[0].removePlotBand('band-exploring',false);
						navi_helper.my_chart.xAxis[0].removePlotBand('band-feeding',false);
						navi_helper.my_chart.xAxis[0].addPlotBand({ // mark the weekend
							id:'band-travel',	
					            color: 'rgba(255,255,255,0)',
				            from: 1241721840000,
				            to: 1241728320000,
				            label: { text: "Viajando",
				                style: {
				                    color: 'red',
				                    fontWeight: 'bold',
				                    fontSize:'x-large'
				                },
			                    y:-5
				            },
				            zIndex:20
				        });
/*
		            	   value: 1241721840000,
		            	   color: 'blue'
		            	}, {
	            			value:1241728320000,
		            	   	color: 'red'
		            	}, {
		            		value:1241738400000,
			            	   color: 'green'
			            	}, {
				            	   color: 'gold'
				            	}]
				            	*/
					}else if( navi_helper.extStage == 2 ){
						i=37;
						endI=65;
						markerStartI = i-1;
						jQuery('#li-exploring').hide();
						jQuery('#li-feeding').hide();
						jQuery('p.exploring-finished').hide();
						jQuery('#li-exploring').fadeIn('slow');
						timeInterval=400;
						navi_helper.my_chart.xAxis[0].removePlotBand('band-feeding',false);
						navi_helper.my_chart.xAxis[0].removePlotBand('band-exploring',false);
						navi_helper.my_chart.xAxis[0].addPlotBand({ // mark the weekend
							id:'band-exploring',	
					            color: 'rgba(255,255,255,0)',
				            from: 1241728320000,
				            to: 1241738400000,
				            label: { text: "Exploración",
				                style: {
				                    color: 'gold',
				                    fontWeight: 'bold',
				                    fontSize:'x-large'
				                },
			                    y:-5
				            },
				            zIndex:20
				        });
					}else if( navi_helper.extStage == 3 ){
						i=65;
						endI=85;
						markerStartI = i-1;
						timeInterval=500;
						jQuery('#li-feeding').hide();
						jQuery('p.feeding-finished').hide();
						jQuery('#li-feeding').fadeIn('slow', function () {
							jQuery('p.feeding-finished').fadeIn('slow');
						});
						navi_helper.my_chart.xAxis[0].removePlotBand('band-feeding',false);
						navi_helper.my_chart.xAxis[0].addPlotBand({ // mark the weekend
							id:'band-feeding',	
					            color: 'rgba(255,255,255,0)',
				            from: 1241738400000,
				            to: 1241745600000,
				            label: { text: "Alimentación",
				                style: {
				                    color: 'green',
				                    fontWeight: 'bold',
				                    fontSize:'x-large'
				                },
			                    y:-5
				            },
				            zIndex:20
				        });
					}
					//remove points, no animation
					var minusI = navi_helper.my_chart.series[0].data.length-1;
					for(minusI;minusI>=i;minusI--){
						navi_helper.my_chart.series[0].removePoint(minusI,false, false);
					}
					//Move whale to last point.
					var series2 = navi_helper.my_chart.get('end point');
                  	series2.data[0].update(navi_helper.seriesSets.patternWhaleData[markerStartI], false, false);
				    navi_helper.my_chart.redraw(false);
					var myInterval = setInterval(function () {
							if (i<endI) {
								var series2 = navi_helper.my_chart.get('end point');
								if( !series2 ) {
									navi_helper.extInProgress=false;
									clearInterval(myInterval);
								}
			                  	series2.data[0].update(navi_helper.seriesSets.patternWhaleData[i], false);
								navi_helper.my_chart.series[0].addPoint(navi_helper.seriesSets.patternWhaleData[i], false, false,{duration:(timeInterval/2),easing:true});
								navi_helper.my_chart.redraw();
								i++;
							}else{
								navi_helper.extInProgress=false;
								clearInterval(myInterval);
							}
						},timeInterval);
						//navi_helper.my_chart.series[0].addPoint(navi_helper.seriesSets.patternWhaleData[i], true, false,{duration:5000,easing:true});
						//navi_helper.my_chart.redraw({duration:5000,easing:true});
				},
				go_to_page: function ( page_num ) {
					//console.info('[navi_helper]: Go to page `'+ page_num +'`.');
					if( page_num == 'next' ) {
//IF This page is CURRENTLY 4, we will try to stop them from continuing until they click  at least one whale on the maps/justmap_new_160212/tidalcurrents_20150208T0100
if( this.current_page == 4 ) {
console.log('Page 4, check to move to page 5');
if( navi_helper.myWhalePredictions.length < 1 ) {
console.log('Do not switch pages: User did not click for a pretty whale.');
alert('Por favor hacer clic con el mouse en el gráfico antes de continuar');
return true;
}
}
						this.current_page++;
						if( !this.ext_enabled ) { 
							if( this.current_page == 7 ){
								this.current_page = this.max_page;
							}
						}
					}else if( page_num == 'prev' ) {
							this.current_page--;
						if( !this.ext_enabled ) { 
						
							if( this.current_page == 7 || this.current_page == 8){
								this.current_page = 6;
							}
						}else{
							if( this.current_page < this.min_page) {
								this.current_page = this.min_page;
							}
						}
						this.restoreGraphState(this.current_page);
						
					}else{
						this.current_page = parseInt(page_num);
						this.restoreGraphState(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;
					}
					jQuery('#krill-overlay').hide();
					if( this.current_page == 0 ) {
						jQuery('#intro-pic').show();
						jQuery('#picture-frame-1').hide();
					}else{
						jQuery('#intro-pic').hide();
						jQuery('#picture-frame-1').show();
					}
					
					if( this.current_page == 1 ){
jQuery('#extension-controls').hide();
					    //this.my_chart.series[1].setVisible(false);
					}
					else if( this.current_page == 2 ) {
						jQuery('#extension-controls').hide();
						/*
						this.my_chart.yAxis[0].update({
							opposite : true
						});*/
						//console.log(this.my_chart.series);
					    this.my_chart.series[1].setVisible(true);
//console.log('why does points exist here?');
					    //console.log( this.my_chart.series[1].points ) ;
					    var p = this.my_chart.series[1].points[ this.my_chart.series[1].points.length - 1];
					    p.update({
					        marker: {
					            symbol: "url(https://polar-ice.org/wp-content/uploads/2017/10/grey_whale_reverse.png)",
					            width:50,
					            height:28
					        },
					        selected:true
				    	});
					    if( !navi_helper.my_chart.get('y-axis-helper') ) {
						    navi_helper.my_chart.addAxis({
						    	id:'y-axis-helper',
						    	title: {
						    		text: 'Cuán lejos de la superficie estaba la ballena',
						    		style:{
						    			fontSize:'large',
						    			color:'black'
						    		}
						    	}
						    },false,true,true);
					    }
					    if( !navi_helper.my_chart.get('x-axis-helper') ) {
						    navi_helper.my_chart.addAxis({
						    	id:'x-axis-helper',
						    	lineWidth:0,
						    	title: {
						    		text: 'Cuándo estuvo acá la ballena',
						    		style:{
						    			fontSize:'large',
						    			color:'black'
						    		}
						    	}
						    },true,true,true);
					    }
					    //this.my_chart.series[1].update({visible:true});
						/*
						this.my_chart.renderer.label(
							'<img src="https://polar-ice.org/wp-content/uploads/2016/02/icon_whale.png" /> ASF',
							100, 100,
							'rect',
							0,0,
							true,
							true, ''
						);*/
						/*
						this.my_chart.renderer.image('https://polar-ice.org/wp-content/uploads/2016/02/icon_whale.png', 100, 100, 30, 30)
					        .add();*/
					}
					else if( this.current_page == 3 ) {
						jQuery('#extension-controls').hide();
						//console.log(navi_helper.seriesSets.krillData);
						jQuery('#krill-overlay').show();
						this.clearChartData();
						this.my_chart = Highcharts.chart('highcharts-graph-1', {
						    data: {csv:navi_helper.seriesSets.krillData},
						    chart: {
						        type: 'heatmap',
						        zoomType: 'xy',
								colsize: 360000,
								events: {
									click: navi_helper.chartClickEvent
								}
						        //margin: [60, 10, 80, 50]
						    },
						    legend: {
						        align: 'right',
						        layout: 'vertical',
						        margin: 0,
						        padding:0,
						        verticalAlign: 'top',
						        reversed:true,
						        symbolHeight:400,
						        title:'Krill Weight',
						        y:50
						    },
						    boost: {
						        useGPUTranslations: true
						    },
						    title: {
						        text: 'Datos del krill',
						        align: 'center',
						        x: 40
						    },
					        xAxis: {
					            title: {
					            	text: "Tiempo"
					            },
					            type: 'datetime',
								labels:{
									formatter: function () {
										//console.log(this.value);
										if( this.value === 1241701200000) {
											return '13:00 <br /> Mediodía'
										}
										if( this.value === 1241730000000) {
											return '21:00 <br /> Tarde a la noche'
										}
										var myFormat = (new Date());
										myFormat.setTime(this.value);
										//console.log(myFormat);
										return (myFormat.getHours()+4) + ':' + (myFormat.getMinutes() < 10 ? '0' + myFormat.getMinutes() : myFormat.getMinutes() ) ;
										//return this.value;
									}
								}
					        },
					        yAxis: {
					            title: {
					                text: 'Profundidad (m)'
					            },
								reversed: true,
								labels:{
									formatter: function () {
										//console.log(this.value);
										if( this.value===0 ) {
											return 'Superficie 0';
										}
										if( this.value===400 ) {
											return 'Profundo 400';
										}
										return this.value;
									}
								},
						        minPadding: 0,
						        maxPadding: 0,
						        startOnTick: false,
						        endOnTick: false,
						        tickWidth: 1,
								reversed: true,
								min:0,
								max:400
					        },
						    colorAxis: {
						        stops: [
									[0,'#1589FF'],
						            //[0, '#3060cf'],
						            [0.5, '#fffbbc'],
						            [0.9, '#c4463a'],
						            [1, '#c4463a']
						        ],
						        min: 0,
						        max: 19.2786,
						        startOnTick: false,
						        endOnTick: false,
						        labels: {
						            format: '{value} <WEIGHT UNIT>'
						        }
						    },
						    series: [{
						        boostThreshold: 100,
						        borderWidth: 0,
						        colsize: 360000,
						        rowsize:10,
						        /*colsize: 360000,
						        rowsize: 10,*/
						        nullColor: '#000000',
						        tooltip: {
						            headerFormat: 'Peso del krill en la profundidad<br />',
						            pointFormat: '{point.x:%e %b, %Y %H:%M:%S} - Profundidad:<b>{point.y}</b>, Peso: <b>{point.value}</b>'
						        },
						        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
						    }/*,{
					            name: 'Depth',
					            type:'spline',
					            data: navi_helper.seriesSets.randomSeries,
					            enableMouseTracking: false
					        }*/]
						});
					    if( !navi_helper.my_chart.get('y-axis-helper') ) {
						    navi_helper.my_chart.addAxis({
						    	id:'y-axis-helper',
						    	title: {
						    		text: 'Cuán lejos debajo de la superficie estaba el krill',
						    		style:{
						    			fontSize:'large',
						    			color:'black'
						    		}
						    	}
						    },false,true,true);
					    }
					    if( !navi_helper.my_chart.get('y-axis-helper-2') ) {
						    navi_helper.my_chart.addAxis({
						    	id:'y-axis-helper',
						    	title: {
						    		text: 'Cantidad de krill (g)',
						    		style:{
						    			fontSize:'medium',
						    			color:'black',
						    			height:'40px'
						    		}
						    		,rotation:270
						    	}, opposite:true
						    },false,true,true);
					    }
					    if( !navi_helper.my_chart.get('x-axis-helper') ) {
						    navi_helper.my_chart.addAxis({
						    	id:'x-axis-helper',
						    	lineWidth:0,
						    	title: {
						    		text: 'Cuándo estuvo el krill ahí',
						    		style:{
						    			fontSize:'large',
						    			color:'black'
						    		}
						    	}
						    },true,true,true);
					    }
						navi_helper.clickEnabled = false;
					}
					else if( this.current_page == 4 ) {
						console.log('Page 4');
						jQuery('#extension-controls').hide();
						navi_helper.clickEnabled = true;
					}
					else if( this.current_page == 5 ) {
						console.log('Page 5');
						jQuery('#extension-controls').hide();
						navi_helper.clickEnabled = false;
						if( !navi_helper.my_chart.get('realWhaleDepth') ) {
							navi_helper.my_chart.addSeries({
								id:'realWhaleDepth',
					            name: 'Profundidad',
					            type:'spline',
					            data: navi_helper.seriesSets.whaleData,
					            enableMouseTracking:true,
					            lineWidth:3,
					            color:'black'
					        });
						}
					}
					else if( this.current_page == 6 ) {
						console.log('Page 6');
						jQuery('#extension-controls').hide();
						navi_helper.clickEnabled = false;
						if( !navi_helper.my_chart.get('realWhaleDepth') ) {
							navi_helper.my_chart.addSeries({
								id:'realWhaleDepth',
					            name: 'Profundidad',
					            type:'spline',
					            data: navi_helper.seriesSets.whaleData,
					            enableMouseTracking:true,
					            lineWidth:3,
					            color:'black'
					        });
						}
					}
					else if( this.current_page == 7 ) {
						console.log('Page 7');
						this.clearChartData();
						jQuery('#extension-controls').show();
						navi_helper.clickEnabled = false;
						console.log('Extension 1');
					    this.my_chart = Highcharts.chart('highcharts-graph-1', {
					        chart: {
					            type: 'spline',
								spacingRight: 10,
					            events: {
					                load: function () {
					                	console.log('load');
										var series  = this.series[0],
					                      len     = series.data.length;
						                  this.addSeries({
							                    id: 'end point',
									            showInLegend: false,
							                    type: 'scatter',
							                    marker: {
										            symbol: "url(https://polar-ice.org/wp-content/uploads/2017/10/grey_whale_reverse.png)",
										            width:50,
										            height:28
										        },
							                    data: [[
							                      series.data[len - 1].x,
							                      series.data[len - 1].y
							                    ]]
							                  });
										var series2 = this.get('end point');
										/*
						                  setInterval(function () {
						                    var x = (new Date()).getTime(),
						                        y = Math.random();
																len = series.data.length;
																series.addPoint([x,y], true, true);
						                  	series2.data[0].update([x,y]);
						                  }, 1000);
										*/
						                 /*
										var series  = this.series[0],
					                      len     = series.data.length;
									var series2 = this.get('end point');
					                  setInterval(function () {
					                    var x = (new Date()).getTime(),
					                        y = Math.random();
															len = series.data.length;
															series.addPoint([x,y], true, true);
					                  	series2.data[0].update([x,y]);
					                  }, 1000);}*/
					                }
					            }
					        },
					        plotOptions:{},
					        title: {
					            text: 'Datos de seguimiento de una ballena'
					        },
					        tooltip:{
					        	useHTML:true,
					        	enabled:false
					        },
					        xAxis: {
					            title: {
					            	text: "Tiempo"
					            },
								tickLength: 0,
					            type: 'datetime',
				                min: 1241715360000,
				                max: 1241745600000,
								labels:{
									enabled:false,
									formatter: function () {
										//console.log(this.value);
										if( this.value === 1241715600000) {
											return '17:00 <br /> Después del mediodía'
										}
										if( this.value === 1241740800000) {
											return '00:00 <br /> Tarde a la noche'
										}
										var myFormat = (new Date());
										myFormat.setTime(this.value);
										//console.log(myFormat);
										return ((myFormat.getHours()+4) %24) + ':' + (myFormat.getMinutes() < 10 ? '0' + myFormat.getMinutes() : myFormat.getMinutes() ) ;
										//return this.value;
									}
								}
					        },
					        yAxis: {
					            title: {
					                text: 'Profundidad (m)'
					            },
								reversed: true,
								min:0,
								max:400,
								labels:{
									formatter: function () {
										//console.log(this.value);
										if( this.value===0 ) {
											return 'Superficie 0';
										}
										if( this.value===400 ) {
											return 'Profundo 400';
										}
										return this.value;
									}
								},
					        },
					        series: [{
					            name: 'Profundidad',
					            data: [navi_helper.seriesSets.patternWhaleData[0]], //navi_helper.seriesSets.patternWhaleData,
					            enableMouseTracking:false,
					            marker: {enabled:false},
								lineWidth:3,
					            zoneAxis: 'x',
					            zones: [ {
					            	   value: 1241721840000,
					            	   color: 'blue'
					            	}, {
				            			value:1241728320000,
					            	   	color: 'red'
					            	}, {
					            		value:1241738400000,
						            	   color: 'gold'
						            	}, {
							            	   color: 'green'
							            	}]
					        }]
					    });
						this.extensionUpdateChart();
						//Now we need to set up the pathing for a whale so that we can draw it.
						//We won't make it really random, but we have to do something.
						//navi_helper.chart.redraw({duration:3000, easing})
					}
					else if( this.current_page == 8 ) {
						console.log('Page 8');
						jQuery('#extension-controls').show();
						navi_helper.clickEnabled = false;
						console.log('Extension 2');
						//Load the chart from page 3, we will need to add bounds to it.
						this.clearChartData();
						this.my_chart = Highcharts.chart('highcharts-graph-1', {
						    data: {csv:navi_helper.seriesSets.krillData},
						    chart: {
						        type: 'heatmap',
						        zoomType: 'xy',
								colsize: 360000,
								events: {
									click: navi_helper.chartClickEvent	
								}
						        //margin: [60, 10, 80, 50]
						    },
						    legend: {
						        align: 'right',
						        layout: 'vertical',
						        margin: 0,
						        padding:0,
						        verticalAlign: 'top',
						        reversed:true,
						        symbolHeight:400,
						        title:'Krill Weight',
						        y:50
						    },
						    boost: {
						        useGPUTranslations: true
						    },
						    title: {
						        text: 'Datos del krill',
						        align: 'center',
						        x: 40
						    },
						    xAxis: {
						        type: 'datetime',
								labels:{
									formatter: function () {
										//console.log(this.value);
										if( this.value === 1241701200000) {
											return '13:00 <br /> Mediodía'
										}
										if( this.value === 1241730000000) {
											return '21:00 <br /> Tarde a la noche'
										}
										var myFormat = (new Date());
										myFormat.setTime(this.value);
										//console.log(myFormat);
										return (myFormat.getHours()+4) + ':' + (myFormat.getMinutes() < 10 ? '0' + myFormat.getMinutes() : myFormat.getMinutes() ) ;
										//return this.value;
									}
								}, 
						        plotBands: [{ // mark the weekend
						        	borderWidth:3,
						          	borderColor:'yellow',	
							            color: 'rgba(255,255,255,0)',
						            from: Date.UTC(2009, 4, 7, 12, 46 ,00 ),
						            to: Date.UTC(2009, 4, 7, 15, 56, 00 ),
						            label: { text: "Exploración",
						                style: {
						                    color: 'yellow',
						                    fontWeight: 'bold',
						                    fontSize:'large'
						                },
					                    y:50
						            },
						            zIndex:20
						        },{ // mark the weekend
						        	borderWidth:3,
						          	borderColor:'lime',	
							            color: 'rgba(255,255,255,0)',
						            from: Date.UTC(2009, 4, 7, 15, 57 ,00 ),
						            to: Date.UTC(2009, 4, 7, 17, 56, 00 ),
						            label: { text: "Alimentación",
						                style: {
						                    color: 'lime',
						                    fontWeight: 'bold',
						                    fontSize:'large'
						                },
					                    y:50
						            },
						            zIndex:21
						        },{ // mark the weekend
						        	borderWidth:3,
						          	borderColor:'yellow',	
							            color: 'rgba(255,255,255,0)',
						            from: Date.UTC(2009, 4, 7, 17, 57 ,00 ),
						            to: Date.UTC(2009, 4, 7, 19, 14, 00 ),
						            label: { text: "Exploración",
						                style: {
						                    color: 'yellow',
						                    fontWeight: 'bold',
						                    fontSize:'medium'
						                },
					                    y:50
						            },
						            zIndex:22
						        },{ // mark the weekend
						        	borderWidth:3,
						          	borderColor:'lime',	
							            color: 'rgba(255,255,255,0)',
						            from: Date.UTC(2009, 4, 7, 19, 15 ,00 ),
						            to: Date.UTC(2009, 4, 7, 21, 30, 00 ),
						            label: { text: "Alimentación",
						                style: {
						                    color: 'lime',
						                    fontWeight: 'bold',
						                    fontSize:'large'
						                },
					                    y:50
						            },
						            zIndex:23
						        }],
						    },
						    yAxis: {
						        title: {
						            text: 'Profundidad (meters)'
						        },
						        labels: {
						            format: '{value}'
						        },
						        minPadding: 0,
						        maxPadding: 0,
						        startOnTick: false,
						        endOnTick: false,
						        tickWidth: 1,
								reversed: true,
						    },
					        yAxis: {
					            title: {
					                text: 'Profundidad (m)'
					            },
								reversed: true,
								labels:{
									formatter: function () {
										//console.log(this.value);
										if( this.value===0 ) {
											return 'Superficie 0';
										}
										if( this.value===400 ) {
											return 'Profundo 400';
										}
										return this.value;
									}
								},
								min:0,
								max:400,
						        minPadding: 0,
						        maxPadding: 0,
						        startOnTick: false,
						        endOnTick: false,
						        tickWidth: 1,
								reversed: true,
					        },
						    colorAxis: {
						        stops: [
									[0,'#1589FF'],
						            //[0, '#3060cf'],
						            [0.5, '#fffbbc'],
						            [0.9, '#c4463a'],
						            [1, '#c4463a']
						        ],
						        min: 0,
						        max: 19.2786,
						        startOnTick: false,
						        endOnTick: false,
						        labels: {
						            format: '{value} <WEIGHT UNIT>'
						        }
						    },
						    series: [{
						        boostThreshold: 100,
						        borderWidth: 0,
						        colsize: 360000,
						        rowsize:10,
						        /*colsize: 360000,
						        rowsize: 10,*/
						        nullColor: '#000000',
						        tooltip: {
						            headerFormat: 'Peso del krill en la profundidad<br />',
						            pointFormat: '{point.x:%e %b, %Y %H:%M:%S} - Profundidad:<b>{point.y}</b>, Peso: <b>{point.value}</b>'
						        },
						        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
						    }/*,{
					            name: 'Depth',
					            type:'spline',
					            data: navi_helper.seriesSets.randomSeries,
					            enableMouseTracking: false
					        }*/]
						});
						navi_helper.clickEnabled = false;
						if( !navi_helper.my_chart.get('realWhaleDepth') ) {
							navi_helper.my_chart.addSeries({
								id:'realWhaleDepth',
					            name: 'Profundidad',
					            type:'spline',
					            data: navi_helper.seriesSets.whaleData,
					            enableMouseTracking:true,
					            lineWidth:3,
					            color:'black'
					        });
						}
					}
					else if( this.current_page == 9 ) {
						console.log('Page 9 - End');
						jQuery('#extension-controls').hide();
						navi_helper.clickEnabled = false;
					}
					/*
					jQuery('#info-instructions-2-3').hide();
					jQuery('#info-instructions-6').hide();
					if(
						this.current_page == 2 ||
						this.current_page == 3
					) {
						jQuery('#info-instructions-2-3').show();
					}else if(this.current_page == 6 ) {
						jQuery('#info-instructions-6').show();
					}
					if( this.current_page == 5 ) {
						jQuery('#tide-information-1').show();
						jQuery('#tide-information-2').show();
					}else{
						jQuery('#tide-information-1').hide();
						jQuery('#tide-information-2').hide();
					}
					*/
					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('#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/photos/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/photos/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/photos/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 == this.min_page) });
					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;
				}
			};
			//There might be a conflict with the shorthand Dollar sign ($), so we'll just use jQuery instead
			
			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%'});
				navi_helper.initialize_graphs();
				jQuery('#ext-prev').on('click', function () {
					navi_helper.extensionUpdateChart('prev');
				});
				jQuery('#ext-replay').on('click', function () {
					navi_helper.extensionUpdateChart('replay');
				});
				jQuery('#ext-next').on('click', function () {
					navi_helper.extensionUpdateChart('next');
				});
			}
			
			//There might be a conflict with the shorthand Dollar sign ($), so we'll just use jQuery instead
			jQuery(function () {
				console.log('[jQuery loaded]');
				afterLoad();
				/*
				jQuery('#story-1-esp-div').load('https://polar-ice.org/wp-content/uploads/2018/06/story_8_html.txt', null, function () {
				});*/
			});