﻿//    var alboomImages = [
//            { alboomId: 'f3d591d7-e7ae-45af-a699-3d74900399bd',
//                images: [
//              {
//                  imageUrl: '/Renderers/ShowMedia.ashx?i=MediaArchive:/Tours/Photos/01/1202460879_2_large.jpg',
//                  thmbUrl: '/Renderers/ShowMedia.ashx?i=MediaArchive:/Tours/Photos/01/1202460879_1.jpg'
//              }
//              ]}

$(function() {
    $('#closeBox').click(function() {
        $.modal.close();
    });
});

function initMain(src, text) {
    
}

function viewAlboom(Id) {
    var viewer = $('#fotoViewer');

    var thumbNailsContainerObj = $(viewer.find('.imageThumbnails')[0]);
    thumbNailsContainerObj.find('img').remove();
    for (var i = 0; i < alboomImages.length; i++) {
        if (alboomImages[i].alboomId == Id) {
            viewer.find('.headerText').html(alboomImages[i].alboomTitle);
            var isFirst = true;
            for (var j = 0; j < alboomImages[i].images.length; j++) {
                if (isFirst) {
                    isFirst = false;
                    viewer.find('#mainImage').attr('src', alboomImages[i].images[j].imageUrl);
                    viewer.find('#imageTitle').html(alboomImages[i].images[j].imageTitle);
                }
                var itemHtm = '<div style="float:left;"></div>';
                itemObj = $(itemHtm);
                itemHtm = '<input type="hidden" />';
                itemObj.append($(itemHtm).val(alboomImages[i].images[j].imageUrl));
                itemObj.append($('<img alt="'+ 
                        alboomImages[i].images[j].imageTitle + 
                        '" src="' + 
                        alboomImages[i].images[j].thmbUrl + 
                        '"/>'));

                thumbNailsContainerObj.append(itemObj);
            }
        }
    }
    thumbNailsContainerObj.find('img').click(function() {
        $(this).parents('#fotoViewer').find('#mainImage').attr('src', $(this).parent().find('input').val());
        $(this).parents('#fotoViewer').find('#imageTitle').html($(this).attr('alt'));
    });

    
    $('#fotoViewer').modal({
        overlayCss: {
            backgroundColor: '#000'
        },
        containerCss: {
            width: 800,
            height: 780
        }
    });
}
