$(document).ready(function(){
    $('.contentFieldGallery').each(function(){
        this.i_maxWidth     = $(this).attr('maxWidth')*1;
        this.i_lineHeight   = $(this).attr('lineHeight')*1;
        this.i_perRow       = $(this).attr('perRow')*1;
        this.i_moveTime     = $(this).attr('moveTime')*1;
        this.s_htmlImages   = $(this).html();
        this.s_galleryName  = $(this).attr('galleryName');
        this.s_images       = $('span',this).html();
        $(this).html('').append(
            '<div class="top">'+
                '<div class="titel"></div>'+
                '<div class="left"></div>'+
                '<div class="center"></div>'+
                '<div class="right"></div>'+
            '</div>'+
            '<div class="mid"></div>'+
            '<div class="bot">'+
                '<div class="left"></div>'+
                '<div class="right"></div>'+
            '</div>'
        ).css({'margin-bottom':'20px','width':this.i_maxWidth+'px','display':'none'});

        $('.top .right, .bot .right',this).css('left',(this.i_maxWidth-15)+'px');
        $('.top, .bot, .mid',this).css('width',this.i_maxWidth+'px');
        $('.top .titel',this).css('width',(this.i_maxWidth-20)+'px').html(this.s_galleryName);
        $('.top .center',this).css('width',(this.i_maxWidth-30)+'px');
        $('.mid',this).css('height',(this.i_lineHeight+5)+'px').html(this.s_htmlImages);
        $('.mid',this).css('height',this.i_lineHeight+'px').html(this.s_htmlImages);
        $('.bot .left',this).css('width',(this.i_maxWidth-15)+'px');
        var i_imgCount = 0;
        var i_perRow = this.i_perRow;
        var i_maxWidth = this.i_maxWidth;
        var i_lineHeight = this.i_lineHeight;
        var i_perRow = this.i_perRow;
        var s_images = this.s_images;
        var s_newMidHtml = '';
        $('.mid img',this).each(function(i_img){
            //s_newMidHtml += '<div onclick="'+$(this).attr('onclick')+'"><img src="'+$(this).attr('src')+'" /></div>';

            s_newMidHtml += '<div imgNum="'+$(this).attr('imgNum')+'"><img src="'+$(this).attr('src')+'" /></div>';

        });
        $('.mid',this).html(s_newMidHtml);
        $('.mid div',this).each(function(i_img){
            var i_widthDiv = Math.floor(((i_maxWidth-((i_perRow*5)+5)))/i_perRow);
            var i_imgWidthOri = $('img',this).attr('width');
            var i_imgHeightOri = $('img',this).attr('height');
            var i_imgWidthNew = i_widthDiv;
            var i_imgHeightNew = Math.round((i_imgWidthNew/i_imgWidthOri)*i_imgHeightOri);

            if(i_imgHeightNew < i_lineHeight){
                i_imgWidthNew = Math.round((i_lineHeight/i_imgHeightOri)*i_imgWidthOri);
                i_imgHeightNew = i_lineHeight;
            }

            var i_imgPosLeft = 0;
            if(i_imgWidthNew > i_widthDiv){
                i_imgPosLeft = Math.round(0-((i_imgWidthNew-i_widthDiv)/2));
            } else {
                i_imgPosLeft = Math.round((i_widthDiv-i_imgWidthNew)/2);
            }
            var i_imgPosTop = 0;
            if(i_imgHeightNew > i_lineHeight){
                i_imgPosTop = Math.round(0-((i_imgHeightNew-i_lineHeight)/2));
            } else {
                i_imgPosTop = Math.round((i_lineHeight-i_imgHeightNew)/2);
            }

            $(this).css({
                'position':'absolute',
                'top':'5px',
                'left':(i_imgCount*(Math.floor((i_maxWidth-   ((i_perRow*5)+5)  )/i_perRow)+5)+5)+'px',
                'width':i_widthDiv+'px',
                'height':i_lineHeight+'px',
                'cursor':'pointer',
                'overflow':' hidden'
            }).hide();
            $('img',this).css({
                'display':'block',
                'position':'absolute',
                'top':i_imgPosTop+'px',
                'left':i_imgPosLeft+'px',
                'width':i_imgWidthNew+'px',
                'height':i_imgHeightNew+'px',
                'cursor':'pointer'
            });
            if(i_imgCount == i_perRow-1){
                i_imgCount = 0;
            } else {
                i_imgCount++;
            }
        });
        $('.mid div',this).click(function(){
            galleryBgPopup(s_images,$(this).attr('imgNum'));
        });
        this.i_total    = $('.mid div',this).size();
        this.i_totalPages = Math.ceil(this.i_total/this.i_perRow);
        this.i_curPage  = 0;
        this.i_curNum   = 0;
        this.i_started  = false;
        this.a_curVisible = new Array();
        if(this.i_total > 0){
            contentFieldGalleryItem(this,0);
        }
        $(this).css({'display':'block'});
    });
    function contentFieldGalleryItem(mainDiv,i_num){
        var img = $('.mid div:eq('+(mainDiv.i_curNum+i_num)+')',mainDiv);
        if(!mainDiv.a_curVisible[i_num]){
            mainDiv.a_curVisible[i_num] = img;
        }
        mainDiv.a_curVisible[i_num].fadeOut('fast',function(){
            if(mainDiv.i_curNum+i_num > mainDiv.i_total-1){
                
                contentFieldGalleryItemPages(mainDiv,i_num);
            } else {
                img.fadeIn('fast',function(){
                    mainDiv.a_curVisible[i_num] = img;
                    contentFieldGalleryItemPages(mainDiv,i_num);
                });
            }
        });
    }
    function contentFieldGalleryItemPages(mainDiv,i_num){
        if(i_num+1 == mainDiv.i_perRow){
            mainDiv.i_curPage++;
            mainDiv.i_curNum += mainDiv.i_perRow*1;
            if(mainDiv.i_curPage >= mainDiv.i_totalPages){
                mainDiv.i_curNum = 0;
                mainDiv.i_curPage = 0;
            }
            if(mainDiv.i_totalPages > 1){
                $(document).oneTime(1000*mainDiv.i_moveTime, function(){
                    contentFieldGalleryItem(mainDiv,0);
                });
            }
        } else {
            contentFieldGalleryItem(mainDiv,i_num+1);
        }
    }
});
function galleryBgPopup(s_images,i_num){
    if($('#mainPopup').length == 0){
        $('body').append(
            '<div id="mainPopup" images="'+s_images+'" curImg="'+i_num+'">'+
                '<div id="mainPopupImage">'+
                    '<div id="mainPopupPrev">&laquo;</div>'+
                    '<div id="mainPopupNext">&raquo;</div>'+
                    '<div id="mainPopupClose">x</div>'+
                '</div>'+
            '</div>'+
            '<div id="mainPopupBg"></div>'
        );
        $('#mainPopupPrev').click(function(){
            var s_images = $('#mainPopup').attr('images');
            var i_cur = $('#mainPopup').attr('curImg')*1;
            var a_images = s_images.split(';');
            if(i_cur-1 < 0){
                i_cur = a_images.length-1;
            } else {
                i_cur--;
            }
            $('#mainPopup').attr('curImg',i_num);
            $('#mainPopupImage').fadeOut('fast',function(){
                galleryBgPopup(s_images,i_cur);
            });
        });
        $('#mainPopupNext').click(function(){
            var s_images = $('#mainPopup').attr('images');
            var i_cur = $('#mainPopup').attr('curImg')*1;
            var a_images = s_images.split(';');
            if(i_cur+1 > a_images.length-1){
                i_cur = 0;
            } else {
                i_cur++;
            }
            $('#mainPopup').attr('curImg',i_num);
            $('#mainPopupImage').fadeOut('fast',function(){
                galleryBgPopup(s_images,i_cur);
            });
        });
        $('#mainPopupClose').click(function(){
            $('#mainPopupImage').fadeOut('fast',function(){
                $('#mainPopup').attr({'images':'','curImg':''}).fadeOut();
                $('#mainPopupBg').fadeOut();
            });
        });
    }
    $('#mainPopupBg, #mainPopup').css('top',$(window).scrollTop()+'px').fadeIn(function(){
        $('#mainPopup').attr({'images':s_images,'curImg':i_num});
        var a_images = s_images.split(';');
        $('#mainPopupImage').css('background-image','url('+site_url+'plaatje.php?plaatje='+a_images[i_num]+'&width=600&height=450)').fadeIn('fast');
    });
}
$(window).scroll(function (){
    $('#mainPopupBg, #mainPopup').css('top',$(window).scrollTop()+'px');
});