WordPress menu design

I require the following output for my site menus for my theme, which I generated using Weebly.

<!--Top level-->
<div class="nav-container">
<ul class='wsite-menu-default'>

<li id='active'>
<a href='/'>Home</a></li>
<li id='pg460790036268222251'>
<a href='/about.html'>About US</a>
    <!--Second Level-->
    <div class='wsite-menu-wrap' style='display:none'>
    <ul class='wsite-menu'>
    <li id='wsite-nav-887406923503161985'>
    <a href='/our-community.html' >
    <span class='wsite-menu-title'>Our Community</span>
    </a></li>

    <li id='wsite-nav-920389812461078079'>
    <a href='/our-approach.html' >
    <span class='wsite-menu-title'>Our Approach</span>
    <span class='wsite-menu-arrow'>&gt;</span></a>
        <!--Third level-->
        <div class='wsite-menu-wrap' style='display:none'>
        <ul class='wsite-menu'>
        <li id='wsite-nav-351232458403900697'>
        <a href='/research.html' >
        <span class='wsite-menu-title'>Research</span></a>
        </li>

        <li id='wsite-nav-824453669863261400'>
        <a href='/advocacy.html' >
        <span class='wsite-menu-title'>Advocacy</span></a>
        </li>

        <li id='wsite-nav-802033955677651213'>
        <a href='/publications.html' >
        <span class='wsite-menu-title'>Publications</span></a>
        </li>
        </ul>
        </div>
        <!--Repeat above block as required -->
        ........................
        <!--End Third-->
    </li>

    <li id='wsite-nav-307985062116431544'>
    <a href='/our-constitution.html' >
    <span class='wsite-menu-title'>Our Constitution</span></a>
    </li>

    <li id='wsite-nav-347537193311521165'>
    <a href='/job-opportunities.html' >
    <span class='wsite-menu-title'>Job Opportunities</span></a>
    </li>
    </ul>
    </div>
    <!--Repeat above block as required -->
    ..............
    <!--End Second-->
   </li>
    <!--Repeat above block as required -->
    ..............
    <!--End Top-->
   </ul></div>

Now I need to port this over to a WordPress system. I am familiar with menu basics, but need to know how to configure a Walker or custom function for this task for my theme. All jQuery, CSS scripts are in place, all I need to do is nest the following output as it is with the respective ids, classes and specified inline styling. I have created the menu hierarchy at WordPress admin like I did in Weebly. I have been searching for examples but cant seem to find one that fits my requirement. Below is my Walker function.

class my_menu_walker extends Walker_Nav_Menu
{
    function start_lvl(&$output, $depth)
    {
        $indent = str_repeat("t", $depth);

        if($depth === 0)
        {
            $output .= "n$indent<ul class='wsite-menu-default'>n";
        }
        else
        {
            $output .= "n$indent<ul class='wsite-menu-default' style='display:none'>n";
        }

    }

    function start_el(&$output, $item, $depth, $args)
    {
        global $wp_query;
        $indent = ($depth)? str_repeat("t", $depth): '';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
            $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
            $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
            $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

            //if second level menus 

                    /*$unit_output = $args->before;*/
            $unit_output = "<a".$attributes.">";
            $unit_output .= /*$args->link_before.*/ "<span>".apply_filters( 'the_title', $item->title, $item->ID )."</span>";
            /*$unit_output .= $args->link_after;*/
            $unit_output .= "</a>";
            /*$unit_output .= $args->after;*/

            //for top menu page navigation

        if($item->current)
        {
            $output .= $indent."<li id='active'>";
        }
        else
        {
            $output .= $indent."<li id='pg".$item->ID."'>";
        }


        $output .= apply_filters( 'walker_nav_menu_start_el', $unit_output, $item, $depth, $args );
    }
}

At the top of functions.php

add_theme_support( 'menus' );

And in header.php

<?php wp_nav_menu(array(
        'theme_location' => 'header-menu',
        'container' => 'div',
        'container_class' => 'wsite-menu-default',
        'menu_class' => 'nav-container',
        'echo' => true,
        'walker'=> new my_menu_walker()
        )); ?>

My $depth is not receiving the correct data, please advise

function start_lvl(&$output, $depth)
{
    $indent = str_repeat("t", $depth);

    if($depth > 1)
    {
        $output .= "n$indent<ul class='wsite-menu'>n";
    }
    else
    {
        $output .= "n$indent<ul class='wsite-menu-default'>n";
    }

}