var advancedVisibility = false;
var selectMenu = $("#selectMenuContent");
var advancedTab = $("#advanced");
var basicID = $("#basicItemData")
var advancedID = $("#advancedItemData");
var focusedField = false;
function changeAdvancedVisibility(){
    if(advancedVisibility){
        selectMenu.css('display', 'none');
        advancedTab.css('display', 'none');
        advancedID.css('display', 'none');
        basicID.css('display', 'block')
        advancedVisibility = false;
    }
    else {
        selectMenu.css('display', 'block');
        advancedTab.css('display', 'block');
        advancedID.css('display', 'block');
        basicID.css('display', 'none');
        advancedVisibility = true;
    }
}

function createMessageTab() {
    var items = document.getElementById("listItems");
    items.innerHTML += '<div class="menuItem">Item</div>';
}

$("#optional").click(changeAdvancedVisibility);
$(".menuFactory").click(createMessageTab);
$('#historyTab').click(showHistory);

function showHistory(){
    $('#headers').css('display', 'none');
    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
    $('.advancedMenuTabSelected').click(showHeaders);
    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
    $('#history').css('display', 'block');
    $('#historyTab').addClass('advancedMenuTabSelected');
    $('#historyTab').removeClass('advancedMenuTab');
    $('#historyTab').off('click');
}

function showHeaders(){
    $('#history').css('display', 'none');
    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
    $('.advancedMenuTabSelected').click(showHistory);
    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
    $('#headers').css('display', 'block');
    $('#headersTab').addClass('advancedMenuTabSelected');
    $('#headersTab').removeClass('advancedMenuTab');
    $('#headersTab').off('click');
}

function focusInTip(element){
    showTip(element);
    focusedField = true;
}

function focusOutTip(element){
    focusedField = false;
    hidTip(element);
}

function hidTip(element){
    if(focusedField) return;
    $('#'+element).fadeOut(100);
}

function showTip(element){
    if(focusedField) return;
    $('.collapsible').fadeOut(0);
    $('#'+element).fadeIn(100);
}

$('#messageLink').mouseover(function(){showTip('messageLinkTip')});
$('#messageLink').mouseleave(function(){hidTip('messageLinkTip')});

$('#httpStatus').mouseover(function(){showTip('httpStatusTip')});
$('#httpStatus').focusin(function(){focusInTip('httpStatusTip')});
$('#httpStatus').mouseleave(function(){hidTip('httpStatusTip')});
$('#httpStatus').focusout(function(){focusOutTip('httpStatusTip')});

$('#typeSelector').mouseover(function(){showTip('typeSelectorTip')});
$('#typeSelector').focusin(function(){focusInTip('typeSelectorTip')});
$('#typeSelector').mouseleave(function(){hidTip('typeSelectorTip')});
$('#typeSelector').focusout(function(){focusOutTip('typeSelectorTip')});

$('#bodyEditor').mouseover(function(){showTip('bodyEditorTip')});
$('#bodyEditor').focusin(function(){focusInTip('bodyEditorTip')});
$('#bodyEditor').mouseleave(function(){hidTip('bodyEditorTip')});
$('#bodyEditor').focusout(function(){focusOutTip('bodyEditorTip')});

$('#headersTab').mouseover(function(){showTip('headersTabTip')});
$('#headersTab').mouseleave(function(){hidTip('headersTabTip')});

$('#historyTab').mouseover(function(){showTip('historyTabTip')});
$('#historyTab').mouseleave(function(){hidTip('historyTabTip')});

$('#headerKeyInput').mouseover(function(){showTip('newHeaderTip')});
$('#headerKeyInput').focusin(function(){focusInTip('newHeaderTip')});
$('#headerKeyInput').mouseleave(function(){hidTip('newHeaderTip')});
$('#headerKeyInput').focusout(function(){focusOutTip('newHeaderTip')});

$('#headerValueInput').mouseover(function(){showTip('newHeaderTip')});
$('#headerValueInput').focusin(function(){focusInTip('newHeaderTip')});
$('#headerValueInput').mouseleave(function(){hidTip('newHeaderTip')});
$('#headerValueInput').focusout(function(){focusOutTip('newHeaderTip')});