Added direct linking via hash url and config option to start timeline on the last date instead of first date.

Added ability to directly link to a slide using a hash in the url
closes #19
Added config option to start the timeline on the last date.

source/js/VMM.Slider.js

@@ -6,7 +6,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		
 		/* PRIVATE VARS
 		================================================== */
-		var events = {};
+		var events = {}, config;
 		// ARRAYS
 		var data = [], slides = [], medias = [], slide_positions = [];
 		var slides_content = "";
@@ -18,11 +18,37 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		var layout = parent;
 		// ELEMENTS
 		var $slider, $slider_mask, $slider_container, $slides_items;
-		// CONFIG
-		var config = {slider: {width: 720, height: 400, content: {width: 720, height: 400, padding: 130}, nav: {width: 100, height: 200} } };
-		var _config = {interval: 10, something: 0, width: 720, height: 400, ease: "easeInOutExpo", duration: 1000, timeline: false, spacing: 15};
 		// NAVIGATION
 		var navigation = {nextBtn:"", prevBtn:"", nextDate:"", prevDate:"", nextTitle:"", prevTitle:""};
+		// CONFIG
+		if(typeof VMM.Timeline != 'undefined') {
+			config	= 	VMM.Timeline.Config;
+		} else {
+			config = {
+				current_slide: 0,
+				interval: 10, 
+				something: 0, 
+				width: 720, 
+				height: 400, 
+				ease: "easeInOutExpo", 
+				duration: 1000, 
+				timeline: false, 
+				spacing: 15,
+				slider: {
+					width: 720, 
+					height: 400, 
+					content: {
+						width: 720, 
+						height: 400, 
+						padding: 130
+					}, 
+					nav: {
+						width: 100, 
+						height: 200
+					} 
+				} 
+			};
+		}
 		
 		/* PUBLIC VARS
 		================================================== */
@@ -30,7 +56,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		
 		/* APPLY SUPPLIED CONFIG
 		================================================== */
-		
+		/*
 		if (type.of(parent_config) == 'object') {
 		    var x;
 			for (x in parent_config) {
@@ -46,11 +72,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 				}
 			}
 		}
-		
+		*/
 		config.slider.width = config.width;
 		config.slider.height = config.height;
 		
-		
 		/* PUBLIC FUNCTIONS
 		================================================== */
 		this.init = function(d) {
@@ -97,8 +122,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		this.setConfig = function(d) {
 			if(typeof d != 'undefined') {
 				config = d;
-				// TO DO
-				// FIRE AN EVENT ETC
 			} else{
 				trace("NO CONFIG DATA");
 			}
@@ -250,6 +273,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		/* UPDATE
 		================================================== */
 		function upDate() {
+			config.current_slide = current_slide;
 			VMM.fireEvent(layout, "UPDATE");
 		};
 		
@@ -580,7 +604,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 			reSize(false, true);
 			VMM.Element.visible(navigation.prevBtn, false);
 			// GO TO FIRST SLIDE
-			goToSlide(0, "easeOutExpo", __duration, true, true);
+			trace("config.current_slide " + config.current_slide);
+			goToSlide(config.current_slide, "easeOutExpo", __duration, true, true);
 			
 			_active = true;
 		};

source/js/VMM.Timeline.TimeNav.js

@@ -97,7 +97,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 		
 		function reSize(firstrun) {
 			VMM.Element.css($timenavline, "left", Math.round(config.width/2)+2);
-			goToMarker(current_marker, config.ease, config.duration, true, firstrun);
+			goToMarker(config.current_slide, config.ease, config.duration, true, firstrun);
 		};
 		
 		function upDate() {
@@ -196,9 +196,9 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 				VMM.Element.removeClass(markers[i].marker, "active");
 			}
 			
-			if (config.start_page && markers[current_marker].type == "start") {
-				VMM.Element.visible(markers[current_marker].marker, false);
-				VMM.Element.addClass(markers[current_marker].marker, "start");
+			if (config.start_page && markers[0].type == "start") {
+				VMM.Element.visible(markers[0].marker, false);
+				VMM.Element.addClass(markers[0].marker, "start");
 			}
 			
 			VMM.Element.addClass(markers[current_marker].marker, "active");
@@ -903,7 +903,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 			positionMarkers();
 			positionInterval(interval_array, false, true);
 			positionInterval(interval_major_array);
-			reSize(true);
+			//reSize(true);
 			
 			if (config.start_page) {
 				$backhome = VMM.appendAndGetElement($toolbar, "<div>", "back-home", "<div class='icon'></div>");
@@ -932,11 +932,14 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 				VMM.DragSlider.createPanel(layout, $timenav, config.width, config.spacing, false);
 			}
 			
+			
 			VMM.bindEvent(".zoom-in", onZoomIn, "click");
 			VMM.bindEvent(".zoom-out", onZoomOut, "click");
 			VMM.fireEvent(layout, "LOADED");
 			_active = true;
 			
+			reSize(true);
+			
 		};
 		
 		var buildInterval = function() {

source/js/VMM.Timeline.js

@@ -49,7 +49,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		
 		var $timeline, $feedback, $messege, slider, timenav, version, timeline_id;
 		var events = {}, data = {}, _dates = [], config = {};
-		var has_width = false, has_height = false, ie7 = false;
+		var has_width = false, has_height = false, ie7 = false, is_moving = false;
 		
 		if (type.of(_timeline_id) == "string") {
 			timeline_id = 			_timeline_id;
@@ -57,7 +57,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			timeline_id = 			"#timeline";
 		}
 		
-		version = 					"0.98.5";
+		version = 					"0.98.6";
 		
 		trace("TIMELINE VERSION " + version);
 		
@@ -67,6 +67,9 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			id: 					timeline_id,
 			type: 					"timeline",
 			maptype: 				"toner",
+			current_slide:			0,
+			hash_bookmark:			false,
+			start_at_end: 			false,
 			start_page: 			false,
 			interval: 				10,
 			something: 				0,
@@ -128,10 +131,24 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			has_height = true;
 		}
 		
+		if(window.location.hash) {
+			 var hash					=	window.location.hash.substring(1);
+			 config.current_slide		=	parseInt(hash);
+		}
+		window.onhashchange = function () {
+			if (config.hash_bookmark) {
+				if (is_moving) {
+					var hash					=	window.location.hash.substring(1);
+					goToEvent(parseInt(hash));
+				} else {
+					is_moving = false;
+				}
+			}
+		}
+		
 		/* CREATE CONFIG
 		================================================== */
 		var createConfig = function(conf) {
-
 			
 			// APPLY SUPPLIED CONFIG TO TIMELINE CONFIG
 			if (typeof timeline_config == 'object') {
@@ -151,13 +168,12 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 				}
 			}
 			
-			config.nav.width = 				config.width;
-			config.nav.height = 			200;
-			config.feature.width = 			config.width;
-			config.feature.height = 		config.height - config.nav.height;
-			
-			VMM.Timeline.Config = 			config;
-			VMM.master_config.Timeline = 	VMM.Timeline.Config;
+			config.nav.width			=	config.width;
+			config.nav.height			=	200;
+			config.feature.width		=	config.width;
+			config.feature.height		=	config.height - config.nav.height;
+			VMM.Timeline.Config			=	config;
+			VMM.master_config.Timeline	=	VMM.Timeline.Config;
 		}
 		
 		/* CREATE TIMELINE STRUCTURE
@@ -232,13 +248,33 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		}
 		
 		function onSlideUpdate(e) {
-			timenav.setMarker(slider.getCurrentNumber(), config.ease,config.duration);
+			is_moving = true;
+			config.current_slide = slider.getCurrentNumber();
+			setHash(config.current_slide);
+			timenav.setMarker(config.current_slide, config.ease,config.duration);
 		};
 		
 		function onMarkerUpdate(e) {
-			slider.setSlide(timenav.getCurrentNumber());
+			is_moving = true;
+			config.current_slide = timenav.getCurrentNumber();
+			setHash(config.current_slide);
+			slider.setSlide(config.current_slide);
 		};
 		
+		var goToEvent = function(n) {
+			if (n <= _dates.length - 1 && n >= 0) {
+				config.current_slide = n;
+				slider.setSlide(config.current_slide);
+				timenav.setMarker(config.current_slide, config.ease,config.duration);
+			} 
+		}
+		
+		function setHash(n) {
+			if (config.hash_bookmark) {
+				window.location.hash = "#" + n.toString();
+			}
+		}
+		
 		/* PUBLIC FUNCTIONS
 		================================================== */
 		this.init = function(_data, _timeline_id, conf) {
@@ -312,27 +348,25 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		================================================== */
 		var build = function() {
 			
-			/* CREATE DOM STRUCTURE
-			================================================== */
+			// START AT END?
+			if (config.start_at_end) {
+				config.current_slide = _dates.length - 1;
+			}
+			// CREATE DOM STRUCTURE
 			VMM.attachElement($timeline, "");
 			VMM.appendElement($timeline, "<div class='container main'><div class='feature'><div class='slider'></div></div><div class='navigation'></div></div>");
 			
 			reSize();
 			
-			/* INIT THE OBJECTS
-			================================================== */
 			VMM.bindEvent("div.slider", onSliderLoaded, "LOADED");
 			VMM.bindEvent("div.navigation", onTimeNavLoaded, "LOADED");
 			VMM.bindEvent("div.slider", onSlideUpdate, "UPDATE");
 			VMM.bindEvent("div.navigation", onMarkerUpdate, "UPDATE");
 			
-			
 			slider.init(_dates);
 			timenav.init(_dates, data.era);
 			
-			
-			/* RESIZE EVENT LISTENERS
-			================================================== */
+			// RESIZE EVENT LISTENERS
 			VMM.bindEvent(global, reSize, "resize");
 			//VMM.bindEvent(global, function(e) {e.preventDefault()}, "touchmove");
 			

timeline.js

@@ -2466,55 +2466,62 @@ if(typeof VMM != 'undefined' && typeof VMM.ExternalAPI == 'undefined') {
 				}
 			},
 			
+			defaultType: function(name) {
+				if (name.toLowerCase() == "satellite" || name.toLowerCase() == "hybrid" || name.toLowerCase() == "terrain" || name.toLowerCase() == "roadmap") {
+					return true;
+				} else {
+					return false;
+				}
+			},
+			
 			map_subdomains: ["", "a.", "b.", "c.", "d."],
 			
 			map_attribution: {
-				"stamen": "Map tiles by <a href='http://stamen.com'>Stamen Design</a>, under <a href='http://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a>. Data by <a href='http://openstreetmap.org'>OpenStreetMap</a>, under <a href='http://creativecommons.org/licenses/by-sa/3.0'>CC BY SA</a>.",
-				"apple": "Map data &copy; 2012  Apple, Imagery &copy; 2012 Apple"
+				"stamen": 			"Map tiles by <a href='http://stamen.com'>Stamen Design</a>, under <a href='http://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a>. Data by <a href='http://openstreetmap.org'>OpenStreetMap</a>, under <a href='http://creativecommons.org/licenses/by-sa/3.0'>CC BY SA</a>.",
+				"apple": 			"Map data &copy; 2012  Apple, Imagery &copy; 2012 Apple"
 			},
 						
 			map_providers: {
 				"toner": {
-					"url": "http://{S}tile.stamen.com/toner/{Z}/{X}/{Y}.png",
-					"minZoom": 0,
-					"maxZoom": 20,
-					"attribution": "stamen"
+					"url": 			"http://{S}tile.stamen.com/toner/{Z}/{X}/{Y}.png",
+					"minZoom": 		0,
+					"maxZoom": 		20,
+					"attribution": 	"stamen"
 					
 				},
 				"toner-lines": {
-					"url": "http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
-					"minZoom": 0,
-					"maxZoom": 20,
-					"attribution": "stamen"
+					"url": 			"http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
+					"minZoom": 		0,
+					"maxZoom": 		20,
+					"attribution": 	"stamen"
 				},
 				"toner-labels": {
-					"url": "http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
-					"minZoom": 0,
-					"maxZoom": 20,
-					"attribution": "stamen"
+					"url": 			"http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
+					"minZoom": 		0,
+					"maxZoom": 		20,
+					"attribution": 	"stamen"
 				},
 				"sterrain": {
-					"url": "http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
-					"minZoom": 4,
-					"maxZoom": 20,
-					"attribution": "stamen"
+					"url": 			"http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
+					"minZoom": 		4,
+					"maxZoom": 		20,
+					"attribution": 	"stamen"
 				},
 				"apple": {
-					"url": "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9",
-					"minZoom": 4,
-					"maxZoom": 20,
-					"attribution": "apple"
+					"url": 			"http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9",
+					"minZoom": 		4,
+					"maxZoom": 		14,
+					"attribution": 	"apple"
 				},
 				"watercolor": {
-					"url": "http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
-					"minZoom": 3,
-					"maxZoom": 16,
-					"attribution": "stamen"
+					"url": 			"http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
+					"minZoom": 		3,
+					"maxZoom": 		16,
+					"attribution": 	"stamen"
 				}
 			},
 			
 			createMap: function(m) {
-				trace(VMM.ExternalAPI.googlemaps.stamen_map_attribution);
 				/* 	MAP PROVIDERS
 					Including Stamen Maps
 					http://maps.stamen.com/
@@ -2528,31 +2535,40 @@ if(typeof VMM != 'undefined' && typeof VMM.ExternalAPI == 'undefined') {
 						map_attribution = VMM.ExternalAPI.googlemaps.map_attribution[VMM.ExternalAPI.googlemaps.map_providers[name].attribution];
 						return VMM.ExternalAPI.googlemaps.map_providers[name];
 					} else {
-						throw 'No such provider: "' + name + '"';
+						if (VMM.ExternalAPI.googlemaps.defaultType(name)) {
+							trace("GOOGLE MAP DEFAULT TYPE");
+							return google.maps.MapTypeId[name.toUpperCase()];
+						} else {
+							trace("Not a maptype: " + name );
+						}
 					}
 				}
 				
 				google.maps.VeriteMapType = function(name) {
-					var provider = mapProvider(name);
-					return google.maps.ImageMapType.call(this, {
-						"getTileUrl": function(coord, zoom) {
-							var index = (zoom + coord.x + coord.y) % VMM.ExternalAPI.googlemaps.map_subdomains.length;
-							return [
-								provider.url
-									.replace("{S}", VMM.ExternalAPI.googlemaps.map_subdomains[index])
-									.replace("{Z}", zoom)
-									.replace("{X}", coord.x)
-									.replace("{Y}", coord.y)
-									.replace("{z}", zoom)
-									.replace("{x}", coord.x)
-									.replace("{y}", coord.y)
-							];
-						},
-						"tileSize": new google.maps.Size(256, 256),
-						"name":     name,
-						"minZoom":  provider.minZoom,
-						"maxZoom":  provider.maxZoom
-					});
+					if (VMM.ExternalAPI.googlemaps.defaultType(name)) {
+						return google.maps.MapTypeId[name.toUpperCase()];
+					} else {
+						var provider = 			mapProvider(name);
+						return google.maps.ImageMapType.call(this, {
+							"getTileUrl": function(coord, zoom) {
+								var index = 	(zoom + coord.x + coord.y) % VMM.ExternalAPI.googlemaps.map_subdomains.length;
+								return [
+									provider.url
+										.replace("{S}", VMM.ExternalAPI.googlemaps.map_subdomains[index])
+										.replace("{Z}", zoom)
+										.replace("{X}", coord.x)
+										.replace("{Y}", coord.y)
+										.replace("{z}", zoom)
+										.replace("{x}", coord.x)
+										.replace("{y}", coord.y)
+								];
+							},
+							"tileSize": 		new google.maps.Size(256, 256),
+							"name":				name,
+							"minZoom":			provider.minZoom,
+							"maxZoom":			provider.maxZoom
+						});
+					}
 				};
 				
 				google.maps.VeriteMapType.prototype = new google.maps.ImageMapType("_");
@@ -2561,96 +2577,94 @@ if(typeof VMM != 'undefined' && typeof VMM.ExternalAPI == 'undefined') {
 				================================================== */
 				var layer;
 				
-				
 				if (type.of(VMM.master_config.Timeline.maptype) == "string") {
-					layer = VMM.master_config.Timeline.maptype;
+					if (VMM.ExternalAPI.googlemaps.defaultType(VMM.master_config.Timeline.maptype)) {
+						layer				=	google.maps.MapTypeId[VMM.master_config.Timeline.maptype.toUpperCase()];
+					} else {
+						layer				=	VMM.master_config.Timeline.maptype;
+					}
 				} else {
-					layer = "toner";
+					layer					=	"toner";
 				}
 				
-				var location = new google.maps.LatLng(41.875696,-87.624207);
+				var location				=	new google.maps.LatLng(41.875696,-87.624207);
 				var latlong;
-				var zoom = 11;
-				var has_location = false;
-				var has_zoom = false;
+				var zoom					=	11;
+				var has_location			=	false;
+				var has_zoom				=	false;
 				var map_bounds;
 				
 				if (type.of(VMM.Util.getUrlVars(m.url)["ll"]) == "string") {
-					has_location = true;
-					latlong = VMM.Util.getUrlVars(m.url)["ll"].split(",");
-					location = new google.maps.LatLng(parseFloat(latlong[0]),parseFloat(latlong[1]));
+					has_location			=	true;
+					latlong					=	VMM.Util.getUrlVars(m.url)["ll"].split(",");
+					location				=	new google.maps.LatLng(parseFloat(latlong[0]),parseFloat(latlong[1]));
 					
 				} else if (type.of(VMM.Util.getUrlVars(m.url)["sll"]) == "string") {
-					latlong = VMM.Util.getUrlVars(m.url)["sll"].split(",");
-					location = new google.maps.LatLng(parseFloat(latlong[0]),parseFloat(latlong[1]));
+					latlong					=	VMM.Util.getUrlVars(m.url)["sll"].split(",");
+					location				=	new google.maps.LatLng(parseFloat(latlong[0]),parseFloat(latlong[1]));
 				} 
 				
 				if (type.of(VMM.Util.getUrlVars(m.url)["z"]) == "string") {
-					has_zoom = true;
-					zoom = parseFloat(VMM.Util.getUrlVars(m.url)["z"]);
+					has_zoom				=	true;
+					zoom					=	parseFloat(VMM.Util.getUrlVars(m.url)["z"]);
 				}
 				
 				var map_options = {
-					zoom:zoom,
-					disableDefaultUI: true,
-					mapTypeControl: false,
-					zoomControl: true,
+					zoom:						zoom,
+					disableDefaultUI:			true,
+					mapTypeControl:				false,
+					zoomControl:				true,
 					zoomControlOptions: {
-						style: google.maps.ZoomControlStyle.SMALL,
-						position: google.maps.ControlPosition.TOP_RIGHT
+						style:					google.maps.ZoomControlStyle.SMALL,
+						position:				google.maps.ControlPosition.TOP_RIGHT
 					},
-					center: location,
-					mapTypeId: layer,
+					center: 					location,
+					mapTypeId:					layer,
 					mapTypeControlOptions: {
-				        mapTypeIds: [layer]
+				        mapTypeIds:				[layer]
 				    }
 				}
 				
-				var unique_map_id = m.id.toString() + "_gmap";
-				VMM.attachElement("#" + m.id, "<div class='google-map' id='" + unique_map_id + "' style='width=100%;height=100%;'></div>");
+				var unique_map_id			=	m.id.toString() + "_gmap";
 				
-				var map = new google.maps.Map(document.getElementById(unique_map_id), map_options);
-				map.mapTypes.set(layer, new google.maps.VeriteMapType(layer));
+				VMM.attachElement("#" + m.id, "<div class='google-map' id='" + unique_map_id + "' style='width=100%;height=100%;'></div>");
 				
-				/* ATTRIBUTION
-				================================================== */
-				var map_attribution_html = "<div class='map-attribution'><div class='attribution-text'>" + map_attribution + "</div></div>";
-				VMM.appendElement("#"+unique_map_id, map_attribution_html);
+				var map						=	new google.maps.Map(document.getElementById(unique_map_id), map_options);
+				 
+				if (VMM.ExternalAPI.googlemaps.defaultType(VMM.master_config.Timeline.maptype)) {
+					
+				} else {
+					map.mapTypes.set(layer, new google.maps.VeriteMapType(layer));
+					// ATTRIBUTION
+					var map_attribution_html =	"<div class='map-attribution'><div class='attribution-text'>" + map_attribution + "</div></div>";
+					VMM.appendElement("#"+unique_map_id, map_attribution_html);
+				}
 				
 				loadKML();
 				
-				/* KML
-				================================================== */
+				// KML
 				function loadKML() {
-					var kml_url = m.url + "&output=kml";
-					kml_url = kml_url.replace("&output=embed", "");
-					
-					var kml_layer = new google.maps.KmlLayer(kml_url, {preserveViewport:true});
+					var kml_url				=	m.url + "&output=kml";
+					kml_url					=	kml_url.replace("&output=embed", "");
+					var kml_layer			=	new google.maps.KmlLayer(kml_url, {preserveViewport:true});
+					var infowindow			=	new google.maps.InfoWindow();
 					kml_layer.setMap(map);
-					
-					var infowindow = new google.maps.InfoWindow();
 
 					google.maps.event.addListenerOnce(kml_layer, "defaultviewport_changed", function() {
-						
 						map.fitBounds(kml_layer.getDefaultViewport() );
-						
 						if (has_location) {
 							map.panTo(location);
 						} 
-						
 						if (has_zoom) {
 							map.setZoom(zoom);
 						}
-						
 					});
-
-
+					
 					google.maps.event.addListener(kml_layer, 'click', function(kmlEvent) {
-						var text = kmlEvent.featureData.description;
-						trace(kmlEvent.featureData.infoWindowHtml)
+						var text			=	kmlEvent.featureData.description;
 						showInfoWindow(text);
+						
 						function showInfoWindow(c) {
-							//trace("showInfoWindow")
 							infowindow.setContent(c);
 							infowindow.open(map);
 						}
@@ -3170,7 +3184,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		
 		/* PRIVATE VARS
 		================================================== */
-		var events = {};
+		var events = {}, config;
 		// ARRAYS
 		var data = [], slides = [], medias = [], slide_positions = [];
 		var slides_content = "";
@@ -3182,11 +3196,37 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		var layout = parent;
 		// ELEMENTS
 		var $slider, $slider_mask, $slider_container, $slides_items;
-		// CONFIG
-		var config = {slider: {width: 720, height: 400, content: {width: 720, height: 400, padding: 130}, nav: {width: 100, height: 200} } };
-		var _config = {interval: 10, something: 0, width: 720, height: 400, ease: "easeInOutExpo", duration: 1000, timeline: false, spacing: 15};
 		// NAVIGATION
 		var navigation = {nextBtn:"", prevBtn:"", nextDate:"", prevDate:"", nextTitle:"", prevTitle:""};
+		// CONFIG
+		if(typeof VMM.Timeline != 'undefined') {
+			config	= 	VMM.Timeline.Config;
+		} else {
+			config = {
+				current_slide: 0,
+				interval: 10, 
+				something: 0, 
+				width: 720, 
+				height: 400, 
+				ease: "easeInOutExpo", 
+				duration: 1000, 
+				timeline: false, 
+				spacing: 15,
+				slider: {
+					width: 720, 
+					height: 400, 
+					content: {
+						width: 720, 
+						height: 400, 
+						padding: 130
+					}, 
+					nav: {
+						width: 100, 
+						height: 200
+					} 
+				} 
+			};
+		}
 		
 		/* PUBLIC VARS
 		================================================== */
@@ -3194,7 +3234,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		
 		/* APPLY SUPPLIED CONFIG
 		================================================== */
-		
+		/*
 		if (type.of(parent_config) == 'object') {
 		    var x;
 			for (x in parent_config) {
@@ -3210,11 +3250,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 				}
 			}
 		}
-		
+		*/
 		config.slider.width = config.width;
 		config.slider.height = config.height;
 		
-		
 		/* PUBLIC FUNCTIONS
 		================================================== */
 		this.init = function(d) {
@@ -3261,8 +3300,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		this.setConfig = function(d) {
 			if(typeof d != 'undefined') {
 				config = d;
-				// TO DO
-				// FIRE AN EVENT ETC
 			} else{
 				trace("NO CONFIG DATA");
 			}
@@ -3414,6 +3451,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 		/* UPDATE
 		================================================== */
 		function upDate() {
+			config.current_slide = current_slide;
 			VMM.fireEvent(layout, "UPDATE");
 		};
 		
@@ -3744,7 +3782,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
 			reSize(false, true);
 			VMM.Element.visible(navigation.prevBtn, false);
 			// GO TO FIRST SLIDE
-			goToSlide(0, "easeOutExpo", __duration, true, true);
+			trace("config.current_slide " + config.current_slide);
+			goToSlide(config.current_slide, "easeOutExpo", __duration, true, true);
 			
 			_active = true;
 		};
@@ -4826,7 +4865,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		
 		var $timeline, $feedback, $messege, slider, timenav, version, timeline_id;
 		var events = {}, data = {}, _dates = [], config = {};
-		var has_width = false, has_height = false, ie7 = false;
+		var has_width = false, has_height = false, ie7 = false, is_moving = false;
 		
 		if (type.of(_timeline_id) == "string") {
 			timeline_id = 			_timeline_id;
@@ -4834,7 +4873,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			timeline_id = 			"#timeline";
 		}
 		
-		version = 					"0.98.5";
+		version = 					"0.98.6";
 		
 		trace("TIMELINE VERSION " + version);
 		
@@ -4844,6 +4883,9 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			id: 					timeline_id,
 			type: 					"timeline",
 			maptype: 				"toner",
+			current_slide:			0,
+			hash_bookmark:			false,
+			start_at_end: 			false,
 			start_page: 			false,
 			interval: 				10,
 			something: 				0,
@@ -4905,10 +4947,24 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			has_height = true;
 		}
 		
+		if(window.location.hash) {
+			 var hash					=	window.location.hash.substring(1);
+			 config.current_slide		=	parseInt(hash);
+		}
+		window.onhashchange = function () {
+			if (config.hash_bookmark) {
+				if (is_moving) {
+					var hash					=	window.location.hash.substring(1);
+					goToEvent(parseInt(hash));
+				} else {
+					is_moving = false;
+				}
+			}
+		}
+		
 		/* CREATE CONFIG
 		================================================== */
 		var createConfig = function(conf) {
-
 			
 			// APPLY SUPPLIED CONFIG TO TIMELINE CONFIG
 			if (typeof timeline_config == 'object') {
@@ -4928,13 +4984,12 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 				}
 			}
 			
-			config.nav.width = 				config.width;
-			config.nav.height = 			200;
-			config.feature.width = 			config.width;
-			config.feature.height = 		config.height - config.nav.height;
-			
-			VMM.Timeline.Config = 			config;
-			VMM.master_config.Timeline = 	VMM.Timeline.Config;
+			config.nav.width			=	config.width;
+			config.nav.height			=	200;
+			config.feature.width		=	config.width;
+			config.feature.height		=	config.height - config.nav.height;
+			VMM.Timeline.Config			=	config;
+			VMM.master_config.Timeline	=	VMM.Timeline.Config;
 		}
 		
 		/* CREATE TIMELINE STRUCTURE
@@ -5009,13 +5064,33 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		}
 		
 		function onSlideUpdate(e) {
-			timenav.setMarker(slider.getCurrentNumber(), config.ease,config.duration);
+			is_moving = true;
+			config.current_slide = slider.getCurrentNumber();
+			setHash(config.current_slide);
+			timenav.setMarker(config.current_slide, config.ease,config.duration);
 		};
 		
 		function onMarkerUpdate(e) {
-			slider.setSlide(timenav.getCurrentNumber());
+			is_moving = true;
+			config.current_slide = timenav.getCurrentNumber();
+			setHash(config.current_slide);
+			slider.setSlide(config.current_slide);
 		};
 		
+		var goToEvent = function(n) {
+			if (n <= _dates.length - 1 && n >= 0) {
+				config.current_slide = n;
+				slider.setSlide(config.current_slide);
+				timenav.setMarker(config.current_slide, config.ease,config.duration);
+			} 
+		}
+		
+		function setHash(n) {
+			if (config.hash_bookmark) {
+				window.location.hash = "#" + n.toString();
+			}
+		}
+		
 		/* PUBLIC FUNCTIONS
 		================================================== */
 		this.init = function(_data, _timeline_id, conf) {
@@ -5089,27 +5164,25 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		================================================== */
 		var build = function() {
 			
-			/* CREATE DOM STRUCTURE
-			================================================== */
+			// START AT END?
+			if (config.start_at_end) {
+				config.current_slide = _dates.length - 1;
+			}
+			// CREATE DOM STRUCTURE
 			VMM.attachElement($timeline, "");
 			VMM.appendElement($timeline, "<div class='container main'><div class='feature'><div class='slider'></div></div><div class='navigation'></div></div>");
 			
 			reSize();
 			
-			/* INIT THE OBJECTS
-			================================================== */
 			VMM.bindEvent("div.slider", onSliderLoaded, "LOADED");
 			VMM.bindEvent("div.navigation", onTimeNavLoaded, "LOADED");
 			VMM.bindEvent("div.slider", onSlideUpdate, "UPDATE");
 			VMM.bindEvent("div.navigation", onMarkerUpdate, "UPDATE");
 			
-			
 			slider.init(_dates);
 			timenav.init(_dates, data.era);
 			
-			
-			/* RESIZE EVENT LISTENERS
-			================================================== */
+			// RESIZE EVENT LISTENERS
 			VMM.bindEvent(global, reSize, "resize");
 			//VMM.bindEvent(global, function(e) {e.preventDefault()}, "touchmove");
 			
@@ -5436,7 +5509,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 		
 		function reSize(firstrun) {
 			VMM.Element.css($timenavline, "left", Math.round(config.width/2)+2);
-			goToMarker(current_marker, config.ease, config.duration, true, firstrun);
+			goToMarker(config.current_slide, config.ease, config.duration, true, firstrun);
 		};
 		
 		function upDate() {
@@ -5535,9 +5608,9 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 				VMM.Element.removeClass(markers[i].marker, "active");
 			}
 			
-			if (config.start_page && markers[current_marker].type == "start") {
-				VMM.Element.visible(markers[current_marker].marker, false);
-				VMM.Element.addClass(markers[current_marker].marker, "start");
+			if (config.start_page && markers[0].type == "start") {
+				VMM.Element.visible(markers[0].marker, false);
+				VMM.Element.addClass(markers[0].marker, "start");
 			}
 			
 			VMM.Element.addClass(markers[current_marker].marker, "active");
@@ -6242,7 +6315,7 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 			positionMarkers();
 			positionInterval(interval_array, false, true);
 			positionInterval(interval_major_array);
-			reSize(true);
+			//reSize(true);
 			
 			if (config.start_page) {
 				$backhome = VMM.appendAndGetElement($toolbar, "<div>", "back-home", "<div class='icon'></div>");
@@ -6271,11 +6344,14 @@ if(typeof VMM.Timeline != 'undefined' && typeof VMM.Timeline.TimeNav == 'undefin
 				VMM.DragSlider.createPanel(layout, $timenav, config.width, config.spacing, false);
 			}
 			
+			
 			VMM.bindEvent(".zoom-in", onZoomIn, "click");
 			VMM.bindEvent(".zoom-out", onZoomOut, "click");
 			VMM.fireEvent(layout, "LOADED");
 			_active = true;
 			
+			reSize(true);
+			
 		};
 		
 		var buildInterval = function() {