$(document).ready(function() {
	//select all the a tag with name equal to modal
	$('a[name=abasbox]').click(function(e) {
		//Cancel the link behavior
		//e.preventDefault();
		tamanos=$(this).attr('rel');
		tam=tamanos.split(':');
		mostrarAbasBox(tam[0],tam[1],$(this).attr('title'));
	});
	
	//if close button is clicked
	$('#cerrarAbasbox').click(function (e) {
		//Cancel the link behavior
		//e.preventDefault();
		ocultarAbasBox();
	});		
	//if mask is clicked
//	$('#mask').click(function () {
//		$(this).hide();
//		$('.window').hide();
//	});			
	
});
function ocultarAbasBox(){
	var winH = $(window).height();
	$('#mask').fadeOut(1000);
	$('.window').animate( {top:  -(winH+$(id).height())} , 400 );
	$('#cuerpoabasbox').html('');
}
function mostrarAbasBoxURL(ancho,alto,titulo,url){
	//Get the A tag
	id='#VentanaAbasBox';
	//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.7);	

	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();
    $('#TituloAbasbox').html(titulo);     
	//Set the popup window to center
	$('#cuerpoabasbox').css('height',alto);
	$(id).css('top',  -winH/2-$(id).height()/2);
	$(id).css('width',  ancho);
	$(id).css('left', winW/2-$(id).width()/2);

	//transition effect
	$(id).show();
	$(id).animate( {top:  winH/2-$(id).height()/2 } , 400 );
	$.ajax({
        url: url,
        complete: function(datos){
	     	$('#cuerpoabasbox').html(datos.responseText);
	    }
	});
}
function mostrarAbasBoxIframe(ancho,alto,titulo,url){
	id='#VentanaAbasBox';
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	$('#mask').css({'width':maskWidth,'height':maskHeight});
	$('#mask').fadeIn(1000);	
	$('#mask').fadeTo("slow",0.7);
	var winH = $(window).height();
	var winW = $(window).width();
    $('#TituloAbasbox').html(titulo);
	$('#cuerpoabasbox').css('height',alto);
	$(id).css('top',  -winH/2-$(id).height()/2);
	$(id).css('width',  ancho);
	$(id).css('left', winW/2-$(id).width()/2);
	$(id).show();
	$(id).animate( {top:  winH/2-$(id).height()/2 } , 400 );
	html='<div id="animacionLoading" style="text-align:center"><img src="images/abasbox/loadingAnimation.gif" id="animacionLoading" align="absmiddle"></div><iframe id="AbasBoxiframe" style="display:none" frameborder="0" onload="muestra()" marginheight="0" marginwidth="0" src="'+url+'" height="100%" width="100%" AllowTransparency></iframe>';
	$('#cuerpoabasbox').html(html);
}
function muestra(){
	$('#animacionLoading').hide();
	$('#AbasBoxiframe').fadeIn(1000);
}
function mostrarAbasBox(ancho,alto,titulo){
	//Get the A tag
	id='#VentanaAbasBox';
	//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.7);	

	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();
    $('#TituloAbasbox').html(titulo);     
	//Set the popup window to center
	$('#cuerpoabasbox').css('height',alto);
	$(id).css('top',  -winH/2-$(id).height()/2);
	$(id).css('width',  ancho);
	$(id).css('left', winW/2-$(id).width()/2);

	//transition effect
	$(id).show();
	$(id).animate( {top:  winH/2-$(id).height()/2 } , 400 );
}