m_page = location.href;
m_page = m_page.substr(m_page.lastIndexOf('/') + 1);
m_page = m_page.slice(0, m_page.indexOf('.'));

var cardsPerPage = 12;
var currentIndex = 0;
var theImages = '';
var totalImages = 0;

if (m_page != 'index' && m_page != '') {
    theImages = categories[m_page];
    totalImages = theImages.length;
}


function getNavigation() {
    buffer = "";
    i = 1;
    totalNum = Math.ceil(totalImages / cardsPerPage);
    while (i <= totalNum) {
        buffer += '<a id="nav' + i + '" class="cardSet" href="javascript://" onclick="setNavigation(\'' + i + '\'); return false;">&nbsp;' + i + '&nbsp;</a>';
        if (i != totalNum) {
            buffer += '<img border="0" src="images/dot.gif" width="8" height="10" alt="" />';
        }
        i++;
    }
    return buffer;
}

function setNavigation(index) {
    if (index == 'next') { // User clicked the right navigation arrow.
        index = parseInt(currentIndex) + 1;
        if (index > Math.ceil(totalImages / cardsPerPage)) return; // If we're at the end, just return;
    } else if (index == 'previous') { // User clicked the left navigation arrow.
        index = parseInt(currentIndex) - 1;
        if (index == 0) return; // If we're at the beginning, just return.
    }
    
    // Reset the previous navigation index to normal.
    if (currentIndex > 0) {
        obj = document.getElementById("nav" + currentIndex);
        obj.style.color = "black";
    }
    // Set the current navigation index to bold red.
    currentIndex = index;
    obj = document.getElementById("nav" + index);
    obj.style.color = "red";
    
    // Display the cards that fall within the navigation index.
    startIndex = (index * cardsPerPage) - cardsPerPage;
    for (i = 0; i < cardsPerPage; i++) {
        cardObj = document.getElementById("card" + (i + 1));
        numObj = document.getElementById("cardNum" + (i + 1));
        if ((startIndex + i) >= totalImages) { // If we don't have any more card, set the image to blank.
            cardObj.src = "images/blank.gif";
            numObj.value = "";
        } else {
            imageName = theImages[startIndex + i];
            cardObj.src = "images/small/card_" + imageName + ".jpg";
            numObj.value = imageName;
            numObj.style.width = imageName.length * 10;
        }
    }
}

var largeView = null;
function displayCard(card) {
    cardObj = document.getElementById(card);
    cardName = cardObj.src;
    cardName = cardName.substring(cardName.lastIndexOf('/') + 1);
    x = (screen.availWidth / 2) - 240;
    y = (screen.availHeight / 2) - 350;
    largeView = window.open("card_viewer.html?CARD=" + cardName,"cardViewer","left=" + x + ",top=" + y + ",width=480,height=700,resizable,scrollbars");
    largeView.focus();
}

var myconsole = null;
function debug(msg) {
    if (myconsole == null || myconsole.closed) {
        myconsole = window.open("","myconsole","width=200,height=300,resizable,scrollbars");
        myconsole.document.open("text/plain");
    }
    myconsole.document.writeln(msg);
}