encode = function(stringToEncode) {
    return encodeURIComponent instanceof Function ? encodeURIComponent(stringToEncode) : escape(stringToEncode);
}

searchPage = function() {
    var text = $('#searchTextBox').val();
    if (text != null && text.length > 0 && text != 'Search') {
        var area = parseInt($('#searchTypeDropDownList').val());
        $.bbq.pushState($.param({ area: area, search: encode(text) }), 2);
    }
}

$(document).ready(function() {
    $('#searchTextBox').keyup(function(evt) {
        if (evt.keyCode == 13) {
            searchPage();
            this.blur();
            return false;
        }
    });
});


var treePanel = null;
var contentPanel = null;
var searchKey = null;
var area = null;

Ext.onReady(function() {

    var headerPanel = new Ext.Panel({
        border: false,
        region: 'north',
        baseCls: 'header',
        height: 185,
        contentEl: 'header'
    });

    treePanel = new Ext.tree.TreePanel({
        id: 'tree-panel',
        title: ' ',
        region: 'west',
        cls: 'nav',
        split: true,
        width: 275,
        minSize: 100,
        maxSize: 500,
        margins: '0 0 6 6',
        autoScroll: true,
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,
        forceLayout: true,
        root: new Ext.tree.AsyncTreeNode()
    });

    treePanel.on('click', function(n) {
        var sn = this.selModel.selNode || {};
        var filter = $.bbq.getState().filter;
        if ((n.id != sn.id || filter) && n.id.length > 0) {
            var search = $.bbq.getState().search;
            if (search != null && search.length > 0 && search != 'undefined')
                $.bbq.pushState($.param({ area: area, id: n.id, search: search }), 2);
            else
                $.bbq.pushState($.param({ area: area, id: n.id }), 2);
        }
    });

    contentPanel = new Ext.Panel({
        id: 'content-panel',
        title: ' ',
        bodyStyle: 'overflow: scroll; overflow-x:hidden;',
        contentEl: 'container',
        region: 'center',
        layout: 'card',
        margins: '0 6 6 0'
    });

    contentPanel.on('resize', function(n, adjWidth, adjHeight, rawWidth, rawHeight) {
        $('#containerOverlay').height(rawHeight - 27);
        if ($.browser.msie)
            $('#containerContent').width(rawWidth - 20);
    });

    var footerPanel = new Ext.Panel({
        border: false,
        region: 'south',
        contentEl: 'footer',
        baseCls: 'footer',
        height: 30
    });

    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [headerPanel, treePanel, contentPanel, footerPanel],
        renderTo: Ext.getBody()
    });

    loadPage();
    $(window).bind('hashchange', loadPage);
    $('div.loadingOverlay, div.loading').fadeOut('normal');
});

loadPage = function() {
    $('#containerOverlay').show();
    var state = $.bbq.getState();
    $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: 'Shared/Data/ObjectService.asmx/ProcessRequest',
        data: '{ area:"' + state.area + '", id:"' + state.id + '", search:"' + state.search + '", page:"' + state.page + '", filter:"' + state.filter + '" }',
        dataType: 'json',
        success: function(msg) {
            if (!msg.d.RedirectToTab) {
                $('#containerOverlay').hide();
                contentPanel.setTitle(msg.d.BreadcrumbHtml);
                setupMenu(msg.d.Area, msg.d.Id, msg.d.Search);
                setupSearch(msg.d.Area, msg.d.Search);
                $('#container').parent().scrollTop(0);
                $('#containerContent').html(msg.d.ContentHtml);
            }
            else {
                $.bbq.pushState($.param({ area: msg.d.Area }), 2);
            }
        },
        error: displayError
    });
}

setupMenu = function(val, id, search) {
    if (search != null && (search.length == 0 || search == 'undefined'))
        search = null;

    if (area == null || area != val || (search != null && search != searchKey)) {
        area = val;
        searchKey = search;

        if (search != null)
            treePanel.getLoader().dataUrl = 'Shared/Data/Menu.ashx?area=' + area + '&search=' + encode(search);
        else
            treePanel.getLoader().dataUrl = 'Shared/Data/Menu.ashx?area=' + area;

        treePanel.getLoader().purgeListeners();
        treePanel.getLoader().on('load', function() { loadPath(id); });
        treePanel.setRootNode(new Ext.tree.AsyncTreeNode());

        $('ul.tabs li a').removeClass('selected');
        switch (val) {
            case 1:
                treePanel.setTitle('Generic Objects');
                $('ul.tabs li.generic a').addClass('selected');
                if (!$('h3.manufacturerApproved').hasClass('hiddenApproved'))
                    $('h3.manufacturerApproved').addClass('hiddenApproved');
                break;
            case 2:
                treePanel.setTitle('Manufacturer Objects');
                $('ul.tabs li.manufacturer a').addClass('selected');
                if ($('h3.manufacturerApproved').hasClass('hiddenApproved'))
                    $('h3.manufacturerApproved').removeClass('hiddenApproved');
                break;
            case 3:
                treePanel.setTitle('Spaces');
                $('ul.tabs li.spaces a').addClass('selected');
                if (!$('h3.manufacturerApproved').hasClass('hiddenApproved'))
                    $('h3.manufacturerApproved').addClass('hiddenApproved');
                break;
            case 4:
                treePanel.setTitle('<div>Search Results</div><a href="#area=2" class="clearButton">Clear</a>');
                $('ul.tabs li.manufacturer a').addClass('selected');
                if ($('h3.manufacturerApproved').hasClass('hiddenApproved'))
                    $('h3.manufacturerApproved').removeClass('hiddenApproved');
                break;
            case 5:
                treePanel.setTitle('<div>Search Results</div><a href="#area=3" class="clearButton">Clear</a>');
                $('ul.tabs li.spaces a').addClass('selected');
                if (!$('h3.manufacturerApproved').hasClass('hiddenApproved'))
                    $('h3.manufacturerApproved').addClass('hiddenApproved');
                break;
            default:
                treePanel.setTitle('&nbsp;');
                if (!$('h3.manufacturerApproved').hasClass('hiddenApproved'))
                    $('h3.manufacturerApproved').addClass('hiddenApproved');
                break;
        }
    }
    else {
        loadPath(id);
    }
}

/*  Expands each section manually, then selects the node.
 *  Cannot use built in method in case path was never loaded */
loadPath = function(id) {
    if (id != null && id.length > 0 && id != 'undefined') {
        var array = id.split('|');
        var node = null;
        var crumbHtml = '';
        for (var i = 0; i < array.length; i++) {
            var nodeName = '';
            for (var j = 0; j <= i; j++) {
                if (nodeName.length > 0)
                    nodeName += '|' + array[j];
                else
                    nodeName += array[j];
            }
            node = treePanel.getNodeById(nodeName);
            if (node != null) {
                treePanel.expandPath(node.getPath());
                if (i == array.length - 1)
                    crumbHtml += ' > ' + node.text;
                else
                    crumbHtml += ' > <a href="#area=' + area + '&id=' + node.id + '">' + node.text + '</a>';
            }
        }
        $('div.innerPath').html(crumbHtml);
        node = treePanel.getNodeById(id);
        if (node != null)
            treePanel.getSelectionModel().select(node, null, true);
    }
    else {
        treePanel.getSelectionModel().select(treePanel.getRootNode(), null, true);
        treePanel.collapseAll();
    }
}

setupSearch = function(area, search) {
    if (search != null && search.length > 0 && search != 'undefined') {
        $('#searchTextBox').val(search);
        $('#searchTypeDropDownList').val(area);
    }
    else {
        $('#searchTextBox').val('Search');
        if (area != null && (area == 3 || area == 5))
            $('#searchTypeDropDownList').val('5');
        else
            $('#searchTypeDropDownList').val('4');
    }
}

displayError = function() {
    $('#containerOverlay').hide();
    area = null;
    searchKey = null;
    treePanel.setTitle('&nbsp;');
    treePanel.getLoader().dataUrl = '';
    treePanel.setRootNode(new Ext.tree.AsyncTreeNode());
    contentPanel.setTitle('Page Error');
    setupSearch(null, null);
    $('#containerContent').html('<p class="error">There was a problem processing your request, please try again later.</p>');
    $('ul.tabs li a').removeClass('selected');
}