/***********************************************************************************************************************
EDITED BY: ABCnet.nl
DATE: 31/08/2010
DESCRIPTION: bitImageViewer.js for www.dealkmaarseglazenier.nl
CHANGES: cursor:pointer and height and width images
************************************************************************************************************************/

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 = "<div class='infiniteCarousel'><div class='wrapper'><ul>";

    for (var i = 0; i <= MAXINDEX; i++) {

	html += "<li><img class='thumb' alt='" + i + "' src='" + thumbs[i] + "'width='125px' height='94px' style='cursor:pointer'/></li>";

    }
html += "</ul></div></div>";

    $('.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:hand'/></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);
}