var setMaxSubNavWidth = 500;
var subNavWidth = 0;
var editLinkSaveColor = '#000000';
var isDialogOpen = false;
var subNavState = new Array();
var subNavStateString = '';
var subNavDefaults = new Array();
var subNavAvailableOptions = new Array();

function saveSubNavState()
{
    subNavState = new Array();
    
    subNavItems = new Array();
    var links = $("#topSubNav li");

    for (var i = 0; i < links.length; i++)
    {
        if (links[i].id.match(/^link/))
        {
            if (links[i].id != 'link99999')
            {
                subNavItems[subNavItems.length] = { id : links[i].id.replace('link', ''), title : links[i].childNodes[0].innerHTML, url : links[i].childNodes[0].href };
            }
            else
            {
                subNavItems[subNavItems.length] = { id : links[i].id.replace('link', ''), title : links[i].innerHTML, url : '' };
            }
        }
    }
    
    subNavState = subNavItems;    
    subNavStateString = getSubNavIds().join(',');
}

function restoreSubNavState(restoreToDefault)
{
    var tempHtml = '';
    var tempArr = restoreToDefault ? subNavDefaults : subNavState;    
    
    displayEditNotice('restoring...');    
    
    for (var i = 0; i < tempArr.length; i++)
    {        
        if (tempArr[i].id != 99999)        
            tempHtml += '<li class="sortableitemoff" id="link' + tempArr[i].id + '"><a href="' + tempArr[i].url + '">' + tempArr[i].title + '</a></li>';
        else
            tempHtml += '<li class="sortableitemoff" id="link' + tempArr[i].id + '">' + tempArr[i].title + '</li>';
    }
    
    document.getElementById('subNavLinks').innerHTML = tempHtml;
    
    if (restoreToDefault)
    {
        var currentLinkIds = getSubNavIds();

        var checkboxItems = $("#choices input");
        
        for (var i = 0; i < checkboxItems.length; i++)
        {
            checkboxItems[i].checked = !($(currentLinkIds).index(checkboxItems[i].getAttribute('linkId')) == -1);
        }
    }
    
    document.getElementById('subNavSaveButton').disabled = !isChanged();
    
    displayEditNotice('ready');
}

function editSubNav()
{   
    if (!isLoggedIn)
    {
        alert('Please log in to customize this menu.');
        return;
    }
    
    saveSubNavState();
    
    if (isDialogOpen)
    {
        alert('You\'re already editing your sub navigation menu.');
        return false;
    }
    
    editLinkSaveColor = document.getElementById('subNavEdit').style.color;
    document.getElementById('subNavEdit').style.color = '#bbbbbb';
    
    var v = document.createElement('DIV');
    
    v.style.top             = '180px';
    v.style.width           = '100%';
    v.style.position        = 'absolute';
    v.style.textAlign       = 'center';
    v.id                    = 'dialog_window';

    var t = '';

    t  = '<div style="zIndex: 200; width: 300px; height: 250px; margin-left: auto; margin-right: auto; background-color: #eee; border: solid 1px #000;">';
    t += '<table width="300" height="250" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top" height="20">';
    t += '<img name="close_dialog_button" src="/i/ignore.gif" title="Close" align="right" onclick="closeDialog();">';
    t += '<b><span style="font-family: verdana;">Customize Your Navigation</span></b></td></tr><tr><td valign="top">';
    t += '<div style="font-size: 8pt;">Check the items you would like to add to your sub navigation menu.</div>';
    t += '</td></tr><tr><td height="10">';
    t += '<div align="left" style="font-size: 8pt; margin-left: 8px;"><b>Status: </b><span id="subEditMessage" style="z-index: 999;">Loading...</span></div>'
    t += '</td></tr><tr><td align="center">'
    t += '<div style="overflow: auto; height: 150px; width: 280px; text-align: left;" id="choices">';
    t += '</div></td></tr><tr><td height="35">';
    t += '<input id="subNavSaveButton" type="button" disabled value="Save Menu" onclick="saveSubNav()"><input type="button" value="Cancel" onclick="closeDialog();"><br /><a href="javascript:void(0);" onclick="restoreDefaults();" style="font-size: 8pt;">Restore Defaults</a></td></tr></table></div>';

    v.innerHTML = t;

    queryChoices();

    document.body.appendChild(v, true);
    isDialogOpen = true;
    subNavWidth = $(document.getElementById('topSubNav')).width();
}

function queryChoices()
{
    $.getJSON("/navigate/sub_nav_query_choices.php", { categoryId : 1 }, populateSubMenuChoices_Callback);    
}

function populateSubMenuChoices_Callback(json)
{
    displayEditNotice('ready');
    var currentLinkIds = getSubNavIds();
    var checked = false;
    
    for (var i = 0; i < json.choices.length; i++)
    {
        if ($(currentLinkIds).index(json.choices[i].id) != -1)
            checked = true;
        else
            checked = false;
        
        if (json.choices[i].id != 99999)
        {
            document.getElementById('choices').innerHTML += '<input ' + (checked ? 'checked' : '') + ' type="checkbox" onclick="checkLink(this);" id="checkLink' + json.choices[i].id + '" name="link' + json.choices[i].id + '" />' + json.choices[i].title.replace(' ', '&nbsp;') + '<br />';
        }
        else
        {
            document.getElementById('choices').innerHTML += '<input ' + (checked ? 'checked' : '') + ' type="checkbox" onclick="checkLink(this);" id="checkLink' + json.choices[i].id + '" name="link' + json.choices[i].id + '" />' + json.choices[i].title + '<br />';
        }
        
        var ref = document.getElementById('checkLink' + json.choices[i].id);
        
        if (json.choices[i].id != 99999)
        {
            ref.setAttribute('linkTitle', json.choices[i].title.replace(' ', '&nbsp;'));

        }   
        else
        {
            var linkTitle = json.choices[i].title;
            
            linkTitle = linkTitle.replace(/"/g, '');
            
            ref.setAttribute('linkTitle', linkTitle);
        }
        
        ref.setAttribute('linkId', json.choices[i].id);
        ref.setAttribute('linkUrl', json.choices[i].url);
    }

    subNavDefaults = json.defaultLinks;    
    subNavAvailableOptions = json.choices;
}

function checkLink(ref)
{
    if (ref.checked)
    {
        if (isMaxElementsAdded())
        {
            ref.checked = false;
            alert('Maximum # of items added. Remove to add more.');            
            return;
        }        
        
        if (ref.name == 'link99999')
        {
            document.getElementById('subNavLinks').innerHTML += '<li id="' + ref.name + '"><a href="' + ref.getAttribute('linkUrl') + '">' + ref.getAttribute('linkTitle') + '</a></li>';
        }
        else
        {
            document.getElementById('subNavLinks').innerHTML += '<li id="' + ref.name + '"><a class="sortableitemoff" href="' + ref.getAttribute('linkUrl') + '">' + ref.getAttribute('linkTitle') + '</a></li>';
        }
    }
    else
    {
        removeFromSubNav(ref.getAttribute('linkId'));
    }
    
    displayEditNotice('ready');
    checkStatuses();
}

function removeFromSubNav(id)
{
    try
    {
        var e = document.getElementById('link' + id);
        document.getElementById('subNavLinks').removeChild(e);
    }
    catch(e)
    {
        alert(e);
    }
}

function cancelDialog()
{
    restoreSubNavState(false);
}

function closeDialog()
{    
    var revert = false;
 
    if (isChanged())
    {
        if (confirm('You have modified your sub navigation menu. Do you want to save it?'))
        {
            if (!saveSubNav())
                return false;
        }
        else
        {
            revert = true;
        }
    }
    
    if (revert)
        cancelDialog();    
    
    document.body.removeChild(document.getElementById('dialog_window'));
    isDialogOpen = false;
    
    document.getElementById('subNavEdit').style.color = editLinkSaveColor;
}

function isChanged()
{   
    return getSubNavIds().join(',') != subNavStateString;
}

function restoreDefaults()
{
    restoreSubNavState(true);
}

function saveSubNav()
{   
    var linkIds = getSubNavIds();
    
    displayEditNotice('saving...');
    
    if (linkIds.length > 0)
    {
        var linkStr = '';
        
        for (var i = 0; i < linkIds.length; i++)
        {
            linkStr += 'subNavLinks[]=' + linkIds[i];
            
            if (i < linkIds.length - 1)
                linkStr += '&';
        }
        
        $.getJSON("/navigate/sub_nav_save.php?" + linkStr, { navigationId : 1}, saveSubNav_Callback);
    }
    else
    {
        alert('Error: You can\'t save an empty menu.');
        displayEditNotice('ready');
        return false;
    }
    
    return true;
}

function getSubNavIds()
{
    linkIds = new Array();
    var links = $("#topSubNav li");

    for (var i = 0; i < links.length; i++)
    {
        if (links[i].id.match(/^link/))
            linkIds[linkIds.length] = links[i].id.replace('link', '');
    }

    return linkIds;
}

function saveSubNav_Callback(json)
{
    if (json.err == '0')
    {
        saveSubNavState();
        closeDialog();
    }
    else
    {
        alert('Error: ' + json.msg);
    }
}

function checkStatuses()
{
    document.getElementById('subNavSaveButton').disabled = !isChanged();    
    
    subNavWidth = $(document.getElementById('topSubNav')).width();
    
    if (isMaxElementsAdded())
    {
        displayEditNotice('Maximum # of items added. Remove to add more.');
    }
}

function isMaxElementsAdded()
{
    return (subNavWidth >= setMaxSubNavWidth)
}

function displayEditNotice(msg)
{
    document.getElementById('subEditMessage').innerHTML = msg;
}