/**
  * $Id: remains2.js 51 2006-09-06 18:19:29Z svn-turf $
  *
  * Patent pending (probably)
  */
function init() {
	// setTimeout("preloadIcons()", 500);
	mapURL();
	preloadHighs();
}
function mapURL() {
	var q = window.location.pathname.substr(1).replace('view' , '');
	if (q.indexOf('/') == 0) q = q.substr(1);
	if (q.length > 0) {
		var parts = q.split('/');
// 		hash =  window.location.hash;
// 		if (hash) {
// 			hash = hash.substr(1);
// 			parts.push(hash);
// 		}
		jumpTo(parts);
	} else {
		//alert('going home');
		viewHome();
	}

}

var icons = [];

function preloadIcons() {
	for (cn in collections) {
		c = collections[cn];
		for (i = 0; i < c.items.length; i++) {
			var item = c.items[i];
			if (item && item.id) {
				img = new Image();
				img.src = c.itemIconImage(item);
				icons[icons.length] = img;
				activateRoll(img);
			}
		}
	}
}
function preloadHighs() {
	var ii = document.images;
	for (i = 0; i < ii.length; i++) {
		var img = ii[i];
		if (img.onmouseover) {
			activateRoll(img);
		}
	}
}
var pre = [];

function activateRoll(i) {
	if (!i.highsrc) {
		var s = i.src;
		var h = '-o';
		var r = s.substring(0, s.length - 4);
		var e = s.substring(s.length - 4, s.length);
		i.highsrc = r + h + e;
		i.lowsrc = i.src;
		if (!pre[s]) {
			pre[s] = new Image();
			pre[s].src = i.highsrc;
		}
	}
	return i.highsrc;
}

function high(i) {
	i.src = activateRoll(i);
}
function low(i) {
	i.src = i.lowsrc;
}

function cel(e) {
	return document.createElement(e);
}

function HomeLayer() {
	this.physical = 'layer-home';
	this.titleStyle = 'none';
	/* static protected */ var active = this.physical;
	
	this.el = function(id) {
		return document.getElementById(id);
	}
	this.rootLayer = function() {
		return this.el(this.physical);
	}
	this.display = function(config) {
		this.preconfig(config);
		this.hideActive();
		this.showTitle();
		this.rootLayer().style.display='block';
		this.setActive();
	}
	this.showTitle = function() {
		this.el('title').style.display = this.titleStyle;
	}
	this.hideActive = function() {
		this.el(active).style.display = 'none';
	}
	this.setActive = function() {
		active = this.physical;
	}
	this.preconfig = function(config) {
	
	}
	this.id = function() {
		return 'generic';
	}
	
	this.MapLayer = function() {
		this.physical = 'layer-map';
		this.titleStyle = 'block';

		this.id = function() {
			return 'home';
		}	
	
		this.preconfig = function(config) {
			//var collections = config.collections;
			for (c in collections) {
				var coll = collections[c];
				var label = this.collectionMarker(c, coll);
				this.rootLayer().appendChild(label);
			}
		}
		this.collectionMarker = function(id, config) {
			var href = "/view/collection/"+id; //"javascript:viewCollection('"+id+"')";
			var root = cel('div');
			root.className = 'map-pointer';
			root.id = id;
			root.style.left = config.left + 'px';
			root.style.top = config.top + 'px'
			var link = cel('a');
			link.href = href;
			
			var point = cel('img');
			point.src = "/i2/map/mappoint_"+config.point+".png";
			point.width = '12'; point.height = '12';
			point.className = 'pointer';
			link.appendChild(point);
			root.appendChild(link);
			var label = cel('div');
			label.className = 'label';
			link = cel('a');
			link.href = href;
			var title = cel('b');
			title.appendChild(document.createTextNode(config.name));
			link.appendChild(title);
			var br = cel('br');
			link.appendChild(br);
			link.appendChild(document.createTextNode(config.country + ', ' + config.year));
			label.appendChild(link);
			root.appendChild(label);
			
			return root;
		}
	}
	this.MapLayer.prototype = this;
	
	
	this.CopyrightLayer = function() {
		this.physical = 'layer-copy';
		this.preconfig = function(config) {
		}
	}
	this.CopyrightLayer.prototype = this;


	this.CollectionLayer = function() {
		this.physical = 'layer-collection';
		this.titleStyle = 'block';
		this.collection = {};
		
		this.preconfig = function(config) {
			var collection = config.collection;
			this.clearCanvas();
			this.showCountryName(collection);
			this.showCollection(collection);
		}
		this.showCollection = function(collection) {
			this.collection = collection;
			for (i = 0; i < 22; i++) {
				var tab = this.tabForItem(i+1);
				tab.innerHTML = '';
			}
			for (i = 0; i < collection.items.length; i++) {
				var item = collection.items[i];
				if (!item || !item.icon) continue;
				var tab = this.tabForItem(i+1);
				var icon = cel('img');
				icon.src = collection.itemIconImage(item);
				activateRoll(icon);
				icon.onmouseover = function() {
					if (!this.locked) {
						high(this);
					}
				}
				icon.onmouseout = function() {
					if (!this.locked) {
						low(this);
					}
				}
				icon.lock = function() {
					this.locked = true;
				}
				icon.unlock = function() {
					this.locked = false;
				}
				var link = cel('a');
				item.path = '/view/collection/'+collection.id + '/' + item.id; 
				link.href= item.path //'javascript:void(0)';
				item.imgsrc = '/i2/remains/'+ collection.diskname +'/i/' + item.img;
				item.iconimg = icon;
				link.item = item;
				link.layer = this;
// 				link.icon = icon;
				link.title = '"'+ item.id + '": click to view this item, right click to bookmark it';
				link.onclick = function() {
					this.layer.showItem(this.item);
					return false;
				}
// 				link.onmouseover = function() {
// 					this.icon.onmouseover();
// 				}
				link.appendChild(icon);
				tab.appendChild(link);
				if (!collection.selected) {
					if (i ==0) this.showItem(item, true);
				} else {
					if (item.id == collection.selected) this.showItem(item, true);
				}
			}
		}
		this.clearCanvas = function() {
			this.canvas().innerHTML = '';
		}
		this.canvas = function() {
			return this.el('country-canvas');
		}
		this.active = false;
		this.showItem = function(item, vetoUrchin) {
			this.deactiveate = this.active;
			this.active = item;
			this.collection.selected = item.id;
			if (!vetoUrchin) {
				pageTracker._trackPageview(item.path);
			}
			// you'll never guess which browser fails to show the item properly unless
			// i introduce an arbitrary delay before switching the items...
			// that's right! IE!
			setTimeout('homeLayer._collectionLayer.delayedShow()', 10);
		}
		this.delayedShow = function() {
			if (this.deactiveate) {
				this.deactiveate.iconimg.unlock();
				low(this.deactiveate.iconimg);
			}
			var canvas = this.canvas();
			var item = this.active;
			high(item.iconimg);
			item.iconimg.lock();
			canvas.style.display = 'none';
			this.clearCanvas();
			var w = cel('div');
			w.style.position = 'absolute';
			w.style.left = item.left + 'px';
			w.style.top = item.top + 'px';
			
			if (!item.cachedImage) {
				var img = cel('img');
				img.src = item.imgsrc;
				img.style.display = 'block';
				item.cachedImage = img;
			}
			w.appendChild(item.cachedImage);
			canvas.appendChild(w);
			canvas.style.display = 'block';
		
		}
		this.showCountryName = function(collection) {
			var link = this.el('country-name').firstChild;
			link.innerHTML = '';
			var title = cel('img');
			title.src = collection.countryNameImage();// + '/countryname.png';
			var close = cel('img');
			close.src = '/i2/remains/close.png';
			close.width = close.height = '11';
			close.border = 0;
			close.style.position = 'relative';
			close.style.top = '-1px';
			close.style.left = '3px';
			activateRoll(close);
			title.close = close;
			title.onmouseover = function() {
				high(this.close);
			}
			title.onmouseout = function() {
				low(this.close);
			}
			link.appendChild(title);
			//link.appendChild(document.createTextNode(' '));
			link.appendChild(close);
		
		}
		this.tabForItem = function(n) {
			return this.el(this.tabid(n));
		}
		this.tabid = function(n) {
			return 'tab-' + this.idpad(n);
		}
		
		this.idpad = function(id) {
			var s = new String(id);
			if (s.length == 1) {
				s = '0' + s;
			}
			return s;
		}
		
	}
	this.CollectionLayer.prototype = this;
	this._collectionLayer = new this.CollectionLayer();
}

var homeLayer = new HomeLayer();

function Collection(c) {
	for (k in c) {
		this[k] = c[k];
	}
	this.imageRoot = '/i2/remains/' + this.diskname + '/';

	this.countryNameImage = function() {
		return this.imageRoot + 'countryname.png';
	}
	this.itemIconImage = function(item) {
		return this.imageRoot + item.icon;
	}
}



var previous = null;
var current = null;
function view(layer) {
	if (layer == current) {
		if (previous) {
			back();
		}
	} else {
		var l = layers[layer];
		if (l) {
			if (current) previous = current;
			current = layer;
			//alert('prev: ' + previous + '; current: ' + current);
			var f = l.format;
			f.display(l);
		
		} else {
			alert("Error: Invalid layer '"+layer + "'");
		}
	}
}

function back() {
	if (previous) view(previous);
}

function viewMap() {
	view('map');
}
function viewHome() {
	view('home');
}
function viewCopy() {
	view('copyright');
}
function viewCollection(n) {
	layers.collection.collection = collections[n];
	view('collection');
}
function jumpTo(path) {
	var layer = path[0];
	if (layers[layer]) {
		if (layer == 'collection') {
			if (path.length > 1) {
				var collection = path[1];
				if (collections[collection]) {
					layers.collection.collection = collections[collection];
					if (path.length > 2) {
						var item = path[2];
						collections[collection].selected = item;
					}
					view('collection');
				} else {
					viewMap();
				}
			} else {
				viewMap();
			}
		} else {
			view(layer);
		}
	} else {
		viewHome();
	}
}


// ===========

var collections = {
	'parquedelplata': new Collection({
		id: 'parquedelplata',
		left: 280,
		top: 317,
		point: 'ul',
		name: 'Parque del Plata',
		year: '2004',
		country: 'Uruguay',
		diskname: 'uruguay',
		items: [
			{id: 'nipple', icon:'tab_nipple.png', img:'nipple.jpg', left:100, top:47},	
			{id: 'pinkspoon', icon:'tab_pinkspoon.png', img:'spoon.jpg', left:80, top:50},
			{id: 'bluepeg', icon:'tab_bluepeg.png', img:'bluetab.jpg', left:100, top:90},	
			{id: 'greentop', icon:'tab_greentop.png', img:'greentop.jpg', left:40, top:100},
			{id: 'whitetop', icon:'tab_whitetop.png', img:'biro.jpg', left:100, top:30},	
			{id: 'straw', icon:'tab_straw.png', img:'straw.jpg', left:50, top:100},
			{id: 'disk', icon:'tab_disk.png', img:'disk.jpg', left:70, top:50},	
			{id: 'bottle', icon:'tab_bottle.png', img:'bottle.jpg', left:60, top:90},
			{id: 'redcap', icon:'tab_redcap.png', img:'coke.jpg', left:50, top:130},	
			{id: 'dart', icon:'tab_dart.png', img:'dart.jpg', left:80, top:100},
			{id: 'whitecap', icon:'tab_whitecap.png', img:'whitetop.jpg', left:150, top:30}
		]
	}),
	'parquetairona': new Collection({
		id: 'parquetairona',
		left: 213,
		top: 208,
		point: 'dr',
		name: 'Parque Tairona',
		year: '2005',
		country: 'Colombia',
		diskname: 'colombia',
		items: [
			{id: 'film', icon:'tab_film.png', img:'film.jpg', left:75, top:27},	
			{id: 'foam', icon:'tab_foam.png', img:'foam.jpg', left:60, top:40},	
			{id: 'prokeds', icon:'tab_prokeds.png', img:'prokeds.jpg', left:20, top:67},	
			{id: 'ball', icon:'tab_ball.png', img:'ball.jpg', left:159, top:34},	
			{id: 'caps', icon:'tab_caps.png', img:'caps.jpg', left:40, top:47},	
			{id: 'redtop', icon:'tab_redtop.png', img:'redtop.jpg', left:45, top:37},	
			{id: 'bic', icon:'tab_bic.png', img:'bic.jpg', left:20, top:50},	
			//{id: 'yellowufo', icon:'tab_yellowufo.png', img:'yellowufo.jpg', left:70, top:25},	
			{id: 'pinkscrew', icon:'tab_pinkscrew.png', img:'pinkscrew.jpg', left:140, top:27},	
			{id: 'nipple', icon:'tab_nipple.png', img:'nipple.jpg', left:173, top:23},	
			{id: 'comb', icon:'tab_comb.png', img:'comb.jpg', left:29, top:80},	
			{id: 'coke', icon:'tab_coke.png', img:'coke.jpg', left:70, top:47},
			{}, // start second row with gap
			{}, 
			{id: 'cyanpeg', icon:'tab_cyanpeg.png', img:'cyanpeg.jpg', left:18, top:117},	
			{id: 'transscrew', icon:'tab_transscrew.png', img:'transscrew.jpg', left:135, top:30},	
			{id: 'barcode', icon:'tab_barcode.png', img:'barcode.jpg', left:25, top:75},	
			{id: 'yellowdisc', icon:'tab_yellowdisc.png', img:'yellowdisc.jpg', left:25, top:60},	
			{id: 'flip', icon:'tab_flip.png', img:'flip.jpg', left:20, top:67},	
			//{id: 'twist', icon:'tab_twist.png', img:'twist.jpg', left:17, top:120},	
			{id: 'greenpeg', icon:'tab_greenpeg.png', img:'greenpeg.jpg', left:25, top:130},
			{id: 'spatula', icon:'tab_spatula.png', img:'spatula.jpg', left:15, top:97},	
		]
	})
};

var layers = {
	home: {
		format: homeLayer
	},
	map: {
		format: new homeLayer.MapLayer(),
		countries: collections
	},
	copyright: {
		format: new homeLayer.CopyrightLayer()
	},
	collection: {
		format: homeLayer._collectionLayer,
		collection: null,
		selected: null
	}
};