var resultTabs,border,viewport,tree,dWin,queryTabs;
var tree,layerloader,layerJSON;
var viewport;
var layerArray  = new Array();
var solarYears  = [1998,1999,2000,2001,2002,2003,2004,2005];
var graphMonths = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC','ANNUAL'];
var slideMonths = ['ANNUAL','JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
var perezMonths = ['perezANN', 'perezJAN', 'perezFEB', 'perezMAR', 'perezAPR', 'perezMAY', 'perezJUN', 'perezJUL', 'perezAUG', 'perezSEP', 'perezOCT','perezNOV','perezDEC'];


var size   = new OpenLayers.Size(30,30);
var offset = new OpenLayers.Pixel(0,0);  
var icon   = new OpenLayers.Icon('assets/images/blue_pin.gif',size,offset);

var map,markers,gbase,gsat,ghybridi,gterrain;

var bounds  = new OpenLayers.Bounds(-165,10,-60,60);
var lon     = -95;
var lat     = 35;
var zoom    = 4;

google.load("visualization", "1", {packages:["linechart","table", "columnchart"]});

OpenLayers.IMAGE_RELOAD_ATTEMPTS = 10;
OpenLayers.Util.ImageLoadErrorColor = "transparent";
Ext.BLANK_IMAGE_URL = 'http://mercator.nrel.gov/ext/resources/images/default/s.gif';


Array.prototype.sum = function(){
    for(var i=0,sum=0;i<this.length;sum+=this[i++]);
    return sum;
}

Array.prototype.max = function(){
    return Math.max.apply({},this)
}
Array.prototype.min = function(){
    return Math.min.apply({},this)
}


Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    maxWidth:100,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return slider.getValue();
    }
});



function init(){

    var options = {
        numZoomLevels: 20,
        projection: new OpenLayers.Projection("EPSG:900913"),
        units: "m",
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.MousePosition()
        ]
    }

    map = new OpenLayers.Map('map',options);

    gbase = new OpenLayers.Layer.Google("Google Basemap",
        {
            type: G_NORMAL_MAP,
            visibility:true,
            'sphericalMercator':true
        });

    gsat = new OpenLayers.Layer.Google("Google Satellite",
        {
            type: G_SATELLITE_MAP,
            'sphericalMercator':true
        });

    ghybrid = new OpenLayers.Layer.Google("Google Hybridp",
        {
            type: G_HYBRID_MAP,
            'sphericalMercator':true
        });
  
    gterrain = new OpenLayers.Layer.Google("Google Hybridp",
        {
            type: G_PHYSICAL_MAP,
            'sphericalMercator':true
        });
 
    map.addLayers([gbase,gsat,gterrain,ghybrid]);

    // Add toolbar controls to map
    for (control in tbar_items) {
        map.addControl(tbar_items[control]);
    }

    var latlon = new OpenLayers.LonLat(lon,lat);
    latlon.transform(map.displayProjection, map.getProjectionObject());
    map.setCenter(latlon, zoom);
}


/**
   Main Ext functions - executes on page load
 */
Ext.onReady(function(){

    Ext.QuickTips.init();

    resultTabs = new Ext.TabPanel({
        region: 'south',
        id: 'qresult_panel',
        collapsible: true,
        collapsed: true,
        title:'Query Results',
        height: 225,
        maxSize: 350,
        cmargins: '5 0 0 0',
        contentEl: 'south',
        autoScroll:true
    });

    border = {
        id:'border-panel',
        title: 'Solar Power Prospector',
        layout:'border',
        bodyBorder: false,
        defaults: {
            collapsible: true,
            split: true,
            animFloat: false,
            autoHide: false,
            useSplitTips: true
        },
        items: [
            resultTabs,
        {
            collapsible: false,
            id:'border_center',
            region:'center',
            margins: '0 0 0 0',
            contentEl: 'map',
            tbar:getTools()
        }]
    };
 

    var centerpanel = {
        id: 'content-panel',
        region: 'center', // this is what makes this panel into a region within the containing layout
        layout: 'card',
        margins: '0 5 5 0',
        activeItem: 0,
        border: false,
        items: [ border ]
    };

    /**
      page layout, controls positions of EXT panels
    */
    viewport = new Ext.Viewport({
        layout:'border',
        items:[
            new Ext.BoxComponent({ // raw
                region:'north',
                el: 'north',
                height:5
            }),{
                region:'west',
                id:'west-panel',
                title:'&nbsp',
                split:true,
                width: 225,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'0 0 5 5',
                layout:'fit',
                items:
                new Ext.TabPanel({
                        border:false,
                        activeTab:0,
                        items:[{
                            contentEl: 'west',
                            title:'Layers',
                            border:false
                        },{
                             title:'Legend',
                             border:false,
                             autoScroll:true,
                             deferredRender: true,
                             contentEl: 'main_legend'
                        }]
                })
             },
                centerpanel
            ]
  });

  
    viewport.findById('border_center').getTopToolbar().add('->',
    {
          text: 'Baselayers',
          pressed:false,
          menu:baseMenu,
          handler: function(){
          }
    });


  /**
   *   Call the OpenLayers init functions
   */
  init();


  /**
      EXT JS Tree Panel Functions
   */
  layerloader = new Ext.tree.TreeLoader({dataUrl:'assets/json/layer.json'});

  tree = new Ext.tree.TreePanel({
      el:'tree-div',
      border:false,
      animate:true,
      loader: layerloader,
      enableDD:false,
      listeners:{
           'checkchange' : function(node){
                var lyr = layerArray[node.id];
                lyr.getVisibility() ? lyr.setVisibility(false) : lyr.setVisibility(true);
                if (node.id == 'perezANN') { solarTimeSeries(); }
                buildLegend();
           },
           /** view layer controls */
            'contextmenu' : function(node){
                        node.select();
                        lyr = node.id;
                        // if not a folder: show menu
                        if(node.attributes.cls != 'folder'){
                             var menuC = new Ext.menu.Menu({id:'main-menu'});
                             //menuC.add({text: 'Zoom to Layer',handler:function(){layerArray[lyr].zoomToLayer();}});
                             menuC.add({text: 'View Legend',menu:[new Ext.menu.LegendItem({
                                 title:'Legend',
                                 contentEl:'legend',
                                 listeners:{ 'render':  function(){ getLegend(lyr);}}
                             })]});
                             menuC.add({text: 'Adjust Transparency',menu:[new Ext.menu.LegendItem({
                                 title:'Transparency',
                                 //width:186,
                                 //height:25,
                                 items:new Ext.Slider({ 
                                    width:185,
                                    height: 25,
                                    vertical:false,
                                    value:layerArray[lyr].opacity*100,
                                    minValue: 0,
                                    maxValue: 100,
                                    listeners:{ drag: function(){ layerArray[lyr].setOpacity(this.getValue()/100);} }
                                 })
                             })]});
                             menuC.show(node.ui.getAnchor());
                        }
            },
           'load' : function(node){
             if(node.attributes.cls == 'folder'){
             for (var i = 0; i < node.childNodes.length; i++){
                  if (node.childNodes[i].attributes.cls != 'folder'){
                    var id          = node.childNodes[i].attributes.id;
                    var legend      = node.childNodes[i].attributes.legend;
                    var wmslink     = node.childNodes[i].attributes.wmslink;
                    var vis         = node.childNodes[i].attributes.checked;
                    var lyr_opacity = node.childNodes[i].attributes.opacity;
                    var lyr_sld     = node.childNodes[i].attributes.sld;
                    var view_name   = node.childNodes[i].attributes.view_name;
                    var text        = node.childNodes[i].attributes.text;
                    loadLayer(id,wmslink,vis,lyr_opacity,lyr_sld,view_name,text,legend);
                  }
             }
          }
        }
      }
    });

    var root = new Ext.tree.AsyncTreeNode({ text:'GIS Layers' })
    tree.setRootNode(root);
    tree.render();
    root.expand();


    /**
      Hide the loading mask after a certain amount of time
    */
    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
        //document.getElementById('slider2').style.visibility = 'visible';
    },3000);


     /**
      * Legend menu item: extends the rest
      */
     Ext.menu.LegendItem = function(config){
         Ext.menu.LegendItem.superclass.constructor.call(this, new Ext.Panel(config), config);
     };
     Ext.extend(Ext.menu.LegendItem, Ext.menu.Adapter, {});

     // define global time series slider & call the function to create it 
     var timeSeriesSlider;
     slider();     
     
// END of Ext.OnReady() function
});


// builds the time series slider for the DNI data
function slider(){
    var tip = new Ext.ux.SliderTip({
        getText: function(slider){
            return String.format('Viewing {0}', slideMonths[slider.getValue()]);
        }
    });

    // create the panel for the time series slider
    timeSeriesPanel = new Ext.Window({
    title: 'DNI Time Series',
    width:200,
    hieght:100,
    closeAction:'hide',
    closeable:true,
    items:[ new Ext.Slider({ 
        width:200, 
        height: 25,
        vertical:false, 
        value:0, 
        minValue: 0, 
        maxValue: 12,
        plugins: tip,
        listeners:{drag: function(){
            layerArray['perezANN'].mergeNewParams({'layers':perezMonths[parseInt(this.value)]});
        }}
        })]
    });
    timeSeriesPanel.setPosition(800,700);
    timeSeriesPanel.show();
}



     
/**
  Loads each layer into the map
  Uses data from the tree loader json
*/
function loadLayer(id,wmslink,vis,lyr_opacity,lyr_sld,view_name,text,legend){
     if (id != 'oam'){
         layerArray[id] = new FreebaseLayer( '',wmslink,{layers: id, transparent:'true',sld: lyr_sld},
                          {  
                             visibility: vis, 
                             opacity: lyr_opacity, 
                             view_name: view_name, 
                             display_name: text,
                             legend: legend 
                          });
         map.addLayer(layerArray[id]);
     }

     if (id == 'states'){
         layerArray[id].setVisibility(true);
     }

     markers = new OpenLayers.Layer.Markers( "Markers",{displayInLayerSwitcher: false});
     map.addLayer(markers);     
}



function changeOpacity(newOpacity) {
    var layer = $('layer_value').value;
    var opa   = newOpacity;
    if (layerArray[layer]){
       layerArray[layer].setOpacity(opa);
    }
}



/**
  Show / Hide the time series slider
*/
function solarTimeSeries(){
    if (layerArray['perezANN'].getVisibility()){
        timeSeriesPanel.show();
    } else {
        timeSeriesPanel.hide();
    }   
}


function openSearch() {
   Ext.Msg.prompt('Find a Location', 'Enter an address, city, state, or a Lat/Long ', function(btn, text){
       if(btn == 'ok' && text){
         var place = text;
         search(place);
       } else if(btn == 'cancel'){

       }
    });
}

function search(place)
{
    if (place){
       var GeoCoder = new GClientGeocoder();
       GeoCoder.getLatLng(place,function(point) {
           if (!point) {
                alert(addr + " not found");
           } else {
                newPoint = new OpenLayers.LonLat(point.lng(),point.lat());
                newPoint.transform(map.displayProjection,map.getProjectionObject());
                map.setCenter(new OpenLayers.LonLat(newPoint.lon,newPoint.lat),13);
                //markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(point.lng(),point.lat()),icon));
           }
       });
    } else {
       alert("Please Enter either an address, city, state, or Lat/Long");
    }
}

function ajaxError()
{
    alert("There was an error with the Ajax call to the server.");
}




/**
 * Functons to graph the monthly averages of DNI at some location
 */
function initGraph(feature)
 {
        // opens the graph window (with empty div holders)
        // the toolbar button opens it first (if its hidden this opens it again)
        openGraphWin()
   
        // defines the loading image used during the ajax request
        var loadingImg = '<center><img style="padding-top:100px" src="http://mercator.nrel.gov/ext/resources/images/default/shared/large-loading.gif"><center>';
        // set the loading image in both tabs 
        document.getElementById('chart_div').innerHTML = loadingImg;
        document.getElementById('table').innerHTML = '<center><img style="padding-top:50px" src="http://mercator.nrel.gov/ext/resources/images/default/shared/large-loading.gif"><center>';
        
        // get the lon-lat of the user's point and transform it into WGS84
        var lat = feature.y;
        var lon = feature.x;
        var latlon = new OpenLayers.LonLat(lon,lat);
        latlon.transform( map.getProjectionObject(), map.displayProjection);
 
        // make the ajax call to the server - send the lon/lat
        Ext.Ajax.request({
            url:'assets/php/getResourceData.php',
            success: buildGraph,
            failure: ajaxError,
            params: { lat : latlon.lat, lon : latlon.lon }
        });

        // make the ajax call to the server - send the lon/lat
        Ext.Ajax.request({
            url:'assets/php/getResourceDataTable.php',
            success: buildTable,
            failure: ajaxError,
            params: { lat : latlon.lat, lon : latlon.lon }
        });
 }


/**
 * Builds the graph with returned resources data
 */
var data;
var mMeans = [];
var mData = [];
function buildGraph(request)
{
    var years = ['1998','1999','2000','2001','2002','2003','2004','2005','Annual'];
    // returned JSON data 
    var dataJSON  = eval(request.responseText);
    for (var i =0; i < dataJSON.length; i++){
        mMeans[i] = [];
        for (var j = 0; j < dataJSON[i]['data'].length; j++ ){
            mMeans[i][j] = parseFloat(dataJSON[i]['data'][j]); 
        }
    }

    //build month array - one array of 8 values for each month
    for (var i = 0; i < 13; i++) {
       var temp = [];
       for (var j = 0; j < 8; j++){
           temp[j] = mMeans[j][i]; //mdata[jan] = mdata[1998 - 2005 - jan]
       } 
       mData[i] = temp;
    }

    // full table
    data      = new google.visualization.DataTable();
    
    // define the datatable columns
    data.addColumn('string', 'Month');
    data.addColumn('number', 'Max');
    data.addColumn('number', 'Min');
    data.addColumn('number', 'Mean');
    
    // for each month (13 for annual) 
    for (var i=0; i<13; i++){
        data.addRows(1);
        data.setValue(i, 0, graphMonths[i]); // month name
        data.setValue(i, 1, mData[i].max()); // year 1   
        data.setValue(i, 2, mData[i].min()); // year 2
        data.setValue(i, 3, mData[i].sum()/8); // year 2
    }

    var div = document.getElementById('chart_div');
    div.innerHTML = '';

    //draw the  
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: div.width-10, height: div.height-10, smoothLine: true, titleY: 'Wh / sq. m / day', title: 'Solar Resource Variability'});

    
 
    //graphWin.items[0].items[1].disabledactivate
    //draw the table 
    /*var dataTable = document.createElement("Table");
    dataTable.className = 'query';
    for (var i = 0; i < mMeans.length; i++) {
        var row = dataTable.insertRow(i);
        if (i == 0) {row.className = 'hed';}
        for (var j = 0; j < mMeans[i].length; j++) {
           var td = row.insertCell(j);
           if (i == 0){
               td.innerHTML = graphMonths[j]; 
           }
           td.innerHTML = mMeans[i][j];
        }
    }
    document.getElementById('table').innerHTML = '';;
    document.getElementById('table').appendChild(dataTable);
    */
    //var table = new google.visualization.Table(document.getElementById('table'));
    //table.draw(data, {showRowNumber: true});

}


/* 
  Function: buildTable
   Builds the resource table for the resource assessment tool on CSP
  
*/
function buildTable(request){
    var myTable = request.responseText;
    //alert(myTable); 
    //document.getElementById('table').innerHTML = '';
    document.getElementById('table').innerHTML = myTable;
}



 /**
    Creates the graph window
 */
 var graphWin =  new Ext.Window({
            title: 'Resource Variability',
            closeAction:'hide',
            width:690,
            height:445, 
            resizable:true,
            modal:false, 
            animate:true,
            autoScroll:true,
            buttonAlign:'center',
            collapsible:true, 
            items:
              new Ext.TabPanel({
                   border:false,
                       activeTab:0,
                       items:[{
                           contentEl: 'chart_div',
                           title:'Resource Graph'
                       },{
                           title:'Data Table',
                           autoScroll:true,
                           //disabled:true,
                           //listeners:{'acitvate':function(){alert('activated');}}
                           contentEl: 'graph_table'
                       }]
            })
        });
        graphWin.setPosition(575,5);

/**
  Probably not needed, but used to do more. 
  Just shows the graph win if its hidden
*/
function openGraphWin()
{
     graphWin.show();
}


/**
  Get the legend from mapserver for that layer. 
  Produces realy ugly legends
  @param(id): pointer to a layer 
*/
function getLegend(id)
{
         
         var legend = layerArray[id].legend;
         //var url = "http://mercator.nrel.gov/cgi-bin/solar_wms?";
         //    url = url + "SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&FORMAT=image/png";
         //    url = url + "&LAYER=" + legend_id;
         document.getElementById('legend').innerHTML = "<img src=" + legend + ">";
}


/**
  Build a list of legend from mapserver for that layer. 
*/
function buildLegend()
{
    var html = '';
    var viz = tree.getChecked('id');
    for (var i = 0; i < viz.length; i++) {
        if (layerArray[viz[i]] && viz[i] != 'elev' && viz[i] != 'oam' ){
            //alert(viz[i]);
            //if (!layerArray[viz[i]].hasOwnProperty) continue;
            var legend = layerArray[viz[i]].legend;
            html = html + "<img src='"+ legend +"'><br>";
        } 
       
    }
    document.getElementById('main_legend').innerHTML = html;
}



/**
*    Creates the resource assessment wizard
*/
var rsrcWin;
function openResourceWizard()
{
     if (!rsrcWin){
        rsrcWin = new Ext.Window({
            title: 'Resource Assessment',
            id:'rsrc-wizard',
            closeAction:'hide',
            width:400,
            height:300,
            resizable:true,
            modal:false,
            shadow:true, 
            autoScroll:true,
            collapsible:true,
            //contentEl:'chart_div',
            layout:'card',
            activeItem: 0, // index or id
            bbar: ['->', {
                id: 'card-prev',
                text: '&laquo; Previous',
                handler: cardNav.createDelegate(this, [-1]),
                disabled: true
            },{
                id: 'card-next',
                text: 'Next &raquo;',
                handler: cardNav.createDelegate(this, [1])
            }],
            items: [{
                id: 'card-0',
                items:[{
                    xtype:'form',
                    bodyStyle: 'padding: 10px',
                    autoHeight:true,
                     items: [{
                         xtype:'fieldset',
                         width:300,
                         title:'Select a region on the map.',
                         items:[{xtype:'button',text:'Select Region'}]
                     },{
                         layout: 'fit',
                         border:false,
                         html: '<center>OR</center>',
                         width:300 
                     },{
                         xtype:'fieldset',
                         width:300,
                         title:'Choose a State or County.',
                         items:[{xtype:'trigger',fieldlabel:'State'},{xtype:'trigger',fieldlabel:'State'}]
                     }]
                }]
                //html: '<p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
            },{
                id: 'card-1',
                html: '<p>Step 2 of 3</p><p>Almost there.  Please click the "Next" button to continue...</p>'
            },{
                id: 'card-2',
                html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
            }]
        });
     }
     rsrcWin.show();
}


var cardNav = function(incr){
    var l = Ext.getCmp('rsrc-wizard').getLayout();
    var i = l.activeItem.id.split('card-')[1];
    var next = parseInt(i) + incr;
    l.setActiveItem(next);
    Ext.getCmp('card-prev').setDisabled(next==0);
    Ext.getCmp('card-next').setDisabled(next==2);
};