// tech-box

var techBox_elements = 'a.tech-box';

Event.onDOMReady(function() {
	techBox_init(techBox_elements);
});

function techBox_init(techBox_elements) {
	
	$(document.body).insert( {bottom: '<div id="techBox_overlay" style="display: none;"></div>'});
	$(document.body).insert( {bottom: '<div id="techBox_window" style="display: none;"><img id="techBox_close" src="/images/icons/close.jpg" alt="Close"/><div id="techBox_inner"></div></div>'});

	// Bind actions to the onclick events
	$$(techBox_elements).each( function(techBox_element) {
		$(techBox_element).observe('click', techBox_show);	
	});
}

function techBox_show(event) {

	var element = event.element();
	Event.stop(event);

	techBox_params = element.readAttribute('href').toQueryParams();
	
	/**
	console.log( 'Scherm center: ' + getScreenCenterX() + ' ' + getScreenCenterY() );
	console.log( 'Box afmetingen: ' + techBox_params['width'] + ' ' + techBox_params['height'] ); 
	console.log( 'Console positie: ' + (getScreenCenterX() - ( techBox_params['width']/2 )) + ' ' + ( getScreenCenterY() - (techBox_params['height']/2) ) );
	var pos_top 	= getScreenCenterY() - (techBox_params['height']/2);
	var pos_left	= getScreenCenterX() - (techBox_params['width']/2);
	**/

	$('techBox_overlay').setStyle({
		display:	'block'
		//width: 		document.body.clientWidth + 'px',
		//height:		getInnerHeight() + 'px'
	});
	
	
	$('techBox_window').setStyle({
		width:			techBox_params['width'] + 'px',
		height: 		techBox_params['height'] + 'px',
		marginTop:		-1*(techBox_params['height']/2) + 'px',
		marginLeft:		-1*(techBox_params['width']/2) + 'px'
	});
	
	new Effect.Opacity('techBox_overlay', { from: 0.0, to: 0.4, duration: 0.3 });
	new Effect.Appear('techBox_window', {duration: 0.8});
	
	$('techBox_close').observe('click', techBox_hide);
	
	techBox_content(element, techBox_params);
	
}

function techBox_hide(event) {
	
	new Effect.Fade('techBox_window', {duration: 0.3});
	new Effect.Opacity('techBox_overlay', { from: 0.4, to: 0.0, duration: 0.3 });
	new Effect.Fade('techBox_overlay', {duration: 0.3});
	
	
}

function techBox_content(element, techBox_params) {
	
	//console.log(techBox_params['mode']);
	
	if ( techBox_params['mode'] ) {
		switch (techBox_params['mode']) {
			
			case 'inline':
				techBox_contentInline(techBox_params['id']);
			break;
			
			case 'ajax':
				techBox_contentAjax(techBox_params);
			break;
			
			
		}
	}

}

function techBox_contentInline(id) {

	
	$('techBox_inner').update($(id).innerHTML);
	$(id).remove();
	
}

function techBox_resize(techBox_width, techBox_height) {
	
	var margin_top 	= -1*(techBox_height/2);
	var margin_left = -1*(techBox_width/2);
	
	new Effect.Morph('techBox_window', {
		style: 'width:' + techBox_width + 'px; height:' + techBox_height + 'px; margin-top: ' + margin_top + 'px; margin-left: ' + margin_left + 'px',
		duration: 0.3
	});
	
	/**
	$('techBox_window').setStyle({
		marginTop:		-1*(techBox_height/2) + 'px',
		marginLeft:		-1*(techBox_height/2) + 'px'
	});
	**/
	
}

// Third party code

// Thanks to starkman @ http://sliceofcake.wordpress.com/2007/09/13/use-javascript-to-find-the-center-of-the-browser
function getScreenCenterY() {
	var y = 0;
	y = getScrollOffset()+(getInnerHeight()/2);
	return(y);
}

function getScreenCenterX() {
	return document.body.clientWidth/2;
}

function getInnerHeight() {
	
	var y;
	
	// all except Explorer
	if (self.innerHeight) {
		y = self.innerHeight;
		
	// Explorer 6 Strict Mode
	} else if (document.documentElement && document.documentElement.clientHeight) {
		y = document.documentElement.clientHeight;
		
	// other Explorers
	} else if (document.body) {
		y = document.body.clientHeight;
	}
	
	return(y);
}

function getScrollOffset() {
	var y;
	
	// all except Explorer
	if (self.pageYOffset) {
		y = self.pageYOffset;
	}
	
	// Explorer 6 Strict
	else if (document.documentElement && document.documentElement.scrollTop){
		y = document.documentElement.scrollTop;
		
	// all other Explorers
	} else if (document.body) {
		y = document.body.scrollTop;
	}
	
	return(y);
}