// parse query string into hash table
function getQueryObject() {
	var o = {}
	var query = window.location.search.substring(1);
	var pairs = query.split("&");
	for (var i = 0; i < pairs.length; i++) {
		var pos = pairs[i].indexOf('=');
		if (pos >= 0) {
			o[pairs[i].substring(0,pos)] = pairs[i].substring(pos+1);
		}
	}
	return o;
}
function initThumb(thumb) {
	thumb.src = imagePath + thumbPrefix + '_' + decade + '_' + thumb.id + '.' + thumbExt;
	thumb.className = 'thumb';
	// preload content image
	var img = new Image();
	img.src = imagePath + imagePrefix + '_' + decade + '_' + thumb.id + '.' + imageExt;
	thumb.onerror = function() {
		this.src = defaultThumbSrc;
		this.onmouseover = this.onmouseout = null;
		this.className = '';
	}
	thumb.onmouseover = function() {
		contentImage.src = imagePath + imagePrefix + '_' + decade + '_' + this.id + '.' + imageExt;
	}
	thumb.onmouseout = function() {
		contentImage.src = defaultImageSrc;
	}

}
function initTimeline() {
	imagePath = '/image/about_us/history/popup/';
	thumbPrefix = 'thumb';
	imagePrefix = 'content';
	thumbExt = 'jpg';
	imageExt = 'jpg';
	contentImage = document.getElementById('history-image');
	defaultThumbSrc = document.getElementById('a1').src;
	decade = getQueryObject().decade;
	if(!decade) {
		//error
		return;
	}
	defaultImageSrc = contentImage.src = imagePath + imagePrefix + '_' + decade + '_default.' + imageExt;
	// init thumbs
	var thumbsList = ['a1', 'a2', 'a3', 'a4', 'b1', 'b2', 'b3', 'b4', 'c1', 'c2', 'c3', 'c4a', 'd1', 'd2', 'd3', 'd4'];
	for(var i = 0; i < thumbsList.length; i++) {
		var thumb = document.getElementById(thumbsList[i]);
		initThumb(thumb);
	}
}

window.onload = initTimeline;