/*
 * Codigo por: Amado Urias G.
 * URL: www.amadourias.com
 * Fecha: Marzo 2010.
 * Licencia: GNU
*/

/*-----CLASS: Abre una Ventana tipo Modal CENTRADA pero con peticion de datos por Ajax-----------------
 * TIPOS DE DECLARACIONES:
 * this.Funcion = function() {} --> Publica sobre objeto
 * function Funcion() {} --> Privada sobre el objeto
 * Funcion = function() {} --> Publica independiente(global) del objeto
 * 
 * Modo de USO:
 * ventana.Abrir('procesa.php', 'Mi ventana', 100, 300);
 * ventana.Pie({cancelar:'Cerrar', aceptar:'Grabar', aceptarJS:'alert(\'Presionaste Grabar\');'
 * ventana.Cerrar();
 * ventana.Mensaje({codigo:'Hola.', titulo:'Avisa', alto:450, ancho:500});
*/

var CrearVentanaAjax = function(usa_sombra){
        //PUBLICAS:
        this.ponSombra = usa_sombra; //true o false
        this.cargando = 'Cargando..';
        this.css_sombra  = "background-color:#333; display:none; position: absolute; top:0; left:0; width:100%; height:100%; z-index:1001; opacity:.50; -moz-opacity:0.50; filter: alpha(opacity=50);";
        this.css_ventana = "font-size:0.9em; font-family:Verdana, Arial, Helvetica; padding:0; border:4px solid #426899; background-color:#FFF; color:#333; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; display:none; position:absolute; width:auto; height:auto; z-index:1002; overflow:none;";
        this.css_titulo  = "padding:3px; background-color:#5379aa; color:#FFFFFF; font-size:14px; font-weight:bold; cursor:pointer;";
        this.css_cuerpo  = "overflow:auto; padding:4px; width:auto; height:auto;";
        this.css_pie     = "border-top:1px solid #ccc; background-color:#eee; color:#666; font-size:12px; font-weight:normal; padding:8px; text-align:right;";
        this.css_aceptar = "padding:2px; text-decoration:none; background-color:#5379aa; color:#FFFFFF; border: 1px solid #426899; font-weight:bold; margin-right:4px; cursor:pointer;";
        this.css_cancelar= "padding:2px; text-decoration:none; background-color:#ddd; color:#444; border:1px solid #999; cursor:pointer;";
        this.padre  = false;
        this.ventana= false;
        this.sombra = false;
	//Privadas
	this.xmlHttp = false;
        this.aleatorio = 0;


        // Abre la ventana ----PARA SU USO-----
        this.Abrir = function(url_ajax, vmTitulo, alto, ancho) {
                this.aleatorio = Math.round(Math.random()*100);
                this.padre = document.getElementsByTagName("body")[0];  //Obtiene el control del primer body del html
                //Creo la sombra
                this.sombra = document.createElement('div');
                this.sombra.id = "vm_sombra" + this.aleatorio;
                if(this.ponSombra==true){
                    this.sombra.className = 'vm_sombra';
                }
                this.padre.appendChild(this.sombra);
                //Creo el obj de mi ventana
                this.ventana = document.createElement('div');
                this.ventana.className = 'vm_ventana';
                this.ventana.id = "vm_ventana" + this.aleatorio;
                this.ventana.style.width = ancho+'px';
                //Agrego el esqueleto de la ventana
                this.ventana.innerHTML = '<div class="vm_titulo" ' +
                    'style="float:right; cursor:pointer;" onclick="vm_CerrarVent(\''+this.sombra.id+'\',\''+this.ventana.id+'\');">'+
                    ' X </div><div class="vm_titulo"  onmousedown="vm_Presionado(\''+this.ventana.id+'\');"' +
                    'onmouseup="vm_Soltar();" onmousemove="vm_Arrastrar(event);">' + vmTitulo + '</div><div id="vm_cuerpo'+this.aleatorio+
                    '" class="vm_cuerpo" style="height:'+alto+'px;"> </div><div id="vm_pie'+this.aleatorio+
                    '"></div>';
                //La centro en su padre
                var elalto = ((document.body.clientHeight/2) - (alto/2)) - 20; //o usar: document.body.offsetHeight
                var elancho = (document.body.offsetWidth/2) - (ancho/2);
                this.ventana.style.top = elalto+'px';
                this.ventana.style.left = elancho+'px';
                //Doy de alta mi ventana en su padre
                this.padre.appendChild(this.ventana);
                //Pongo visible la ventana con su sombra
                this.sombra.style.display='block';
                this.ventana.style.display='block';

                //Llamada a Ajax:
                var divObj = document.getElementById('vm_cuerpo'+this.aleatorio);
                divObj.innerHTML = this.cargando;
                this.xmlHttp.open("POST", url_ajax, true);
                this.xmlHttp.onreadystatechange = uri_ProcesaDatos_vm(this.xmlHttp, 'vm_cuerpo'+this.aleatorio);
                this.xmlHttp.send(null);
        };
        
/*        
        // Abre la ventana y carga la URL en un Frame ----PARA SU USO-----
        this.AbrirFrame = function(url_frame, vmTitulo, alto, ancho) {
                this.aleatorio = Math.round(Math.random()*100);
                this.padre = document.getElementsByTagName("body")[0];  //Obtiene el control del primer body del html
                //Creo la sombra
                this.sombra = document.createElement('div');
                this.sombra.id = "vm_sombra" + this.aleatorio;
                if(this.ponSombra==true){
                    this.sombra.className = 'vm_sombra';
                }
                this.padre.appendChild(this.sombra);
                //Creo el obj de mi ventana
                this.ventana = document.createElement('div');
                this.ventana.className = 'vm_ventana';
                this.ventana.id = "vm_ventana" + this.aleatorio;
                this.ventana.style.width = ancho+'px';
                //Agrego el esqueleto de la ventana
                this.ventana.innerHTML = '<tbody><div class="vm_titulo" ' +
                    'style="float:right; cursor:pointer;" onclick="vm_CerrarVent(\''+this.sombra.id+'\',\''+this.ventana.id+'\');">'+
                    ' X </div><div class="vm_titulo"  onmousedown="vm_Presionado(\''+this.ventana.id+'\');"' +
                    'onmouseup="vm_Soltar();" onmousemove="vm_Arrastrar(event);">' + vmTitulo + '</div><div id="vm_cuerpo'+this.aleatorio+
                    '" class="vm_cuerpo" style="height:'+alto+'px;">'+
                    '<iframe align="center" scrolling="auto" title="Frame" src="'+url_frame+'" frameborder="0" style="width:'+ancho+'; heigth:'+alto+';"></iframe>'+
                    '</div><div id="vm_pie'+this.aleatorio+'"></div></tbody>';
                //La centro en su padre
                var elalto = ((document.body.clientHeight/2) - (alto/2)) - 20; //o usar: document.body.offsetHeight
                var elancho = (document.body.offsetWidth/2) - (ancho/2);
                this.ventana.style.top = elalto+'px';
                this.ventana.style.left = elancho+'px';
                //Doy de alta mi ventana en su padre
                this.padre.appendChild(this.ventana);
                //Pongo visible la ventana con su sombra
                this.sombra.style.display='block';
                this.ventana.style.display='block';

                //Llamada a Ajax:
                //var divObj = document.getElementById('vm_cuerpo'+this.aleatorio);
                //divObj.innerHTML = this.cargando;
                //this.xmlHttp.open("POST", url_ajax, true);
                //this.xmlHttp.onreadystatechange = uri_ProcesaDatos_vm(this.xmlHttp, 'vm_cuerpo'+this.aleatorio);
                //this.xmlHttp.send(null);
            
        };

*/
        // Abre la ventana tipo mensaje o popup ----PARA SU USO-----
        this.Mensaje = function(parametros) {
                //Parametros por default:
                if( typeof(parametros['codigo']) == "undefined" )          //Codigo html libre
                    parametros['codigo'] = '';
                if( typeof(parametros['titulo']) == "undefined" )          //Codigo html libre
                    parametros['titulo'] = '&nbsp;';
                if( typeof(parametros['alto']) == "undefined" )            //Codigo html libre
                    parametros['alto'] = '';
                if( typeof(parametros['ancho']) == "undefined" )           //Codigo html libre
                    parametros['ancho'] = '';

                this.aleatorio = Math.round(Math.random()*100);
                this.padre = document.getElementsByTagName("body")[0];  //Obtiene el control del primer body del html
                //Creo la sombra
                this.sombra = document.createElement('div');
                this.sombra.id = "vm_sombra" + this.aleatorio;
                if(this.ponSombra==true){
                    this.sombra.className = 'vm_sombra';
                }
                this.padre.appendChild(this.sombra);
                //Creo el obj de mi ventana
                this.ventana = document.createElement('div');
                this.ventana.className = 'vm_ventana';
                this.ventana.id = "vm_ventana" + this.aleatorio;
                this.ventana.style.width = parametros['ancho']+'px';
                //Agrego el esqueleto de la ventana
                this.ventana.innerHTML = '<div class="vm_titulo" ' +
                    'style="float:right; cursor:pointer;" onclick="vm_CerrarVent(\''+this.sombra.id+'\',\''+this.ventana.id+'\');">'+
                    ' X </div><div class="vm_titulo"  onmousedown="vm_Presionado(\''+this.ventana.id+'\');"' +
                    'onmouseup="vm_Soltar();" onmousemove="vm_Arrastrar(event);">' + parametros['titulo'] + '</div><div id="vm_cuerpo'+this.aleatorio+
                    '" class="vm_cuerpo" style="height:'+parametros['alto']+'px;">' + parametros['codigo'] + '</div><div id="vm_pie'+this.aleatorio+
                    '"></div>';
                //La centro en su padre
                var elalto = ((document.body.clientHeight/2) - (parametros['alto']/2)) - 20;
                var elancho = (document.body.offsetWidth/2) - (parametros['ancho']/2);
                this.ventana.style.top = elalto+'px';
                this.ventana.style.left = elancho+'px';
                //Doy de alta mi ventana en su padre
                this.padre.appendChild(this.ventana);
                //Pongo visible la ventana con su sombra
                this.sombra.style.display='block';
                this.ventana.style.display='block';
        };

        // Abre la ventana ----PARA SU USO-----
        this.Ajax = function(url, obj_destino) {
                var divObj = document.getElementById(obj_destino);
                divObj.innerHTML = this.cargando;
                this.xmlHttp.open("POST", url, true);
                this.xmlHttp.onreadystatechange = uri_ProcesaDatos_vm(this.xmlHttp, obj_destino);
                this.xmlHttp.send(null);
        };

        //Complemento de CrearVentanaAjax para borrarla  ----PARA SU USO-----
        this.Cerrar = function() {
                this.padre.removeChild(this.ventana);
                this.padre.removeChild(this.sombra);
        };

        //Complemento de CrearVentanaAjax para cargar el contenido pie, debe de llamarse despues de cargarla   ----PARA SU USO-----
        this.Pie = function(parametros) {
                var codigo = '<div class="vm_pie">';
                //Parametros por default:
                if( typeof(parametros['codigo']) != "undefined" )           //Codigo html libre
                    codigo = codigo + parametros['codigo'];
                if( typeof(parametros['aceptar']) != "undefined" ){         //Poner boton aceptar
                    var aceptarJS = '';
                    if( typeof(parametros['aceptarJS']) != "undefined" )
                        aceptarJS = parametros['aceptarJS'];
                    codigo = codigo + ' <label class="vm_aceptar" onclick="'+aceptarJS+'">'+parametros['aceptar']+'</label>';
                }
                if( typeof(parametros['cancelar']) != "undefined" )         //Poner boton Cerrar
                    codigo = codigo + ' <label class="vm_cancelar" onclick="vm_CerrarVent(\''+this.sombra.id+'\',\''+this.ventana.id+'\');">'+parametros['cancelar']+'</label>';
                codigo = codigo + '</div>';
                var divObj = document.getElementById('vm_pie' + this.aleatorio);
                divObj.innerHTML = codigo;
        };

        //Escribo en html el codigo de mi estilo CSS
        //---Una vez creado el obj puedes modificar las variables y cargar de nuevo los estilos.---
        this.CargarCSS = function() {
            document.writeln('<style type="text/css" media="screen">.vm_sombra{' + this.css_sombra + 
                '} .vm_ventana{' + this.css_ventana + '} .vm_titulo{' + this.css_titulo +
                '} .vm_cuerpo{' + this.css_cuerpo + '} .vm_pie{' + this.css_pie +
                '} .vm_aceptar{' + this.css_aceptar + '} .vm_cancelar{' + this.css_cancelar + '}</style>');

        };

        //----------A PARTIR DE AQUI NO OCUPA MANDARLAS LLAMAR-------------
        //Complemento de CrearVentanaAjax para borrarla. Esta se landa llamar desde afuera sin obj.
        vm_CerrarVent = function(objSombra, objVentana) {
                var borrar = document.getElementById(objVentana);
                var padre = borrar.parentNode;  // Obtenemos el padre del elemento
                padre.removeChild(borrar);  // Eliminamos el hijo del elemento padre
                borrar = document.getElementById(objSombra);
                padre = borrar.parentNode;
                padre.removeChild(borrar);
        };

        //Crea el objeto Ajax para usarse en las llamadas
        this.CrearObjAjax = function() {
            if (window.XMLHttpRequest) {
                    this.xmlHttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                    // Try ActiveX
                    try {
                            this.xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e1) {
                            // first method failed
                            try {
                                    this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                            } catch (e2) {
                                     // both methods failed
                                     this.xmlHttp = false;
                            }
                    }
            }
	};

        //Llamadas como constructor de la clase:
	this.CrearObjAjax();
        this.CargarCSS();

        //Procesa la informacion cuando haya regresado de la peticion del servidor
        function uri_ProcesaDatos_vm(req, divID) { //PRIVADA independiente
           return function () {
                if (req.readyState == 4) {
                        if (req.status == 200) {
                            if(divID!=''){
                                var divObj = document.getElementById(divID);
                                divObj.innerHTML = ''; //Evita problemas con sesiones.
                                divObj.innerHTML = req.responseText;
                            }
                        } else {
                            alert('AJAX: Error en el resultado de la llamada al proceso Ajax.');
                        }
                }
           }
        }


        /*-----inicia codigo para mover la ventana con el raton desde el titulo----*/

        // Estas funciones se manda llamar desde afuera, sin contener el objeto.
        //Si el navegador del cliente es Mozilla la variable siguiente valdrá true
        var vm_moz = document.getElementById && !document.all;
        //Flag que indica si estamos o no en proceso de arrastrar el ratón
        var vm_MovilArrastrando = false;
        //Variable para almacenar un puntero al objeto que estamos moviendo
        var vm_MovilObjMoviendo = false;

        //PUBLICAS INDEPENDIENTES
        vm_Arrastrar = function(e){
                if (vm_MovilArrastrando) { //Movemos la ventana en la posicion del raton
                        var newLeft = vm_moz ? e.clientX : event.clientX;
                        var newTop = vm_moz ? e.clientY : event.clientY;
                        vm_MovilObjMoviendo.style.left = newLeft - parseInt(vm_MovilObjMoviendo.style.width)/2;
                        vm_MovilObjMoviendo.style.top = newTop - 10;
                }
                return false;
        };

        vm_Soltar = function() {
                vm_MovilArrastrando = false;
                vm_MovilObjMoviendo = false;
        };

        vm_Presionado = function(obj) {
                vm_MovilArrastrando = true; //Activamos el flag para indicar que se empieza a arrastrar
                vm_MovilObjMoviendo = document.getElementById(obj); //Guardamos al objeto que se está moviendo
                return false; //Devolvemos false para no realizar ninguna acción posterior
        };

}
//-----------FIN de la clase para la ventana modal------------

// Inicializo el objeto para usarla en lo general
var ventana = new CrearVentanaAjax(true);