var pGallery =
{
    items: null,
    preview: null,
    
    iNum: 0,
    iCurrentIndex: 0,
    
    init: function()
    {
        this.items = $('ul.items');
        this.preview = $('.pgallery .preview');
        
        this.iNum = this.items.children('li').length;
        var thumb = 100;
        var margin = 20;
        var width = ((thumb + margin) * this.iNum) - margin;
        
        this.items.width(width);
        this.items.children('li')[this.iNum - 1].style.marginRight = '0px';
        
        $('.scroller').jScrollHorizontalPane(
        {
            scrollbarHeight: 11, 
            scrollbarMargin: 0,
            dragMaxWidth: 116
        });
        
        $('.items a').click(function(e)
        {
            e.preventDefault();
            e.stopPropagation();
            pGallery.goToItem(this);
        });
        
        $('.left.btn').click(function(e)
        {
            e.preventDefault();
            e.stopPropagation();
            pGallery.goToPrev();
        });
        
        $('.right.btn').click(function(e)
        {
            e.preventDefault();
            e.stopPropagation();
            pGallery.goToNext();
        });
    },
    goToPrev: function()
    {
        this.goToIndex(--this.iCurrentIndex);
    },
    goToNext: function()
    {
        this.goToIndex(++this.iCurrentIndex);
    },
    goToIndex: function(index, noScroll)
    {
        if(this.iNum)
        {
            while(this.iNum && index >= this.iNum) { index -= this.iNum }
            while(this.iNum && index < 0) { index += this.iNum }
        }
        
        var item = $(this.items.children('li')[index]).children('a')[0];
        if(item)
        {
            this.goToItem(item, noScroll);
        }
    },
    goToItem: function(item, noScroll)
    {
        var self = this;
        
        var iAnchor = $(item);
        var iLi = iAnchor.parents('li');
        var iImg = iAnchor.children('img');
        
        var iId = iAnchor.attr('id').match(/image\_([0-9]+)\_anchor/)[1];
        this.iCurrentIndex = Number(iId) - 1;
        
        var pImg = $('img#image_' + iId + '_full');
        var pWrapper = $('div#image_' + iId + '_full_wrapper');
        
        $('.scroller')[0].scrollTo('li:has(#' + iAnchor.attr('id') + ')');
        
        if(iLi.hasClass('selected'))
        {
            iLi.removeClass('selected');
            this.preview.children('.full').removeClass('loading');
            return;
        }
        
        this.items.children('li.selected').removeClass('selected');
        iLi.addClass('selected');
        
        this.preview.children('div.full').addClass('hidden');
        pWrapper.removeClass('hidden');
        
        var j = $('div.pgallery').offset().top;
        
        if(!noScroll)
        {
            $('html,body').animate({ scrollTop: j }, 200, 'swing', function()
            {
                self.preview.fadeIn(400, function()
                {
                    if(!(iAnchor.hasClass('loaded')))
                    {
                        pImg.parents('.full').addClass('loading');
                    }
                    $('.left.btn').height(pWrapper.height());
                    $('.right.btn').height(pWrapper.height());
                });
            });
        }
        else
        {
            self.preview.fadeIn(400, function()
            {
                if(!(iAnchor.hasClass('loaded')))
                {
                    pImg.parents('.full').addClass('loading');
                }
                $('.left.btn').height(pWrapper.height());
                $('.right.btn').height(pWrapper.height());
            });
        }
        
        pImg.load(function()
        {
            $(this).css('visibility', 'visible');
            $(this).parents('.full').removeClass('loading');
            iAnchor.addClass('loaded');
        });
        pImg.attr('src', iAnchor.attr('href'));
        
        $('.left.btn').height(pWrapper.height());
        $('.right.btn').height(pWrapper.height());
    }
};