var _currentPortraitImgIDName, _currentHiddenRaceIDTextName, _currentHiddenAgeGroupIDTextName;

function selectGroupItem(divName, parentDivName, defaultClassName, selectedClassName, hiddenAgeGroupIDTextName, itemValue) {
    _currentHiddenAgeGroupIDTextName = hiddenAgeGroupIDTextName;
    var divRef = document.getElementById(divName);
    var hdnTextRef = document.getElementById(hiddenAgeGroupIDTextName);
    if (divRef.className.indexOf(selectedClassName) >= 0) {
        //Already selected, deselect this div
        divRef.className = defaultClassName;
        hdnTextRef.value = '-1';
        return;
    }

    deselectAllGroupItems(parentDivName, defaultClassName);
    //Remove the hidden value
    var hdnTextRef = document.getElementById(hiddenAgeGroupIDTextName);
    hdnTextRef.value = '-1';

    //Show div as selected
    divRef.className = selectedClassName;
    hdnTextRef.value = itemValue;
}

function selectAgeGroupImage(evt, ageGroupID, selectedRaceID, openingDivName, portraitImgName, hiddenRaceIDTextName, portraitListHandlerUrl) {
    //Cancel event bubble up so that the selected age group is not deselected.
    var e = (evt) ? evt : window.event;
    if (window.event)
        e.cancelBubble = true;
    else
        e.stopPropagation();
    
    _currentPortraitImgIDName = portraitImgName;
    _currentHiddenRaceIDTextName = hiddenRaceIDTextName;

    ResetAgeGroupPortraitContents();
    RenderAgeGroupPortraitContents(ageGroupID, portraitListHandlerUrl);

    var pos = getElementPosition(openingDivName);

    var portraits = document.getElementById('AgeGroupPortraitSelectionArea');

    portraits.style.left = (pos.left - 39) + 'px';
    portraits.style.top = (pos.top + 25) + 'px';
    portraits.style.display = 'inline';
}

function deselectAllGroupItems(parentDivName, defaultClassName) {
    var parentDiv = document.getElementById(parentDivName);
    var divCount = parentDiv.childNodes.length;
    //Deselect all divs in this group
    for (var i = 0; i < divCount; i++) {
        if (parentDiv.childNodes[i].className != null)
            parentDiv.childNodes[i].className = defaultClassName;
    }

    hidePortraitSelection();
}

function selectPortrait(imgName, raceID) {
    var imgRef = document.getElementById(_currentPortraitImgIDName);
    var raceIdRef = document.getElementById(_currentHiddenRaceIDTextName);

    imgRef.src = imgName;
    raceIdRef.value = raceID;
}

function hidePortraitSelection() {
    document.getElementById('AgeGroupPortraitSelectionArea').style.display = 'none';
}

function getElementPosition(elemID) {
    var offsetTrail = document.getElementById(elemID);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 &&
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return { left: offsetLeft, top: offsetTop };
}