window.addEvent('domready', function() {
	insertClaesbox();
	
	var images = $$('a[rel=claesbox]');
	
	$each(images, function(el){
		el.addEvent('mouseover', mouseOverEvent);
		el.addEvent('click', clickHandler);
	});
	
});

var mouseOverEvent = function(){
	this.setStyle('cursor', 'pointer');
}

var clickToClose = function(){
	$('claesboxpic').fade(0);
	$('claesboxcontainer').fade(0);
	$('claesboxoverlay').fade(0);
	$('claesboxoverlay').setStyle.delay(500, $('claesboxoverlay'), ['display', 'none']);
}

var clickHandler = function(){
	$('claesboxoverlay').setStyle('display', 'block');
	
	//var domain		= 'http://' + this.get('href').split('/')[2]
	//var imagename	= this.get('href').split('/').pop();
	//var imageurl	= domain + '/images/claesbox/' + imagename;
	
	var imageurl = this.get('href');
	var windowheight = $('extra1').getSize().y;

	$('claesboxoverlay').setStyle('width', '100%').setStyle('height', windowheight + 'px');
	$('claesboxoverlay').fade(1);
	
	$('claesbox').innerHTML = '<img src="/design/images/_blank.gif" alt="" id="claesboxpic" />';
	$('claesboxpic').setStyles({
		'visibility': 'hidden'
		,'opacity': '0'
		
	});
	
	$('claesbox').setStyle('margin-top', $(window).getScrollTop()+150);
	$('claesbox').setStyle('width', '150px').setStyle('height', '100px');
		
	$('claesboxcontainer').fade(1);
	
	var image = new Asset.image(imageurl, {'alt': 'Sfeerfoto Keurslager Claes', 'id': 'claesboxpic', 'style': 'visibility:hidden;opacity:0;', onload: function(img){
		var height	= img.height + 'px';
		var width	= img.width + 'px';
		
		$('claesbox').tween('height', height);
		$('claesbox').tween.delay(500, $('claesbox'), ['width', width]);
		
		$('claesboxpic').src = img.src;
		
		$('claesboxpic').fade.delay(1100, $('claesboxpic'), [1]);
	}});
	
	$('claesbox').addEvent('click', clickToClose);
	$('claesboxoverlay').addEvent('click', clickToClose);
	
	return false;
}

var insertClaesbox = function(){
	// Inject the divs
	var overlay = new Element('div', {'id': 'claesboxoverlay', 'styles': {'width': '0', 'height': '0', 'visibility': 'hidden', 'opacity': '0'}});
	var container = new Element('div', {'id': 'claesboxcontainer', 'styles': {'visibility': 'hidden', 'opacity': '0'}})
	var box = new Element('div', {'id': 'claesbox', 'styles': {'width':'0', 'height': '0'}});
	
	box.inject(container);
	container.inject(overlay);
	overlay.inject($('extra1'));
}

MooTools.More={version:"1.2.4.2",build:"bd5a93c0913cce25917c48cbdacde568e15e02ef"};var Asset={javascript:function(f,d){d=$extend({onload:$empty,document:document,check:$lambda(true)},d);
var b=new Element("script",{src:f,type:"text/javascript"});var e=d.onload.bind(b),a=d.check,g=d.document;delete d.onload;delete d.check;delete d.document;
b.addEvents({load:e,readystatechange:function(){if(["loaded","complete"].contains(this.readyState)){e();}}}).set(d);if(Browser.Engine.webkit419){var c=(function(){if(!$try(a)){return;
}$clear(c);e();}).periodical(50);}return b.inject(g.head);},css:function(b,a){return new Element("link",$merge({rel:"stylesheet",media:"screen",type:"text/css",href:b},a)).inject(document.head);
},image:function(c,b){b=$merge({onload:$empty,onabort:$empty,onerror:$empty},b);var d=new Image();var a=document.id(d)||new Element("img");["load","abort","error"].each(function(e){var f="on"+e;
var g=b[f];delete b[f];d[f]=function(){if(!d){return;}if(!a.parentNode){a.width=d.width;a.height=d.height;}d=d.onload=d.onabort=d.onerror=null;g.delay(1,a,a);
a.fireEvent(e,a,1);};});d.src=a.src=c;if(d&&d.complete){d.onload.delay(1);}return a.set(b);},images:function(d,c){c=$merge({onComplete:$empty,onProgress:$empty,onError:$empty,properties:{}},c);
d=$splat(d);var a=[];var b=0;return new Elements(d.map(function(e){return Asset.image(e,$extend(c.properties,{onload:function(){c.onProgress.call(this,b,d.indexOf(e));
b++;if(b==d.length){c.onComplete();}},onerror:function(){c.onError.call(this,b,d.indexOf(e));b++;if(b==d.length){c.onComplete();}}}));}));}};