function MultiPageThumbnailAlbum()
{
    var PrototypesObject = new Prototypes();
    var Class = this;

    // ID
    this.ID = '';

    // Container
    this.Container = '';

    // Settings
    this.Width = 0;
    this.Height = 0;
    this.noRows = 0;
    this.noColumns = 0;
    this.ImageWidth = 0;
    this.ImageHeight = 0;
	this.BackgroundColor = '000000';
    this.TransitionDuration = 200;

    // Content
    this.IDs = new Array();
    this.Images = new Array();
    this.noImages = 0;
    this.noPages = 0;

    //
    this.ImagesLoaded = Array();
    this.previousPage = 0;
    this.currentPage = 1;
    this.currentAnimatedImage = 0;
    this.animationInProgress = false;

    this.init = function(id, container, data, width, height, noRows, noColumns)
    {
        this.ID = id;
        this.Container = container;
        this.Width = width;
        this.Height = height;
        this.noRows = noRows;
        this.noColumns = noColumns;
        this.ImageWidth = (width-64)/noColumns;
        this.ImageHeight = (height-67)/noRows;
        this.previousPage = 0;
        this.currentPage = 1;
        this.parseData(data);
    }

    this.parseData = function(data)
    {
        var splitImages = new Array();
        var i;

        splitImages = data.split(';;;');
        this.noImages = splitImages.length;
        if (this.noImages%(this.noColumns*this.noRows) == 0) this.noPages = this.noImages/(this.noColumns*this.noRows);
        else this.noPages = Math.floor(this.noImages/(this.noColumns*this.noRows))+1;

        for (i=0; i<this.noImages; i++)
        {
            this.IDs[i] = splitImages[i].split(';;')[0];
            this.Images[i] = splitImages[i].split(';;')[1];
        }

        this.setContainer();
        this.showAlbum();
    }

    this.setContainer = function()
    {
        $DOP(this.Container).css('overflow', 'hidden');
        $DOP(this.Container).css('background', 'none');
        $DOP(this.Container).css('margin', '0px');
        $DOP(this.Container).css('padding', '0px');
        $DOP(this.Container).width(this.Width);
        $DOP(this.Container).height(this.Height);
    }

    this.showAlbum = function()
    {
        var HTML = '<div class="DOP_MultiPageThumbnailAlbum_Display" id="DOP_MultiPageThumbnailAlbum_Display_'+this.ID+'">';
        var row;
        var column;
        var imageNo;
        var marginTop;
        var marginLeft;
        var style;
        
        for (i=1; i<=this.noImages; i++)
        {
            this.ImagesLoaded[i] = false;

            if (i%this.noColumns == 0) column = this.noColumns;
            else column = i%this.noColumns;

            if (i%(this.noRows*this.noColumns) == 0) imageNo = this.noRows*this.noColumns;
            else imageNo = i%(this.noRows*this.noColumns);

            if (imageNo%this.noColumns == 0) row = Math.floor(imageNo/this.noColumns);
            else row = Math.floor(imageNo/this.noColumns)+1;
            
            marginTop = (row-1)*this.ImageHeight;
            marginLeft = (column-1)*this.ImageWidth;

            style = 'style="';
            style += 'margin-top:'+marginTop+'px; ';            
            style += 'margin-left:'+marginLeft+'px; ';            
            style += '"';
            
            HTML += '<div '+style+' class="DOP_MultiPageThumbnailAlbum_Image" id="DOP_MultiPageThumbnailAlbum_'+this.ID+'_Image_'+i+'"></div>';
        }

        HTML += '</div>';
        HTML += '<div id="DOP_MultiPageThumbnailAlbum_Prev_big"></div>';
        HTML += '<div id="DOP_MultiPageThumbnailAlbum_Next_big"></div>';
        HTML += '<div id="DOP_MultiPageThumbnailAlbum_Pagination">';
        for (i=1; i<=this.noPages; i++)
        {
            HTML += '<span><a href="javascript:void(0)" id="page'+i+'">'+i+'</a></span>';
        }
        HTML += '</div>';
        $DOP(this.Container).html(HTML);

        $DOP('.DOP_MultiPageThumbnailAlbum_Image').click(function()
        {
            $DOP.post('includes/com/dop/php/SimpleThumbnailGallery.php', {id:Class.IDs[$DOP(this).attr('id').split('_Image_')[1]-1]}, function(data)
            {
                $DOP('#top-loader').html('');
                $DOP(Class.Container).css('display', 'none');
                $DOP('#SimpleThumbnailGallery').css('display', 'block');
                SimpleThumbnailGalleryObject.init('1', '#SimpleThumbnailGallery', data, 924, 627);
            });
        });

        $DOP('#DOP_MultiPageThumbnailAlbum_Prev_big').css('margin-top', (this.Height-22-67)/2);
        $DOP('#DOP_MultiPageThumbnailAlbum_Next_big').css('margin-top', (this.Height-22-67)/2);
        $DOP('#DOP_MultiPageThumbnailAlbum_Next_big').css('margin-left', this.Width-12);
        $DOP('#DOP_MultiPageThumbnailAlbum_Prev_big').css('display', 'none');
        if (this.noPages < 2)
        {
            $DOP('#DOP_MultiPageThumbnailAlbum_Next_big').css('display', 'none');
            $DOP('#DOP_MultiPageThumbnailAlbum_Pagination').css('display', 'none');
        }

        $DOP('#DOP_MultiPageThumbnailAlbum_Prev_big').click(function()
        {
            if (Class.animationInProgress == false) Class.displayPage(Class.currentPage-1);
        });
        $DOP('#DOP_MultiPageThumbnailAlbum_Next_big').click(function()
        {
            if (Class.animationInProgress == false) Class.displayPage(parseInt(Class.currentPage)+1);
        });
        
        $DOP('#DOP_MultiPageThumbnailAlbum_Pagination').css('margin-top', (this.Height-67));
        $DOP('a span #DOP_MultiPageThumbnailAlbum_Pagination').click(function()
        {
            if (Class.animationInProgress == false) Class.displayPage($DOP(this).attr('id').split('page')[1]);
        });
        
        this.loadImage(1);
        this.displayPage(1);
        $DOP('#top-loader').html('<img src="images/loader1.gif" style="width:24px; height:24px;" alt="" />');
    }

    this.loadImage = function(no)
    {
        $DOP('#DOP_MultiPageThumbnailAlbum_'+this.ID+'_Image_'+no).width(Class.ImageWidth);
        $DOP('#DOP_MultiPageThumbnailAlbum_'+this.ID+'_Image_'+no).height(Class.ImageHeight);

        var img = new Image();

        $DOP(img).load(function()
        {
            $DOP('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+no).append(this);
            $DOP('img', '#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+no).css('height', Class.ImageHeight+'px');
            $DOP('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+no).stop(true, true).animate({'opacity':'0'}, 0);            
            $DOP('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+no).css('display', 'none');
            //PrototypesObject.HCenterItem('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+no, Class.ImageWidth);
            Class.ImagesLoaded[no] = true;
            if (no == Class.currentAnimatedImage)
            {
                $DOP('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+no).css('display', 'block');
                $DOP('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+no).stop(true, true).animate({'opacity':'1'}, Class.TransitionDuration, function()
                {
                    if ((Class.currentPage-1)+no < Class.noRows*Class.noColumns  && (Class.currentPage-1)+no < Class.noImages-(Class.currentPage-1)*Class.noRows*Class.noColumns) Class.showImage(no+1);
                    else Class.animationInProgress = false;
                });
            }
            if (no < Class.noImages) Class.loadImage(no+1);
            else $DOP('#top-loader').html('');
        }).attr('src', Class.Images[no-1]);
    }

    this.displayPage = function(no)
    {
        Class.animationInProgress = true;

        if (this.previousPage == 0)
        {
            this.previousPage = this.currentPage;
            this.currentPage = no;
            this.showImage(1);
        }
        else
        {            
            this.previousPage = this.currentPage;
            $DOP('#page'+Class.previousPage).removeClass('selected');
            this.currentPage = no;
            this.hideImage(1);
        }

        $DOP('#page'+Class.currentPage).addClass('selected');
        if (Class.currentPage == 1) $DOP('#DOP_MultiPageThumbnailAlbum_Prev_big').css('display', 'none');
        else $DOP('#DOP_MultiPageThumbnailAlbum_Prev_big').css('display', 'block');
        if (Class.currentPage == Class.noPages) $DOP('#DOP_MultiPageThumbnailAlbum_Next_big').css('display', 'none');
        else $DOP('#DOP_MultiPageThumbnailAlbum_Next_big').css('display', 'block');
    }

    this.showImage = function(no)
    {
        Class.currentAnimatedImage = (this.currentPage-1)*(this.noRows*this.noColumns)+no;
        
        if (Class.ImagesLoaded[Class.currentAnimatedImage] == true)
        {
            $DOP('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+Class.currentAnimatedImage).css('display', 'block');
            $DOP('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+Class.currentAnimatedImage).stop(true, true).animate({'opacity':'1'}, Class.TransitionDuration, function()
            {
                if (no < Class.noRows*Class.noColumns && no < Class.noImages-(Class.currentPage-1)*Class.noRows*Class.noColumns) Class.showImage(no+1);
                else Class.animationInProgress = false;
            });
        }
    }

    this.hideImage = function(no)
    {
        var currentImage = (this.previousPage-1)*(this.noRows*this.noColumns)+no;

        $DOP('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+currentImage).stop(true, true).animate({'opacity':'0'}, Class.TransitionDuration, function()
        {
            $DOP('#DOP_MultiPageThumbnailAlbum_'+Class.ID+'_Image_'+currentImage).css('display', 'none');
            if (no < Class.noRows*Class.noColumns && no < Class.noImages-(Class.previousPage-1)*Class.noRows*Class.noColumns) Class.hideImage(no+1);
            else Class.showImage(1);
        });
    }
}