var _index = 0;
var images;
$(document).ready(function() {
    if (images) {
        //showImageByIndex(_index);
        buildThumbBarVertical();
        buildThumbBarHorizontal();
        $('.thumb').click(function() {
            _index = $(this).attr('alt');
            showImageByIndex(_index);
        });

        if (showOnHover) {
            $('.thumb').mouseover(function() {
                _index = $(this).attr('alt');
                showImage(_index);
            });
        }
        showImageByIndex(0);
    }
});

function firstImage() {
    _index = 0;
    showImageByIndex(_index);
}

function previousImage() {
    _index--;
    if (_index < 0) _index = 0;
    showImageByIndex(_index);
}

function nextImage() {
    _index++;
    if (_index > MAXINDEX) _index = MAXINDEX;
    showImageByIndex(_index);
}

function lastImage() {
    _index = MAXINDEX;
    showImageByIndex(_index);
}

function buildThumbBarHorizontal() {
    var html = "<table><tr>";
    for (var i = 0; i <= MAXINDEX; i++) {

        html += "<td><img class='thumb' alt='" + i + "' src='" + thumbs[i] + "' width='50px' height='50px' style='cursor:hand'/></td>";
    }
    html += "</tr></table>";
    $('.thumbnailBarH').html(html);
}

function buildThumbBarVertical() {
    var html = "<table>";
    for (var i = 0; i <= MAXINDEX; i++) {

        html += "<tr><td><img class='thumb' alt='" + i + "' src='" + thumbs[i] + "' width='50px' height='50px' style='cursor:pointer'/></td></tr>";
    }
    html += "</table>";
    $('.thumbnailBarV').html(html);
}

function showImageByIndex(index) {
    $('.imageMain').attr('src', images[index]);
    $('.title').html(titles[index]);
    $('.intro').html(intros[index]);
    $('.content').html(contents[index]);
}

function showImage(src, title, intro, content) {
    $('.imageMain').attr('src', src);
    $('.title').html(title);
    $('.intro').html(intro);
    $('.content').html(content);
}