// getSelectedValue will get the value of the selected item in a Select box
function getSelectedValue(boxname) {
    var theBox = document.getElementById(boxname);
    if (theBox == null) return null;
    if (theBox.options == null) return null;
    if (theBox.selectedIndex == null) return null;

    var theOpt = theBox.options[theBox.selectedIndex];
    if (theOpt == null) {
        return null;
    }
    else if (theOpt.value != null) {
        return theOpt.value;
    }
    else {
        return theOpt.text;
    }
};  // end function getSelectedValue


// setSelectedValue will set the chosen value for the select box
function setSelectedValue(boxname, selVal) {
    var theBox = document.getElementById(boxname);
    if (theBox != null && theBox.options != null) {
        for (i = 0; i < theBox.options.length; i++) {
            if (theBox.options[i].value == selVal) {
                theBox.selectedIndex = i;
                return;
            }
        }
    }
};  // end function setSelectedValeu


function addOption(selBox, option) {
    try {
        selBox.add(option, null);   // standards compliant
    }
    catch (e) {
        selBox.add(option);         // IE only
    }
};  // end function addOption


// makeThumbs will dynamically generate the list of thumbnails in the sliding gallery
function makeThumbs() {
    var dimension = getSelectedValue('dimensionMenu');
    var timeType  = getSelectedValue('timeMenu');
    var thumbList = seaiceImageList.buildThumbList(dimension, timeType);

//    if (thumbList != '') {
        document.getElementById('thumbs').innerHTML = thumbList;
//    }
    nsidcLinkStyles();
    galleryReset();
    setIndexOptions();
    changeSeaIceImage();
};  // end function makeThumbs


// setIndexOptions updates the values in the indexMenu list
function setIndexOptions() {
    var dimension = getSelectedValue('dimensionMenu'); 
    var timeType  = getSelectedValue('timeMenu');
    var indexBox  = document.getElementById('indexMenu');

    // clear the existing box
    indexBox.options.length = 0;

    addOption(indexBox, new Option('Extent', 'extent'));
    addOption(indexBox, new Option('Concentration', 'concentration'));
    
    // add Monthly-specific options
    if (timeType == 'monthly') {
        addOption(indexBox, new Option('Concentration Anomalies', 'anomalies'));
        addOption(indexBox, new Option('Concentration Trends', 'trends'));
    };

    return;
};  // end function setIndexOptions


function changeCaption(captionType) {
    for (i = 0; i < captionText.length; i++) {
        captionText[i];
        if (captionText[i].id == captionType) {
            document.getElementById('largeImageCaption').innerHTML =
                '<h1>' + captionText[i].header + '</h1>\n' +
                '<p>' + captionText[i].caption + '</p>';
        }  // end match check
    }  // end caption loop
};  // end function changeCaption


// clickThumbnail will update the selected values based on the clicked thumb
function clickThumbnail(thumbid) {
    var breakdown = thumbid.split('_');
    setSelectedValue('dimensionMenu', breakdown[0]);
    setSelectedValue('timeMenu', breakdown[1]);
    setIndexOptions();
    setSelectedValue('nsMenu', breakdown[2]);
    setSelectedValue('indexMenu', breakdown[3]);

    changeSeaIceImage();
};  // end function clickThumbnail


// changeSeaIceImage will change the sea ice image based on the selected values
function changeSeaIceImage() {
    var dimension = getSelectedValue('dimensionMenu');
    var timeType  = getSelectedValue('timeMenu');
    var ns        = getSelectedValue('nsMenu');
    var imageType = getSelectedValue('indexMenu');

    var img = seaiceImageList.getImage(dimension, timeType, ns, imageType);

    var imgfile;
    var caption;

    if (img == null) {
        caption = 'monthlyNA';
        imgfile = noDataImageFile;
    } 
    else {
        caption = timeType;
        imgfile = img.imagefile;
    }

    changeCaption(caption);
    updateThumbBorders();
    document.getElementById('seaiceSwapImage').src = imgfile;
};  // end function changeSeaIceImage


// openHiresSeaIceImage opens the Sea Ice Image into hi-res 
function openHiresSeaIceImage() {
    var dimension = getSelectedValue('dimensionMenu');
    var timeType  = getSelectedValue('timeMenu');
    var ns        = getSelectedValue('nsMenu');
    var imageType = getSelectedValue('indexMenu');

    var img = seaiceImageList.getImage(dimension, timeType, ns, imageType);

    var imgfile;

    if (img == null) {
        imgfile = noDataHiresFile;
    } 
    else {
        imgfile = img.hiresfile;
        window.open(imgfile);
    }
};  // end function openHiresSeaIceImage


function updateThumbBorders() {
    var dimension = getSelectedValue('dimensionMenu');
    var timeType  = getSelectedValue('timeMenu');
    var ns        = getSelectedValue('nsMenu');
    var imageType = getSelectedValue('indexMenu');

    var id = dimension + '_' + timeType + '_' + ns + '_' + imageType;
    
    var thumbs = document.getElementById('galleryContainer').getElementsByTagName('IMG');
    for (i = 0; i < thumbs.length; i++) {
        if (id == thumbs[i].id) {
            thumbs[i].style.borderColor = 'red';
            thumbs[i].style.borderStyle = 'solid';
            thumbs[i].style.borderWidth = '2px';
		}
        else {
            thumbs[i].style.borderColor = 'white';
            thumbs[i].style.borderStyle = 'solid';
            thumbs[i].style.borderWidth = '2px';
        }
    }
};