/*
    All code written by Mark Hinch - Feb to May 2008
    10-Nov-2009 Updated to allow class to be added to tab C MacPherson
*/

var allTabs = new Array ();         // Holds all tabs' info and queries etc...
var selectedTabs = new Array ();    // Holds the tabNumber of the active tab of each tabset

function createTabSet (whichTabs) {
    selectedTabs[whichTabs] = new Array ();
    allTabs[whichTabs] = new Array ();
}

function defineTab (whichTabs, theHeading, theFunction, theQuery, theParams, theValues, theCount) {
    var tabNumber = allTabs[whichTabs].length;
    allTabs[whichTabs][tabNumber] = new Array ();
    allTabs[whichTabs][tabNumber]["theHeading"] = theHeading;
    allTabs[whichTabs][tabNumber]["theFunction"] = theFunction;
    allTabs[whichTabs][tabNumber]["theQuery"] = theQuery;
    allTabs[whichTabs][tabNumber]["theParams"] = theParams;
    allTabs[whichTabs][tabNumber]["theValues"] = theValues;
    allTabs[whichTabs][tabNumber]["theCount"] = theCount;
}

function redefineTab (whichTabs, tabNumber, theParams, theValues) {
    allTabs[whichTabs][tabNumber]["theParams"] = theParams;
    allTabs[whichTabs][tabNumber]["theValues"] = theValues;

    drawTabs (whichTabs, tabNumber);
}

function drawTabs (whichTabs, tabNumber) {
    var theTabs = '<table class="tabSectionHeading" cellpadding="0" cellspacing="0">';
    theTabs += '<tr>';
    theTabs += '<td class="tab_preheading"><img src="' + htmlTop + 'images/tabs/tab_0.gif" /></td>';

    switch (tabNumber) {
        case 0 : theTabs += '<td class="tabedge"><img src="' + htmlTop + 'images/tabs/tab_1.gif" /></td>'; break;
        default : theTabs += '<td class="tabedge"><img src="' + htmlTop + 'images/tabs/tab_5.gif" /></td>'; break;
    }

    for (x = 0; x < allTabs[whichTabs].length; x++) {
        x == tabNumber ? whichClass = 'tab_on' : whichClass = 'tab_off';
        theTabs += '<td class="' + whichClass + '"><div>';
        theTabs += (x != tabNumber) ? '<a class="tabLink" href="javascript:void(0);" onclick="javascript:drawTabs (\'' + whichTabs + '\', ' + x + ')">' : '';
        theTabs += removeSpaces (allTabs[whichTabs][x]["theHeading"]);
        theTabs += (x != tabNumber) ? '<\/a>' : '';
        theTabs += '</div></td>';

        if (x != (allTabs[whichTabs].length - 1)) {
            if (x != tabNumber) {
                if ((x + 1) != tabNumber) {
                    theTabs += '<td class="tabedge"><img src="' + htmlTop + 'images/tabs/tab_3.gif" /></td>';
                } else {
                    theTabs += '<td class="tabedge"><img src="' + htmlTop + 'images/tabs/tab_6.gif" /></td>';
                }
            } else {
                theTabs += '<td class="tabedge"><img src="' + htmlTop + 'images/tabs/tab_2.gif" /></td>';
            }
        } else {
            if (x != tabNumber) {
                theTabs += '<td class="tabedgeEnd"><img src="' + htmlTop + 'images/tabs/tab_4.gif" /></td>';
            } else {
                theTabs += '<td class="tabedgeEnd"><img src="' + htmlTop + 'images/tabs/tab_7.gif" /></td>';
            }
        }
    }
    theTabs += '<td class="tab_repeat">&nbsp;</td>';
    theTabs += '<td class="tab_ending"><img src="' + htmlTop + 'images/tabs/tab_8.gif" /></td>';
    theTabs += '</tr></table>';

    document.getElementById ('tabs_' + whichTabs).innerHTML = theTabs;

    selectedTabs[whichTabs] = tabNumber;
    populateTabs (whichTabs, tabNumber);
}

function drawTabs2 (whichTabs, tabNumber, tabWidth) {
    var theTabs = '<div class="tabSectionHeading2">';

    var drawTabWidth;
    if( !tabWidth ) {
        drawTabWidth = 483;
    } else {
        drawTabWidth = tabWidth;
    }

    for (x = 0; x < allTabs[whichTabs].length; x++) {
        x == tabNumber ? whichClass = 'tab2_on' : whichClass = 'tab2_off';
        x == tabNumber ? leftwhichClass = 'left_tab2_on' : leftwhichClass = 'left_tab2_off';
        x == tabNumber ? rightwhichClass = 'right_tab2_on' : rightwhichClass = 'right_tab2_off';

        theTabs += '<div class="tab2"><div class="' + leftwhichClass + '">&nbsp;</div><div class="' + whichClass + '"><div style="padding-top: 9px;">';
        theTabs += (x != tabNumber) ? '<a class="tabLink" href="javascript:void(0);" onclick="javascript:drawTabs2 (\'' + whichTabs + '\', ' + x + ', ' + drawTabWidth + ')">' : '';
        theTabs += removeSpaces (allTabs[whichTabs][x]["theHeading"]);
        theTabs += (x != tabNumber) ? '<\/a>' : '';
        theTabs += '</div></div><div class="' + rightwhichClass + '">&nbsp;</div></div>';
    }



    theTabs += '</div>';

    theTabs += '<div style="float: left; width: 100%; height:7px; font-size:7px;">';
    theTabs += '<div style="float: left; width: 6px; background: url('+htmlTop+'images/tabs/tab_desc_left.gif) top left no-repeat;">&nbsp;</div>';
    theTabs += '<div style="float: left; width: '+drawTabWidth+'px; background: url('+htmlTop+'images/tabs/tab_desc_bg2.gif) top left repeat-x;">&nbsp;</div>';
    theTabs += '<div style="float: left; width: 7px; background: url('+htmlTop+'images/tabs/tab_desc_right.gif) top left no-repeat;">&nbsp;</div>';
    theTabs += '</div>';

    document.getElementById ('tabs_' + whichTabs).innerHTML = theTabs;

    selectedTabs[whichTabs] = tabNumber;
    populateTabs (whichTabs, tabNumber, true);
}

function populateTabs (whichTabs, tabNumber, div_text) {

    if(!div_text) {
        theQuery = allTabs[whichTabs][tabNumber]["theQuery"];
        theParams = allTabs[whichTabs][tabNumber]["theParams"];
        theValues = allTabs[whichTabs][tabNumber]["theValues"];

        // Sort it out for the relevant browser
        var xmlhttp = false;
        try {xmlhttp = new ActiveXObject ('Msxml2.XMLHTTP');} catch (e) {
            try {xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');} catch (E) {
                xmlhttp = false;
            }
        }
        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') xmlhttp = new XMLHttpRequest ();

        // Build up the parameters string from passed in parameters and values
        var paramString = '';
        for (z = 0; z < theParams.length; z++) paramString += '&' + theParams[z] + '=' + theValues[z];

        // Perform the query
        xmlhttp.open ('GET', htmlTop + 'ajax/ajax-query.php?query=' + theQuery + paramString, true);

        // 0 - Not initialised, 1 - Loading data, 2 - Loaded data, 3 - Data available, 4 - Initialised
        xmlhttp.onreadystatechange = function () {
            switch (xmlhttp.readyState) {
                case 0 : case 1 : case 2 : case 3 : displayLoading (whichTabs); break;
                case 4 :
                    // Now display the results
                    displayResults (whichTabs, xmlhttp.responseXML);
                break;
            }
        }

        xmlhttp.send (null);
    }
    else {
        document.getElementById ('main_' + whichTabs+'_description').innerHTML = document.getElementById ('tab_' + whichTabs+'_description_'+tabNumber).innerHTML;
    }

    return;
}

// FUNCTION TO DISPLAY CUSTOM LOADING ICON FOR AJAX-RETRIEVED CONTENT IN TABS
function displayLoading (whichTabs) {
    whichTabs = document.getElementById ('content_' + whichTabs);
    whichTabs.innerHTML = '<center><img src="' + htmlTop + 'images/icons/ajax-loader.gif" /><\/center>';
}

// FUNCTION TO DISPLAY RESULTS FOR AJAX-RETRIEVED CONTENT IN TABS
function displayResults (whichTabs, resultXML) {
    // CHECK THE COUNT (FOR PAGINATION PURPOSES)
    result = resultXML.getElementsByTagName ("result");

    allTabs[whichTabs][selectedTabs[whichTabs]]["theCount"] = result[0].getAttribute("count");
    theFunction = allTabs[whichTabs][selectedTabs[whichTabs]]["theFunction"];

    itemArray = resultXML.getElementsByTagName ('item');
    resultHTML = '';


    // LET'S SEE IF WE NEED TO HIDE ANY PAGINATION ARROWS
    leftArrow = document.getElementById ('left_' + whichTabs);
    rightArrow = document.getElementById ('right_' + whichTabs);
    if ((leftArrow) && (rightArrow)) {
        for (x = 0; x < allTabs[whichTabs][selectedTabs[whichTabs]]["theParams"].length; x++) {
            if (allTabs[whichTabs][selectedTabs[whichTabs]]["theParams"][x] == "start") {
                theStart = allTabs[whichTabs][selectedTabs[whichTabs]]["theValues"][x] * 1;
            }
            if (allTabs[whichTabs][selectedTabs[whichTabs]]["theParams"][x] == "limit") {
                theLimit = allTabs[whichTabs][selectedTabs[whichTabs]]["theValues"][x] * 1;
            }
        }
        theCount = allTabs[whichTabs][selectedTabs[whichTabs]]["theCount"] * 1;

        if (theStart == 0) {
            if (theCount < theLimit) {
                leftArrow.style.display = 'none';
                rightArrow.style.display = 'none';
            } else {
                leftArrow.style.display = 'none';
                rightArrow.style.display = 'block';
            }
        } else if ((theStart + theLimit) > (theCount)) {
            leftArrow.style.display = 'block';
            rightArrow.style.display = 'none';
        } else if (theCount < theLimit) {
            leftArrow.style.display = 'none';
            rightArrow.style.display = 'none';
        } else {
            leftArrow.style.display = 'block';
            rightArrow.style.display = 'block';
        }
    }

    if (result[0].getAttribute("count") == 0) {
        resultHTML += '<div class="errorItem">' + itemArray[0].firstChild.nodeValue + '<\/div>';
        if (document.getElementById ('main_' + whichTabs)) {
            document.getElementById ('main_' + whichTabs).style.display = "none";
        }
    } else {
        switch (theFunction) {
            case "news" :
                for (j = 0; j < itemArray.length; j++) {
                    if (itemArray[j].getAttribute("image") != "") {
                        image = itemArray[j].getAttribute("image");
                    } else {
                        image = '/images/icons/sega_icon.jpg';
                    }

                    resultHTML += '<div class="newsItem">';
                    resultHTML += '<div class="image"><a href="' + htmlTop + 'news/?n=' + itemArray[j].getAttribute("id") + '"><img src="' + image + '" /><\/a><\/div>';
                    resultHTML += '<a href="' + htmlTop + 'news/?n=' + itemArray[j].getAttribute("id") + '">' + itemArray[j].getAttribute("heading") + '<\/a><br \/>';
                    resultHTML += '<span class="date">' + itemArray[j].getAttribute("date") + '<\/span>';
                    resultHTML += '<\/div>';
                }
                break;
            case "headlinenews" :
                for (j = 0; j < itemArray.length; j++) {
                    if (itemArray[j].getAttribute("image") != "") {
                        image = itemArray[j].getAttribute("image");
                    } else {
                        image = '/images/icons/sega_icon.jpg';
                    }

                    resultHTML += '<div class="newsItem">';
                    resultHTML += '<div class="image"><a href="' + itemArray[j].getAttribute("link") + '" target="_' + (itemArray[j].getAttribute("target") == "0" ? 'self' : 'blank') + '"><img src="' + image + '" /><\/a><\/div>';
                    resultHTML += '<a href="' + itemArray[j].getAttribute("link") + '" target="_' + (itemArray[j].getAttribute("target") == "0" ? 'self' : 'blank') + '">' + itemArray[j].getAttribute("heading") + '<\/a><br \/>';
                    resultHTML += '<\/div>';
                }
            break;
            case "downloads" :
                for (j = 0; j < itemArray.length; j++) {
                    resultHTML += '<div class="downloadItem">';
                    resultHTML += '<div class="date">' + itemArray[j].getAttribute("date") + '<\/div>';
                    resultHTML += '<a href="' + itemArray[j].getAttribute("link") + '">' + itemArray[j].getAttribute("title") + '<\/a>';
                    resultHTML += '<span class="size"> (' + itemArray[j].getAttribute("size") + ' Mb)<\/span><br \/>';
                    resultHTML += '<span class="text">' + itemArray[j].firstChild.nodeValue + '<\/span>';
                    resultHTML += '<\/div>';
                }
            break;
            case "games" :
                for (j = 0; j < itemArray.length; j++) {
                    if (itemArray[j].getAttribute("packshot") != "") {
                        image = itemArray[j].getAttribute("packshot");
                    } else {
                        image = 'images/icons/sega_icon.jpg';
                    }

                    resultHTML += '<div class="gameItem">';
                    resultHTML += '<div class="image"><a href="' + itemArray[j].getAttribute("link") + '" target="' + itemArray[j].getAttribute("target") + '"><img src="' + image + '" \/><\/a><\/div>';
                    resultHTML += '<div class="textarea">';
                    resultHTML += '<a href="' + itemArray[j].getAttribute("link") + '" target="' + itemArray[j].getAttribute("target") + '">' + itemArray[j].getAttribute("name") + '<\/a> - ';
                    resultHTML += '<span class="text"> ' + itemArray[j].getAttribute("platforms") + ' <\/span>';
    //              resultHTML += '<span class="text">' + itemArray[j].firstChild.nodeValue + '<\/span>';
                    resultHTML += '<span class="date">' + itemArray[j].getAttribute("releasedate") + '<\/span>';
                    if(itemArray[j].getAttribute("retailers")!=''){
                        resultHTML += ' - <a class="purchaseSidebar" href="' + itemArray[j].getAttribute("retailers") + '">' + itemArray[j].getAttribute("buyoption") + '<\/a>';
                    }
    //              resultHTML += '<span class="text">' + itemArray[j].getAttribute("summary") + '<\/span>';
                    resultHTML += '<\/div>';
                    resultHTML += '<\/div>';
                    resultHTML += '<div class="clearingDiv" style="height: 0px">&nbsp;<\/div>';
                }
            break;
            case "media" :
                for (j = 0; j < itemArray.length; j++) {
                    resultHTML += '<div class="mediaItem">';
                    resultHTML += '<a href="' + itemArray[j].getAttribute("productpage") + '" title="' + itemArray[j].getAttribute("game") + '" >';
                    resultHTML += '<div style="background: url(\'' + itemArray[j].getAttribute("thumb") + '\') no-repeat top center" class="image"><div class="icon" onmouseover="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_1.gif\', \'button_' + whichTabs + '_' + j + '\');" onmouseout="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_0.gif\', \'button_' + whichTabs + '_' + j + '\');"><img src="' + htmlTop + 'images/buttons/ss_0.gif" id="button_' + whichTabs + '_' + j + '" \/><\/div><\/div>';
                    resultHTML += '<div class="text">' + itemArray[j].getAttribute("game") + '<\/div>';
                    resultHTML += '<\/a>';
                    resultHTML += '<\/div>';
                }
            break;
            case "screenshots" :
                for (j = 0; j < itemArray.length; j++) {
                    resultHTML += '<div class="screenshotItem">';
                    resultHTML += '<a href="' + itemArray[j].getAttribute("src") + '" rel="lightbox[]" title="' + itemArray[j].getAttribute("game") + '" >';
                    resultHTML += '<div style="background: url(\'' + itemArray[j].getAttribute("thumb") + '\') no-repeat top center" class="image"><div class="icon" onmouseover="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_1.gif\', \'button_' + whichTabs + '_' + j + '\');" onmouseout="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_0.gif\', \'button_' + whichTabs + '_' + j + '\');"><img src="' + htmlTop + 'images/buttons/ss_0.gif" id="button_' + whichTabs + '_' + j + '" \/><\/div><\/div>';
                    resultHTML += '<\/a>';
                    resultHTML += '<\/div>';
                }
            break;
            case "videos1" :
                for (j = 0; j < itemArray.length; j++) {
                    resultHTML += '<div class="videoItem1">';
                    resultHTML += '<a href="' + htmlTop + 'games/?g=' + itemArray[j].getAttribute("gameid") + '&v=' + itemArray[j].getAttribute("id") + '" title="' + itemArray[j].getAttribute("gamename") + '" >';
                    resultHTML += '<div style="background: url(\'' + itemArray[j].getAttribute("thumb") + '\') no-repeat top center" class="image"><div class="icon" onmouseover="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_1.gif\', \'button_' + whichTabs + '_' + j + '\');" onmouseout="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_0.gif\', \'button_' + whichTabs + '_' + j + '\');"><img src="' + htmlTop + 'images/buttons/ss_0.gif" id="button_' + whichTabs + '_' + j + '" \/><\/div><\/div>';
                    resultHTML += '<div class="text">' + itemArray[j].getAttribute("gamename") + '<\/div>';
                    resultHTML += '<\/a>';
                    resultHTML += '<\/div>';
                }
            break;
            case "videos2" :
                for (j = 0; j < itemArray.length; j++) {
                    resultHTML += '<div class="videoItem2">';
                    resultHTML += '<a href="javascript:void(0)" onclick="javascript:loadFLV(\'' + itemArray[j].getAttribute("src") + '\', \'' + itemArray[j].getAttribute("image") + '\', \'' + itemArray[j].getAttribute("title").split("'").join("\\'") + '\')" title="' + itemArray[j].getAttribute("title") + '" class="VideoTips">';
                    resultHTML += '<div style="background: url(\'' + itemArray[j].getAttribute("thumb") + '\') no-repeat top center" class="image"><div class="icon" onmouseover="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_1.gif\', \'button_' + whichTabs + '_' + j + '\');" onmouseout="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_0.gif\', \'button_' + whichTabs + '_' + j + '\');"><img src="' + htmlTop + 'images/buttons/ss_0.gif" id="button_' + whichTabs + '_' + j + '" \/><\/div><\/div>';
                    resultHTML += '<\/a>';
                    resultHTML += '<\/div>';
                }
            break;
            case "content" :
                for (j = 0; j < itemArray.length; j++) {
                    resultHTML += '<div class="contentItem">';
                    resultHTML += '<div class="text">' + itemArray[j].firstChild.nodeValue + '<\/div>';
                    resultHTML += '<\/div>';
                }
            break;
            case "reviews" :
                resultHTML += '<div class="reviewItems">';
                for (j = 0; j < itemArray.length; j++) {
                    if (itemArray[j].getAttribute("reviewerlogo") != "") {
                        image = itemArray[j].getAttribute("reviewerlogo");
                    } else {
                        image = 'images/icons/sega_icon.jpg';
                    }
    //                resultHTML += '<h3 class="toggler atStart"><a class="button1_on" href="javascript:void(0)" style="float: left; width: 360px; text-align: left"><span>' + itemArray[j].getAttribute("heading") + ' - ' + itemArray[j].getAttribute("reviewername") + '</span></a></h3>';
                    resultHTML += '<div class="reviewItem">';
                    resultHTML += '<div class="heading"><a class="heading" href="' + (itemArray[j].getAttribute("reviewwebsite") != '' ? itemArray[j].getAttribute("reviewwebsite") : itemArray[j].getAttribute("reviewerwebsite")) + '" target="_blank">' + itemArray[j].getAttribute("heading") + '</a></div>';
                    resultHTML += '<div class="reviewer"><a href="' + itemArray[j].getAttribute("reviewerwebsite") + '" target="_blank">' + itemArray[j].getAttribute("reviewername") + '</a></div>';
                    resultHTML += (itemArray[j].getAttribute("score") > 0) ? '<div class="score">' + itemArray[j].getAttribute("score") + '%</div>' : '';
                    //resultHTML += '<img src="' + image + '" class="image" \/>';
                    //resultHTML += '<div class="text">' + itemArray[j].firstChild.nodeValue + '</div>';
                    resultHTML += '</div>';
                }
                resultHTML += '</div>';
            break;
            case "playsega" :
                for (j = 0; j < itemArray.length; j++) {
                    resultHTML += '<div class="playsegaItem' + (j % 2) + '">';
                    resultHTML += '<a href="' + itemArray[j].getAttribute("href") + '" title="' + itemArray[j].getAttribute("name") + '" target="_blank">';
                    resultHTML += '<div style="background: url(\'' + itemArray[j].getAttribute("thumb") + '\') no-repeat top center" class="image"><div class="icon" onmouseover="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_1.gif\', \'button_' + whichTabs + '_' + j + '\');" onmouseout="javascript: imageChange (\'' + htmlTop + 'images/buttons/ss_0.gif\', \'button_' + whichTabs + '_' + j + '\');"><img src="' + htmlTop + 'images/buttons/ss_0.gif" id="button_' + whichTabs + '_' + j + '" \/><\/div><\/div>';
                    resultHTML += '<div class="text">' + itemArray[j].getAttribute("name") + '<\/div>';
                    resultHTML += '<\/a>';
                    resultHTML += '<\/div>';
                }
            break;
            case "fansites" :
                resultHTML += '<div style="height: 185px; overflow: hidden">' + itemArray[0].firstChild.nodeValue + '<\/div>';
                break;
            case "blank" :
                resultHTML = '';
            break;
        }
    }

    whichTabs = document.getElementById ('content_' + whichTabs);
    if (resultHTML != '') {
        whichTabs.innerHTML = resultHTML;
    } else {
        whichTabs.innerHTML = "";
    }

    if (result[0].getAttribute("count") > 0) {
        // IF IT IS ONE THAT NEEDS SLIMBOX
        if ((theFunction == "media") || (theFunction == "screenshots")) {
            Lightbox.init (Lightbox);
        }

        // IF IT IS ONE THAT NEEDS TOOLTIPS
        if (theFunction == "videos2") {
            var VideoTips = new Tips($$('.VideoTips'), {className: 'videotip'});
        }

        // IF IT IS ONE THAT NEEDS THE MOO TOOLS ACCORDION
/*        if (theFunction == "reviews") {
            var accordion = new Accordion('h3.atStart', 'div.atStart', {}, $('accordion'));
            var newTog = new MooElement('h3', {'class': 'toggler'});
            var newEl = new MooElement('div', {'class': 'element'});
            accordion.addSection(newTog, newEl, 0);
        }*/
    }
}

function skipPage (whichTabs, whichWay) {
    tabNumber = selectedTabs[whichTabs];
    theQuery = allTabs[whichTabs][tabNumber]["theQuery"];
    theParams = allTabs[whichTabs][tabNumber]["theParams"];
    theValues = allTabs[whichTabs][tabNumber]["theValues"];
    theCount = allTabs[whichTabs][tabNumber]["theCount"];

    for (x = 0; x < theParams.length; x++) {
        if (theParams[x] == "start") start = x;
        if (theParams[x] == "limit") limit = x;
    }

    if (whichWay == 'next') {
        theValues[start] = 1 * (theValues[start] * 1) + (theValues[limit] * 1);
    } else if (whichWay == 'prev') {
        theValues[start] = 1 * (theValues[start] * 1) - (theValues[limit] * 1);
    }

    if (((theValues[start] * 1) >= 0) && ((theValues[start] * 1) < theCount)) {
        allTabs[whichTabs][tabNumber]["theValues"] = theValues;
        drawTabs (whichTabs, tabNumber);
    } else {
        if (whichWay == 'next') {
            theValues[start] = 1 * (theValues[start] * 1) - (theValues[limit] * 1);
        } else if (whichWay == 'prev') {
            theValues[start] = 1 * (theValues[start] * 1) + (theValues[limit] * 1);
        }
    }
}

function removeSpaces (theString) {
    var result = '';
    theString = '' + theString;
    splitString = theString.split (" ");
    for (i = 0; i < splitString.length; i++) result += splitString[i] + "&nbsp;";
    return result;
}

/* PRIMARILY USED FOR SCREENSHOTS THUMBNAILS */
function imageChange (theURL, theOne) {
    document.getElementById (theOne).src = theURL;
}

/* This is a function that goes through all the buttons in a range (theButtons), and unhighlights them, whilst highlighting the chosen one (theButton) */
function doButtons (theButtons, theButton) {
    found = true;
    for (x = 0; x < 100; x++) {
        theItem = document.getElementById (theButtons + x);
        if (theItem) {
            if (x == theButton) {
                theItem.setAttribute('class', 'button4_on');
            } else {
                theItem.setAttribute('class', 'button4');
            }
        } else {
            x = 100;
        }
    }
}

function show_div( div_element )
{
    var div_obj = document.getElementById (div_element);
    div_obj.style.display = '';
}

function hide_div( div_element )
{
    var div_obj = document.getElementById (div_element);
    div_obj.style.display = 'none';
}

/* Show and hide div elements passed as params. Show first element and hide everything else. show_and_hide_div('show_div_id_1', 'hide_div_id_1', 'hide_div_id_2', ...)*/
function show_and_hide_div()
{
    var items = show_and_hide_div.arguments.length;

    for (i = 1; i < items; i++)
    {
      document.getElementById ( show_and_hide_div.arguments[i] ).style.display = 'none';
    }

    document.getElementById ( show_and_hide_div.arguments[0] ).style.display = '';
}