
function SimpleThumbnailGallery()
{
    var PrototypesObject = new Prototypes();
    var Class = this;

    // ID
    this.ID = '';

    // Container
    this.Container = '';

    // Settings
    this.Width = 0;
    this.Height = 0;
    this.ImageWidth = 0;
    this.ImageHeight = 0;
	this.BackgroundColor = '000000';
    this.TransitionDuration = 600;

    // Content
    this.Images = new Array();
    this.Thumbs = new Array();
    this.Credits = new Array();
    this.noImages = 0;

    //
    this.currentImage = 0;
    this.showCredits = false;

    this.init = function(id, container, data, width, height)
    {
        this.ID = id;
        this.Container = container;
        this.Width = width;
        this.Height = height;
        this.ImageWidth = width-64;
        this.ImageHeight = height-77;
        this.parseData(data);
    }

    this.parseData = function(data)
    {
        var splitImages = new Array();
        var i;

        splitImages = data.split(';;;');
        this.noImages = splitImages.length;
        
        for (i=0; i<this.noImages; i++)
        {
            this.Images[i] = splitImages[i].split(';;')[0];
            this.Thumbs[i] = splitImages[i].split(';;')[1];
            this.Credits[i] = splitImages[i].split(';;')[2];
        }

        this.setContainer();
        this.showGallery();
    }

    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.showGallery = function()
    {
        var HTML = '';
        
        HTML += '<div id="DOP_SimpleThumbnailGallery_Credits">';
        HTML += '<div id="DOP_SimpleThumbnailGallery_Credits_bg"></div>';
        HTML += '<div id="DOP_SimpleThumbnailGallery_Credits_text"></div>';
        HTML += '</div>';

        HTML += '<div class="DOP_SimpleThumbnailGallery_Display" id="DOP_SimpleThumbnailGallery_Display_'+this.ID+'"></div>';
        HTML += '<div id="DOP_SimpleThumbnailGallery_Prev_big"></div>';
        HTML += '<div id="DOP_SimpleThumbnailGallery_Next_big"></div>';
        HTML += '<div id="DOP_SimpleThumbnailGallery_Pagination">';
        HTML += '<ul>';
        HTML += '<li><a href="javascript:void(0)" id="back">BACK</a></li>';
        HTML += '<li id="credits_li"><a href="javascript:void(0)" id="credits">CREDITS</a></li>';
        HTML += '</ul>';
        HTML += '</div>';
        
        HTML += '<div id="DOP_SimpleThumbnailGallery_Thumbnails">';        
        for (i=1; i<=this.noImages; i++)
        {
            HTML += '<span><a href="javascript:void(0)" class="DOP_SimpleThumbnailGallery_Thumbnail" id="image'+i+'"><img src="'+this.Thumbs[i-1]+'" alt="" /></a></span>';
        }
        HTML += '</div>';
        
        $DOP(this.Container).html(HTML);

        $DOP('#DOP_SimpleThumbnailGallery_Credits').width(Class.ImageWidth);
        $DOP('#DOP_SimpleThumbnailGallery_Credits_bg').width(Class.ImageWidth);
        $DOP('#DOP_SimpleThumbnailGallery_Credits_bg').stop(true, true).animate({'opacity':'0.7'}, 0);
        $DOP('#DOP_SimpleThumbnailGallery_Credits').css('display', 'none');
        $DOP('#DOP_SimpleThumbnailGallery_Credits').stop(true, true).animate({'opacity':'0'}, 0);

        $DOP('.DOP_SimpleThumbnailGallery_Display').width(this.ImageWidth);
        $DOP('.DOP_SimpleThumbnailGallery_Display').height(this.ImageHeight);

        
        $DOP('#DOP_SimpleThumbnailGallery_Display_'+Class.ID).click(function()
        {
            if (Class.noImages > 1)
            {
                if (Class.currentImage+1 > Class.noImages) Class.loadImage(1);
                else Class.loadImage(Class.currentImage+1);
            }
            else
            {
                $DOP(Class.Container).stop(true, true).animate({'opacity':'0'}, 600, function()
                {
                    $DOP(Class.Container).css('display', 'none');
                    $DOP(Class.Container).animate({'opacity':'1'}, 0);
                    $DOP('#MultiPageThumbnailAlbum').stop(true, true).animate({'opacity':'0'}, 0);
                    $DOP('#MultiPageThumbnailAlbum').css('display', 'block');
                    $DOP('#MultiPageThumbnailAlbum').stop(true, true).animate({'opacity':'1'}, 600);
                });
            }
        });
        
        
        $DOP('#credits').click(function()
        {
            if (Class.showCredits == false)
            {
                Class.showCredits = true;
                $DOP('#DOP_SimpleThumbnailGallery_Credits').css('display', 'block');
                $DOP('#DOP_SimpleThumbnailGallery_Credits').stop(true, true).animate({'opacity':'1'}, 600);
                $DOP(this).addClass('selected');
            }
            else
            {
                Class.showCredits = false;
                $DOP(this).removeClass('selected');

                $DOP('#DOP_SimpleThumbnailGallery_Credits').stop(true, true).animate({'opacity':'0'}, 600, function()
                {
                    $DOP('#DOP_SimpleThumbnailGallery_Credits').css('display', 'none');
                });
            }
        });
        
        $DOP('#back').click(function()
        {
            $DOP(Class.Container).stop(true, true).animate({'opacity':'0'}, 600, function()
            {
                $DOP(Class.Container).css('display', 'none');
                $DOP(Class.Container).animate({'opacity':'1'}, 0);
                $DOP('#MultiPageThumbnailAlbum').stop(true, true).animate({'opacity':'0'}, 0);
                $DOP('#MultiPageThumbnailAlbum').css('display', 'block');
                $DOP('#MultiPageThumbnailAlbum').stop(true, true).animate({'opacity':'1'}, 600);                
            });

            //$DOP(Class.Container).css('display', 'none');
            //$DOP('#MultiPageThumbnailAlbum').css('display', 'block');
        });
        
        $DOP('#DOP_SimpleThumbnailGallery_Prev_big').css('margin-top', (this.Height-22-67)/2-5);
        $DOP('#DOP_SimpleThumbnailGallery_Next_big').css('margin-top', (this.Height-22-67)/2-5);
        $DOP('#DOP_SimpleThumbnailGallery_Next_big').css('margin-left', this.Width-12);
        $DOP('#DOP_SimpleThumbnailGallery_Prev_big').css('display', 'none');
        if (this.noImages < 2) $DOP('#DOP_SimpleThumbnailGallery_Next_big').css('display', 'none');
        
        $DOP('#DOP_SimpleThumbnailGallery_Prev_big').click(function()
        {
            Class.loadImage(Class.currentImage-1);
        });
        $DOP('#DOP_SimpleThumbnailGallery_Next_big').click(function()
        {
            Class.loadImage(parseInt(Class.currentImage)+1);
        });
        
        $DOP('#DOP_SimpleThumbnailGallery_Thumbnails').css('margin-top', (this.Height-67));
        $DOP('.DOP_SimpleThumbnailGallery_Thumbnail').animate({'opacity':'0.7'}, 0);
        $DOP('.DOP_SimpleThumbnailGallery_Thumbnail').click(function()
        {
            if ($DOP(this).attr('id').split('image')[1] != Class.currentImage)
            {
                Class.loadImage($DOP(this).attr('id').split('image')[1]);
            }
        });

        $DOP('.DOP_SimpleThumbnailGallery_Thumbnail').hover(
        function(){$DOP(this).stop(true, true).animate({'opacity':'1'}, 0);},
        function()
        {
            if (Class.currentImage != $DOP(this).attr('id').split('image')[1]) $DOP(this).stop(true, true).animate({'opacity':'0.7'}, 0);           
        });
          
        this.loadImage(1);
    }

    this.loadImage = function(no)
    {
        this.currentImage = no;
        
        $DOP('#DOP_SimpleThumbnailGallery_Credits_text').html(Class.Credits[no-1]);
        $DOP('#DOP_SimpleThumbnailGallery_Credits_bg').height($DOP('#DOP_SimpleThumbnailGallery_Credits').height());
        $DOP('#DOP_SimpleThumbnailGallery_Credits').css('margin-top', Class.ImageHeight-$DOP('#DOP_SimpleThumbnailGallery_Credits').height());
        $DOP('#credits').css('display', 'none');
        $DOP('#credits_li').css('display', 'none');
        $DOP('#DOP_SimpleThumbnailGallery_Credits').css('display', 'none');
        $DOP('#DOP_SimpleThumbnailGallery_Credits').stop(true, true).animate({'opacity':'0'}, 0);
        if (Class.Credits[no-1] != 'none')
        {
            $DOP('#credits').css('display', 'block');
            $DOP('#credits_li').css('display', 'block');

            if (Class.showCredits == true)
            {
                $DOP('#DOP_SimpleThumbnailGallery_Credits').css('display', 'block');
                $DOP('#DOP_SimpleThumbnailGallery_Credits').stop(true, true).animate({'opacity':'1'}, 600);
                $DOP('#credits').addClass('selected');
            }
        }
        
        $DOP('.DOP_SimpleThumbnailGallery_Thumbnail').animate({'opacity':'0.7'}, 0);
        $DOP('.DOP_SimpleThumbnailGallery_Thumbnail').css('cursor', 'pointer');
        $DOP('#image'+no).css('cursor', 'default');
        $DOP('#image'+no).stop(true, true).animate({'opacity':'1'}, 0);
        $DOP('#DOP_SimpleThumbnailGallery_Prev_big').css('display', 'block');
        $DOP('#DOP_SimpleThumbnailGallery_Next_big').css('display', 'block');
        $DOP('#DOP_SimpleThumbnailGallery_Display_'+Class.ID).addClass('DOP_SimpleThumbnailGallery_loading');
        if (Class.currentImage == 1) $DOP('#DOP_SimpleThumbnailGallery_Prev_big').css('display', 'none');
        if (Class.currentImage == Class.noImages) $DOP('#DOP_SimpleThumbnailGallery_Next_big').css('display', 'none');
        
        $DOP('#DOP_SimpleThumbnailGallery_Display_'+Class.ID).html('');
        var img = new Image();
        
        $DOP(img).load(function()
        {
            $DOP('#DOP_SimpleThumbnailGallery_Display_'+Class.ID).removeClass('DOP_SimpleThumbnailGallery_loading');
            $DOP('#DOP_SimpleThumbnailGallery_Display_'+Class.ID).append(this);
            PrototypesObject.ResizeItem('#DOP_SimpleThumbnailGallery_Display_'+Class.ID, Class.ImageWidth, Class.ImageHeight, $DOP(this).width(), $DOP(this).height(), 'horizontal-center');
            $DOP('#DOP_SimpleThumbnailGallery_Display_'+Class.ID).stop(true, true).animate({'opacity':'0'}, 0);
            $DOP('#DOP_SimpleThumbnailGallery_Display_'+Class.ID).stop(true, true).animate({'opacity':'1'}, Class.TransitionDuration);

        }).attr('src', Class.Images[no-1]);
    }
}
