Wordpress menu design - php

Question

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'>></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";
}
}