/*
	var winload = window.onload;
	window.onload = function () { if(winload) winload(); newJoinkBox()};
	*/
	
		
	function newJoinkBox(){
		window.alert('init joinkbox?')
		joinkBox = new JoinkBox();
	}
	
	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();
		
		this.close = null;
		this.createClose();
		
		// 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;
				}
			}
						
		},
		
		createClose : function(){
			
			this.close = document.createElement('div');
			this.close.id = 'joinkclose';
			this.close.title = 'click to close';
			var txt = document.createTextNode('Close');
			this.close.appendChild(txt);
			this.close.style.display = 'none';
			document.body.appendChild(this.close);
			this.close.onclick = bind(this, this.hideOverlay);
			
		},
		
		createOverlay : function(){
			
			this.overlay = document.createElement('div');
			this.overlay.id = 'joinkOverlay';
			this.overlay.title = 'click to close';
			this.overlay.style.height = document.documentElement.scrollHeight + "px";
			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.olFade.fadeIn();
			this.boxfx.animate();			
		},
		
		hideOverlay : function(){
			this.close.style.display = 'none';
			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();		
		},
		
		hideCssOverlay : function(){
			this.overlay.style.display = 'none';
		},
		
		createBox : function(){
			this.box = document.createElement('div');
			this.box.className = 'joinkBox';
			document.body.appendChild(this.box);
			// joink v1:
			// this.boxfx = new joinkFX(this.box, 'outCubic', 20, 'width,marginLeft,height,marginTop', '0,0,0,0', '0,0,0,0');
			
			// joink v2:
			 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 = 620;
		this.height = 290;
		// 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(){
			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.frameBorder = '0';
				iframe.src = this.site;
				this.parent.box.appendChild(iframe);
			}
			this.parent.close.style.display = 'block';
			this.parent.close.style.marginLeft = (this.width / 2) - 16 + 'px';
			this.parent.close.style.marginTop = 0 - (this.height / 2) + 8 + 'px';
			this.parent.close.style.zIndex = 50;
		}
	}
	
	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;
		}
	}