/******************
 * POP-IN MANAGER *
 ******************************************************
 * Por Alejandro Caballero (lava.caballero@gmail.com) *
 ****************************************************************************
 * Basado en el sistema de mensajes internos de whitepuma.lavasoftworks.com *
 ****************************************************************************/

ns4                  = (document.layers)? true:false;
ie4                  = (document.all)? true:false;
popin_iframe_height  = 100; // default, necesaria para evitar errores
popin_current_zindex = 16384;

// Más defaults:
popin_manager_img_path  = '/etc/popin_manager/';
popin_manager_theme     = 'azul';
popin_manager_dim_color = 'white';
popin_name              = 'popin_default';
popins_open             = 0;

////////////////////////////////////////////
function render_popin_controls(popin_name) {
////////////////////////////////////////////

    // Esta es necesaria para evitar un error al arranque
    eval(popin_name + '_iframe_height = 0;');
    
    document.write('<div id="' + popin_name + '_screen_locker" style="background-image: url(' + popin_manager_img_path + 'screenlocker_' + popin_manager_dim_color + '.png); position: absolute; top: 0; left: 0; width: 90%; height: 90%; visibility: hidden; overflow: hidden; z-index: ' + (popin_current_zindex++) + ';"><img\n'
    +              '     id="' + popin_name + '_screen_locker_image" src="' + popin_manager_img_path + 'spacer.gif" style="width: 90%; height: 90%;" border="0" alt=""></div>\n');
    
    document.write('<div id="' + popin_name + '_container" align="center" style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; visibility: hidden; overflow: hidden; z-index: ' + (popin_current_zindex++) + ';">\n'
    +              '    <link rel="stylesheet" type="text/css" href="' + popin_manager_img_path + popin_manager_theme + '/style.css">\n'
    +              '    <table id="' + popin_name + '_border" cellpadding="0" cellspacing="0" border="0" style="width: 100px; height: 100px;" align="center">\n'
    +              '        <tr align="left" valign="top">\n'
    +              '            <td width="18"   height="35"><img src="' + popin_manager_img_path + popin_manager_theme + '/top-left.png" alt="" width="18" height="35" border="0"></td>\n'
    +              '            <td width="10"   height="35"><img src="' + popin_manager_img_path + popin_manager_theme + '/top-tile-left-patch.png" alt="" width="10" height="35" border="0"></td>\n'
    +              '            <td width="100%" height="35" background="' + popin_manager_img_path + popin_manager_theme + '/top-tile.png" align="center" valign="top" style="padding-top: 10px;">\n'
    +              '                <div id="' + popin_name + '_caption" style="font-family: arial, helvetica; font-size: 14pt; font-weight: bold; color: white; width: 100%;">CAPTION</div>\n'
    +              '                <div style="position: relative; margin-right: -14px; margin-top: -18px; float: right;"><a href="javascript:close_popin(\'' + popin_name + '\');" class="nohoverbgcolor"><img\n'
    +              '                     src="' + popin_manager_img_path + 'xp_close_off.png"\n' 
    +              '                     alt="Cerrar" title="Cerrar" width="28" height="15" border="0"\n'
    +              '                     onMouseOver="this.src=\'' + popin_manager_img_path + 'xp_close_over.png\';"\n'
    +              '                     onMouseOut ="this.src=\'' + popin_manager_img_path + 'xp_close_off.png\';"\n'
    +              '                     onMouseDown="this.src=\'' + popin_manager_img_path + 'xp_close_click.png\';"></a></div>\n'
    +              '            </td>\n'
    +              '            <td width="10"   height="35"><img src="' + popin_manager_img_path + popin_manager_theme + '/top-tile-right-patch.png" alt="" width="10" height="35" border="0"></td>\n'
    +              '            <td width="23"   height="35"><img src="' + popin_manager_img_path + popin_manager_theme + '/top-right.png" alt="" width="23" height="35" border="0"></td>\n'
    +              '        </tr>\n'
    +              '        <tr align="left" valign="top">\n'
    +              '            <td width="18" background="' + popin_manager_img_path + popin_manager_theme + '/left-tile.png"><img \n'
    +              '                src="' + popin_manager_img_path + 'spacer.gif" width="18" height="10" border="0" alt=""></td>\n'
    +              '            <td width="100%" colspan="3" rowspan="2" bgcolor="white">\n'
    +              '                <div id="' + popin_name + '_iframe_container" style="visibility: hidden;">\n'
    +              '                    <iframe name="' + popin_name + '_iframe" id="' + popin_name + '_iframe" src="about:blank" noframe width="100%" \n'
    +              '                            framespacing="0" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="auto"\n' 
    +              '                            style="border: 0; width: 100%; ' + (ie4? 'overflowX: hidden;': '') + '"\n'
    +              '                            onload="this.style.height = ' + popin_name + '_iframe_height; document.getElementById(\'' + popin_name + '_loader\').style.visibility = \'hidden\';"></iframe>\n'
    +              '                </div>\n'
    +              '                <div id="' + popin_name + '_idiv" \n'
    +              '                            style="border: 0; width: 100px; height: 100px; position: absolute; margin-top: -100px; z-index: ' + (popin_current_zindex++) + '; overflow: auto; ' + (ie4? 'overflowX: hidden; ': '') + 'visibility: hidden;"></div>\n'
    +              '                <div id="' + popin_name + '_loader" \n'
    +              '                            style="border: 0; width: 100px; height: 100px; position: absolute; z-index: ' + (popin_current_zindex++) + '; overflow: hidden; ' + (ie4? 'overflowX: hidden; ': '') + 'visibility: hidden; background-image: url(' + popin_manager_img_path + 'screenlocker_black.png);">'
    +              '                     <table cellpadding="0" cellspacing="0" border="0"><tr><td id="' + popin_name + '_loading" align="center" valign="middle" style="width: 100%; height: 100%;">'
    +                                   '<img src="' + popin_manager_img_path + 'loading.gif" width="37" height="37" border="0">'
    +              '                     </td></tr></table>\n'
    +              '                </div>\n'
    +              '            </td>\n'
    +              '            <td width="23" background="' + popin_manager_img_path + popin_manager_theme + '/right-tile.png"><img \n'
    +              '                src="' + popin_manager_img_path + 'spacer.gif" width="23" height="10" border="0" alt=""></td>\n'
    +              '        </tr>\n'
    +              '        <tr align="left" valign="bottom">\n'
    +              '            <td width="18" background="' + popin_manager_img_path + popin_manager_theme + '/left-tile.png"><img \n'
    +              '                src="' + popin_manager_img_path + 'spacer.gif" width="18" height="10" border="0" alt=""></td>\n'
    +              '            <td width="23" background="' + popin_manager_img_path + popin_manager_theme + '/right-tile.png"><img \n'
    +              '                src="' + popin_manager_img_path + 'spacer.gif" width="23" height="10" border="0" alt=""></td>\n'
    +              '        </tr>\n'
    +              '        <tr align="left" valign="top" height="23">\n'
    +              '            <td width="18"   height="23"><img src="' + popin_manager_img_path + popin_manager_theme + '/bottom-left.png" alt="" width="18" height="23" border="0"></td>\n'
    +              '            <td width="10"   height="23"><img src="' + popin_manager_img_path + popin_manager_theme + '/bottom-tile-left-patch.png" alt="" width="10" height="23" border="0"></td>\n'
    +              '            <td width="100%" height="23" background="' + popin_manager_img_path + popin_manager_theme + '/bottom-tile.png" align="center" valign="top"><img\n' 
    +              '                src="' + popin_manager_img_path + 'spacer.gif" width="100%" height="23" border="0" alt=""></td>\n'
    +              '            <td width="10"   height="23"><img src="' + popin_manager_img_path + popin_manager_theme + '/bottom-tile-right-patch.png" alt="" width="10" height="23" border="0"></td>\n'
    +              '            <td width="23"   height="23"><img src="' + popin_manager_img_path + popin_manager_theme + '/bottom-right.png" alt="" width="23" height="23" border="0"></td>\n'
    +              '        </tr>\n'
    +              '    </table>\n'
    +              '</div>\n');
    
/////////////////
} // end function
/////////////////

//////////////////////////////////////////////////////////////////
function open_popin(popin_name, xwidth, xheight, xcaption, xdata) {
//////////////////////////////////////////////////////////////////

    // Chequemos si lo que recibimos es una URL o texto HTML...
    // de ser URL, mostramos iFrame. De ser HTML, mostramos div.
    if(xdata == 'about:blank' || xdata.indexOf('http://') == 0 || xdata.indexOf('/') == 0 || xdata.indexOf('.') == 0) {
        // es una URL o una ruta interna... o al menos, eso parece!
        working_over = 'iframe';
    } else {
        // es código HTMML...
        working_over = 'idiv';
    } // end if
    
    // Convertimos ancho y alto en strings para luego checar si son números o porcentajes
    xwidth  = xwidth  + '';
    xheight = xheight + '';
    
    // Calculamos dimensiones
    // Nota: se tuvieron que poner minimos de 640x480 al ancho de la ventana para evitar
    // problemas de muestreo en opera mini. Que dios agarre persinados a los otros
    // navegadores móviles!!!
    if(ie4) {
        ancho               = document.body.clientWidth < 640? 640: document.body.clientWidth;
        alto                = document.body.clientHeight < 480? 480: document.body.clientHeight;
        if(xwidth.indexOf('%')  > 0) { xwidth  = Math.round(ancho * (xwidth.replace('%', '') / 100));  }
        if(xheight.indexOf('%') > 0) { xheight = Math.round(alto  * (xheight.replace('%', '') / 100)); }
        anchorecuadro       = (xwidth > ancho)? ancho - 20: xwidth;
        altorecuadro        = (xheight > alto)? alto  - 20: xheight;
        izquierda           = (document.body.scrollLeft + (ancho - anchorecuadro))/2;
        arriba              = document.body.scrollTop  + ( (alto - altorecuadro) / 2 );
        arribota            = document.body.scrollTop;
    } else {
        ancho               = window.innerWidth < 640? 640: window.innerWidth;
        alto                = window.innerHeight < 480? 480: window.innerHeight;
        if(xwidth.indexOf('%')  > 0) { xwidth  = Math.round(ancho * (xwidth.replace('%', '') / 100));  }
        if(xheight.indexOf('%') > 0) { xheight = Math.round(alto  * (xheight.replace('%', '') / 100)); }
        anchorecuadro       = (xwidth > ancho)? ancho - 20: xwidth;
        altorecuadro        = (xheight > alto)? alto  - 20: xheight;
        izquierda           = (window.pageXOffset + (ancho - anchorecuadro))/2;
        arriba              = window.pageYOffset  + ( (alto - altorecuadro) / 2 );
        arribota            = window.pageYOffset;
    } // end if
    popin_iframe_height = altorecuadro - (35 + 23);
    // Esto es necesario para el iframe de este popin:
    eval(popin_name + '_iframe_height = altorecuadro - (35 + 23);');
    
    // Ocultamos lo que no se necesite...
    document.body.style.overflow = 'hidden';
    if(working_over == "iframe") {
        document.getElementById(popin_name + '_idiv').style.visibility             = 'hidden';
    } else {
        document.getElementById(popin_name + '_iframe_container').style.visibility = 'hidden';
    } // end if
    
    // Posicionamos...
    document.getElementById(popin_name + '_container').style.width            = "100%";
    document.getElementById(popin_name + '_container').style.height           = altorecuadro;
    document.getElementById(popin_name + '_container').style.top              = arriba;
    // document.getElementById(popin_name + '_container').style.left          = izquierda;
    document.getElementById(popin_name + '_border').style.width               = anchorecuadro;
    document.getElementById(popin_name + '_border').style.height              = altorecuadro;
    document.getElementById(popin_name + '_screen_locker').style.width        = ancho + 100;
    document.getElementById(popin_name + '_screen_locker').style.height       = alto + 100;
    document.getElementById(popin_name + '_caption').innerHTML                = xcaption;
    document.getElementById(popin_name + '_screen_locker').style.top          = arribota;
    document.getElementById(popin_name + '_screen_locker').style.left         = 0;
    document.getElementById(popin_name + '_screen_locker_image').style.width  = "120%";
    document.getElementById(popin_name + '_screen_locker_image').style.height = "120%";
    
    // Mostramos...
    document.getElementById(popin_name + '_idiv').style.width                 = anchorecuadro - (18 + 23);
    document.getElementById(popin_name + '_idiv').style.height                = popin_iframe_height;
    document.getElementById(popin_name + '_idiv').style.marginTop             = 0 - popin_iframe_height;
    document.getElementById(popin_name + '_loader').style.width               = anchorecuadro - (18 + 23);
    document.getElementById(popin_name + '_loader').style.height              = popin_iframe_height;
    // document.getElementById(popin_name + '_loader').style.marginTop           = 0 - popin_iframe_height;
    document.getElementById(popin_name + '_loading').style.width              = anchorecuadro - (18 + 23);
    document.getElementById(popin_name + '_loading').style.height             = popin_iframe_height;
    if(working_over == "iframe") {
        document.getElementById(popin_name + '_loader').style.visibility = 'visible';
        eval(popin_name + "_iframe.location.href = '" + xdata + "';");
        document.getElementById(popin_name + '_iframe_container').style.visibility = 'visible';
    } else {
        eval(popin_name + "_iframe.location.href = 'about:blank';");
        document.getElementById(popin_name + '_idiv').innerHTML                    = xdata;
        document.getElementById(popin_name + '_idiv').style.visibility             = 'visible';
    } // end if
    document.getElementById(popin_name + '_screen_locker').style.visibility   = "visible";
    document.getElementById(popin_name + '_container').style.visibility       = "visible";
    popins_open++;
    
/////////////////
} // end function
/////////////////

//////////////////////////////////
function close_popin(popin_name) {
//////////////////////////////////

    document.getElementById(popin_name + '_screen_locker').style.visibility    = 'hidden';
    document.getElementById(popin_name + '_container').style.visibility        = 'hidden';
    document.getElementById(popin_name + '_idiv').style.visibility             = 'hidden';
    document.getElementById(popin_name + '_iframe_container').style.visibility = 'hidden';
    // document.getElementById(popin_name + '_container').style.width             = 100;
    document.getElementById(popin_name + '_screen_locker').style.width         = '90%';
    document.getElementById(popin_name + '_screen_locker').style.height        = '90%';
    document.getElementById(popin_name + '_screen_locker_image').style.width   = '90%';
    document.getElementById(popin_name + '_screen_locker_image').style.height  = '90%';
    
    popins_open--;
    if(popins_open <= 0) {
        popins_open                  = 0;
        document.body.style.overflow = 'auto';
    } // en dif
    
/////////////////
} // end function
/////////////////