var fadeDuration = 400;
var overlayOpacity = .3;
var backgroundColor;

/**
 * Toggle Overlay popup
 * @param type				: 	show/hide
 * @param element			: 	popup element to show/hide
 * [optional] @param obj	: { setMousePosition	:{event:event, x:Number, y:Number}, 	// set this property for position element according mouse position, you can tweak by use the x and y properties
 *								backgroundColor		:hexcode, 								// the background color of the overlay
 *								fadeDuration		:Number, 								// duration of fade (both: the overlay and element) in milliseconds
 *								overlayOpacity		:Number  								// the opacity of the overlay when it's faded in
 *								disableOverlay		:Boolean 								// enable/disable the overlay from fading (leave it hide())
 *								onComplete			:Function								// callback function
 *
 * example: 
 * toggleOverlay('show', $('div.country_languages_popup'), {backgroundColor:'#FF0000', overlayOpacity:.5, fadeDuration:200, setMousePosition:{event:event, x:0, y:0}, onComplete:blaat});
 */
function toggleOverlay(type, element, obj) {
	var height = ($('#page').height() > $(window).height())	 ? 	$('#page').height()+30 : $(window).height();
	$('#site_overlay').css({
		height:height, 
		width:$(window).width()
	});
	
	element = $(element);
	var disableOverlay = false;
	
	if (obj){
		if(obj.fadeDuration) 	fadeDuration 	= obj.fadeDuration;
		if(obj.overlayOpacity) 	overlayOpacity 	= obj.overlayOpacity;
		if(obj.backgroundColor) $('#site_overlay').css({background:obj.backgroundColor});
		if(obj.disableOverlay)  disableOverlay = true;
		
		if(obj.setMousePosition){
			var e = (obj.setMousePosition.event) ? obj.setMousePosition.event : window.event;
			var x=0;
			var y=0;
			var ie = (document.all) ? true : false
			if (ie) { 
				x = e.clientX + document.body.scrollLeft
				y = e.clientY + document.body.scrollTop
			}else{ 
				x = e.pageX
				y = e.pageY
			}  

			if(obj.setMousePosition.x) x += obj.setMousePosition.x;
			if(obj.setMousePosition.y) y += obj.setMousePosition.y;
			element.css({left:x, top:y});
		}
	}

	switch(type){
		case "hide" :
			if (!disableOverlay) $('#site_overlay').fadeTo(fadeDuration, 0, function(){
				$('#site_overlay').hide();
			});
			element.fadeTo( fadeDuration, 0, function(){
				element.hide();
				if (obj && obj.onComplete) obj.onComplete();
			});
		break;
		case "show" :
			if (!disableOverlay && $('#site_overlay').css('display') == "none") $('#site_overlay').show();
			if (element.css('display') == "none") {
				element.css({"-moz-opacity":0, "filter":"alpha(opacity=0)", "opacity":0, zIndex:2});
				element.show();
			}
			
			if (!disableOverlay) 
				$('#site_overlay').fadeTo( fadeDuration, overlayOpacity, null );
				
			element.fadeTo( fadeDuration, 1, function(){
				if (obj && obj.onComplete) obj.onComplete();
			});
		break;
	}
}

/**
 * This override function will remove the filter attribute used in MSIE, 
 * this will anti-aliase the text again after the fade
 */ 
jQuery.fn.fadeTo = function(speed,to,callback) { 
	return this.animate({opacity: to}, speed, function() { 
		if (to == 1 && jQuery.browser.msie) this.style.removeAttribute('filter');  
		if (jQuery.isFunction(callback)) callback();  
	}); 
};