var Mode = Class.create({
	
	initialize: function(admin) {
		this.admin = admin;
		this.current = null;
		this.content = $('content');
		this.photo = null;
		this.auto = false;
		this.autoHandle = null;
		this.autoCount = 0;
	},
	
	switchTo: function(mode) {
		var last = this.current;
		if (mode == last)
			return;
		this.current = mode;
		switch(mode) {
			case 'help':
				this.switchTab(last, mode);
				this.switchToHelp();
				break;
			case 'north':
			case 'east':
			case 'south':
			case 'west':
				this.switchTab(last, mode);
				this.switchPhoto();
				break;
			default:
				this.current = last;
				alert('Bad mode switch attempted: ' + mode);
				break;
		}
	},
	
	switchPhoto: function() {
		this.removeContent();
		var comp;
		switch(this.current) {
			case 'north': comp = '12'; break;
			case 'east':  comp = '13'; break;
			case 'south': comp = '14'; break; 
			case 'west':  comp = '11'; break;
		}
		var url = 'http://hpwren.ucsd.edu/anim-a/hpwren-iqeye' + comp + '/hpwren-iqeye' + comp + '.jpg';
		var html = '<img id=\'photo\' style="display:none;" onload=\'onPhotoLoad();\' src=\'' + url + '\' alt=\'' + this.current + '\' />' +
		           '<p id="loading" style="display:inline;font-style:italic;">Loading...</p>';
		this.content.innerHTML = html;
		this.photo = new Photo($('photo'));
	},
	
	switchToHelp: function() {
		this.photo = null;
		this.removeContent();
		this.content.innerHTML = this.helpHTML;
	},
	
	switchTab: function(then, now) {
		if (then) {
			var thenTab = $(then);
			thenTab.style.backgroundColor = '#ede5d7';
		}
		var nowTab = $(now);
		nowTab.style.backgroundColor = '#f9fffc';
	},
	
	removeContent: function() {
		var kids = this.content.childElements();
		for (var i = 0; i < kids.length; i++)
			kids[i].remove();
	},
	
	helpHTML: '<div style="padding-left:10px;padding-right:10px;">' +
		      '<p>This Lyons Peak web cam viewer is provided by Tom Dilatush as a public service to the residents of San Diego County.  The main objective ' + 
			  'is to provide good, near-realtime information about chaparral wildfires, by providing the tools for visual tracking of firefronts and ' +
			  'smoke plumes.  Everything presented by this web site is accurate to the best of my knowledge, but I make no warranty, either express or ' +
			  'implied, about the suitability of this information for any purpose (the lawyers made me say that).</p>' + 
			  '<p>This web site depends on four web cameras mounted on antenna towers on ' +
			  '<a target="_blank" href="http://maps.google.com/?ie=UTF8&ll=32.702378,-116.763554&spn=0.025785,0.055618&t=p&z=15">Lyon\'s Peak</a>' +
			  ' The cameras themselves are provided by the good folks at <a target="_blank" href="http://hpwren.ucsd.edu/cameras/">HPWREN</a>.</p>' +
			  '<p>Hopefully you will find this web site very easy to use:</p><ul>' +
	          '<li style="margin-top:10px;"><b><u>Selecting a Camera</u>:</b>&nbsp;&nbsp;Click the North, East, South, or West tabs to see the latest Lyons Peak web cam photo (there ' +
			  'are four of them, one pointed in each of these directions).  These photos are updated every two minutes.</li>' +
	          '<li style="margin-top:10px;"><b><u>Zooming</u>:</b>&nbsp;&nbsp;Click + or - (on the bottom status bar) to zoom the photo in (closer) or out (further away), ' +
			  'respectively.  Click = to fit the image to the full width of your screen.</li>' +
	          '<li style="margin-top:10px;"><b><u>Refreshing the Photo</u>:</b>&nbsp;&nbsp;Click Refresh (on the bottom status bar) to refresh the photo at any time &ndash; ' +
			  ' but please remember that the cameras only transmit images once every two minutes, so there\'s no point in refreshing more often than that.  ' +
			  'Click Auto to have the page refresh automatically when the web cam updates.</li>' +
	          '<li style="margin-top:10px;"><b><u>Moving the Photo</u>:</b>&nbsp;&nbsp;While pointing at a photo, hold your left mouse button down and move to drag the photo ' +
			  'around to a different position.</li>' +
	          '<li style="margin-top:10px;"><b><u>Identifying a Feature</u>:</b>&nbsp;&nbsp;Click on a feature in a photo to identify it.  The name and description show up in the ' +
			  'left of the bottom status bar (assuming it\'s a feature we\'ve identified!).</li>' +
	          '<li style="margin-top:10px;"><b><u>Reading the Bearing to a Feature</u>:</b>&nbsp;&nbsp;While rolling your mouse over a photo, the bearing (in degrees ' + 
			  'clockwise from true North) appears at the lower right.</li>' +
	          '<li style="margin-top:10px;"><b><u>Help</u>:</b>&nbsp;&nbsp;Click the About tab anytime to see this page again.</li>' +
			  '</ul></div>',
	
	type: 'Mode'
});