$(document).ready(function(){
    $('.contentFieldGallery').each(function(){
        $(this).hide();
        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).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-5;
        var i_perRow = this.i_perRow;
        var s_newMidHtml = '';
        $('.mid img',this).each(function(i_img){
            s_newMidHtml += '<div onclick="'+$(this).attr('onclick')+'"><img src="'+$(this).attr('src')+'" alt="'+$(this).attr('alt')+'" widthOri="'+$(this).attr('widthOri')+'" heightOri="'+$(this).attr('heightOri')+'" /></div>';
        });
        $('.mid',this).html(s_newMidHtml);
   
        $('.mid div',this).each(function(i_img){
            var i_divWidth = Math.floor(((i_maxWidth-((i_perRow*5)+5)))/i_perRow);
            $(this).css({
                'position':'absolute',
                'top':'5px',
                'left':(i_imgCount*(Math.floor((i_maxWidth-   ((i_perRow*5)+5)  )/i_perRow)+5)+5)+'px',
                'width':i_divWidth+'px',
                'height':i_lineHeight+'px',
                'cursor':'pointer',
                'overflow':'hidden'
            }).hide();
            var ob_img = $('img',this);
            var i_imgWidthOri = ob_img.attr('widthOri');
            var i_imgHeightOri = ob_img.attr('heightOri');
            var i_imgWidth = i_divWidth;
            var i_imgHeight = Math.floor((i_imgWidth/i_imgWidthOri)*i_imgHeightOri);
            ob_img.css({
                'position':'absolute',
                'display':'block',
                'width':i_imgWidth+'px',
                'height':i_imgHeight+'px',
                'top':((i_lineHeight-i_imgHeight)/2)+'px',
                'left':((i_divWidth-i_imgWidth)/2)+'px',
                'cursor':'pointer'
            });
            if(i_imgCount == i_perRow-1){
                i_imgCount = 0;
            } else {
                i_imgCount++;
            }
        });
        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);
        }
    }
});