window.onresize = recalculateOverlay;
	
	function recalculateOverlay(){
		if (typeof joinkBox == 'object'){
			joinkBox.recalculateOverlay();
		}
	}
	
	JoinkBox = function(){
		
		// store all the links in an array 
		this.boxes = [];
		// fetch the links and store them!
		this.fetchLinks();
		
		// create the joink overlay div
		this.overlay = null;
		this.olFade = null;
		this.createOverlay();
		
		// create the box for image/gmaps/whatever
		this.box = null;
		this.boxfx = null;
		this.createBox();
		
		this.active = null;
		
	}
	
	JoinkBox.prototype = {
		
		fetchLinks : function(){
			
			var l = document.getElementsByTagName('a');
			var c = 0;
			for (;c < l.length;c++){
				var rel = l[c].rel.split(/ /);
				if (rel[0] == 'joinkbox'){
					var s = new JoinkPopup(l[c], this);
					var id = this.boxes.length;
					this.boxes[id] = s;
					l[c].id = 'joinkBox_' + id;
				}
			}
						
		},
		
		createOverlay : function(){
			
			this.overlay = document.createElement('div');
			this.overlay.id = 'joinkOverlay';
			this.overlay.title = 'click to close';
			this.overlay.style.height = document.body.offsetHeight + 'px';//document.documentElement.scrollHeight + "px";
			//window.alert('document.body.offsetHeight: ' + document.body.offsetHeight);
			this.overlay.style.display = 'none';
			//this.overlay.onclick = bind(this, this.hideOverlay);
			document.body.appendChild(this.overlay);
			this.overlay.onclick = bind(this, this.hideOverlay);			
			this.olFade = new Fader(this.overlay, 0, 90, 15);
			this.olFade.onFadeOut(bind(this, this.hideCssOverlay));
			
		},
		
		recalculateOverlay : function(){
			this.overlay.style.height = document.documentElement.scrollHeight + "px";
			
		},
		
		showOverlay : function(){
			this.overlay.style.display = 'block';
			this.box.style.display = 'block';
			this.olFade.fadeIn();
			this.boxfx.animate();			
		},
		
		hideOverlay : function(){
				this.box.innerHTML = '';
				if (this.active.data){
					this.active.data.style.zIndex = -30;
					this.active.data.style.visibility = 'hidden';
				}
				this.olFade.fadeOut();	
				this.boxfx.onFinish('');
				this.boxfx.animate();	
		},
		
		unActive : function(){
				this.active = false;
		},
		
		hideCssOverlay : function(){
			//window.alert('hiden slet!');
			this.unActive();
			this.overlay.style.display = 'none';
			this.box.style.display = 'none';
		},
		
		createBox : function(){
			this.box = document.createElement('div');
			this.box.className = 'joinkBox';
			document.body.appendChild(this.box);
			this.boxfx = new joinkFX2(this.box, {animation:'outCubic', time:'20', style:'width,marginLeft,height,marginTop', start:'0,0,0,0', distance:'0,0,0,0', bi:'true'});
		}
		
	}
	
	JoinkPopup = function(link, parent){
		
		this.link = link;
		this.parent = parent;
		this.data = null;
		this.site = null;
		this.width = 800;
		this.height = 600;
		// check if it's an anchor
		if (/#/.test(this.link.href)){
			var id = this.link.href.split(/#/);
			var dat = document.getElementById(id[1]);
			if (dat){
				this.data = dat;
				this.data.style.position = 'absolute';
				this.data.style.left = '50%';
				this.data.style.top = '50%';				
				this.data.style.zIndex = -30;
				this.data.style.visibility = 'hidden';
				this.width = dat.offsetWidth;
				this.height = dat.offsetHeight;
			}
		}else{
			if (isImage(this.link.href)){
				this.image = new Image();
				this.image.src = this.link.href;
			}else{
				this.site = this.link.href;
			}
		}
		this.link.onclick = function(){ showJoinkPopup(this);return false;};
	}
	
	JoinkPopup.prototype = {
		
		showPopup : function(){
			if (!this.parent.active){
				this.parent.active = this;
				if (this.image){
					this.width = this.image.width;
					this.height = this.image.height;
				}
				var width = this.width;
				var height = this.height;
				var mleft = 0 - (width / 2);
				var mtop = 0 - (height / 2);
				this.parent.boxfx.setDistance(width + ',' + mleft + ',' + height + ',' + mtop);
				this.parent.boxfx.onFinish(bind(this, this.appendImage));
				this.parent.showOverlay();
	//			window.alert(this.image.width + ' x ' + this.image.height);
			}
		},
		
		appendImage : function(){
			if (this.image){
				this.image.onclick = bind(this.parent, this.parent.hideOverlay);
				this.image.title = 'Click to close';
				this.parent.box.appendChild(this.image);
			}else if (this.data){
				//this.parent.box.innerHTML = this.data.innerHTML;
				this.data.style.zIndex = 100;
				this.data.style.visibility = 'visible';
				this.data.style.marginLeft = 0 - (this.width / 2) + 'px';
				this.data.style.marginTop = 0 - (this.height / 2) + 'px';
			}else{
				var iframe = document.createElement('iframe');
				iframe.style.width = '100%';
				iframe.style.height = '100%';
				iframe.style.borderWidth = '0px';
				iframe.src = this.site;
				this.parent.box.appendChild(iframe);
			}
			this.parent.boxfx.onFinish(bind(this.parent, this.parent.unActive));			
		}
	}
	
	function showJoinkPopup(o){
		var id = o.id.split(/_/);
		joinkBox.boxes[id[1]].showPopup();
	}
	
	function isImage(url){
		if (/.png/.test(url)){
			return true;
		}else if (/.jpg/.test(url)){
			return true;
		}else if (/.gif/.test(url)){
			return true;
		}else{
			return false;
		}
	}