var jobCategoriesPopUp;
var employmentTypesPopUp;

window.addEvent('load', function() {
    jobCategoriesPopUp = $('jobCategoriesPopUp');
    employmentTypesPopUp = $('employmentTypesPopUp');
    var closeIcon = new Element('img', {
        'src': '/Images/Icons/window_close.gif',
        'alt': 'Close',
        'title': 'Close',
        'class': 'IMGR'
    });
    closeIcon.setStyle('cursor', 'pointer');
    closeIcon.addEvent('click', function() {
        hidePopUp(jobCategoriesPopUp);
    });
    closeIcon.injectBefore(jobCategoriesPopUp.getElement('h2'));

    var clonedCloseIcon = Element.clone(closeIcon);
    clonedCloseIcon.addEvent('click', function() {
        hidePopUp(employmentTypesPopUp);
    });
    clonedCloseIcon.injectBefore(employmentTypesPopUp.getElement('h2'));

    $('showJobCategoriesLink').addEvent('click', function(event) {
        hidePopUp(employmentTypesPopUp);
        showPopUp(jobCategoriesPopUp);
        setPopUpPosition(this, jobCategoriesPopUp);
        event = new Event(event);
        event.preventDefault();
    });
    $('showEmploymentTypesLink').addEvent('click', function(event) {
        hidePopUp(jobCategoriesPopUp);
        showPopUp(employmentTypesPopUp);
        setPopUpPosition(this, employmentTypesPopUp);
        event = new Event(event);
        event.preventDefault();
    });
});

function showPopUp(popUp) {
    if (!popUp.hasClass('visible')) {
        popUp.addClass('visible');
    }
}

function hidePopUp(popUp) {
    if (popUp.hasClass('visible')) {
        popUp.removeClass('visible');
    }
}


function setPopUpPosition(launchingAnchor, popUp) {
    var anchorCoords = launchingAnchor.getCoordinates();
    var popUpCoords = popUp.getCoordinates();
    var distanceFromTopOfWindow = anchorCoords.top - popUpCoords.height;
    var distanceFromLeftOfWindow = anchorCoords.left;

    popUp.setStyles({
        'top': (distanceFromTopOfWindow < window.getScrollTop() ? window.getScrollTop() + 5 : distanceFromTopOfWindow),
        'left': (distanceFromLeftOfWindow < window.getScrollLeft() ? window.getScrollLeft() + 5 : distanceFromLeftOfWindow)
    });
    popUpCoords = popUp.getCoordinates();
    var windowWidth = typeof (window.innerWidth) == 'number' ? window.innerWidth : document.documentElement.clientWidth;
    if (popUpCoords.right > windowWidth) {
        var distanceToMoveLeft = popUpCoords.left - (popUpCoords.right - windowWidth);
        popUp.setStyle('left', distanceToMoveLeft < window.getScrollLeft() ? window.getScrollLeft() : popUpCoords.left - (popUpCoords.right - windowWidth));
    }
}