var testdata; 
var grid;
var sdoptions_st; 

Ext.onReady(function(){
    var dialog;
    
    /*
    // Taxa Search Results data structure
    var TSRDef = Ext.data.Record.create([
    {name: 'TName'},
    {name: 'TLevel'},
    {name: 'TCount'}
    ]);
     
    var TSRReader = new Ext.data.JsonReader({
        //id: "userid" 
    }, TSRDef);
     
    // create the data store
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: 'GetNames?' + $form.toUrl( 'frmMapSpecies' )}),
        reader: TSRReader
    });
     
    var cm = new Ext.grid.ColumnModel([
        {header: "TName", width: 200, dataIndex: 'TName'},
        {header: "TLevel", width: 75, dataIndex: 'TLevel'},
        {header: "TCount", width: 50, dataIndex: 'TCount'}
    ]);
    cm.defaultSortable = true;
     
    // create the grid
    var grid = new Ext.grid.Grid('user-grid', {
        ds: ds,
        cm: cm,
        loadMask: true
    });
    grid.render();
     
    //ds.load();
     */
    
    var resultList = Ext.get('result-list');    
    
    function showDialog() {
        if (!dialog) {
            dialog = new Ext.BasicDialog("result-dlg", {
                autoTabs:true,
                modal:true,
                width:500,
                height: 200,
                shadow: true,
                minWidth: 500,
                minHeight: 200            
            }); 
            dialog.addKeyListener(27, dialog.hide, dialog);
            dialog.addButton('Close', dialog.hide, dialog);
            
            tabs = dialog.getTabs();
            
            // set up the result renderer, all ajax requests for commentsList
            // go through this render
            renderer = new ResultRenderer(resultList);
            var um = resultList.getUpdateManager();
            um.setRenderer(renderer);
            
            tabs.activate('result-tab');
            //tabs.disableTab('view-tab');
            
            var resultTab = tabs.getTab('result-tab'); 
            var viewTab = tabs.getTab('view-tab'); 
            var downloadTab = tabs.getTab('download-tab'); 
            
            resultTab.on('activate', function(){
                dialog.resizeTo(500, 200); 
            });
            
            viewTab.on('activate', function(){
                showRecords(); 
                dialog.resizeTo(700, 600); 
                //Ext.MessageBox.alert("BioMaps", YAHOO.util.Connect.setForm('frmMapSpecies')); 
            });
            
            downloadTab.on('activate', function(){
                dialog.resizeTo(600, 400); 
            });
            
        // setup the download and cancel species list buttons
        var dlSpecies = Ext.get('dlSpecies'); 
        dlSpecies.on('click', doDownloadMsg, this); 
        
        var ndlSpecies = Ext.get('ndlSpecies'); 
        ndlSpecies.on('click', dialog.hide(), this); 
        //ndlSpecies.hide(); 
            
            
            dialog.on('show', function(){

				tabs.activate('result-tab');
                
                // set the search_type to speciemen search which is default for the hidden field
                /*
                $('st').value="ss";  
                if (sdoptions != null) {
                    if (sdoptions.st == "catnum") {
                        $('st').value="catnum";  
                    }
                }
                 */
                $('st').value=sdoptions_st;  
                
                
                //console.log(YAHOO.util.Connect.setForm($('frmMapSpecies'))); 
                //Ext.MessageBox.alert("Hello", "Hello world dialog on"); 
                um.formUpdate('frmMapSpecies','GetNames'); 
                /*
                var frmMapSpecies = new Ext.form.Form({
                    id:'frmMapSpecies',
                    url: 'GetNames'
                });
                 
                frmMapSpecies.submit(); 
                 */
            });
        }
        
        dialog.show();
        
    }
    
    function showRecords() {
        // load data from server 
        var RecordDef = Ext.data.Record.create([
        {name: 'bid'},     
        {name: 'catNum'},     
        {name: 'geoprec'},
        {name: 'instCode'},
        {name: 'kingdom'},
        {name: 'sciName'},
        {name: 'bor'},
        {name: 'yearcollected'}
        ]);
        var myReader = new Ext.data.JsonReader({
            root: 'sresults', 
            totalProperty: 'totalCount', 
            id: 'bid' 
        }, RecordDef);
        
        
        // create the data store
        var formObject = document.getElementById('frmMapSpecies');     
        var qs = Ext.Ajax.serializeForm('frmMapSpecies'); // YAHOO.util.Connect.setForm(formObject); 
        var dsShowResults = new Ext.data.Store({
            // load using HTTP
            proxy: new Ext.data.HttpProxy({url: 'GetNames?sa=r&' + Ext.Ajax.serializeForm('frmMapSpecies') }), //qs // YAHOO.util.Connect.setForm(document.getElementById('frmMapSpecies'))
            
            // the return will be XML, so lets set up a reader
            reader: myReader
        });
        
        var cm = new Ext.grid.ColumnModel([
        //{header: "ID", width: 40, dataIndex: 'userid'},
        {header: "Catalog Number", width: 80, dataIndex: 'catNum', align: 'left'},
        {header: "Kingdom", width: 75, dataIndex: 'kingdom', align: 'left'},
        {header: "Scientific Name", width: 200, dataIndex: 'sciName', align: 'left'},
        {header: "Institution", width: 90, dataIndex: 'instCode', align: 'left'},
        {header: "Basis of record", width: 85, dataIndex: 'bor', align: 'left'},
        {header: "Precision", width: 50, dataIndex: 'geoprec', align: 'left'}
        ]);
        cm.defaultSortable = true;
        
        // create the grid
        grid = new Ext.grid.Grid('view-grid', {
            ds: dsShowResults,
            cm: cm,
            autoHeight: true, 
            loadMask: true
        });
        
        //var um = grid.getUpdateManager();
        //var um = grid.getUpdateManager();
        //um.formUpdate('frmMapSpecies','GetNames?sa=r'); 
        grid.on("rowclick", sprowClick);
        grid.render();
        
        var gridFoot = grid.getView().getFooterPanel(true);
        // add a paging toolbar to the grid's footer
        var paging = new Ext.PagingToolbar(gridFoot, dsShowResults, {
            pageSize: spListLimit,
            displayInfo: true,
            displayMsg: 'Displaying taxon search results {0} - {1} of {2}',
            emptyMsg: "No species to display"
        });
        
        dsShowResults.load();
        
    }
    
    function showCNDialog() {
        sdoptions_st = 'catnum'; 
        showDialog(); 
    }
    
    function showSSDialog() {
        sdoptions_st = 'ss'; 
        showDialog(); 
    }
    
    
    var goSearch = Ext.get('goSearch');
    goSearch.on('click', showSSDialog, this); 
    
    var goCatNum = Ext.get('goCatNum');
    //goCatNum.on('click', showDialog({st: 'catnum'}), this); 
    goCatNum.on('click', showCNDialog, this); 
    
    
    
});


function doDownloadMsg() {
    //Ext.MessageBox.alert("Biomaps", "Downloads will be available soon."); 
    location.href='GetNames?sa=d&' + Ext.Ajax.serializeForm('frmMapSpecies'); // YAHOO.util.Connect.setForm(document.getElementById("frmMapSpecies")) 
}

function sprowClick(g,idx,evt) {
    var spid = grid.getSelectionModel().getSelected().data.catNum; 
    //Ext.Msg.alert("WISE", "hello, you've clicked row# " + idx + " and pid: " + spid); 
    
    getMoreInfo(spid); 
}

// This class handles rendering JSON into taxa search results
var ResultRenderer = function(list){
    // create a template for each JSON object
    var tpl = new Ext.DomHelper.Template(
    '<li>{TName}({TLevel})</li>' + 
    '<li>{TCount}</li>' + 
    '<li>' + 
    //'<a href="#" class="showrecords">Show Records</a> | ' + 
    '<a href="SpecimenSearch?cqn={TName}&cql={TLevel}" class="addtomap_removeme"  onclick="ShowMenu(event.clientX, event.clientY, this.href); event.returnValue=false; event.cancelBubble=true; return false;" onblur="HideMenu();">Add to map</a>' + 
    ' &nbsp; ' + 
    //'<a href=\"#\" class=\"download\" id=\"doDownload\">Download</a>' + 
    '</li>'
    ); 
    
    this.parse = function(json){
        try{
            return eval('(' + json + ')');
        }catch(e){}
        return null;
    };
    
    // public render function for use with UpdateManager
    this.render = function(el, response){
        var data = this.parse(response.responseText);
        testdata = data; 
        if(!data || !data.taxaresults || data.taxaresults.length < 1){
            el.update('There are no records available.');
            return;
        }
        // clear loading
        el.update('');
        for(var i = 0, len = data.taxaresults.length; i < len; i++){
            this.append(data.taxaresults[i]);
        }
        
        // setup the download link
        //var doDownload = Ext.get('doDownload');  
        //doDownload.on('click', doDownloadMsg, this); 
        
        // set the total taxon count so don't have to redo search everytime
        // surely, this can be done better.
        document.getElementById('tcnt').value = data.taxaresults[0].TCount;  
        
    };
    
    // appends a comment 
    this.append = function(data){
        tpl.append(list.dom, data);
    };
};

// This class handles rendering JSON into comments
var ResultRenderer2 = function(list){
    // create a template for each JSON object
    var tpl = new Ext.DomHelper.Template(
    '<li>{TName}({TLevel})</li>' + 
    '<li>{TCount}</li>' + 
    '<li>' + 
    //'<a href="#" class="showrecords">Show Records</a> | ' + 
    '<a href="SpecimenSearch?cqn={TName}&cql={TLevel}" class="addtomap"  onclick="ShowMenu(event.clientX, event.clientY, this.href); event.returnValue=false; event.cancelBubble=true; return false;" onblur="HideMenu();">Add to map</a>' + 
    '<a href=\"#\" class=\"download\" id=\"doDownload\">Download</a' + 
    '</li>'
    ); 
    
    this.parse = function(json){
        try{
            return eval('(' + json + ')');
        }catch(e){}
        return null;
    };
    
    // public render function for use with UpdateManager
    this.render = function(el, response){
        var data = this.parse(response.responseText);
        if(!data || !data.sresults || data.sresults.length < 1){
            el.update('There are no records available.');
            return;
        }
        // clear loading
        el.update('');
        for(var i = 0, len = data.sresults.length; i < len; i++){
            this.append(data.sresults[i]);
        }
    };
    
    // appends a comment 
    this.append = function(data){
        tpl.append(list.dom, data);
    };
};



var dlgMoreInfo; 
function getMoreInfo(catnum) {
    if (!dlgMoreInfo) {
        dlgMoreInfo = new Ext.BasicDialog("dlgMoreInfo", {
            autoTabs: true,
            height: 400,
            width: 500,
            minHeight: 100,
            minWidth: 150,
            modal: true,
            proxyDrag: true,
            shadow: true
        });
        dlgMoreInfo.addKeyListener(27, dlgMoreInfo.hide, dlgMoreInfo); // ESC can also close the dialog
        dlgMoreInfo.addButton('Close', dlgMoreInfo.hide, dlgMoreInfo);
        
    }
    
    var mspinfo = Ext.get('mspinfo');
    
    var renderer = new MoreInfoRenderer(mspinfo);
    var um = mspinfo.getUpdateManager();
    um.setRenderer(renderer);
    um.update("GetNames", "st=mi&cn=" + catnum); 
    
    dlgMoreInfo.show(); 
}

// This class handles rendering MMInfo in JSON format as a table on client side
var MoreInfoRenderer = function(list){
    // create a template for each JSON object
    var tpl = new Ext.DomHelper.Template(
    '<table class="si">' + 
    '<tr align="left"><td>Catalog Number</td><td>{catnum}</td></tr>' + 
    '<tr align="left"><td>Kingdom</td><td>{kingdom}</td></tr>' + 
    '<tr align="left"><td>Phylum</td><td>{phylum}</td></tr>' + 
    '<tr align="left"><td>Order</td><td>{order_attr}</td></tr>' + 
    '<tr align="left"><td>Class</td><td>{Class}</td></tr>' + 
    '<tr align="left"><td>Family</td><td>{family}</td></tr>' + 
    '<tr align="left"><td>Genus:</td><td>{genus}</td></tr>' + 
    '<tr align="left"><td>Species:</td><td>{species}</td></tr>' + 
    '<tr align="left"><td>Subspecies:</td><td>{subspecies}</td></tr>' + 
    '<tr align="left"><td>Scientific Name</td><td>{sci_name}</td></tr>' + 
    '<tr align="left"><td>Collection code</td><td>{coll_code}</td></tr>' + 
    '<tr align="left"><td>Collection date</td><td>{coll_date}</td></tr>' + 
    '<tr align="left"><td>Author</td><td>{author}</td></tr>' + 
    '<tr align="left"><td>Institution</td><td>{inst_code}</td></tr>' + 
    '<tr align="left"><td>Coordinates:</td><td>{longitude}, {latitude}</td></tr>' + 
    '<tr align="left"><td>Precision</td><td>{geo_prec}</td></tr>' + 
    '<tr align="left"><td>County</td><td>{County}</td></tr>' + 
    '<tr align="left"><td>State/Province</td><td>{State_province}</td></tr>' + 
    '<tr align="left"><td>Country</td><td>{country}</td></tr>' + 
    '<tr align="left"><td>Continent/Ocean</td><td>{Continent_Ocean}</td></tr>' + 
    '<tr align="left"><td>Minimum Elevation</td><td>{minimum_elevation}</td></tr>' + 
    '<tr align="left"><td>Maximum Elevation</td><td>{maximum_elevation}</td></tr>' + 
    '<tr align="left"><td>Minimum Depth</td><td>{minimum_depth}</td></tr>' + 
    '<tr align="left"><td>Maximum Depth</td><td>{Maximum_depth}</td></tr>' + 
    '<tr align="left"><td>Basis of record</td><td>{Basis_of_record}</td></tr>' + 
    '<tr align="left"><td>Sex</td><td>{Sex}</td></tr>' + 
    '<tr align="left"><td>Preparation type</td><td>{Preparation_type}</td></tr>' + 
    '<tr align="left"><td>Year Collected</td><td>{Year_Collected}</td></tr>' + 
    '<tr align="left"><td>Month Collected</td><td>{Month_Collected}</td></tr>' + 
    '<tr align="left"><td>Day Collected</td><td>{Day_Collected}</td></tr>' + 
    '<tr align="left"><td>Julian Day</td><td>{Julian_Day}</td></tr>' + 
    '<tr align="left"><td>Time of day</td><td>{Time_of_day}</td></tr>' + 
    '<tr align="left"><td>Images</td><td><a href="{imageurl}" target="_blank"><img src="{imageurl}" width="50%" /></a></td></tr>' + 
    '</table>'
    ); 
    
    this.parse = function(json){
        try{
            return eval('(' + json + ')');
        }catch(e){}
        return null;
    };
    
    // public render function for use with UpdateManager
    this.render = function(el, response){
        var data = this.parse(response.responseText);
        if(!data || !data.moreinfo || data.moreinfo.length < 1){
            el.update('There are no details available for this record.');
            return;
        }
        // clear loading
        el.update('');
        for(var i = 0, len = data.moreinfo.length; i < len; i++){
            this.append(data.moreinfo[i]);
        }
    };
    
    // appends a comment 
    this.append = function(data){
        tpl.append(list.dom, data);
    };
};