Phonegap Network Connection - Cannot read property 'type' of undefined

I have been searching around all day for the answer to this and the Google-sphere has not provided any answers. I have tried everything I know how to do and worked through the suggested solutions and answers and nothing has worked.

In a nutshell I am trying to develop a Phonegap app for Android and Apple Mobile devices and one of the features I need is to detect both the network status and the type of network connection. Below is the code I am using.

The Firing device ready alert fires off and then I get the error Cannot read property 'type' of undefined followed by the looping through of the Navigator object. As I go through each of these properties of the object I do not see the connection property or even the network property as was used in older versions.

Anyone have any ideas?

index.html

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- jQuery Core -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- The main engine for the software. -->
<script src="js/main.js"></script>

<!-- Third party plugins -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script type="text/javascript" src="childbrowser.js"></script>
<script type="text/javascript" src="js/barcode.js"></script>

<title>index</title>

<script>
document.addEventListener("deviceready", onDeviceReady, false);
</script>

</head>
<body>


<script>
barcode_app.initialize();
</script>

</body>
</html>

main.js

function onDeviceReady(){
    alert('Firing device ready');
    try{
        var networkState = navigator.connection.type;

        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';

        $("#system_popup").html('Connection type: ' + states[networkState]);
        $("#system_popup").popup("open")
        //alert('Connection type: ' + states[networkState]);
    }catch(e){
        alert(e);
        $.each(navigator, function(key, value){
            alert(key+' => '+value);
        });
    }
}

And in my config.xml I have:

<plugin
        name="NetworkStatus"
        value="org.apache.cordova.NetworkManager" />

<gap:config-file platform="android" parent="/manifest">
        <uses-permission name="android.permission.ACCESS_NETWORK_STATE" />
    </gap:config-file>

    <gap:config-file platform="android" parent="/manifest">
        <uses-permission name="android.permission.INTERNET" />
    </gap:config-file>

    <gap:config-file platform="android" parent="/manifest">
        <uses-permission name="android.permission.READ_PHONE_STATE" />
    </gap:config-file>

<feature name="http://api.phonegap.com/1.0/device" />
    <feature name="NetworkStatus">
        <param name="android-package" value="org.apache.cordova.NetworkManager" />
        <param name="ios-package" value="CDVConnection" />
    </feature>

UPDATE : SOLUTION

A solution was finally formulated through the combined efforts of @Dawson Loudon and @benka. Dawson corrected the plugin I was using which should have been:

<gap:plugin
        name="org.apache.cordova.network-information"
        version="0.2.7" />

And this really only works correctly after implementing the short delay mentioned by @benka. So now the working code looks like this in JavaScript:

function onDeviceReady(){
    try{
        var networkState = navigator.connection && navigator.connection.type;

        setTimeout(function(){
            networkState = navigator.connection && navigator.connection.type;

            var states = {};
            states[Connection.UNKNOWN]  = 'Unknown connection';
            states[Connection.ETHERNET] = 'Ethernet connection';
            states[Connection.WIFI]     = 'WiFi connection';
            states[Connection.CELL_2G]  = 'Cell 2G connection';
            states[Connection.CELL_3G]  = 'Cell 3G connection';
            states[Connection.CELL_4G]  = 'Cell 4G connection';
            states[Connection.NONE]     = 'No network connection';

            alert('Connection type: ' + states[networkState]);
        }, 500);
    }catch(e){
        alert(e);
        $.each(navigator, function(key, value){
            alert(key+' => '+value);
        });
    }
}

Solution

You want to use the plugin found here: http://build.phonegap.com/plugins/626

<gap:plugin name="org.apache.cordova.network-information" version="0.2.7" />