<!-- Main Modal Behaviour -->

$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('.tradenettop').live('click',function(e) {
		//Cancel the link behavior
		e.preventDefault();

		//Get the A tag
		var id = "#traderank_tooltip";

		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.0);	

		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();

		//Set the popup window to center
		$(id).css('top',e.pageY-100);
		$(id).css('left', e.pageX+30);

		//transition effect
		$(id).fadeIn(300);
	});
	
	$('.tradenet_large_top').live('click',function(e) {
		//Cancel the link behavior
		e.preventDefault();

		//Get the A tag
		var id = "#traderank_tooltip";

		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.0);	

		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();

		//Set the popup window to center
		$(id).css('top',e.pageY-100);
		$(id).css('left', e.pageX+30);

		//transition effect
		$(id).fadeIn(300);
	});
	
	$('span.shipserv_icon').live('click',function(e) {
		//Cancel the link behavior
		e.preventDefault();

		//Get the A tag
		var id = "#membership_tooltip";

		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.0);	

		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();

		//Set the popup window to center
		$(id).css('top',e.pageY-100);
		$(id).css('left', e.pageX+30);

		//transition effect
		$(id).fadeIn(300);
	});
	
	
	$('.supplier_cell').live('click',function(e) {
		//Cancel the link behavior
		e.preventDefault();

		//Get the A tag
		var id = "#membership_tooltip";

		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.0);	

		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();

		//Set the popup window to center
		$(id).css('top',e.pageY-100);
		$(id).css('left', e.pageX+30);

		//transition effect
		$(id).fadeIn(300);
	});
	
	$('#membership_popup').live('click',function(e) {
		//Cancel the link behavior
		e.preventDefault();

		//Get the A tag
		var id = "#membership_tooltip";

		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.0);	

		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();

		//Set the popup window to center
		$(id).css('top',e.pageY-100);
		$(id).css('left', e.pageX+30);

		//transition effect
		$(id).fadeIn(300);
	});
	
	$('a.rollover').live('click',function(e) {
		//Cancel the link behavior
		e.preventDefault();

		//Get the A tag
		var id = "#rollover_big";
		var src = $(this).attr('href');

		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.1);	

		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();

		//Set the popup window to center
		$(id).css('top',e.pageY-100);
		$(id).css('left', e.pageX+30);

		//transition effect
		$(id).html('<img src="'+src+'" />')
		$(id).fadeIn(300);
	});

	//if close button is clicked
	$('a.close').click(function (e) {
		e.preventDefault();
		$('#mask').hide();
		$('.window').hide();
		$('.window2').hide(); 
	});
			

	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
		$('.window2').hide(); 
	});
	
	$('#rollover_big').click(function () {
		$(this).hide();
		$('#mask').hide();
	});
	
	$('body').click(function () {
		$('.window').hide();
		$('.window2').hide();
		$('#mask').hide();
	});
	

});

<!-- End Main Modal Behaviour -->