/* 
 * ESTE SCRIPT SE VA A ENCARGAR DE ARMAR LOS RECUADROS PARA LAS IMAGENES
 * BY MATIAS PALACIOS
 */
function recuadro(){
    var cuerpo = $('cont_city');
    var images = cuerpo.getElements('img');
    var cantidad =  images.length;
    cuerpo.setStyles({position: 'relative'});
    var top_cuerpo = cuerpo.offsetTop;
    for (var i=0 ; i<cantidad ; i++){
        //var url_img = images[i].get('src');
        var ancho = images[i].offsetWidth;
        var alto = images[i].offsetHeight;
        var top = images[i].offsetTop;
        var left = images[i].offsetLeft;
        //alert ('el contenedor:' + top_cuerpo + '. la imagen: ' + top + '. El resultado: ' + (top - top_cuerpo));
        var izq = new Element('div',{'class':1+i,'styles': {'background-image':
                    'url("../../images/general/recuadro_izquierda.png")',
                'background-repeat':'repeat-y'
                , 'background-position':'top left','width':ancho,'height': alto,'float':'left',
                'top': top  + 'px','left': left + 'px','position': 'absolute'}});
        var der = new Element('div',{'class':1+i,'styles': {'background-image':
                    'url("../../images/general/recuadro_derecha.png")',
                'background-repeat':'repeat-y'
                , 'background-position':'top right','width':ancho,'height': alto,'float':'left',
                'top': top  + 'px','left': left + 'px','position': 'absolute'}});
        var sup = new Element('div',{'class':1+i,'styles': {'background-image':
                    'url("../../images/general/recuadro_superior.png")',
                'background-repeat':'repeat-x'
                , 'background-position':'top left','width':ancho,'height': alto,'float':'left',
                'top': top  + 'px','left': left + 'px','position': 'absolute'}});
        var inf = new Element('div',{'class':1+i,'styles': {'background-image':
                    'url("../../images/general/recuadro_inferior.png")',
                'background-repeat':'repeat-x'
                , 'background-position':'bottom left','width':ancho,'height': alto,'float':'left',
                'top': top  + 'px','left': left + 'px','position': 'absolute'}});
        var s_i = new Element('div',{'class':1+i,'styles': {'background-image':
                    'url("../../images/general/recuadro_izq_sup.png")',
                'background-repeat':'no-repeat'
                , 'background-position':'top left','width':ancho,'height': alto,'float':'left',
                'top': top  + 'px','left': left + 'px','position': 'absolute'}});

        var s_d = new Element('div',{'class':1+i,'styles': {'background-image':
                    'url("../../images/general/recuadro_der_sup.png")',
                'background-repeat':'no-repeat'
                , 'background-position':'top right','width':ancho,'height': alto,'float':'left',
                'top': top  + 'px','left': left + 'px','position': 'absolute'}});

        var i_i = new Element('div',{'class':1+i,'styles': {'background-image':
                    'url("../../images/general/recuadro_izq_inf.png")',
                'background-repeat':'no-repeat'
                , 'background-position':'bottom left','width':ancho,'height': alto,'float':'left',
                'top': top  + 'px','left': left + 'px','position': 'absolute'}});

        var i_d = new Element('div',{'class':1+i,'styles': {'background-image':
                    'url("../../images/general/recuadro_der_inf.png")',
                'background-repeat':'no-repeat'
                , 'background-position':'bottom right','width':ancho,'height': alto,'float':'left',
                'top': top  + 'px','left': left + 'px','position': 'absolute'}});

        //cuerpo.inject(myEl);
        izq.inject(images[i],'after');
        der.inject(izq,'after');
        sup.inject(der,'after');
        inf.inject(sup,'after');
        i_d.inject(inf,'after');
        i_i.inject(inf,'after');
        s_d.inject(inf,'after');
        s_i.inject(inf,'after');
        //images[i].inject(myEl);
        //images[i].setStyles({display: 'none'});
    }
}