var Photo = Class.create({
	
	initialize: function(img_element) {
		this.content = img_element.parentNode;
		this.content.observe('mousedown', onContentMouseDown);
		this.content.observe('mousemove', onContentMouseMove);
		this.loading = img_element.next();
		this.loading.style.position = 'absolute';
		this.loading.style.top = '100px';
		this.loading.style.left = '100px';
		this.img = img_element;
		this.baseURL = this.img.src;
		this.currentURL = this.baseURL;
		this.img.style.position = 'relative';
		this.hide();
		this.vptSize = new Point(this.content.getWidth(), this.content.getHeight());
		this.actSize = new Point(0, 0);
		this.imgSize = new Point(0, 0);
		this.imgOff = new Point(0, 0);
		this.mouseDown = new Point(0, 0);
		this.imgOrigOff = this.imgOff;
		this.mag = 1.0;
		this.minMag = 1.0;
		this.isMouseDown = false;
		this.showing = false;
	},
	
	onload: function() {
		if (this.showing) {
			this.setMag(this.mag);
			this.offset();
		}
		else {
			this.actSize = new Point(this.img.width, this.img.height);
			this.normalize();
			this.show();
		}
	},
	
	normalize: function() {
			var wr = 1.0 * this.actSize.x / this.vptSize.x;
			var hr = 1.0 * this.actSize.y / this.vptSize.y;
			var sr = (hr > wr) ? hr : wr;
			this.minMag = 1.0/sr;
			this.setMag(1.0/wr);
			this.center();
	},
	
	refresh: function() {
		var newURL = this.baseURL + '?' + new Date().getTime();
		this.currentURL = newURL;
		this.img.src = newURL;
		this.setMag(this.mag);
		this.offset();
	},
	
	setMag: function(mag) {
		this.mag = mag;
		this.imgSize = this.actToImg(this.actSize);
		this.img.width = this.imgSize.x;
		this.img.height = this.imgSize.y;
	}, 
	
	onPlusClick: function() {
		var actCenter = this.imgToAct(this.scrToImg(this.scrCenter()));
		this.setMag(Math.min(8, this.mag * 1.25));
		this.center(actCenter);
	},
	
	onMinusClick: function() {
		var actCenter = this.imgToAct(this.scrToImg(this.scrCenter()));
		this.setMag(Math.max(this.minMag, this.mag / 1.25));
		this.center(actCenter);
	},
	
	onEqualsClick: function() {
		this.normalize();
	},
	
	onContentMouseDown: function(event, element) {
		this.mouseDown = new Point(event.pointerX(), event.pointerY());
		this.imgOrigOff = this.imgOff;
		this.content.observe('mouseup', onContentMouseUp);
		this.isMouseDown = true;
		event.stop();
	},
	
	onContentMouseUp: function(event, element) {
		event.stop();
		element.stopObserving('mouseup', onContentMouseUp);
		this.isMouseDown = false;
		if (this.imgOff.equals(this.imgOrigOff))
			this.onContentClick(event, element);
	},
	
	onContentMouseMove: function(event, element) {
		event.stop();
		var cur = new Point(event.pointerX(), event.pointerY());
		var delta;
		if (this.isMouseDown) {
			delta = cur.sub(this.mouseDown);
			this.imgOff = delta.add(this.imgOrigOff);
			this.offset();
		} else { 
			delta = cur.sub(new Point(this.content.cumulativeOffset()));
			if (delta.x < 0 || delta.y < 0 || delta.x > this.content.getWidth() || delta.y > this.content.getHeight())
				return;
			var actOff = this.imgToAct(this.scrToImg(delta));
			var cam = cameras[mode.current];
			if (!cam)
				return;
			var bearing = new Number(cam.bearing(actOff)).toFixed(1);
			bearing = bearing + '&deg;';
			$('dir').innerHTML = bearing;
			if (mode.admin) {
				var loc = actOff.x + ', ' + actOff.y;
				$('loc').innerHTML = loc;
			}
		}
	},
	
	onContentClick: function(event, element) {
		var cam = cameras[mode.current];
		if (!cam)
			return;
		var cur = new Point(event.pointerX(), event.pointerY());
		var delta = cur.sub(new Point(this.content.cumulativeOffset()));
		var actOff = this.imgToAct(this.scrToImg(delta));
		var feat = cam.findFeature(actOff);
		if (!feat)
			return;
		var info = $('ident');
		if (!info)
			return;
		var html = feat.name;
		html += ', ' + feat.distance.toFixed(2) + ' miles';
		if (feat.mapURL)
			html += ' (<a target="_blank" href="' + feat.mapURL + '">map</a>)';
		if (feat.infoURL)
			html += ' (<a target="_blank" href="' + feat.infoURL + '">info</a>)';
		info.innerHTML = html;
	},
	
	center: function(act) {
		if (act) {
			var imgCenter = this.actToImg(act);
			this.imgOff = this.scrCenter().sub(imgCenter);
		} else {
			var dy = Math.round((this.vptSize.y - this.imgSize.y)/2);
			this.imgOff = new Point(0, dy);
		}
		this.offset();
	},
	
	scrCenter: function() {
		return this.vptSize.div(2);
	},
	
	scrToImg: function(scr) {
		return scr.sub(this.imgOff);
	},
	
	imgToScr: function(img) {
		return scr.add(this.imgOff);
	},
	
	actToImg: function(act) {
		return act.mul(this.mag);
	},
	
	imgToAct: function(img) {
		return img.div(this.mag);
	},
	
	offset: function() {
		this.img.style.left = this.imgOff.x + 'px';
		this.img.style.top = this.imgOff.y + 'px';
	},
	
	hide: function() {
		this.img.style.display = 'none';
		this.loading.style.display = 'inline';
		this.showing = false;
	}, 
	
	show: function() {
		this.img.style.display = 'inline';
		this.loading.style.display = 'none';
		this.showing = true;
	},
	
	type: 'Photo'
});