function resetPage(themeID, strBackColour, theme1Head, theme2Head, theme3Head, theme4Head, theme5Head) {

    var hiddenselectedTheme = document.getElementById('selectedTheme');
    if (hiddenselectedTheme) {
        if (!themeID)
            themeID = 1;
        hiddenselectedTheme.value = themeID;
    }


    //Daryl Jewkes 8-Aug-2007 - need to add further logic to update the thumbnails. This functionality is currently on hold.
    if (themeID == 1)
        showHeaderDIV(themeID, theme1Head);
    else if (themeID == 2)
        showHeaderDIV(themeID, theme2Head); 
    else if (themeID == 3)
        showHeaderDIV(themeID, theme3Head);
    else if (themeID == 4)
        showHeaderDIV(themeID, theme4Head);
    else if (themeID == 5)
        showHeaderDIV(themeID, theme5Head);
    else {
        //protect the param value passed in
        themeID = 1;
        showHeaderDIV(themeID, theme1Head);
    }
    showDIV(themeID);
    moveDIVstoTop();
}

function moveDIVstoTop() {
    var moveDiv = document.getElementById('activitieswrap5');
    moveDiv.scrollTop = 0;
}

function showTheme(themeID, strBackColour, newIMG, theme1img, theme2img, theme3img, theme4img, theme5img, themeHeader, themeSubBackground, themeTitle) {

    //check that we are not showing the current theme
    var hiddenselectedTheme = document.getElementById('selectedTheme');
    if (themeID == (hiddenselectedTheme.value))
        return false;

    moveDIVstoTop();

    //change the left menu to show selected
    var MenuItem1 = document.getElementById('li1');
    MenuItem1.className = "selectbed";
    var MenuItem2 = document.getElementById('li2');
    MenuItem2.className = "selectbed";
    var MenuItem3 = document.getElementById('li3');
    MenuItem3.className = "selectbed";
    var MenuItem4 = document.getElementById('li4');
    MenuItem4.className = "selectbed";
    var MenuItem5 = document.getElementById('li5');
    MenuItem5.className = "selectbed";
    var MenuItemX = document.getElementById('li' + themeID);
    MenuItemX.className = "selectedbed";

    showHeaderDIV(themeID, themeHeader);
    showDIV(themeID);
    
    //reset all images to BW to cleanup any problems
    var Theme1Thumbnail = document.getElementById('item1');
    Theme1Thumbnail.src = theme1img;        
    var Theme2Thumbnail = document.getElementById('item2');
    Theme2Thumbnail.src = theme2img;
    var Theme3Thumbnail = document.getElementById('item3');
    Theme3Thumbnail.src = theme3img;    
    var Theme4Thumbnail = document.getElementById('item4');
    Theme4Thumbnail.src = theme4img;
    var Theme5Thumbnail = document.getElementById('item5');
    Theme5Thumbnail.src = theme5img;
    
    //show the selected theme thumbnail image
    var selectedThemeThumbnail = document.getElementById('item' + themeID);
    selectedThemeThumbnail.src = newIMG;
    

    //reset all title backgrounds to cleanup any problems
    var objdiv1 = document.getElementById('divtitle1');
    objdiv1.style.backgroundColor = "#d8d8d8";
    objdiv1.style.color = "#666666";
    var objdiv2 = document.getElementById('divtitle2');
    objdiv2.style.backgroundColor = "#d8d8d8";
    objdiv2.style.color = "#666666";
    var objdiv3 = document.getElementById('divtitle3');
    objdiv3.style.backgroundColor = "#d8d8d8";
    objdiv3.style.color = "#666666";
    var objdiv4 = document.getElementById('divtitle4');
    objdiv4.style.backgroundColor = "#d8d8d8";
    objdiv4.style.color = "#666666";
    var objdiv5 = document.getElementById('divtitle5');
    objdiv5.style.backgroundColor = "#d8d8d8";
    objdiv5.style.color = "#666666";
    
    //set the selected theme background colour
    setTitleColour('divtitle' + themeID, strBackColour, '#ffffff');

    //set the selected div to escape mouseovers
    var hiddenselectedTheme = document.getElementById('selectedTheme');
    if (hiddenselectedTheme) {
        hiddenselectedTheme.value = themeID;
    }

}

function showHeaderDIV(themeID, themeHeader) {
    //switch the headerimage, title and background
    document.getElementById('discoverheader').style.backgroundImage = "url('" + themeHeader + "')";
    document.getElementById('discovertitlebackground1').style.display = "none";
    document.getElementById('discovertitlebackground2').style.display = "none";
    document.getElementById('discovertitlebackground3').style.display = "none";
    document.getElementById('discovertitlebackground4').style.display = "none";
    document.getElementById('discovertitlebackground5').style.display = "none";
    document.getElementById('discovertitlebackground' + themeID).style.display = "";
}

function showDIV(themeID) {

    //hide all divs to cleanup any problems
    var ThemeDiv1 = document.getElementById('theme1');
    ThemeDiv1.className = "hideTheme";
    var ThemeDiv2 = document.getElementById('theme2');
    ThemeDiv2.className = "hideTheme";
    var ThemeDiv3 = document.getElementById('theme3');
    ThemeDiv3.className = "hideTheme";
    var ThemeDiv4 = document.getElementById('theme4');
    ThemeDiv4.className = "hideTheme";
    var ThemeDiv5 = document.getElementById('theme5');
    ThemeDiv5.className = "hideTheme";

    //show the selected div
    var selectedTheme = document.getElementById('theme' + themeID);
    selectedTheme.className = "showTheme";
}

function setTitleColour(divID, strColour, strFontColour) {
    //if the selected theme is clicked, ignore...
    var hiddenselectedTheme = document.getElementById('selectedTheme');
    //alert(divID);
    if (hiddenselectedTheme) {
        if (divID == ('divtitle' + hiddenselectedTheme.value))
            return false;   
    }
    document.getElementById(divID).style.backgroundColor = strColour;
    document.getElementById(divID).style.color = strFontColour;
}