var Elemento = function( id, clase, padre, ancho, alto ){
    
    this.id = id;
    this.padre = padre;
    this.ancho = ancho;
    this.alto = alto;
    this.x = 0;
    this.y = 0;
}
Elemento.prototype.mover = function( x, y ){
    this.x = x;
    this.y = y;
    $( '#'+this.id ) .css( 'left', this.x+'px' )
                     .css( 'top',  this.y+'px' );
}
Elemento.prototype.desplazar = function( x, y ){
    this.x += x;
    this.y += y;
    $( '#'+this.id ) .css( 'left',  this.x+'px' )
                     .css( 'top',   this.y+'px' );
}
Elemento.prototype.esquinaX = function( num ){
    var n = num%3;
    if( n == 0 ) return 0;
    else if( n == 1 ) return this.ancho/2;
    else return (this.ancho);
}
Elemento.prototype.esquinaY = function( num ){
    var n = num/3;
    if( n < 1 ) return 0;
    else if( n < 2 ) return this.alto/2;
    else return (this.alto);
}
Elemento.prototype.colocar = function( elemento,  esquinaA, esquinaB, margenX, margenY ){
    var esquinaXA = elemento.esquinaX( esquinaA );
    var esquinaYA = elemento.esquinaY( esquinaA );
    
    var x = elemento.x + esquinaXA - this.esquinaX( esquinaB ) + margenX;
    var y = elemento.y + esquinaYA-this.esquinaY( esquinaB ) + margenY;
    this.mover( x, y );
}
Elemento.prototype.colocarR = function( elemento,  esquinaA, esquinaB, margenX, margenY ){
    var esquinaXA = elemento.esquinaX( esquinaA );
    var esquinaYA = elemento.esquinaY( esquinaA );
    
    var x = esquinaXA - this.esquinaX( esquinaB ) + margenX;
    var y = esquinaYA - this.esquinaY( esquinaB ) + margenY;
    this.mover( x, y );
    
}
Elemento.prototype.modificarDimension = function( ancho, alto ){
    this.ancho = ancho;
    this.alto = alto;

    $( '#'+this.id ).css( {   
                         'width'     : ancho+'px',
                         'height'    : alto+'px'
    });
}



var Contenedor = function( id, clase, padre, ancho, alto, opcionesCSS ){
   
    Elemento.apply( this, arguments );
    
    $( '#'+padre ).append( "<div id='"+id+"' class='"+clase+"'/>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px'} );
    
    $( '#'+id ).css( opcionesCSS );
    
                        
}
Contenedor.prototype = new Elemento( );
Contenedor.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id ).css( opciones );
}

var InputText = function( id, clase, padre, ancho, alto, texto, maxlength, opcionesCSS ){
    
    Elemento.apply( this, arguments );
    $( '#'+padre).append( "<div id='"+id+"'><input type='text' id='"+id+"_in' class='"+clase+"' value='"+texto+"' maxlength='"+maxlength+"'></div>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px',
                        'border' : '0px solid'
                      });

    $( '#'+id+'_in' ).css( {'position': 'absolute',
                              'left' : '0px',
                              'top' : '0px',
                              'width': '100%',
                              'height': '100%'} );
                            
    $( '#'+id+'_in' ).css( opcionesCSS );
}
InputText.prototype = new Elemento( );
InputText.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id+'_in' ).css( opciones );
}
InputText.prototype.getValor = function(){
    return $( '#'+this.id+'_in' ).val( );
}
InputText.prototype.setValor = function( valor ){
    return $( '#'+this.id+'_in' ).val( valor );
}

var InputPass = function( id, clase, padre, ancho, alto, texto, maxlength, opcionesCSS ){
    
    Elemento.apply( this, arguments );
    $( '#'+padre).append( "<div id='"+id+"'><input type='password' id='"+id+"_in' class='"+clase+"' value='"+texto+"' maxlength='"+maxlength+"'></div>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px',
                        'border' : '0px solid'
                      });

    $( '#'+id+'_in' ).css( {'position': 'absolute',
                              'left' : '0px',
                              'top' : '0px',
                              'width': '100%',
                              'height': '100%'} );
                            
    $( '#'+id+'_in' ).css( opcionesCSS );
}
InputPass.prototype = new Elemento( );
InputPass.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id+'_in' ).css( opciones );
}
InputPass.prototype.getValor = function(){
    return $( '#'+this.id+'_in' ).val( );
}
InputPass.prototype.setValor = function( valor ){
    return $( '#'+this.id+'_in' ).val( valor );
}

var Boton = function( id, clase, padre, ancho, alto, texto, opcionesCSS ){
    
    Elemento.apply( this, arguments );
    $( '#'+padre).append( "<div id='"+id+"'><input type='button' id='"+id+"_in' class='"+clase+"' value='"+texto+"'></div>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px',
                        'border' : '0px solid'
                      });

    $( '#'+id+'_in' ).css( {'position': 'absolute',
                              'left' : '0px',
                              'top' : '0px',
                              'width': '100%',
                              'height': '100%',
                              'border' : '0px solid',
                              'cursor' : 'pointer'
                          } );
                            
    $( '#'+id+'_in' ).css( opcionesCSS );
}
Boton.prototype = new Elemento( );
Boton.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id+'_in' ).css( opciones );
}

var Imagen = function( id, clase, padre, ancho, alto, src, opcionesCSS ){
    
    Elemento.apply( this, arguments );
    $( '#'+padre).append( "<div id='"+id+"'><img id='"+id+"_in' class='"+clase+"' src='"+src+"'></div>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px',
                        'border' : '0px solid'
                      });

    $( '#'+id+'_in' ).css( {'position': 'absolute',
                              'left' : '0px',
                              'top' : '0px',
                              'width': '100%',
                              'height': '100%',
                              'border' : '0px solid'
                          } );
                            
    $( '#'+id+'_in' ).css( opcionesCSS );
}
Imagen.prototype = new Elemento( );
Imagen.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id+'_in' ).css( opciones );
}
Imagen.prototype.cambiarImagen = function( src, ancho, alto ){
    this.modificarDimension( ancho, alto );
    $( '#'+this.id+'_in' ).attr( 'src', src );
}
var Etiqueta = function( id, clase, padre, ancho, alto, texto, opcionesCSS ){
    Elemento.apply( this, arguments );
    
    $('#'+padre).append( "<div id='"+id+"'><div id='"+id+"_in' class='"+clase+"'>"+texto+"</div></div>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px',
                        'display' : 'table',
                        'border' : '0px solid'
                      });

    $( '#'+id+'_in' ).css( {'display':'table-cell',
                              'border' : '0px solid'
                          } );
                            
    $( '#'+id+'_in' ).css( opcionesCSS );
}
Etiqueta.prototype = new Elemento( );
Etiqueta.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id+'_in' ).css( opciones );
}
Etiqueta.prototype.cambiarTexto = function( texto ){
    alert('aqui');
    $('#'+this.id+'_in' ).html( texto );
    
                                   
}
function generarAnios( anioLimite ){
    var anios = "";
    
    for( var i = 1910; i <= anioLimite; i++ ){
        if( i==anioLimite) anios += "<option value='"+i+"' selected>"+i+"</option>"
        else anios += "<option value='"+i+"'>"+i+"</option>";
    }
    
    
    return anios;
}
function generarMeses( mes_s ){
    var meses = "";

    for( var i = 0; i <= 11; i++ ){
        if( i == mes_s ) meses += "<option value='"+i+"' selected>"+traductor.nombreMeses[i]+"</option>";
        else meses += "<option value='"+i+"'>"+traductor.nombreMeses[i]+"</option>";
    }
    
    
    return meses;
}
function generarDias( anio_s, mes_s, dia_s ){
    var dias = "";
    
    var dias_limite = 31;
    if( mes_s == 1 ){
        if( esBisiesto(anio_s) ) dias_limite = 29;
        else dias_limite=28;
    }
    else if( mes_s == 3 || mes_s==5 || mes_s == 8 || mes_s ==10 ) dias_limite=30;
    else dias_limite=31;
    
    if( dia_s > dias_limite ) dia_s = dias_limite;
    for( var i = 1; i <= dias_limite; i++ ){
        if( i == dia_s ) dias += "<option value='"+i+"' selected>"+i+"</option>";
        else dias += "<option value='"+i+"'>"+i+"</option>";
    }
    return dias;
}

var FechaSelect = function( id, clase, padre, ancho, alto, f ){
    
    
    Elemento.apply( this, arguments );
    
    $('#'+padre).append( "<div id='"+id+"'></div>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px',
                        'border' : '0px solid'
                      });

    $('#'+id).append("<select id='"+id+"_dias' class='"+clase+"'>"+generarDias( f.getAnio(), f.getMes()-1, f.getDia() )+"</select>");
    $('#'+id).append("<select id='"+id+"_meses' class='"+clase+"'>"+generarMeses( f.getMes()-1 )+"</select>");
    $('#'+id).append("<select id='"+id+"_anios' class='"+clase+"'>"+generarAnios( f.getAnio() )+"</select>");
    
    $( '#'+id+"_dias" ) .css( {'width': ancho*0.25+'px',
                                'height': alto+'px'
                      });
    $( '#'+id+"_meses" ) .css( {'width': ancho*0.4+'px',
                                'height': alto+'px'
                      });
    $( '#'+id+"_anios" ) .css( {'width': ancho*0.35+'px',
                                'height': alto+'px'
                      });
    
    $( '#'+id+"_anios" ).change( function(){
        var dia = $('#'+id+"_dias option:selected").val();
        $( '#'+id+"_dias" ).empty();
        $('#'+id+"_dias" ).append( generarDias( $('#'+id+"_anios option:selected").val(), $( '#'+id+"_meses option:selected").val(), dia ));
    });
    $( '#'+id+"_meses" ).change( function(){
        var dia = $('#'+id+"_dias option:selected").val();
        $( '#'+id+"_dias" ).empty();
        $('#'+id+"_dias" ).append( generarDias( $('#'+id+"_anios option:selected").val(), $( '#'+id+"_meses option:selected").val(), dia ));
    });
    
}
FechaSelect.prototype = new Elemento( );
FechaSelect.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id+'_in' ).css( opciones );
}
FechaSelect.prototype.getAnio = function( ){
    return $('#'+this.id+"_anios option:selected").val();
}
FechaSelect.prototype.getMes = function( ){
    return $('#'+this.id+"_meses option:selected").val();
}
FechaSelect.prototype.getDia = function( ){
    return $('#'+this.id+"_dias option:selected").val();
}

var SexoSelect = function( id, clase, padre, ancho, alto ){
    
    Elemento.apply( this, arguments );
    
    $('#'+padre).append( "<div id='"+id+"'></div>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px',
                        'border' : '0px solid'
                      });

    var sexo = "";
    for( var i = 0; i < traductor.identidadSexual.length; i++ ){
        sexo += "<option value='"+i+"'>"+ traductor.identidadSexual[i]+"</option>";
    }
    
    $('#'+id).append("<select id='"+id+"_sexo' class='"+clase+"'>"+sexo+"</select>");
    $( '#'+id+"_sexo" ) .css( {'width': ancho+'px',
                                'height': alto+'px'
                      });
    
}
SexoSelect.prototype = new Elemento( );
SexoSelect.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id+'_in' ).css( opciones );
}
SexoSelect.prototype.getSexo = function( ){
    return $('#'+this.id+"_sexo option:selected").val();
}

var FotoGaleria = function( id, clase, padre, ancho, alto, fotoUsuario, index ){
    
    Elemento.apply( this, arguments );
    
    this.foto = fotoUsuario;
    this.index = index;
    
    var fotoAncho = 0;
    var fotoAlto = 0;
    
    if( this.foto.ancho > this.foto.alto ){
        fotoAncho = ancho*0.83;
        fotoAlto = (this.foto.alto/this.foto.ancho)*ancho*0.83;
    }
    else{
        fotoAlto = ancho*0.75;
        fotoAncho = (this.foto.ancho/this.foto.alto)*ancho*0.75;
    }
    

    if( this.foto.idUsuario == '#' ) {
        this.p1 = new Contenedor( id, clase, padre, ancho, alto, { 'border':'1px dashed', 'border-radius':'15px', 'opacity':'0.5', 'background-color' : 'white' } );
        this.p1.mover(0,0);
        
        
        
    }else{
        this.p1 = new Contenedor( id, clase, padre, ancho, alto, { } );
        this.i  = new Imagen( id+'_fondo', clase,  id, ancho, alto, pathImagenes+'fotos/foto_fondo.png', {} );
        this.i1 = new Imagen( id+'_foto', clase, id, fotoAncho, fotoAlto, this.foto.src, {} );
        this.et = new Etiqueta( id+'_eti', clase+'_eti', id, ancho*0.85, alto*0.25, this.foto.titulo, {} );
    
        this.p1.mover(0,0);
        this.i.colocar( this.p1, 0, 0, 0, 0 );
        this.i1.colocar( this.p1, 4, 4, 0, -this.p1.ancho*0.1 );
        this.et.colocar( this.p1, 7,7, 0, 0);
        
        
        var aux = this;
        
        
        
        $( '#'+id ).click( function( ){        
            seleccionarFoto( aux );
        });
        
        $( '#'+id ).mouseover( function( ){  
            $( '#'+aux.id ).css( 'border', '1px solid #01DF3A ');
        });
        $( '#'+id ).mouseout( function( ){        
            $( '#'+aux.id ).css( 'border', '0px dashed green ');
        });
    }
}
FotoGaleria.prototype = new Elemento( );
FotoGaleria.prototype.modificarTitulo = function( tituloNuevo ){
    this.et.cambiarTexto(tituloNuevo);
}

var FotoGaleriaModificable = function( id, clase, padre, ancho, alto ){
    
    Elemento.apply( this, arguments );

    this.p1 = new Contenedor( id, clase, padre, ancho, alto, {} );
    this.i  = new Imagen( id+'_fondo',clase, id, ancho, alto, pathImagenes+'fotos/foto_fondo.png', {} );
    this.i1 = new Imagen( id+'_foto', clase, id, this.ancho*0.83, this.ancho*0.75, pathImagenes+'fotos/foto_no_existe.png', { } );
    this.et = new InputText( id+'_eti', clase, id, ancho*0.85, alto*0.22, '', 100, { 'border':'1px dashed', 'border-radius':'15px', 'opacity':'0.5', 'text-align':'center', 'font-size':'0.9em', 'font-family':'verdana'} );
    
    this.eliminar = new Boton( id+'eliminar', clase+'_btn', id, ancho*0.7, alto*0.15, 'Eliminar foto', {'background-color':c_rojo01});
    this.guardar = new Boton( id+'guardar', clase+'_btn', id, ancho*0.7, alto*0.15, 'Guardar cambios', {'background-color':c_verde01});
    
    
    this.i.colocar( this.p1, 0, 0, 0, 0 );
    this.guardar.colocar( this.p1, 7, 1, 0, this.p1.ancho*0.10, 'hidden');
    this.eliminar.colocar( this.guardar, 7, 1, 0, this.p1.ancho*0.05, 'hidden');
    this.i1.colocar( this.p1, 4, 4, 0, -this.p1.ancho*0.1 );
    this.et.colocar( this.p1, 7, 7, 0, -this.p1.ancho*0.01 ); 
    
    $('.'+clase+'_btn').css({
        'border-radius': '21px', 'opacity': '0.8', 'color':'black', 'font-size':'0.9em', 'font-family':'verdana'
    });
    
    $('.'+clase+'_btn').mouseover( function(){
        $(this).css('opacity', '0.5');
    });
    $('.'+clase+'_btn').mouseout( function(){
        $(this).css('opacity', '0.8');
    });
    
    $('#'+id+'eliminar').click( function(){
        eliminarFoto();
    });
    
    
        
    
}
FotoGaleriaModificable.prototype = new Elemento( );

FotoGaleriaModificable.prototype.cambiarFoto = function( fotoGaleria ){
    
    this.fotoG = fotoGaleria;
    
    var fotoAncho = 0;
    var fotoAlto = 0;
    
    var al = this.fotoG.foto.alto;
    var an = this.fotoG.foto.ancho;
    
    if( an > al ){
        fotoAncho = this.ancho*0.83;
        fotoAlto = (al/an)*this.ancho*0.83;
    }
    else{
        fotoAlto = this.ancho*0.75;
        fotoAncho = (an/al)*this.ancho*0.75;
    }
    
    this.i1.cambiarImagen( this.fotoG.foto.src, fotoAncho, fotoAlto );
    this.i1.colocar( this.p1, 4, 4, 0, -this.p1.ancho*0.1 );
    
    this.et.setValor( this.fotoG.foto.titulo );

}
FotoGaleriaModificable.prototype.getUsuario = function(){
    return this.fotoG.foto.idUsuario;
}
FotoGaleriaModificable.prototype.getFechaSubida = function(){
    return this.fotoG.foto.fecha;
}
FotoGaleriaModificable.prototype.getIndex = function(){
    return this.fotoG.index;
}


var Select = function( id, clase, padre, ancho, alto, vector, elementoSeleccionado, CSS ){
    
    Elemento.apply( this, arguments );
    
    $('#'+padre).append( "<div id='"+id+"'></div>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px',
                        'line-height': alto+'px',
                        'border' : '0px solid'
                      });

    var opcion = "";
    for( var i = 0; i < vector.length; i++ ){
        if( elementoSeleccionado == i ) opcion += "<option value='"+i+"' selected >"+ vector[i]+"</option>";
        else opcion += "<option value='"+i+"'>"+ vector[i]+"</option>";
    }
    
    $('#'+id).append("<select id='"+id+"_opcion' class='"+clase+"'>"+opcion+"</select>");
    $( '#'+id+"_opcion" ) .css( {'width': ancho+'px',
                                 'height': alto+'px'
                                 
                      });
    $( '#'+id+"_opcion" ) .css(CSS);
    
}
Select.prototype = new Elemento( );
Select.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id+'_in' ).css( opciones );
}
Select.prototype.getSeleccionado = function( ){
    return $('#'+this.id+"_opcion option:selected").val();
}



var LocalidadSelect = function( id, clase, padre, ancho, alto ){
    function generarPaises( id, paisActual ){
    
        $.post("../post/generarPaises.php", { pais: paisActual },
            function( data ){ $( '#'+id ).html( data ); }
        );
    }
    function generarRegiones( id, paisActual ){
        $( '#'+id ).empty();
        $.post("../post/generarRegiones.php", { pais: paisActual },
            function( data ){ 
                $( '#'+id ).html( data );
                if( $('#'+id+" option" ).size() == 1 ) $( '#'+id ).css( {'visibility': 'hidden' });
                else $( '#'+id ).css( {'visibility': 'visible' });
            } 
        );
    }
    function generarLocalidades( id, paisActual, regionActual ){
        $( '#'+id ).empty();
        $.post("../post/generarLocalidades.php", { pais: paisActual, region: regionActual },
            function( data ){ 
                $( '#'+id ).html( data );
                if($('#'+id+" option").size() == 1 ) $( '#'+id ).css( {'visibility': 'hidden' });
                else $( '#'+id ).css( {'visibility': 'visible' });
            } 
        );
    }
    
    Elemento.apply( this, arguments );
    
    $('#'+padre).append( "<div id='"+id+"'></div>" ); 
    
    $( '#'+id ) .css( {'position': 'absolute',
                        'left' : '0px',
                        'top' : '0px',
                        'width': ancho+'px',
                        'height': alto+'px',
                        'border' : '0px solid'
                      });

    $('#'+id).append("<select id='"+id+"_pais' class='"+clase+"' title='Pais'></select>");
    $('#'+id).append("<select id='"+id+"_region' class='"+clase+"'></select>");
    $('#'+id).append("<select id='"+id+"_localidad' class='"+clase+"'></select>");
    
    generarPaises(id+"_pais", 0 );
    generarRegiones( id+"_region", 0 );
    generarLocalidades( id+"_localidad", 0, 0 );
    
    $( '#'+id+"_pais" ).css( { 'width': ancho*0.33+'px', 'height': alto+'px' });
    $( '#'+id+"_region" ).css( {'width': ancho*0.33+'px', 'height': alto+'px' });
    $( '#'+id+"_localidad" ).css( {'width': ancho*0.33+'px', 'height': alto+'px' });
    
    $( '#'+id+"_pais" ).change( function(){
        generarRegiones( id+"_region", $('#'+id+"_pais option:selected").val() );
        generarLocalidades( id+"_localidad", $('#'+id+"_pais option:selected").val(), 0 );
    });
    $( '#'+id+"_region" ).change( function(){
        generarLocalidades( id+"_localidad", $('#'+id+"_pais option:selected").val(), $('#'+id+"_region option:selected").val() );
        
        
    });
}
LocalidadSelect.prototype = new Elemento( );
LocalidadSelect.prototype.cambiarCSS = function( opciones ){
    $( '#'+this.id+'_in' ).css( opciones );
}