/* 
 * Visualizador de paneles que pueden ordenarse, agregarse y cerrarse.
 * Cada panel obtiene los datos por Ajax desde el servidor.
 * Puede mostrar HTML, mostrar un flash o ejecutar código javascript.  
 */
Visualizador = function() {};
Visualizador.prototype = {
    listadoConsultas: null,
    urls: null,
    ordenador: null,
    muestraEn: null,
    grupo: null,
    columnaDondeSeAgrega: 1,
    menu: null,
    tabulador: null,

    inicio: function(datos) {
        this.urls = datos.urls;
        this.grupo = datos.grupo;
        this.muestraEn = datos.muestraEn;
        this.menu = datos.menu;
        this.tabulador = datos.tabulador;
        this.columnaDondeSeAgrega = datos.columnaDondeSeAgrega ? datos.columnaDondeSeAgrega : this.columnaDondeSeAgrega;
        this.inicializaListadoConsultas(); 
        this.inicializaOrdenador();
    },
    
    inicializaOrdenador: function() {
        this.ordenador = new Ordenador({
            url:                this.url('configuracionColumnas'),
            urlActualizacion:   this.url('actualizacionColumnas'),
            muestraEn:          this.muestraEn,
            visualizador:       this,
            grupo:              this.grupo,
            funcionConstructora: this.nuevoObjetoVisible
        });
    },
    
    /*
     * Crea uno de los objetos que se ven en las columnas y que se pueden ordenar.
     */     
    nuevoObjetoVisible: function(datos) {
        return new Panel({
            id: datos.descripcion.id,
            url: datos.descripcion.consulta,
            titulo: datos.descripcion.nombre,
            muestraEn: datos.columna,
            parametros: {},
            dataType: 'html',
            eventos: {
                panelCerrado: this.visualizador.panelCerrado
            },
            visualizador: this.visualizador
        });
    },
    
    inicializaListadoConsultas: function() {
        this.listadoConsultas = new ListadoConsultas({
            url: this.url('listadoConsultas'),
            muestraEn: this.menu,
            visualizador: this,
            eventos: {
                carga: this.consultasCargadas,
                itemClick: this.consultaElegida
            }
        });
    },
    
    url: function(nombre) {
        return this.urls[nombre];
    },
    
    consultasCargadas: function(evento) {
        //console.log('consultasCargadas');
    },
    
    consultaElegida: function(evento, datos) {
        if(evento.type == 'itemClick') {
            //console.log('consultasElegida ' + datos.consulta.nombre);
            if(datos.consulta.solapaCompleta) {
                datos.objeto.visualizador.abreSolapaCon(datos.consulta);
            }
            else {
                datos.objeto.visualizador.muestraPanelDe(datos.consulta);
            }
            return false;
        }
    },
    
    abreSolapaCon: function(consulta) {
        this.tabulador.abreSiNoExiste({
            id: consulta.id,
            titulo: consulta.nombre,
            url: consulta.consulta,
            constructora: function(datos) { /*console.log('nueva solapa de consulta' + datos.indice);*/ }
        });
    },
    
    muestraPanelDe: function(consulta) {
        if(this.existePanel(consulta.id)) {
            this.resaltaPanel(consulta.id);
        }
        else {
            var panel = new Panel({
                id:         consulta.id,
                url:        consulta.consulta,
                titulo:     consulta.nombre,
                muestraEn:  '#' + this.grupo + '-columna-' + this.columnaDondeSeAgrega,
                parametros: {},
                dataType:   'html',
                eventos: {
                    panelCerrado: this.panelCerrado
                },
                visualizador: this
            });
            this.serializaPaneles();
        }
    },
    
    panelCerrado: function(evento) {
        evento.data.objeto.visualizador.serializaPaneles({ excepto: evento.data.objeto.id });
    },
    
    serializaPaneles: function(datos) {
        this.ordenador.serializaOrden(null, null, datos ? datos.excepto : null);
    },
    
    existePanel: function(id) {
        return this.panelesConId(id).length > 0;
    },
    
    resaltaPanel: function(id) {
        var panel = $(this.panelesConId(id));
        var colorOriginal = panel.css('backgroundColor');
        $(panel)
            .animate({ backgroundColor: 'rgb(220,220,220)' }, 100)
            .animate({ backgroundColor: colorOriginal }, 100);
    },
    
    panelesConId: function(id) {
        return $.grep($('.' + this.grupo + ' .panelOrdenable'), function(panel) {
            return $(panel).data('objeto').id == id;
        });
    }
    
};