function addNavigatorSliding() {
    $('h2.drawer-handle').hover(
        function() {
            $(this).addClass('open');
            $(this).css('cursor', 'pointer');
        },
        function() {
            $(this).removeClass('open');
            if (null != currentMenu) {
                currentMenu.addClass('open');
            }
        }
    );
    $('h2.drawer-handle').click(function() {
        // initial menus
        $('ul.menu').slideUp();
        $('h2.drawer-handle').removeClass('open');
        
        if ('none' == $(this).next().css('display')) {
            $(this).next().addClass('open').slideDown();
            $(this).addClass('open');
            currentMenu = $(this);
        } else if(undefined == $(this).next().css('display')) {
            $(this).addClass('open');
            currentMenu = $(this);
        } else {
            $(this).addClass('open');
            currentMenu = null;
        }
        
        // show content
        menu_index = parseInt($(this).attr('alt').substr(4))
        showMenuContent(menu_index);
        showBanner(menu_index);
    });    
}

// class definition
function Item(name, content) {
    // name - item name
    // content - item content
    this.item_name = name;
    this.item_content = content;
    return this;
}

function SubMenu(name, content, items) {
    // name - submenu name
    // content - submenu content
    // items - submenu items
    this.submenu_name = name;
    this.submenu_content = content;
    this.submenu_items = items;
    return this;
}

function Menu(name, banner, content, submenus) {
    // name - menu name
    // content - menu content
    // submenus - 
    this.menu_name = name;
    this.banner = banner;
    this.menu_content = content;
    this.submenus = submenus;
    return this;
}

Menu.prototype.toHtml = function () {
    html = '<li class="drawer"><h2 class="drawer-handle" alt="menu'+i+'"><img src="images/arrow.png">'+this.menu_name+'</h2>';
    if (null != this.submenus) {
        html += '<ul class="menu">';
        for (j=0; j<this.submenus.length; j++) {
            html += '<li class="item1"><img src="images/blue-arrow.png"><a href="javascript:showSubMenuContent('+i+', '+j+')">'+this.submenus[j].submenu_name+'</a></li>';
            if (null != this.submenus[j].items) {
                for (k=0; k<this.submenus[j].items.length; k++) {
                    //console.log(this.submenus[j].items[k].item_name);
                    html += '<li class="item2"><img src="images/blue-arrow.png"><a href="javascript:showItemContent('+i+', '+j+', '+k+')">'+this.submenus[j].items[k].item_name+'</a></li>';
                }
            }
        }
        html += '</ul>';
    }
    html += '</li>';
    return html;
};
// end-class definition

function getNavigator(arr) {
    ret = '';
    for (i=0; i<arr.length; i++) {
        ret += arr[i].toHtml();
    }
    return ret;
}

function showMenuContent(i) {
    if (null != nav) {
        $('div.maincontent').html(nav[i].menu_content);
    }
}

function showSubMenuContent(i, j) {
    if (null != nav) {
        $('div.maincontent').html(nav[i].submenus[j].submenu_content);
    }
}

function showItemContent(i, j, k) {
    if (null != nav) {
        $('div.maincontent').html(nav[i].submenus[j].items[k].item_content);
    }
}

function showBanner(i) {
    //console.log(nav[i].banner);
    $('#banner').attr('src', 'images/'+nav[i].banner);
}