// Javascript

ASSETSWEB.AssetsActiveDetailDialog = function() {
    var store = new Ext.data.SimpleStore({
        fields: [
           { name: 'sfn' },
           { name: 'county' },
           { name: 'route' },
           { name: 'mainStrMtlTxt' },
           { name: 'mainStrTypeTxt' },
           { name: 'mainStrTypeDesc' },
           { name: 'slm' }


        ]
    });
    var detailStore = new Ext.data.SimpleStore({
        fields: [
            { name: 'attribute' },
            { name: 'value' }
        ],
        id: 0
    });
    var win = null;
    var detailWin = null;
    var distance = 0.5;
    var thiz = {
        show: function(lon, lat) {
            store.removeAll();
            // create the Grid
            var grid = new Ext.grid.GridPanel({
                region: 'center',
                store: store,
                columns: [
                    { id: 'sfn', header: "SFN #", width: 100, sortable: true, dataIndex: 'sfn' },
                    { id: 'county', header: "COUNTY", width: 100, sortable: true, dataIndex: 'county' },
                    { id: 'route', header: "ROUTE", width: 100, sortable: true, dataIndex: 'route' },
                    { id: 'mainStrMtlTxt', header: " MTL TYPE", width: 100, sortable: true, dataIndex: 'mainStrMtlTxt' },
                    { id: 'mainStrTypeTxt', header: "STRUC TYPE", width: 100, sortable: true, dataIndex: 'mainStrTypeTxt' },
                    { id: 'mainStrTypeDesc', header: "BRIDGE TYPE", width: 100, sortable: true, dataIndex: 'mainStrTypeDesc' },
                    { id: 'slm', header: "SLM", width: 100, sortable: true, dataIndex: 'slm' }

                ],
                viewConfig: {
                    forceFit: true
                },
                frame: true,
                sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                stripeRows: true,
                autoExpandColumn: 'longitude',
                title: 'Click Point: ' + ' Longitude: ' + lon + ' Latitude: ' + lat

            });

            var onRowClick = function(theGrid, rowNum, e) {
                var record = theGrid.getSelectionModel().getSelected();
                thiz.displayDetail(record.data.sfn);
            }

            grid.on({
                'rowclick': {
                    fn: onRowClick,
                    scope: grid
                }
            });


            //Close and existing ones before opening new one
            if (win) win.close();
            win = new Ext.Window({
                title: 'Nearest Assets',
                layout: 'border',
                closable: true,
                width: 650,
                height: 350,
                border: true,
                plain: true,
                autoScroll: true,
                items: [grid],
                buttons: [
		        {
		            xtype: 'button',
		            text: 'Close',
		            minWidth: 50,
		            handler: function() {
		                win.close();
		            }
		        }

               ]

            });
            win.show();
            Ext.MessageBox.show({
                msg: 'Please wait...',
                progressText: 'Loading Nearest Bridges...',
                width: 300,
                wait: true,
                waitConfig: { interval: 200 }
            });
            $.post('ajax/GetNearestActiveBridges.aspx', { latitude: lat, longitude: lon, distance: distance }, function(resp) {

                if (resp) {
                    if (resp.success !== true) {
                        Ext.Msg.alert('Error!', 'The server was unable to process your request at this time.');
                    } else {
                        if (resp.activebridgesPoints && resp.activebridgesPoints.length > 0) {
                            Ext.MessageBox.hide();
                            store.loadData(resp.activebridgesPoints);
                        } else {
                            Ext.Msg.alert('Status', 'No bridges were found within 1/2 mile of the clicked location. Please zoom in, and try again.');
                            win.close();
                        }
                    }
                }
            }, "json");
        },
        displayDetail: function(sfn) {
            //Clear the store of any existing data
            detailStore.removeAll();
            //Define the cell value renderer that will allow us to do
            //custom formatting of the value cells
            // to wrap column text added white-space:normal
            var valueCellRenderer = function(value, meta, record, row, col, store) {
                var str = "<p style='white-space:normal'>" + value + "</p>";
                if (record.id == 'Active bridge Images') {
                    return '<a style="color: blue;">' + 'Please click here to view images' + '</a>'
                }
                return str;
            }

            // create the Grid
            var detailGrid = new Ext.grid.GridPanel({
                store: detailStore,
                region: 'center',
                columns: [
                    { id: 'attribute', header: "Attribute", width: 100, sortable: true, dataIndex: 'attribute' },
                    { id: 'value', header: "Value", width: 100, sortable: true, renderer: valueCellRenderer, dataIndex: 'value' }

                ],
                viewConfig: {
                    forceFit: true
                },
                frame: true,
                sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                stripeRows: true,
                autoExpandColumn: 'attribute',
                height: 600,
                width: 600,
                title: 'Bridge Attributes'
            });

            var onRowClick = function(theGrid, rowNum, e) {
                var record = theGrid.getSelectionModel().getSelected();
                thiz.imageDetails(record.data.attribute, record.data.value);
            }

            detailGrid.on({
                'rowclick': {
                    fn: onRowClick,
                    scope: detailGrid
                }
            });

            //Close and existing ones before opening new one
            if (detailWin) detailWin.close();
            detailWin = new Ext.Window({
                title: 'Bridges Detail View',
                layout: 'border',
                closable: true,
                width: 650,
                height: 350,
                border: true,
                plain: true,
                autoScroll: true,
                items: [detailGrid],
                buttons: [
	                    {
	                        xtype: 'button',
	                        text: 'Get PDF Report',
	                        minWidth: 50,
	                        handler: function() { thiz.pdfReport(sfn) }
	                    },
                        {
                            xtype: 'button',
                            text: 'BM191',
                            minWidth: 50,
                            handler: function() {
                                window.open("http://bmsreports.dot.state.oh.us//bmsreports/jsp/wait.jsp?href=../191Mem?sfn=" + sfn); 
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'BR86',
                            minWidth: 50,
                            handler: function() {
                                window.open("http://bmsreports.dot.state.oh.us//bmsreports/jsp/wait.jsp?href=../Mem?sfn=" + sfn);
                            }
                        },
    				        {
    				            xtype: 'button',
    				            text: 'Close',
    				            minWidth: 50,
    				            handler: function() {
    				                detailWin.close();
    				            }
    				        }


                ]

            });
            detailWin.show();
            Ext.MessageBox.show({
                msg: 'Please wait...',
                progressText: 'Loading Asset Detail...',
                width: 300,
                wait: true,
                waitConfig: { interval: 200 }
            });
            //Do Ajax query for Assets detail
            var successHandler = function(resp) {
                if ((!resp) || (resp.success !== true)) {
                    Ext.Msg.alert('Error!', 'The server was unable to process your request at this time. <br /> We apologize for the inconvenience. ');

                } else {
                    if (resp.attributes) {
                        Ext.MessageBox.hide();
                        detailStore.loadData(resp.attributes);
                    } else {
                        Ext.Msg.alert('Status', 'No detail record found for sfn number ' + sfn + '.');
                        detailWin.close();
                    }
                }
            };

            var errorHandler = function(xhr) {
                Ext.Msg.alert('Error:' + xhr.status, 'The server was unable to process your request at this time.<br /> We apologize for the inconvenience.');
                detailWin.close();
            };
            $.ajax({
                type: "POST",
                url: 'ajax/GetActiveBridgeDetails.aspx',
                data: { sfn: sfn },
                success: successHandler,
                error: errorHandler,
                dataType: "json"
            });
        },
        pdfReport: function(sfn) {

            window.open('pdf/ActivePDFGenerator.aspx?sfn=' + sfn);

        },

        imageDetails: function(id, value) {
            if ('Active bridge Images' == id) {
                var imageWin = null;
                var images = new Array();
                var which = 0;
                var str = value.toString();
                if (str != null) {
                    images = str.split(',');
                    ASSETSWEB.AssetImage.init(images);
                }
            }
        }
    }
    return thiz;
} ();