/**
 * Clase para genera ventanas modales
 * 
 * @use 
 * <code>
 *		var myModal = new Modal({
 *						onComplete:function(){alert('finalizo de cargar');},
 *						onInit:function(){alert('Instanciando...');},
 *						onClose:function(){alert('Cerrando modal...');},
 *						isAjax:true,
 *						src:'prueba.html',
 *						width:300,
 *						height:100
 *						});
 * </code>
 * 
 * EVENTOS
 * La clase lanza siertos enventos para que se puedan configurar para que realice alguna accion, los cuale son
 * 
 * init: se lanza cuando se instancia el objeto
 * complete: se lanza cuando se termino de cargar el contenido en el body del modal
 * close: se lanza cuando se cierra el modal
 * 
 */
var Modal = new Class({
	Implements: [Options,Events],
    options: {
        fondoColor: '000', //color de fondo del modal
        fondoOpacidad:0.5, //opacidad del fondo
        isAjax:false, //indica si el contenido se trae mediante ajax
        isIframe:false, //indica si el contenido se trae desde una web externa y se usa iframe
        isHtml:false, //indica si el contenido viene xhtml o es un elemento ya existe dentro de la pag
        src:'', //url
        width:500, //ancho del contenido
        height:300 //alto del contenido
    },
    /**
     * Constructor
     */
    initialize: function(options){
        this.setOptions(options); //setea las opciones
        
        this.urlImgLoading = 'imagenes/ajax-loader.gif'; //url donde esta la imagen de loading       
        this.idModalIframe = 'Modal_iframe'; //identificador del iframe de fondo
        this.idModalFondo = 'Modal_fondo'; //identificador del layer de fondo
        this.idModalContenido = 'Modal_contenido';  //identificador del layer del contenido        
        //evento de comienzo
        this.fireEvent('init');
        //obtengo el tamaño del la pagina
        this.pagTamScroll = this.getTamanoPaginaConScroll();
        this.pagScroll = this.getPaginaScroll();
        //creo el fondo del modal
        this.crearFondo();
        //cargo el contenido del modal
        this.cargarContenido();
    },
    /**
     * Crea el fondo del modal
     * @return boolean
     */
    crearFondo:function(){
    	//creo el iframe para el fondo transparente
    	$(document.body).adopt(new IFrame({
    									frameborder:'no',
    									framespacing:0,
    									id:this.idModalIframe,
    									styles: {
											position:'absolute',
											top:0,
											left:0,
											width:this.pagTamScroll.x,
								            height:this.pagTamScroll.y,
								            border: 'none',
								            backgroundColor:'transparent',
								            opacity:0.1,
								            zIndex:900
									    }							     
									}));
    	//como en IE7 x algun motivo no puedo asignarle un color de fondo al iframe debo crear una capa del mismo tamaño y en la misma posicion que el iframe
    	$(document.body).adopt(new Element('div',{
				    		'id':this.idModalFondo,
				    		'styles': {
							            'position':'absolute',
				    							'display': 'block',
							            'border': 'none',
							            'backgroundColor':'#'+this.options.fondoColor,
							            'top':0,
							            'left':0,
							            'width':this.pagTamScroll.x+'px',
							            'height':this.pagTamScroll.y+'px',
							            'opacity':this.options.fondoOpacidad,
							            'zIndex':910
							        }    		
				    	}));
    	return true;
    },
    
    getPaginaScroll:function(){
    	return window.getScroll();
    },
	/**
	 * Obtiene el tamaño de la ventana teniendo en cuenta el scroll
	 * @return object object.x es el ancho y object.y es el alto
	 */
    getTamanoPaginaConScroll:function(){
    	return window.getScrollSize();    	
    },
    /**
     * Crea la ventana del contenido y el boton de cerrar
     * @return boolean
     */
    cargarContenido:function(){    	
    	//ventana contenido
    	b = new Element('div',{
    						'styles': {
	    							'position':'absolute',
						    		'backgroundColor':'transparent',
						    		'backgroundImage':'url(../css/images/login_bubble_325x193.png)',
						    		'backgroundRepeat':'no-repeat',
						    		'padding':'10px 10px 10px 15px',
						    		'top':(this.pagScroll.y+50)+'px',
						    		'left': Math.ceil((this.pagTamScroll.x-this.options.width)/2)+'px',
						    		'width':this.options.width,
						        'height':'180px',
						    		'zIndex':920
    							},
    						'id':this.idModalContenido
    						});    	
    	//btn cerrar
    	bC = new Element('div',{
    						'id':this.idModalContenido+'_cerrar',
							'styles': {

						    		'float':'right',
						    		'padding-right':'10px'
								}							
							});
    	
    	aC = new Element('a',{
    						'href':'#',
    						'title':'Close',
					    	'events': {'click': function(e){e.stop();this.cerrar()}.bind(this)}   		
    						});
    	aC.innerHTML = this.btnCerrarHTML();
    	//body del contenido
    	bb = new Element('div',{
							'id':this.idModalContenido+'_body',
							'styles': {'width':this.options.width}							
							});
    	bb.innerHTML = this.agregarLoader();
    	
    	//inserto el contenido el en DOM
    	//bC.adopt(aC);
    	//b.adopt(bC);
    	b.adopt(bb);    	
    	$(document.body).adopt(b);    	
    	//carga el contenido segun el tipo
    	return this.cargarContenidoSegunTipo();
    },
    
    btnCerrarHTML:function(){
    	return 'Cerrar';
    },
    /**
     * Cierra el modal
     * @return boolean
     */
    cerrar:function(){
    	this.fireEvent('close');
    	$(this.idModalContenido).destroy();
    	$(this.idModalFondo).destroy();
    	$(this.idModalIframe).destroy();
    	return true;
    },
    /**
     * Carga el contenido del modal segun el tipo
     * @return boolean
     */
    cargarContenidoSegunTipo:function(){
    	if(this.options.isAjax)
    		this.getContenidoAjax();
    	else if(this.options.isHtml)
    		this.getContenidoHtml();
    	else if(this.options.isIframe)
    		this.getContenidoIframe();
    	else
    		alert('Debe indicar alguna forma de recuperar informacion');
    	return true;
    },
    /**
     * Agrega imagen de loading en el modal
     * @return string
     */
    agregarLoader:function(){
    	return "<img src='"+this.urlImgLoading+"' alt='loading'/>"
    },
    /**
     * Quita la imagen de loading
     * @return object
     */
    quitarLoader:function(obj){
    	obj.innerHTML = '';
    	return obj;
    },
    
    getContenidoAjax:function(){    	
    	new Request.HTML({
    					update:this.idModalContenido+'_body',
    					onSuccess:function(){this.fireEvent('complete')}.bind(this)
    					}).get(this.options.src);
    },
    
    getContenidoIframe:function(){    	
    	obj = $(this.idModalContenido+'_body'); 
    	obj = this.quitarLoader(obj); 	
    	obj.adopt(new IFrame({
		    		styles: {
						width:this.options.width,
			            height:this.options.height,
			            border: 'none'			            
			        },			        
			        events: {			     
			            load: function(){this.fireEvent('complete')}.bind(this)
			        },
					 src:this.options.src,
				     frameborder:'no',
				     framespacing:0,
				     id:''
				}));    	
    	return true;
    },
    
    getContenidoHtml:function(){
    	alert('No implementado');
    }
});

var ModalIonlineLogin = new Class({
    Extends: Modal,
    btnCerrarHTML: function(name, age){
        return "<img src='../css/images/fechar.jpg' alt='Close'/>";
    }
});