var hs = {

// Apply your own settings here, or override them in the html file.  
graphicsDir : 'http://www.antonius-cornelius.nl/images/',
restoreCursor : 'zoomout.cur', // necessary for preload
expandSteps : 10, // number of steps in zoom. Each step lasts for duration/step milliseconds.
expandDuration : 250, // milliseconds
restoreSteps : 10,
restoreDuration : 250,
marginTop : 5,
marginBottom : 10,
zIndexCounter : 1001,

restoreTitle : 'Klik om te sluiten',
loadingText : 'Loading...',
loadingTitle : 'Click to cancel',
loadingOpacity : 0.75,

slideshowGroup : null, // defines groups for next/previous links and keystrokes
minWidth: 100,
minHeight: 100,
wrapperClassName : 'highslide-wrapper', // for enhanced css-control

expanders : [],
overrides : [ 'wrapperClassName',
	'minWidth',
	'minHeight',
	'slideshowGroup' ],
clones : {},
ie : (document.all && !window.opera),
safari : /Safari/.test(navigator.userAgent),

$ : function (id) { return document.getElementById(id); },

push : function (arr, val) { arr[arr.length] = val; },

createElement : function (tag, attribs, styles, parent, nopad) {
	var el = document.createElement(tag);
	if (attribs) hs.setAttribs(el, attribs);
	if (nopad) hs.setStyles(el, {padding: 0, border: 'none', margin: 0});
	if (styles) hs.setStyles(el, styles);
	if (parent) parent.appendChild(el);	
	return el; },

setAttribs : function (el, attribs) {
	for (var x in attribs) el[x] = attribs[x]; },

setStyles : function (el, styles) {
	for (var x in styles) {
	try { if (hs.ie && x == 'opacity') el.style.filter = 'alpha(opacity='+ (styles[x] * 100) +')';
	else el.style[x] = styles[x]; }
	catch (e) {} } },

ieVersion : function () { arr = navigator.appVersion.split("MSIE");
	return parseFloat(arr[1]); },

getPageSize : function () { var iebody = document.compatMode && document.compatMode != "BackCompat" 
	? document.documentElement : document.body;
	var width = hs.ie ? iebody.clientWidth : 
	(document.documentElement.clientWidth || self.innerWidth),
	height = hs.ie ? iebody.clientHeight : self.innerHeight;
	return { width: width, height: height, scrollLeft: hs.ie ? iebody.scrollLeft : pageXOffset,
	scrollTop: hs.ie ? iebody.scrollTop : pageYOffset } },

position : function(el)	{ 
	var p = { x: el.offsetLeft, y: el.offsetTop };
	while (el.offsetParent)	{
	el = el.offsetParent;
	p.x += el.offsetLeft;
	p.y += el.offsetTop;
	if (el != document.body && el != document.documentElement) {
	p.x -= el.scrollLeft;
	p.y -= el.scrollTop; } }
	return p; },

expand : function(a, params, custom) { if (a.getParams) return params;
	try { new hs.Expander(a, params, custom); return false; } 
	catch (e) { return true; } },

getParam : function (a, param) { a.getParams = a.onclick;
	var p = a.getParams();
	a.getParams = null;
	return (p && typeof p[param] != 'undefined') ? p[param] : hs[param]; },

getSrc : function (a) {
	var src = hs.getParam(a, 'src');
	if (src) return src;
	return a.href; },

purge : function(d) { if (!hs.ie) return;
	var a = d.attributes, i, l, n;
	if (a) { l = a.length;
	for (var i = 0; i < l; i += 1) { n = a[i].name;
	if (typeof d[n] === 'function') { d[n] = null; } } }
	a = d.childNodes;
	if (a) { l = a.length;
	for (var i = 0; i < l; i += 1) {
	hs.purge(d.childNodes[i]); } } },


getWrapperKey : function (element) {
	var el, re = /^highslide-wrapper-([0-9]+)$/;
	// 1. look in open expanders
	el = element;
	while (el.parentNode)	{
	if (el.id && re.test(el.id)) return el.id.replace(re, "$1");
	el = el.parentNode; }
	// 2. look in thumbnail
	el = element;
	while (el.parentNode)	{
	if (el.tagName && hs.isHsAnchor(el)) {
	for (var key = 0; key < hs.expanders.length; key++) {
	exp = hs.expanders[key];
	if (exp && exp.a == el) return key; } }
	el = el.parentNode; } },

getExpander : function (el) {
	try {	if (!el) return hs.expanders[hs.focusKey];
		if (typeof el == 'number') return hs.expanders[el];
		if (typeof el == 'string') el = hs.$(el);
		return hs.expanders[hs.getWrapperKey(el)]; } catch (e) {} },

isHsAnchor : function (a) { return (a.onclick && a.onclick.toString().replace(/\s/g, ' ').match(/hs.(htmlE|e)xpand/)); },

genContainer : function () { if (!hs.container) { hs.container = hs.createElement('div', null, 
	{ position: 'absolute', left: 0, top: 0, width: '80%', zIndex: hs.zIndexCounter }, 
	document.body,
	true );
	hs.loading = hs.createElement('a',
	{ className: 'highslide-loading', title: hs.loadingTitle, innerHTML: hs.loadingText,
	href: 'javascript:void(0)' },
	{ position: 'absolute', opacity: hs.loadingOpacity, left: '-9999px', zIndex: 1 }, hs.container ); } },

close : function(el) { try { hs.getExpander(el).close(); } catch (e) {}
	return false; } }; // end hs object

hs.Expander = function(a, params, custom, contentType) {
	this.a = a;
	this.custom = custom;
	this.contentType = contentType || 'image';
	this.isImage = !this.isHtml;
	hs.genContainer();
	var key = this.key = hs.expanders.length;
	
	for (var i = 0; i < hs.overrides.length; i++) {
		var name = hs.overrides[i];
		this[name] = params && typeof params[name] != 'undefined' ?
			params[name] : hs[name]; }
	
	var el = this.thumb = (params ? hs.$(params.thumbnailId) : null) 
		|| a.getElementsByTagName('IMG')[0] || a;
	this.thumbsUserSetId = el.id || a.id;
	
	for (var i = 0; i < hs.expanders.length; i++) {
	if (hs.expanders[i] && hs.expanders[i].a == a) {
	hs.expanders[i].focus();
	return false; } }	

	for (var i = 0; i < hs.expanders.length; i++) {
	if (hs.expanders[i] && hs.expanders[i].thumb != el && !hs.expanders[i].onLoadStarted) {
	hs.expanders[i].cancelLoading(); } }
	hs.expanders[this.key] = this;
	try { hs.expanders[key - 1].close(); } catch (e){}
	try { hs.expanders[hs.focusKey].close(); } catch (e){} // preserved

	var pos = hs.position(el);
	
	this.thumbWidth = el.width ? el.width : el.offsetWidth;		
	this.thumbHeight = el.height ? el.height : el.offsetHeight;
	this.thumbLeft = pos.x;
	this.thumbTop = pos.y;
	this.thumbOffsetBorderW = (this.thumb.offsetWidth - this.thumbWidth) / 2;
	this.thumbOffsetBorderH = (this.thumb.offsetHeight - this.thumbHeight) / 2;
	
	this.wrapper = hs.createElement( 'div',
	{ id: 'highslide-wrapper-'+ this.key,
	className: this.wrapperClassName },
	{ visibility: 'hidden',
	position: 'absolute',
	zIndex: hs.zIndexCounter++ }, null, true );
	this[this.contentType +'Create'](); };

hs.Expander.prototype = { displayLoading : function() {
	if (this.onLoadStarted || this.loading) return;
	this.originalCursor = this.a.style.cursor;
	this.a.style.cursor = 'wait';
	this.loading = hs.loading;
	var exp = this;
	this.loading.onclick = function() {
	exp.cancelLoading(); };
	this.loading.style.top = (this.thumbTop 
	+ (this.thumbHeight - this.loading.offsetHeight) / 2) +'px';
	var exp = this, left = (this.thumbLeft + this.thumbOffsetBorderW 
	+ (this.thumbWidth - this.loading.offsetWidth) / 2) +'px';
	setTimeout(function () { if (exp.loading) exp.loading.style.left = left }, 100); },

imageCreate : function() { var exp = this;
	var img = document.createElement('img');
	this.content = img;
	img.onload = function () {
    	if (hs.expanders[exp.key]) exp.contentLoaded(); };
img.onclick = function () { try { exp.close(); }
	catch (e) {} };
	img.className = 'highslide-image';
img.style.visibility = 'hidden'; // prevent flickering in IE
	img.style.display = 'block';
	img.style.position = 'absolute';
	img.style.maxWidth = 'none';
img.style.zIndex = 3;
	img.title = hs.restoreTitle;
	if (hs.safari) hs.container.appendChild(img);

  // uncomment this to flush img size:
  // if (hs.ie) img.src = null;
	img.src = hs.getSrc(this.a);
	this.displayLoading(); },

contentLoaded : function() { try { if (!this.content) return;
	if (this.onLoadStarted) return; // old Gecko loop
	else this.onLoadStarted = true;
	if (this.loading) {
	this.loading.style.left = '-9999px';
	this.loading = null;
	this.a.style.cursor = this.originalCursor || ''; }
	this.marginBottom = hs.marginBottom;	
	this.newWidth = this.content.width;
	this.newHeight = this.content.height;
	this.fullExpandWidth = this.newWidth;
	this.fullExpandHeight = this.newHeight;
	this.content.style.width = this.thumbWidth +'px';
	this.content.style.height = this.thumbHeight +'px';	
		
	this.wrapper.appendChild(this.content);
	this.content.style.position = 'relative'; // Saf
	this.wrapper.style.left = this.thumbLeft +'px';
	this.wrapper.style.top = this.thumbTop +'px';
	hs.container.appendChild(this.wrapper);
		
// correct for borders
	this.offsetBorderW = (this.content.offsetWidth - this.thumbWidth) / 2;
	this.offsetBorderH = (this.content.offsetHeight - this.thumbHeight) / 2;
	var modMarginRight = hs.marginRight + 2 * this.offsetBorderW;
	this.marginBottom += 2 * this.offsetBorderH;
		
	var ratio = this.newWidth / this.newHeight;
	var minWidth = this.newWidth;
	var minHeight = this.newHeight;
	var justify = { x: 'auto', y: 'auto' };
	var page = hs.getPageSize();		
		
// justify
	this.x = { min: parseInt(this.thumbLeft) - this.offsetBorderW + this.thumbOffsetBorderW,
	span: this.newWidth,
	minSpan: (this.newWidth < minWidth ) ? this.newWidth : minWidth,
	marginMin: hs.marginLeft, 
	marginMax: modMarginRight,
	scroll: page.scrollLeft,
	clientSpan: page.width,
	thumbSpan: this.thumbWidth };
	var oldRight = this.x.min + parseInt(this.thumbWidth);
	this.x = this.justify(this.x);
	this.y = { min: parseInt(this.thumbTop) - this.offsetBorderH + this.thumbOffsetBorderH,
	span: this.newHeight,
	minSpan: this.newHeight < minHeight ? this.newHeight : minHeight,
	marginMin: hs.marginTop, 
	marginMax: this.marginBottom, 
	scroll: page.scrollTop,
	clientSpan: page.height,
	thumbSpan: this.thumbHeight };
	var oldBottom = this.y.min + parseInt(this.thumbHeight);
	this.y = this.justify(this.y);
	var x = this.x;
	var y = this.y;
	this.show(); } catch (e) {
	window.location.href = hs.getSrc(this.a); } },

justify : function (p) { var tgt, dim = p == this.x ? 'x' : 'y';
	var hasMovedMin = false;
		
// calculate p.min
	p.min = Math.round(p.min - ((p.span - p.thumbSpan) / 2)); // auto
	if (p.min < p.scroll + p.marginMin) {
	p.min = p.scroll + p.marginMin;
	hasMovedMin = true; }		
		
// calculate right/newWidth
	if (p.min + p.span > p.scroll + p.clientSpan - p.marginMax) {
	if (hasMovedMin) { } else if (p.span < p.clientSpan - p.marginMin - p.marginMax) { // move newTop up
	p.min = p.scroll + p.clientSpan - p.span - p.marginMin - p.marginMax; }
	else { // image larger than client
	p.min = p.scroll + p.marginMin; } }
		
	if (p.min < p.marginMin) {
	tmpMin = p.min;
	p.min = p.marginMin; }
	return p; },

show : function () {
	
	// Apply size change		
	this.changeSize( 1,
	{ x: this.thumbLeft + this.thumbOffsetBorderW - this.offsetBorderW,
	y: this.thumbTop + this.thumbOffsetBorderH - this.offsetBorderH,
	w: this.thumbWidth,
	h: this.thumbHeight,
	imgW: this.thumbWidth },
	{ x: this.x.min,
	y: this.y.min,
	w: this.x.span,
	h: this.y.span,
	imgW: this.x.imgSpan },
	hs.expandDuration,
	hs.expandSteps ); },

changeSize : function(up, from, to, dur, steps) {
	var dW = (to.w - from.w) / steps,
	dImgW = (to.imgW - from.imgW) / steps,
	dH = (to.h - from.h) / steps,
	dX = (to.x - from.x) / steps,
	dY = (to.y - from.y) / steps,
	dO = (to.o - from.o) /steps, t,
	exp = this;
	for (var i = 1; i <= steps; i++) {
	from.w += dW;
	from.imgW += dImgW;
	from.h += dH;
	from.x += dX;
	from.y += dY;
	from.o += dO;
	t = Math.round(i * (dur / steps));
		
	(function(){ var size = i < steps ? from : to, param = {}, pI = i;
	for (var x in size) param[x] = size[x];
	setTimeout ( function() {
	if (up && pI == 1) { exp.content.style.visibility = 'visible';
	exp.a.className += ' highslide-active-anchor'; }
	exp.setSize(param); }, t); })(); }
	
	if (up) { setTimeout(function() { exp.afterExpand(); }, t +50); }
	else setTimeout(function() { exp.afterClose(); }, t); },

setSize : function (to) {
	try { this.wrapper.style.width = (to.w + 2*this.offsetBorderW) +'px';
	this.content.style.width = (to.imgW || to.w) +'px';
	this.content.style.height = to.h +'px';
				
	hs.setStyles ( this.wrapper, { 'visibility': 'visible',
	'left': to.x +'px', 'top': to.y +'px' } ); }
	catch (e) { window.location.href = hs.getSrc(this.a); } },

afterExpand : function() { this.isExpanded = true; this.focus(); },

cancelLoading : function() { hs.expanders[this.key] = null;
	this.a.style.cursor = this.originalCursor;	
	if (this.loading) hs.loading.style.left = '-9999px'; },

focus : function() { this.wrapper.style.zIndex = hs.zIndexCounter++;
	this.content.title = hs.restoreTitle;
	hs.styleRestoreCursor = window.opera ? 'pointer' : 'url('+ hs.graphicsDir + hs.restoreCursor +'), pointer';
	if (hs.ie && hs.ieVersion() < 6) hs.styleRestoreCursor = 'hand';
	this.content.style.cursor = hs.styleRestoreCursor;
	hs.focusKey = this.key;	},

close : function() { if (this.isClosing || !this.isExpanded) return;
	this.isClosing = true;
	try { this.content.style.cursor = 'default';
	this.changeSize( 0,
	{ x: this.x.min,
	y: this.y.min,
	w: this.x.span,
	h: parseInt(this.content.style.height),
	imgW: this.x.imgSpan },
	{ x: this.thumbLeft - this.offsetBorderW + this.thumbOffsetBorderW,
	y: this.thumbTop - this.offsetBorderH + this.thumbOffsetBorderH,
	w: this.thumbWidth,
	h: this.thumbHeight,
	imgW: this.thumbWidth },
	hs.restoreDuration,
	hs.restoreSteps); } catch (e) { this.afterClose(); } },

afterClose : function () { this.a.className = this.a.className.replace('highslide-active-anchor', '');
	hs.purge(this.wrapper);
	if (hs.ie && hs.ieVersion() < 5.5) this.wrapper.innerHTML = ''; // crash
	else this.wrapper.parentNode.removeChild(this.wrapper);
	hs.expanders[this.key] = null; } };
// history
var HsExpander = hs.Expander;