// Maximum number of thumbnails per page
var numPerPage = 8;

// Current page of thumbnails
var currentPage = null;

// All media (to be populated in document ready)
var allMedia = null;

$(document).ready(function(){

    // All media
    allMedia = $('#jbit-media .media');

    // Load first page of thumbnails
    loadPage(0);

    // Load first media
    loadMedia(0, true);

});

/*
* Thumbnail onClick. Load the clicked media into the content area.
*/
var thumbClick = function() {

    var num = $(this).attr('id').split('_')[1];

    loadMedia(num);

    return false;

}

/*
* Page number onClick. Load the clicked page of thumbnails into the
* thumbnail area.
*/
var pageNumClick = function() {

    var num = $(this).attr('id').split('_')[1];

    loadPage(num);

    return false;
    
}

/*
 * Load the given media into the content area. If 'init' is true,
 * this is an initial page load; don't fade out first.
 */
function loadMedia(num, init) {

    var media = allMedia[num];

    var obj = $.trim($('.object', media).html());

    var html = '<div class="object">' + obj + '</div>';

    $('#jbit-gallery #gallery-thumbnails img').removeClass('active');
    $('#jbit-gallery #gallery-thumbnails #thumb_' + num + ' img').addClass('active');
    
    if( init ) {
        $('#jbit-gallery #gallery-content').html(html);
    } else {
        $('#jbit-gallery #gallery-content').fadeOut(400, function() {
            $('#jbit-gallery #gallery-content').html(html);
            $('#jbit-gallery #gallery-content').fadeIn(400);
        });
    }

}

/*
 * Load the given page of thumbnails into the thumbnail area.
 */
function loadPage(page) {

    var start = page * numPerPage;

    $('#jbit-gallery #gallery-thumbnails').html('');

    for( var i = start; i < (start + numPerPage); i++ ) {

        if( i == allMedia.length ) break;

        var thumbnails = $('#jbit-gallery #gallery-thumbnails');

        thumbnails.html(thumbnails.html() + generateThumbnail(i));

    }

    currentPage = parseInt(page);

    $('#jbit-gallery .thumb').click(thumbClick);

    //loadPageNumbers(page);

}

/*
 * Return the HTML for the given media's thumbnail.
 */
function generateThumbnail(num) {

    var media = allMedia[num];

    var title = $.trim($('.title', media).html());
    var thumbnail = $.trim($('.thumbnail', media).html());

    var html  = '<div class="thumb_container">';
        html += '<a href="#" id="thumb_' + num + '" class="thumb">' + thumbnail + '</a>';
        html += '</div>';

    return html;

}

/*
* Load the given page's pagination links into the pagination area.
*/
function loadPageNumbers(page) {

    var numPages = Math.ceil(allMedia.length / numPerPage);

    var html = '';

    if( currentPage != 0 ) {
        html += '<a href="#" id="page_' + (currentPage - 1) + 
                '" class="page">Previous</a>';
    }

    for( var i = 0; i < numPages; i++ ) {
        html += '<a href="#" id="page_' + i + '" class="page">' + (i + 1) + 
                '</a>';
    }

    if( (currentPage + 1) != numPages ) {
        html += '<a href="#" id="page_' + (currentPage + 1) +
                '" class="page">Next</a>';
    }

    $('#jbit-gallery #pagination').html(html);
    $('#jbit-gallery .page').click(pageNumClick);

}