var index = 0;

function loadNextImage(){
    var smallImages = document.getElementById("filmstripDiv").getElementsByTagName("img");
	for (i=0; i< smallImages.length; i++) {
        smallImages[i].style.border = "3px solid #232323";
    }
    if (smallImages.length > index + 1) {
        index++;
        var srcAttrValue = smallImages[index].getAttribute("src").replace('-sml', '-med');
        var popupAttrValue = smallImages[index].getAttribute("onclick");
        var mediumImageCaptionAttrValue = document.getElementById("filmstripDiv").getElementsByTagName("img")[index].getAttribute('onmouseover') + "";
        var startIndex = mediumImageCaptionAttrValue.lastIndexOf(",'")
        var endIndex = mediumImageCaptionAttrValue.lastIndexOf("')")
        var imageCaption = mediumImageCaptionAttrValue.substring(startIndex+2, endIndex);
	    document.getElementById("mediumImage").setAttribute('src', srcAttrValue);
        document.getElementById("mediumImage").setAttribute('onclick', popupAttrValue);
		var imageSource = smallImages[index].src;
		var imageSourcetype = imageSource.indexOf('gr')>0?imageSource.indexOf('gr')+2:imageSource.indexOf('mmc')+3;
		var figureNumber = imageSource.substring(imageSourcetype,imageSource.indexOf('-sml.jpg'));
		var hrefvalue = document.getElementById("image_container").getElementsByTagName("a")[0].getAttribute("href");
        var newHrefValue = hrefvalue.replace(hrefvalue.substring(hrefvalue.indexOf('fig'), hrefvalue.indexOf('fig')+4), 'fig'+figureNumber);
        document.getElementById("image_container").getElementsByTagName("a")[0].setAttribute('href', newHrefValue);
        document.getElementById("image_container").getElementsByTagName("strong")[0].innerHTML = 'Figure ' + figureNumber + ': ';
        document.getElementById("image_caption").innerHTML = imageCaption;
    }
    else {
        index = 0;
        var srcAttrValue = smallImages[index].getAttribute("src").replace('-sml', '-med');
        var popupAttrValue = smallImages[index].getAttribute("onclick");
        var mediumImageCaptionAttrValue = document.getElementById("filmstripDiv").getElementsByTagName("img")[index].getAttribute('onmouseover') + "";
        var startIndex = mediumImageCaptionAttrValue.lastIndexOf(",'")
        var endIndex = mediumImageCaptionAttrValue.lastIndexOf("')")
        var imageCaption = mediumImageCaptionAttrValue.substring(startIndex+2, endIndex);
        document.getElementById("mediumImage").setAttribute('src', srcAttrValue);
        document.getElementById("mediumImage").setAttribute('onclick', popupAttrValue);
		var imageSource = smallImages[index].src;
		var imageSourcetype = imageSource.indexOf('gr')>0?imageSource.indexOf('gr')+2:imageSource.indexOf('mmc')+3;
		var figureNumber = imageSource.substring(imageSourcetype,imageSource.indexOf('-sml.jpg'));
        var hrefvalue = document.getElementById("image_container").getElementsByTagName("a")[0].getAttribute("href");
        var newHrefValue = hrefvalue.replace(hrefvalue.substring(hrefvalue.indexOf('fig'), hrefvalue.indexOf('fig')+4), 'fig'+figureNumber);
        document.getElementById("image_container").getElementsByTagName("a")[0].setAttribute('href', newHrefValue);
        document.getElementById("image_container").getElementsByTagName("strong")[0].innerHTML = 'Figure ' + figureNumber + ': ';
        document.getElementById("image_caption").innerHTML = imageCaption;
    }
        smallImages[index].style.border = "3px solid orange";
}


function loadPreviousImage(){
    var smallImages = document.getElementById("filmstripDiv").getElementsByTagName("img");
    for (i=0; i< smallImages.length; i++) {
        smallImages[i].style.border = "3px solid #232323";
    }
    if (smallImages.length > index && index != 0) {
        index--;
        var srcAttrValue = smallImages[index].getAttribute("src").replace('-sml', '-med');
        var popupAttrValue = smallImages[index].getAttribute("onclick");
        var mediumImageCaptionAttrValue = document.getElementById("filmstripDiv").getElementsByTagName("img")[index].getAttribute('onmouseover') + "";
        var startIndex = mediumImageCaptionAttrValue.lastIndexOf(",'")
        var endIndex = mediumImageCaptionAttrValue.lastIndexOf("')")
        var imageCaption = mediumImageCaptionAttrValue.substring(startIndex+2, endIndex);
        document.getElementById("mediumImage").setAttribute('src', srcAttrValue);
        document.getElementById("mediumImage").setAttribute('onclick', popupAttrValue);
        var imageSource = smallImages[index].src;
		var imageSourcetype = imageSource.indexOf('gr')>0?imageSource.indexOf('gr')+2:imageSource.indexOf('mmc')+3;
		var figureNumber = imageSource.substring(imageSourcetype,imageSource.indexOf('-sml.jpg'));
		var hrefvalue = document.getElementById("image_container").getElementsByTagName("a")[0].getAttribute("href");
        var newHrefValue = hrefvalue.replace(hrefvalue.substring(hrefvalue.indexOf('fig'), hrefvalue.indexOf('fig')+4), 'fig'+figureNumber);
        document.getElementById("image_container").getElementsByTagName("a")[0].setAttribute('href', newHrefValue);
        document.getElementById("image_container").getElementsByTagName("strong")[0].innerHTML = 'Figure ' + figureNumber + ': ';
        document.getElementById("image_caption").innerHTML = imageCaption;
                
    }
    else {
        smallImages[index].style.className = "3px solid #232323";
        index = smallImages.length - 1;
        var srcAttrValue = smallImages[index].getAttribute("src").replace('-sml', '-med');
        var popupAttrValue = smallImages[index].getAttribute("onclick");
        var mediumImageCaptionAttrValue = document.getElementById("filmstripDiv").getElementsByTagName("img")[index].getAttribute('onmouseover') + "";
        var startIndex = mediumImageCaptionAttrValue.lastIndexOf(",'")
        var endIndex = mediumImageCaptionAttrValue.lastIndexOf("')")
        var imageCaption = mediumImageCaptionAttrValue.substring(startIndex+2, endIndex);
        document.getElementById("mediumImage").setAttribute('src', srcAttrValue);
        document.getElementById("mediumImage").setAttribute('onclick', popupAttrValue);
       var imageSource = smallImages[index].src;
		var imageSourcetype = imageSource.indexOf('gr')>0?imageSource.indexOf('gr')+2:imageSource.indexOf('mmc')+3;
		var figureNumber = imageSource.substring(imageSourcetype,imageSource.indexOf('-sml.jpg'));
		var hrefvalue = document.getElementById("image_container").getElementsByTagName("a")[0].getAttribute("href");
        var newHrefValue = hrefvalue.replace(hrefvalue.substring(hrefvalue.indexOf('fig'), hrefvalue.indexOf('fig')+4), 'fig'+figureNumber);  
        document.getElementById("image_container").getElementsByTagName("a")[0].setAttribute('href', newHrefValue);
        document.getElementById("image_container").getElementsByTagName("strong")[0].innerHTML = 'Figure ' + figureNumber + ': ';
        document.getElementById("image_caption").innerHTML = imageCaption;
        smallImages[index].className = "current_img";
        smallImages[index].style.className = "3px solid orange";
        
    }  
    smallImages[index].style.border = "3px solid orange";
}


    function hideFilmStripCaptionForCase(locator, event) {
    var smallImages = document.getElementById("filmstripDiv").getElementsByTagName("img");
    for (i=0; i< smallImages.length; i++) {
        smallImages[i].style.border = "3px solid #232323";
    }
    smallImages[index].style.border = "3px solid orange";
    document.getElementById("gallery_caption").style.visibility = "hidden";
    hideSavePopUp(event);        
}