Batch merge for rc2 of 2.7. 'svn merge -r7967:HEAD from trunk (Closes #1733) (Closes #1489) (Closes #1639) (Closes #1718) (Closes #1723) (Closes #1732) (Closes #1616) (Closes #1722)

git-svn-id: http://svn.openlayers.org/branches/openlayers/2.7@8012 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/animator.js

@@ -0,0 +1,670 @@
+/*  
+	Animator.js 1.1.9
+	
+	This library is released under the BSD license:
+
+	Copyright (c) 2006, Bernard Sumption. All rights reserved.
+	
+	Redistribution and use in source and binary forms, with or without
+	modification, are permitted provided that the following conditions are met:
+	
+	Redistributions of source code must retain the above copyright notice, this
+	list of conditions and the following disclaimer. Redistributions in binary
+	form must reproduce the above copyright notice, this list of conditions and
+	the following disclaimer in the documentation and/or other materials
+	provided with the distribution. Neither the name BernieCode nor
+	the names of its contributors may be used to endorse or promote products
+	derived from this software without specific prior written permission. 
+	
+	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+	AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+	IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+	ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR
+	ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+	DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+	SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+	CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
+	LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
+	OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
+	DAMAGE.
+
+*/
+
+
+// Applies a sequence of numbers between 0 and 1 to a number of subjects
+// construct - see setOptions for parameters
+function Animator(options) {
+	this.setOptions(options);
+	var _this = this;
+	this.timerDelegate = function(){_this.onTimerEvent()};
+	this.subjects = [];
+	this.target = 0;
+	this.state = 0;
+	this.lastTime = null;
+};
+Animator.prototype = {
+	// apply defaults
+	setOptions: function(options) {
+		this.options = Animator.applyDefaults({
+			interval: 20,  // time between animation frames
+			duration: 400, // length of animation
+			onComplete: function(){},
+			onStep: function(){},
+			transition: Animator.tx.easeInOut
+		}, options);
+	},
+	// animate from the current state to provided value
+	seekTo: function(to) {
+		this.seekFromTo(this.state, to);
+	},
+	// animate from the current state to provided value
+	seekFromTo: function(from, to) {
+		this.target = Math.max(0, Math.min(1, to));
+		this.state = Math.max(0, Math.min(1, from));
+		this.lastTime = new Date().getTime();
+		if (!this.intervalId) {
+			this.intervalId = window.setInterval(this.timerDelegate, this.options.interval);
+		}
+	},
+	// animate from the current state to provided value
+	jumpTo: function(to) {
+		this.target = this.state = Math.max(0, Math.min(1, to));
+		this.propagate();
+	},
+	// seek to the opposite of the current target
+	toggle: function() {
+		this.seekTo(1 - this.target);
+	},
+	// add a function or an object with a method setState(state) that will be called with a number
+	// between 0 and 1 on each frame of the animation
+	addSubject: function(subject) {
+		this.subjects[this.subjects.length] = subject;
+		return this;
+	},
+	// remove all subjects
+	clearSubjects: function() {
+		this.subjects = [];
+	},
+	// forward the current state to the animation subjects
+	propagate: function() {
+		var value = this.options.transition(this.state);
+		for (var i=0; i<this.subjects.length; i++) {
+			if (this.subjects[i].setState) {
+				this.subjects[i].setState(value);
+			} else {
+				this.subjects[i](value);
+			}
+		}
+	},
+	// called once per frame to update the current state
+	onTimerEvent: function() {
+		var now = new Date().getTime();
+		var timePassed = now - this.lastTime;
+		this.lastTime = now;
+		var movement = (timePassed / this.options.duration) * (this.state < this.target ? 1 : -1);
+		if (Math.abs(movement) >= Math.abs(this.state - this.target)) {
+			this.state = this.target;
+		} else {
+			this.state += movement;
+		}
+		
+		try {
+			this.propagate();
+		} finally {
+			this.options.onStep.call(this);
+			if (this.target == this.state) {
+				window.clearInterval(this.intervalId);
+				this.intervalId = null;
+				this.options.onComplete.call(this);
+			}
+		}
+	},
+	// shortcuts
+	play: function() {this.seekFromTo(0, 1)},
+	reverse: function() {this.seekFromTo(1, 0)},
+	// return a string describing this Animator, for debugging
+	inspect: function() {
+		var str = "#<Animator:\n";
+		for (var i=0; i<this.subjects.length; i++) {
+			str += this.subjects[i].inspect();
+		}
+		str += ">";
+		return str;
+	}
+}
+// merge the properties of two objects
+Animator.applyDefaults = function(defaults, prefs) {
+	prefs = prefs || {};
+	var prop, result = {};
+	for (prop in defaults) result[prop] = prefs[prop] !== undefined ? prefs[prop] : defaults[prop];
+	return result;
+}
+// make an array from any object
+Animator.makeArray = function(o) {
+	if (o == null) return [];
+	if (!o.length) return [o];
+	var result = [];
+	for (var i=0; i<o.length; i++) result[i] = o[i];
+	return result;
+}
+// convert a dash-delimited-property to a camelCaseProperty (c/o Prototype, thanks Sam!)
+Animator.camelize = function(string) {
+	var oStringList = string.split('-');
+	if (oStringList.length == 1) return oStringList[0];
+	
+	var camelizedString = string.indexOf('-') == 0
+		? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1)
+		: oStringList[0];
+	
+	for (var i = 1, len = oStringList.length; i < len; i++) {
+		var s = oStringList[i];
+		camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
+	}
+	return camelizedString;
+}
+// syntactic sugar for creating CSSStyleSubjects
+Animator.apply = function(el, style, options) {
+	if (style instanceof Array) {
+		return new Animator(options).addSubject(new CSSStyleSubject(el, style[0], style[1]));
+	}
+	return new Animator(options).addSubject(new CSSStyleSubject(el, style));
+}
+// make a transition function that gradually accelerates. pass a=1 for smooth
+// gravitational acceleration, higher values for an exaggerated effect
+Animator.makeEaseIn = function(a) {
+	return function(state) {
+		return Math.pow(state, a*2); 
+	}
+}
+// as makeEaseIn but for deceleration
+Animator.makeEaseOut = function(a) {
+	return function(state) {
+		return 1 - Math.pow(1 - state, a*2); 
+	}
+}
+// make a transition function that, like an object with momentum being attracted to a point,
+// goes past the target then returns
+Animator.makeElastic = function(bounces) {
+	return function(state) {
+		state = Animator.tx.easeInOut(state);
+		return ((1-Math.cos(state * Math.PI * bounces)) * (1 - state)) + state; 
+	}
+}
+// make an Attack Decay Sustain Release envelope that starts and finishes on the same level
+// 
+Animator.makeADSR = function(attackEnd, decayEnd, sustainEnd, sustainLevel) {
+	if (sustainLevel == null) sustainLevel = 0.5;
+	return function(state) {
+		if (state < attackEnd) {
+			return state / attackEnd;
+		}
+		if (state < decayEnd) {
+			return 1 - ((state - attackEnd) / (decayEnd - attackEnd) * (1 - sustainLevel));
+		}
+		if (state < sustainEnd) {
+			return sustainLevel;
+		}
+		return sustainLevel * (1 - ((state - sustainEnd) / (1 - sustainEnd)));
+	}
+}
+// make a transition function that, like a ball falling to floor, reaches the target and/
+// bounces back again
+Animator.makeBounce = function(bounces) {
+	var fn = Animator.makeElastic(bounces);
+	return function(state) {
+		state = fn(state); 
+		return state <= 1 ? state : 2-state;
+	}
+}
+ 
+// pre-made transition functions to use with the 'transition' option
+Animator.tx = {
+	easeInOut: function(pos){
+		return ((-Math.cos(pos*Math.PI)/2) + 0.5);
+	},
+	linear: function(x) {
+		return x;
+	},
+	easeIn: Animator.makeEaseIn(1.5),
+	easeOut: Animator.makeEaseOut(1.5),
+	strongEaseIn: Animator.makeEaseIn(2.5),
+	strongEaseOut: Animator.makeEaseOut(2.5),
+	elastic: Animator.makeElastic(1),
+	veryElastic: Animator.makeElastic(3),
+	bouncy: Animator.makeBounce(1),
+	veryBouncy: Animator.makeBounce(3)
+}
+
+// animates a pixel-based style property between two integer values
+function NumericalStyleSubject(els, property, from, to, units) {
+	this.els = Animator.makeArray(els);
+	if (property == 'opacity' && window.ActiveXObject) {
+		this.property = 'filter';
+	} else {
+		this.property = Animator.camelize(property);
+	}
+	this.from = parseFloat(from);
+	this.to = parseFloat(to);
+	this.units = units != null ? units : 'px';
+}
+NumericalStyleSubject.prototype = {
+	setState: function(state) {
+		var style = this.getStyle(state);
+		var visibility = (this.property == 'opacity' && state == 0) ? 'hidden' : '';
+		var j=0;
+		for (var i=0; i<this.els.length; i++) {
+			try {
+				this.els[i].style[this.property] = style;
+			} catch (e) {
+				// ignore fontWeight - intermediate numerical values cause exeptions in firefox
+				if (this.property != 'fontWeight') throw e;
+			}
+			if (j++ > 20) return;
+		}
+	},
+	getStyle: function(state) {
+		state = this.from + ((this.to - this.from) * state);
+		if (this.property == 'filter') return "alpha(opacity=" + Math.round(state*100) + ")";
+		if (this.property == 'opacity') return state;
+		return Math.round(state) + this.units;
+	},
+	inspect: function() {
+		return "\t" + this.property + "(" + this.from + this.units + " to " + this.to + this.units + ")\n";
+	}
+}
+
+// animates a colour based style property between two hex values
+function ColorStyleSubject(els, property, from, to) {
+	this.els = Animator.makeArray(els);
+	this.property = Animator.camelize(property);
+	this.to = this.expandColor(to);
+	this.from = this.expandColor(from);
+	this.origFrom = from;
+	this.origTo = to;
+}
+
+ColorStyleSubject.prototype = {
+	// parse "#FFFF00" to [256, 256, 0]
+	expandColor: function(color) {
+		var hexColor, red, green, blue;
+		hexColor = ColorStyleSubject.parseColor(color);
+		if (hexColor) {
+			red = parseInt(hexColor.slice(1, 3), 16);
+			green = parseInt(hexColor.slice(3, 5), 16);
+			blue = parseInt(hexColor.slice(5, 7), 16);
+			return [red,green,blue]
+		}
+		if (window.DEBUG) {
+			alert("Invalid colour: '" + color + "'");
+		}
+	},
+	getValueForState: function(color, state) {
+		return Math.round(this.from[color] + ((this.to[color] - this.from[color]) * state));
+	},
+	setState: function(state) {
+		var color = '#'
+				+ ColorStyleSubject.toColorPart(this.getValueForState(0, state))
+				+ ColorStyleSubject.toColorPart(this.getValueForState(1, state))
+				+ ColorStyleSubject.toColorPart(this.getValueForState(2, state));
+		for (var i=0; i<this.els.length; i++) {
+			this.els[i].style[this.property] = color;
+		}
+	},
+	inspect: function() {
+		return "\t" + this.property + "(" + this.origFrom + " to " + this.origTo + ")\n";
+	}
+}
+
+// return a properly formatted 6-digit hex colour spec, or false
+ColorStyleSubject.parseColor = function(string) {
+	var color = '#', match;
+	if(match = ColorStyleSubject.parseColor.rgbRe.exec(string)) {
+		var part;
+		for (var i=1; i<=3; i++) {
+			part = Math.max(0, Math.min(255, parseInt(match[i])));
+			color += ColorStyleSubject.toColorPart(part);
+		}
+		return color;
+	}
+	if (match = ColorStyleSubject.parseColor.hexRe.exec(string)) {
+		if(match[1].length == 3) {
+			for (var i=0; i<3; i++) {
+				color += match[1].charAt(i) + match[1].charAt(i);
+			}
+			return color;
+		}
+		return '#' + match[1];
+	}
+	return false;
+}
+// convert a number to a 2 digit hex string
+ColorStyleSubject.toColorPart = function(number) {
+	if (number > 255) number = 255;
+	var digits = number.toString(16);
+	if (number < 16) return '0' + digits;
+	return digits;
+}
+ColorStyleSubject.parseColor.rgbRe = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;
+ColorStyleSubject.parseColor.hexRe = /^\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+// Animates discrete styles, i.e. ones that do not scale but have discrete values
+// that can't be interpolated
+function DiscreteStyleSubject(els, property, from, to, threshold) {
+	this.els = Animator.makeArray(els);
+	this.property = Animator.camelize(property);
+	this.from = from;
+	this.to = to;
+	this.threshold = threshold || 0.5;
+}
+
+DiscreteStyleSubject.prototype = {
+	setState: function(state) {
+		var j=0;
+		for (var i=0; i<this.els.length; i++) {
+			this.els[i].style[this.property] = state <= this.threshold ? this.from : this.to; 
+		}
+	},
+	inspect: function() {
+		return "\t" + this.property + "(" + this.from + " to " + this.to + " @ " + this.threshold + ")\n";
+	}
+}
+
+// animates between two styles defined using CSS.
+// if style1 and style2 are present, animate between them, if only style1
+// is present, animate between the element's current style and style1
+function CSSStyleSubject(els, style1, style2) {
+	els = Animator.makeArray(els);
+	this.subjects = [];
+	if (els.length == 0) return;
+	var prop, toStyle, fromStyle;
+	if (style2) {
+		fromStyle = this.parseStyle(style1, els[0]);
+		toStyle = this.parseStyle(style2, els[0]);
+	} else {
+		toStyle = this.parseStyle(style1, els[0]);
+		fromStyle = {};
+		for (prop in toStyle) {
+			fromStyle[prop] = CSSStyleSubject.getStyle(els[0], prop);
+		}
+	}
+	// remove unchanging properties
+	var prop;
+	for (prop in fromStyle) {
+		if (fromStyle[prop] == toStyle[prop]) {
+			delete fromStyle[prop];
+			delete toStyle[prop];
+		}
+	}
+	// discover the type (numerical or colour) of each style
+	var prop, units, match, type, from, to;
+	for (prop in fromStyle) {
+		var fromProp = String(fromStyle[prop]);
+		var toProp = String(toStyle[prop]);
+		if (toStyle[prop] == null) {
+			if (window.DEBUG) alert("No to style provided for '" + prop + '"');
+			continue;
+		}
+		
+		if (from = ColorStyleSubject.parseColor(fromProp)) {
+			to = ColorStyleSubject.parseColor(toProp);
+			type = ColorStyleSubject;
+		} else if (fromProp.match(CSSStyleSubject.numericalRe)
+				&& toProp.match(CSSStyleSubject.numericalRe)) {
+			from = parseFloat(fromProp);
+			to = parseFloat(toProp);
+			type = NumericalStyleSubject;
+			match = CSSStyleSubject.numericalRe.exec(fromProp);
+			var reResult = CSSStyleSubject.numericalRe.exec(toProp);
+			if (match[1] != null) {
+				units = match[1];
+			} else if (reResult[1] != null) {
+				units = reResult[1];
+			} else {
+				units = reResult;
+			}
+		} else if (fromProp.match(CSSStyleSubject.discreteRe)
+				&& toProp.match(CSSStyleSubject.discreteRe)) {
+			from = fromProp;
+			to = toProp;
+			type = DiscreteStyleSubject;
+			units = 0;   // hack - how to get an animator option down to here
+		} else {
+			if (window.DEBUG) {
+				alert("Unrecognised format for value of "
+					+ prop + ": '" + fromStyle[prop] + "'");
+			}
+			continue;
+		}
+		this.subjects[this.subjects.length] = new type(els, prop, from, to, units);
+	}
+}
+
+CSSStyleSubject.prototype = {
+	// parses "width: 400px; color: #FFBB2E" to {width: "400px", color: "#FFBB2E"}
+	parseStyle: function(style, el) {
+		var rtn = {};
+		// if style is a rule set
+		if (style.indexOf(":") != -1) {
+			var styles = style.split(";");
+			for (var i=0; i<styles.length; i++) {
+				var parts = CSSStyleSubject.ruleRe.exec(styles[i]);
+				if (parts) {
+					rtn[parts[1]] = parts[2];
+				}
+			}
+		}
+		// else assume style is a class name
+		else {
+			var prop, value, oldClass;
+			oldClass = el.className;
+			el.className = style;
+			for (var i=0; i<CSSStyleSubject.cssProperties.length; i++) {
+				prop = CSSStyleSubject.cssProperties[i];
+				value = CSSStyleSubject.getStyle(el, prop);
+				if (value != null) {
+					rtn[prop] = value;
+				}
+			}
+			el.className = oldClass;
+		}
+		return rtn;
+		
+	},
+	setState: function(state) {
+		for (var i=0; i<this.subjects.length; i++) {
+			this.subjects[i].setState(state);
+		}
+	},
+	inspect: function() {
+		var str = "";
+		for (var i=0; i<this.subjects.length; i++) {
+			str += this.subjects[i].inspect();
+		}
+		return str;
+	}
+}
+// get the current value of a css property, 
+CSSStyleSubject.getStyle = function(el, property){
+	var style;
+	if(document.defaultView && document.defaultView.getComputedStyle){
+		style = document.defaultView.getComputedStyle(el, "").getPropertyValue(property);
+		if (style) {
+			return style;
+		}
+	}
+	property = Animator.camelize(property);
+	if(el.currentStyle){
+		style = el.currentStyle[property];
+	}
+	return style || el.style[property]
+}
+
+
+CSSStyleSubject.ruleRe = /^\s*([a-zA-Z\-]+)\s*:\s*(\S(.+\S)?)\s*$/;
+CSSStyleSubject.numericalRe = /^-?\d+(?:\.\d+)?(%|[a-zA-Z]{2})?$/;
+CSSStyleSubject.discreteRe = /^\w+$/;
+
+// required because the style object of elements isn't enumerable in Safari
+/*
+CSSStyleSubject.cssProperties = ['background-color','border','border-color','border-spacing',
+'border-style','border-top','border-right','border-bottom','border-left','border-top-color',
+'border-right-color','border-bottom-color','border-left-color','border-top-width','border-right-width',
+'border-bottom-width','border-left-width','border-width','bottom','color','font-size','font-size-adjust',
+'font-stretch','font-style','height','left','letter-spacing','line-height','margin','margin-top',
+'margin-right','margin-bottom','margin-left','marker-offset','max-height','max-width','min-height',
+'min-width','orphans','outline','outline-color','outline-style','outline-width','overflow','padding',
+'padding-top','padding-right','padding-bottom','padding-left','quotes','right','size','text-indent',
+'top','width','word-spacing','z-index','opacity','outline-offset'];*/
+
+
+CSSStyleSubject.cssProperties = ['azimuth','background','background-attachment','background-color','background-image','background-position','background-repeat','border-collapse','border-color','border-spacing','border-style','border-top','border-top-color','border-right-color','border-bottom-color','border-left-color','border-top-style','border-right-style','border-bottom-style','border-left-style','border-top-width','border-right-width','border-bottom-width','border-left-width','border-width','bottom','clear','clip','color','content','cursor','direction','display','elevation','empty-cells','css-float','font','font-family','font-size','font-size-adjust','font-stretch','font-style','font-variant','font-weight','height','left','letter-spacing','line-height','list-style','list-style-image','list-style-position','list-style-type','margin','margin-top','margin-right','margin-bottom','margin-left','max-height','max-width','min-height','min-width','orphans','outline','outline-color','outline-style','outline-width','overflow','padding','padding-top','padding-right','padding-bottom','padding-left','pause','position','right','size','table-layout','text-align','text-decoration','text-indent','text-shadow','text-transform','top','vertical-align','visibility','white-space','width','word-spacing','z-index','opacity','outline-offset','overflow-x','overflow-y'];
+
+
+// chains several Animator objects together
+function AnimatorChain(animators, options) {
+	this.animators = animators;
+	this.setOptions(options);
+	for (var i=0; i<this.animators.length; i++) {
+		this.listenTo(this.animators[i]);
+	}
+	this.forwards = false;
+	this.current = 0;
+}
+
+AnimatorChain.prototype = {
+	// apply defaults
+	setOptions: function(options) {
+		this.options = Animator.applyDefaults({
+			// by default, each call to AnimatorChain.play() calls jumpTo(0) of each animator
+			// before playing, which can cause flickering if you have multiple animators all
+			// targeting the same element. Set this to false to avoid this.
+			resetOnPlay: true
+		}, options);
+	},
+	// play each animator in turn
+	play: function() {
+		this.forwards = true;
+		this.current = -1;
+		if (this.options.resetOnPlay) {
+			for (var i=0; i<this.animators.length; i++) {
+				this.animators[i].jumpTo(0);
+			}
+		}
+		this.advance();
+	},
+	// play all animators backwards
+	reverse: function() {
+		this.forwards = false;
+		this.current = this.animators.length;
+		if (this.options.resetOnPlay) {
+			for (var i=0; i<this.animators.length; i++) {
+				this.animators[i].jumpTo(1);
+			}
+		}
+		this.advance();
+	},
+	// if we have just play()'d, then call reverse(), and vice versa
+	toggle: function() {
+		if (this.forwards) {
+			this.seekTo(0);
+		} else {
+			this.seekTo(1);
+		}
+	},
+	// internal: install an event listener on an animator's onComplete option
+	// to trigger the next animator
+	listenTo: function(animator) {
+		var oldOnComplete = animator.options.onComplete;
+		var _this = this;
+		animator.options.onComplete = function() {
+			if (oldOnComplete) oldOnComplete.call(animator);
+			_this.advance();
+		}
+	},
+	// play the next animator
+	advance: function() {
+		if (this.forwards) {
+			if (this.animators[this.current + 1] == null) return;
+			this.current++;
+			this.animators[this.current].play();
+		} else {
+			if (this.animators[this.current - 1] == null) return;
+			this.current--;
+			this.animators[this.current].reverse();
+		}
+	},
+	// this function is provided for drop-in compatibility with Animator objects,
+	// but only accepts 0 and 1 as target values
+	seekTo: function(target) {
+		if (target <= 0) {
+			this.forwards = false;
+			this.animators[this.current].seekTo(0);
+		} else {
+			this.forwards = true;
+			this.animators[this.current].seekTo(1);
+		}
+	}
+}
+
+// an Accordion is a class that creates and controls a number of Animators. An array of elements is passed in,
+// and for each element an Animator and a activator button is created. When an Animator's activator button is
+// clicked, the Animator and all before it seek to 0, and all Animators after it seek to 1. This can be used to
+// create the classic Accordion effect, hence the name.
+// see setOptions for arguments
+function Accordion(options) {
+	this.setOptions(options);
+	var selected = this.options.initialSection, current;
+	if (this.options.rememberance) {
+		current = document.location.hash.substring(1);
+	}
+	this.rememberanceTexts = [];
+	this.ans = [];
+	var _this = this;
+	for (var i=0; i<this.options.sections.length; i++) {
+		var el = this.options.sections[i];
+		var an = new Animator(this.options.animatorOptions);
+		var from = this.options.from + (this.options.shift * i);
+		var to = this.options.to + (this.options.shift * i);
+		an.addSubject(new NumericalStyleSubject(el, this.options.property, from, to, this.options.units));
+		an.jumpTo(0);
+		var activator = this.options.getActivator(el);
+		activator.index = i;
+		activator.onclick = function(){_this.show(this.index)};
+		this.ans[this.ans.length] = an;
+		this.rememberanceTexts[i] = activator.innerHTML.replace(/\s/g, "");
+		if (this.rememberanceTexts[i] === current) {
+			selected = i;
+		}
+	}
+	this.show(selected);
+}
+
+Accordion.prototype = {
+	// apply defaults
+	setOptions: function(options) {
+		this.options = Object.extend({
+			// REQUIRED: an array of elements to use as the accordion sections
+			sections: null,
+			// a function that locates an activator button element given a section element.
+			// by default it takes a button id from the section's "activator" attibute
+			getActivator: function(el) {return document.getElementById(el.getAttribute("activator"))},
+			// shifts each animator's range, for example with options {from:0,to:100,shift:20}
+			// the animators' ranges will be 0-100, 20-120, 40-140 etc.
+			shift: 0,
+			// the first page to show
+			initialSection: 0,
+			// if set to true, document.location.hash will be used to preserve the open section across page reloads 
+			rememberance: true,
+			// constructor arguments to the Animator objects
+			animatorOptions: {}
+		}, options || {});
+	},
+	show: function(section) {
+		for (var i=0; i<this.ans.length; i++) {
+			this.ans[i].seekTo(i > section ? 1 : 0);
+		}
+		if (this.options.rememberance) {
+			document.location.hash = this.rememberanceTexts[section];
+		}
+	}
+}

examples/measure.html

@@ -92,6 +92,31 @@
             
             document.getElementById('noneToggle').checked = true;
         }
+
+        function calcVincenty(geometry) {
+            /**
+             * Note: this function assumes geographic coordinates and
+             *     will fail otherwise.  OpenLayers.Util.distVincenty takes
+             *     two objects representing points with geographic coordinates
+             *     and returns the geodesic distance between them (shortest
+             *     distance between the two points on an ellipsoid) in *kilometers*.
+             *
+             * It is important to realize that the segments drawn on the map
+             *     are *not* geodesics (or "great circle" segments).  This means
+             *     that in general, the measure returned by this function
+             *     will not represent the length of segments drawn on the map.
+             */
+            var dist = 0;
+            for (var i = 1; i < geometry.components.length; i++) {
+                var first = geometry.components[i-1];
+                var second = geometry.components[i];
+                dist += OpenLayers.Util.distVincenty(
+                    {lon: first.x, lat: first.y},
+                    {lon: second.x, lat: second.y}
+                );
+            }
+            return dist;
+        }    
         
         function handleMeasurements(event) {
             var geometry = event.geometry;
@@ -102,6 +127,10 @@
             var out = "";
             if(order == 1) {
                 out += "measure: " + measure.toFixed(3) + " " + units;
+                if (map.getProjection() == "EPSG:4326") {
+                    out += "<br /> Great Circle Distance: " + 
+                        calcVincenty(geometry).toFixed(3) + " km *"; 
+                }        
             } else {
                 out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
             }
@@ -144,6 +173,12 @@
                 <label for="polygonToggle">measure area</label>
             </li>
         </ul>
+        <p>* Note that the geometries drawn are planar geometries and the
+        metrics returned by the measure control are planar measures.  The
+        "great circle" distance does not necessarily represent the length
+        of the segments drawn on the map.  Instead, it is a geodesic metric that
+        represents the cumulative shortest path between all vertices in the
+        geometry were they projected onto a sphere.</p>
     </div>
   </body>
 </html>

examples/protocol-gears.html

@@ -0,0 +1,261 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style type="text/css">
+        .float-left {
+            float: left;
+        }
+        .clear-left {
+            clear: left;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, vector, protocol, modify;
+
+        function init() {
+            // create Gears protocol
+            protocol = new OpenLayers.Protocol.SQL.Gears({
+                databaseName: "db_name",
+                tableName: "table_name",
+                saveFeatureState: false
+            });
+
+            if (!GearsIsSupported()) {
+                return;
+            }
+
+            map = new OpenLayers.Map("map");
+
+            // create base layer
+            var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
+                "http://labs.metacarta.com/wms/vmap0",
+                {"layers": "basic"}
+            );
+            map.addLayer(layer);
+
+            // create vector layer
+            vector = new OpenLayers.Layer.Vector("Vector", {
+                protocol: protocol,
+                strategies : [new OpenLayers.Strategy.Fixed()],
+                eventListeners: {
+                    featuremodified: function(obj) {
+                        if (obj.feature.state != OpenLayers.State.INSERT &&
+                            obj.feature.state != OpenLayers.State.DELETE) {
+
+                            obj.feature.state = OpenLayers.State.UPDATE;
+                        }
+                        displayStatus();
+                    }
+                }
+            });
+            map.addLayer(vector);
+
+            // create modify feature control
+            modify = new OpenLayers.Control.ModifyFeature(vector);
+
+            // create editing panel
+            var panel = new OpenLayers.Control.Panel({
+                displayClass: "olControlEditingToolbar"
+            });
+
+            var navigation = new OpenLayers.Control.Navigation({
+                eventListeners: {
+                    activate: function(obj) {
+                        modify.activate();
+                    },
+                    deactivate: function(obj) {
+                        modify.deactivate();
+                    }
+                }
+            });
+
+            var editing = new OpenLayers.Control.DrawFeature(
+                vector, OpenLayers.Handler.Polygon, {
+                displayClass: "olControlDrawFeaturePolygon",
+                eventListeners: {
+                    featureadded: function(obj) {
+                        obj.feature.state = OpenLayers.State.INSERT;
+                        displayStatus();
+                    }
+                }
+            });
+            panel.addControls([navigation, editing]);
+            panel.defaultControl = navigation;
+
+            // add controls to the map
+            map.addControl(modify);
+            map.addControl(panel);
+
+            // center the map
+            map.setCenter(new OpenLayers.LonLat(5, 40), 5);
+        }
+
+        function displayResult(txt) {
+            if (window.resultDomElement === undefined) {
+                window.resultDomElement = OpenLayers.Util.getElement("last-result");
+            }
+            resultDomElement.innerHTML = txt;
+            displayStatus();
+        }
+
+        function displayStatus() {
+            if (window.statusDomElement === undefined) {
+                window.statusDomElement = OpenLayers.Util.getElement("status");
+            }
+
+            var createCnt = 0;
+            var updateCnt = 0;
+            var deleteCnt = 0;
+            var i, len, state;
+            for (i = 0, len = vector.features.length; i < len; i++) {
+                state = vector.features[i].state;
+                if (state == OpenLayers.State.INSERT) {
+                    createCnt++;
+                } else if (state == OpenLayers.State.UPDATE) {
+                    updateCnt++;
+                } else if (state == OpenLayers.State.DELETE) {
+                    deleteCnt++;
+                }
+            }
+            statusDomElement.innerHTML = createCnt + " features to create, " +
+                                         updateCnt + " features to update, " +
+                                         deleteCnt + " features to delete";
+        }
+
+        function GearsIsSupported() {
+            if (!protocol.supported()) {
+                OpenLayers.Console.userError("You must install Gears prior to using this example");
+                return false;
+            }
+            return true;
+        }
+
+        function featuresWithState(state) {
+            var list = [];
+            var i, len, feature;
+            for (i = 0, len = vector.features.length; i < len; i++) {
+                feature = vector.features[i];
+                if (feature.state == state) {
+                    list.push(feature);
+                }
+            }
+            return list;
+        }
+
+        function _sync() {
+            if (!GearsIsSupported()) {
+                return;
+            }
+            var resp = protocol.read();
+            if (!resp.success()) {
+                OpenLayers.Console.error("reading from Gears DB failed");
+                return;
+            }
+            vector.destroyFeatures();
+            if (!resp.features || resp.features.length <= 0) {
+                displayResult("No features to read");
+                return;
+            }
+            vector.addFeatures(resp.features);
+            displayResult("features successfully read");
+        }
+
+        function _commit() {
+            if (!GearsIsSupported()) {
+                return;
+            }
+            var error = false;
+            function callback(resp) {
+                if (error) {
+                    return;
+                }
+                if (!resp.success()) {
+                    OpenLayers.Console.error("Commiting to Gears DB failed");
+                    error = true;
+                    return;
+                }
+                modify.selectControl.unselectAll()
+
+                if (resp.reqFeatures) {
+                    vector.destroyFeatures(resp.reqFeatures);
+                }
+                if (resp.features) {
+                    vector.addFeatures(resp.features);
+                }
+            }
+            if (vector.features.length > 0) {
+                protocol.commit(vector.features, {
+                    "create": {
+                        callback: callback
+                    },
+                    "update": {
+                        callback: callback
+                    },
+                    "delete": {
+                        callback: callback
+                    }
+                });
+                if (!error) {
+                    displayResult("features successfully committed");
+                }
+            } else {
+                displayResult("no features to commit");
+            }
+        }
+
+        function _delete() {
+            if (!GearsIsSupported()) {
+                return;
+            }
+            var feature = vector.selectedFeatures[0];
+            if (feature) {
+                modify.selectControl.unselectAll()
+                feature.state = OpenLayers.State.DELETE;
+                displayStatus();
+            }
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Gears Protocol Example</h1>
+
+    <div id="tags">
+    </div>
+    <p id="shortdesc">
+        Shows the usage of the Gears protocol.
+    </p>
+
+    <div class="float-left">
+      <div id="map" class="smallmap"></div>
+    </div>
+
+    <div>
+      <a href="javascript:_sync()">Sync</a>
+      <p>The Sync link destroys the features currently in the layer, reads
+         features from the Gears database, and adds them to the layer.
+         Uncommitted features will be lost.</p>
+
+      <a href="javascript:_commit()">Commit</a>
+      <p>The Commit link commits to the Gears database the features that are
+         marked as INSERT, UPDATE or DELETE.</p>
+
+      <a href="javascript:_delete()">Delete</a>
+      <p>The Delete link marks the selected feature as DELETE. To select a feature
+         click choose the navigation control in the editing toolbar.</p>
+    </div>
+
+    <div style="margin-top: 30px">
+      <p>Status: <span id="status"></span></p>
+      <p>Result: <span id="last-result"></span></p>
+    </div>
+
+    <div class="clear-left" id="docs">
+      <p>This example demonstrates the usage of OpenLayers Gears protocol to
+         read/create/update/delete features from/to the Gears database.
+         <a href="http://gears.google.com/">Gears</a> must obviously be installed
+         in your browser for this example to work.</p>
+    </div>
+  </body>
+</html>

examples/proxy.cgi

@@ -18,7 +18,7 @@ import sys, os
 allowedHosts = ['www.openlayers.org', 'openlayers.org', 
                 'labs.metacarta.com', 'world.freemap.in', 
                 'prototype.openmnnd.org', 'geo.openplans.org',
-                'sigma.openplans.org'
+                'sigma.openplans.org',
                 'www.openstreetmap.org']
 
 method = os.environ["REQUEST_METHOD"]
@@ -40,8 +40,8 @@ try:
         print "Status: 502 Bad Gateway"
         print "Content-Type: text/plain"
         print
-        print "This proxy does not allow you to access that location."
-        print 
+        print "This proxy does not allow you to access that location (%s)." % (host,)
+        print
         print os.environ
   
     elif url.startswith("http://") or url.startswith("https://"):

examples/spherical-mercator.html

@@ -28,6 +28,7 @@
                 projection: new OpenLayers.Projection("EPSG:900913"),
                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
                 units: "m",
+                numZoomLevels: 18,
                 maxResolution: 156543.0339,
                 maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                                  20037508, 20037508.34)
@@ -86,8 +87,8 @@
                     attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
                 }
             );
-            // create OSM layer
-            var mapnik = new OpenLayers.Layer.TMS(
+            // create OAM layer
+            var oam = new OpenLayers.Layer.TMS(
                 "OpenAerialMap",
                 "http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/",
                 {
@@ -95,10 +96,20 @@
                 }
             );
 
+            // create OSM layer
+            var mapnik = new OpenLayers.Layer.TMS(
+                "OpenStreetMap (Mapnik)",
+                  "http://a.tile.openstreetmap.org/",
+                {
+                    type: 'png', getURL: osm_getTileURL,
+                    displayOutsideMaxExtent: true,
+                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
+                }
+            );
             // create OSM layer
             var osmarender = new OpenLayers.Layer.TMS(
                 "OpenStreetMap (Tiles@Home)",
-                "http://tah.openstreetmap.org/Tiles/tile.php/",
+                "http://tah.openstreetmap.org/Tiles/tile/",
                 {
                     type: 'png', getURL: osm_getTileURL,
                     displayOutsideMaxExtent: true,
@@ -122,7 +133,7 @@
             var vector = new OpenLayers.Layer.Vector("Editable Vectors");
 
             map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb,
-                           yahoo, yahoosat, yahoohyb, mapnik, osmarender,
+                           yahoo, yahoosat, yahoohyb, oam, mapnik, osmarender,
                            wms, vector]);
             map.addControl(new OpenLayers.Control.LayerSwitcher());
             map.addControl(new OpenLayers.Control.EditingToolbar(vector));

examples/strategy-bbox.html

@@ -0,0 +1,64 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>OpenLayers BBOX Strategy Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+            var map, photos;
+            OpenLayers.ProxyHost = (window.location.host == "localhost") ?
+                "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
+        
+            function init() {
+                map = new OpenLayers.Map('map', {
+                    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
+                });
+                var base = new OpenLayers.Layer.WMS("OpenLayers WMS", 
+                    ["http://t3.labs.metacarta.com/wms-c/Basic.py",
+                     "http://t2.labs.metacarta.com/wms-c/Basic.py",
+                     "http://t1.labs.metacarta.com/wms-c/Basic.py"], 
+                    {layers: 'satellite'}
+                );
+
+                var style = new OpenLayers.Style({
+                    externalGraphic: "${img_url}",
+                    pointRadius: 30
+                });
+
+                photos = new OpenLayers.Layer.Vector("Photos", {
+                    strategies: [new OpenLayers.Strategy.BBOX()],
+                    protocol: new OpenLayers.Protocol.HTTP({
+                        url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
+                        params: {
+                            format: "WFS",
+                            sort: "interestingness-desc",
+                            service: "WFS",
+                            request: "GetFeatures",
+                            srs: "EPSG:4326",
+                            maxfeatures: 10
+                        },
+                        format: new OpenLayers.Format.GML()
+                    }),
+                    styleMap: new OpenLayers.StyleMap(style)
+                });
+
+                map.addLayers([base, photos]);
+                map.setCenter(new OpenLayers.LonLat(-116.45, 35.42), 5);
+            }
+            
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">BBOX Strategy Example</h1>
+        <p id="shortdesc">
+            Uses a BBOX strategy to request features within a bounding box.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>The BBOX strategy requests data within a bounding box.  When the
+            previously requested data bounds are invalidated (by browsing to
+            some area not covered by those bounds), another request for data
+            is issued.</p>
+        </div>
+    </body>
+</html>

examples/strategy-cluster.html

@@ -0,0 +1,201 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>OpenLayers Cluster Strategy Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
+        <style type="text/css">
+            #photos {
+                height: 100px;
+                width: 512px;
+                position: relative;
+                white-space: nowrap;
+            }
+            .shift {
+                height: 25px;
+                line-height: 25px;
+                background-color: #fefefe;
+                text-align: center;
+                position: absolute;
+                bottom: 10px;
+                font-size: 8px;
+                font-weight: bold;
+                color: #696969;
+                width: 25px;
+            }
+            #scroll-start {
+                left: 0px;
+            }
+            #scroll-end {
+                right: 0px;
+            }
+            #scroll {
+                left: 30px;
+                width: 452px;
+                height: 100px;
+                overflow: hidden;
+                position: absolute;
+                bottom: 0px;
+            }
+            #photos ul {
+                position: absolute;
+                bottom: 0px;
+                padding: 0;
+                margin: 0;
+            }
+            #photos ul.start {
+                left: 0px;
+            }
+            #photos ul.end {
+                right: 80px;
+            }
+            #photos ul li {
+                padding 10px;
+                margin: 0;
+                list-style: none;
+                display: inline;
+            }
+            img.thumb {
+                height: 30px;
+            }
+            img.big {
+                height: 90px;
+            }
+        </style>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="Jugl.js"></script>
+        <script src="animator.js"></script>
+        <script type="text/javascript">
+            var map, template;
+            var Jugl = window["http://jugl.tschaub.net/trunk/lib/Jugl.js"];
+            OpenLayers.ProxyHost = (window.location.host == "localhost") ?
+                "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
+
+            function init() {
+                map = new OpenLayers.Map('map', {
+                    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
+                });
+                var base = new OpenLayers.Layer.WMS("OpenLayers WMS", 
+                    ["http://t3.labs.metacarta.com/wms-c/Basic.py",
+                     "http://t2.labs.metacarta.com/wms-c/Basic.py",
+                     "http://t1.labs.metacarta.com/wms-c/Basic.py"], 
+                    {layers: 'satellite'}
+                );
+
+                var style = new OpenLayers.Style({
+                    pointRadius: "${radius}",
+                    fillColor: "#ffcc66",
+                    fillOpacity: 0.8,
+                    strokeColor: "#cc6633",
+                    strokeWidth: 2,
+                    strokeOpacity: 0.8
+                }, {
+                    context: {
+                        radius: function(feature) {
+                            return Math.min(feature.attributes.count, 7) + 3;
+                        }
+                    }
+                });
+
+                var photos = new OpenLayers.Layer.Vector("Photos", {
+                    strategies: [
+                        new OpenLayers.Strategy.Fixed(),
+                        new OpenLayers.Strategy.Cluster()
+                    ],
+                    protocol: new OpenLayers.Protocol.HTTP({
+                        url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
+                        params: {
+                            format: "WFS",
+                            sort: "interestingness-desc",
+                            service: "WFS",
+                            request: "GetFeatures",
+                            srs: "EPSG:4326",
+                            maxfeatures: 150,
+                            bbox: [-180, -90, 180, 90]
+                        },
+                        format: new OpenLayers.Format.GML()
+                    }),
+                    styleMap: new OpenLayers.StyleMap({
+                        "default": style,
+                        "select": {
+                            fillColor: "#8aeeef",
+                            strokeColor: "#32a8a9"
+                        }
+                    })
+                });
+                
+                var select = new OpenLayers.Control.SelectFeature(
+                    photos, {hover: true}
+                );
+                map.addControl(select);
+                select.activate();
+                photos.events.on({"featureselected": display});
+
+                map.addLayers([base, photos]);
+                map.setCenter(new OpenLayers.LonLat(0, 0), 1);
+                
+                // template setup
+                template = new Jugl.Template("template");
+
+            }
+            
+            function display(event) {
+                // clear previous photo list and create new one
+                $("photos").innerHTML = "";
+                var node = template.process({
+                    context: {features: event.feature.cluster},
+                    clone: true,
+                    parent: $("photos")
+                });
+                // set up forward/rewind
+                var forward = Animator.apply($("list"), ["start", "end"], {duration: 1500});
+                $("scroll-end").onmouseover = function() {forward.seekTo(1)};
+                $("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
+                $("scroll-start").onmouseover = function() {forward.seekTo(0)};
+                $("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
+                // set up photo zoom
+                for(var i=0; i<event.feature.cluster.length; ++i) {
+                    listen($("link-" + i), Animator.apply($("photo-" + i), ["thumb", "big"]));
+                }
+            }
+            
+            function listen(el, anim) {
+                el.onmouseover = function() {anim.seekTo(1)};
+                el.onmouseout = function() {anim.seekTo(0)};
+            }
+            
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Cluster Strategy Example</h1>
+        <p id="shortdesc">
+            Uses a cluster strategy to render points representing clusters of features.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>The Cluster strategy lets you display points representing clusters
+            of features within some pixel distance.</p>
+        </div>
+        <div id="photos"></div>
+        <p>Hover over a cluster on the map to see the photos it includes.</p>
+        <div style="display: none;">
+            <div id="template">
+                <div class="shift" id="scroll-start">&lt;&lt;</div>
+                <div id="scroll">
+                    <ul id="list" class="start">
+                        <li jugl:repeat="feature features">
+                            <a jugl:attributes="href feature.attributes.img_url;
+                                                id 'link-' + repeat.feature.index"
+                               target="_blank">
+                                <img jugl:attributes="src feature.attributes.img_url;
+                                                      title feature.attributes.title;
+                                                      id 'photo-' + repeat.feature.index"
+                                     class="thumb" />
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="shift" id="scroll-end">&gt;&gt;</div>
+            </div>
+        </div>
+    </body>
+</html>

examples/strategy-paging.html

@@ -0,0 +1,78 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>OpenLayers Paging Strategy Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+            var map, photos, paging;
+            OpenLayers.ProxyHost = (window.location.host == "localhost") ?
+                "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
+        
+            function init() {
+                map = new OpenLayers.Map('map', {
+                    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
+                });
+                var base = new OpenLayers.Layer.WMS("OpenLayers WMS", 
+                    ["http://t3.labs.metacarta.com/wms-c/Basic.py",
+                     "http://t2.labs.metacarta.com/wms-c/Basic.py",
+                     "http://t1.labs.metacarta.com/wms-c/Basic.py"], 
+                    {layers: 'satellite'}
+                );
+
+                var style = new OpenLayers.Style({
+                    externalGraphic: "${img_url}",
+                    pointRadius: 30
+                });
+
+                paging = new OpenLayers.Strategy.Paging();
+
+                photos = new OpenLayers.Layer.Vector("Photos", {
+                    strategies: [new OpenLayers.Strategy.Fixed(), paging],
+                    protocol: new OpenLayers.Protocol.HTTP({
+                        url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
+                        params: {
+                            format: "WFS",
+                            sort: "interestingness-desc",
+                            service: "WFS",
+                            request: "GetFeatures",
+                            srs: "EPSG:4326",
+                            maxfeatures: 100,
+                            bbox: [-180, -90, 180, 90]
+                        },
+                        format: new OpenLayers.Format.GML()
+                    }),
+                    styleMap: new OpenLayers.StyleMap(style)
+                });
+
+                map.addLayers([base, photos]);
+                photos.events.on({"featuresadded": updateButtons});
+                map.setCenter(new OpenLayers.LonLat(0, 0), 1);
+            }
+            
+            function updateButtons() {
+                document.getElementById("prev").disabled = (paging.pageNum() < 1);
+                document.getElementById("next").disabled = (paging.pageNum() >= paging.pageCount() - 1);
+                document.getElementById("num").innerHTML = paging.pageNum() + 1;
+                document.getElementById("count").innerHTML = paging.pageCount();
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Paging Strategy Example</h1>
+        <p id="shortdesc">
+            Uses a paging strategy to cache large batches of features and render a page at a time.
+        </p>
+        <div id="map" class="smallmap"></div>
+        Displaying page <span id="num">0</span> of <span id="count">...</span>
+        <button id="prev" disabled="disabled" onclick="paging.pagePrevious();">previous</button>
+        <button id="next" disabled="disabled" onclick="paging.pageNext();">next</button>
+        <br /><br />
+        <div id="docs">
+            <p>The Paging strategy lets you apply client side paging for protocols
+            that do not support paging on the server.  In this case, the protocol requests a
+            batch of 100 features, the strategy caches those and supplies a single
+            page at a time to the layer.</p>
+        </div>
+    </body>
+</html>

examples/vector-formats.html

@@ -52,24 +52,38 @@
             var in_options = {
                 'internalProjection': map.baseLayer.projection,
                 'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("inproj").value)
-            }    
+            };   
             var out_options = {
                 'internalProjection': map.baseLayer.projection,
                 'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("outproj").value)
-            }    
+            };
+            var gmlOptions = {
+                featureType: "feature",
+                featureNS: "http://example.com/feature"
+            };
+            var gmlOptionsIn = OpenLayers.Util.extend(
+                OpenLayers.Util.extend({}, gmlOptions),
+                in_options
+            );
+            var gmlOptionsOut = OpenLayers.Util.extend(
+                OpenLayers.Util.extend({}, gmlOptions),
+                out_options
+            );
             formats = {
               'in': {
                 wkt: new OpenLayers.Format.WKT(in_options),
                 geojson: new OpenLayers.Format.GeoJSON(in_options),
                 georss: new OpenLayers.Format.GeoRSS(in_options),
-                gml: new OpenLayers.Format.GML(in_options),
+                gml2: new OpenLayers.Format.GML.v2(gmlOptionsIn),
+                gml3: new OpenLayers.Format.GML.v3(gmlOptionsIn),
                 kml: new OpenLayers.Format.KML(in_options)
               }, 
               'out': {
                 wkt: new OpenLayers.Format.WKT(out_options),
                 geojson: new OpenLayers.Format.GeoJSON(out_options),
                 georss: new OpenLayers.Format.GeoRSS(out_options),
-                gml: new OpenLayers.Format.GML(out_options),
+                gml2: new OpenLayers.Format.GML.v2(gmlOptionsOut),
+                gml3: new OpenLayers.Format.GML.v3(gmlOptionsOut),
                 kml: new OpenLayers.Format.KML(out_options)
               } 
             };
@@ -169,7 +183,8 @@
                 <option value="geojson" selected="selected">GeoJSON</option>
                 <option value="kml">KML</option>
                 <option value="georss">GeoRSS</option>
-                <option value="gml">GML</option>
+                <option value="gml2">GML (v2)</option>
+                <option value="gml3">GML (v3)</option>
                 <option value="wkt">Well-Known Text (WKT)</option>
             </select>
             &nbsp;

examples/wfs-reprojection.html

@@ -45,7 +45,7 @@
             // (only if your wfs doens't support your map projection)
             var wfs = layer = new OpenLayers.Layer.WFS(
                 "States (SVG)",
-                "http://sigma.openplans.org:8080/geoserver/ows",
+                "http://sigma.openplans.org/geoserver/ows",
                 {typename: 'topp:states'},
                 {
                     typename: 'states',
@@ -60,7 +60,7 @@
             
             var wfs = layer = new OpenLayers.Layer.WFS(
                 "States (Canvas)",
-                "http://sigma.openplans.org:8080/geoserver/ows",
+                "http://sigma.openplans.org/geoserver/ows",
                 {typename: 'topp:states'},
                 {
                     typename: 'states',