<!--

function ImagePager(images, thumbnails)
{
    var imagepagerObj =
    {
        images: images,
        thumbnails: thumbnails,
        currentImage: 0,
        elementId: null,

        create: function(elementId)
        {
            this.elementId = elementId;

            var innerHtml = '<img id="' + elementId + '_img" class="imagepager" border="0" src="" />';

            if (images.length > 1)
            {
                innerHtml += '<div class="image_pagerbar">'
                innerHtml += '<a href="#" onclick="return false;" class="pager_left" id="' + elementId + '_previous">1</a> / <a href="#" onclick="return false;" class="pager_right" id="' + elementId + '_next">' + this.images.length + '</a>';
                innerHtml += '</div>';
            }

            if (this.thumbnails && this.thumbnails.length > 1)
            {
                innerHtml += '<div class="imagepager_thumbdivider"></div>';
                for ( var i = 0; i < this.thumbnails.length; i++ )
                {
                    innerHtml += '<img id="' + elementId + '_thumb_' + i + '" border="0" class="imagepager_thumb" src="' + this.thumbnails[i] + '" />';
                }
            }

            $(elementId).innerHTML = innerHtml;

            if (images.length > 1)
            {
                $(elementId + '_previous').addEvent('click', this.previous.bindWithEvent(this));
                $(elementId + '_next').addEvent('click', this.next.bindWithEvent(this));

                if (this.thumbnails && this.thumbnails.length > 1)
                {
                    for ( var i = 0; i < this.thumbnails.length; i++ )
                    {
                        $(elementId + '_thumb_' + i).addEvent('click', this.setCurrentImageByThumb.bindWithEvent(this));
                    }
                }
            }

            this.loadCurrentImage();
        },

        setCurrentImageByThumb: function(e)
        {
          var parts = e.target.id.split('_');
          var newImage = parseInt(parts[parts.length - 1]);
          if ( newImage != this.currentImage )
          {
              this.currentImage = parseInt(parts[parts.length - 1]);
              this.loadCurrentImage();
          }
        },

        previous: function()
        {
            if ( this.currentImage < 1 )
            {
                this.currentImage = this.images.length - 1;
            }
            else
            {
                this.currentImage--;
            }

             this.loadCurrentImage();
//            $(this.elementId + '_img').src = this.images[this.currentImage];

            return false;
        },

        next: function()
        {
            if ( this.currentImage > this.images.length - 2 )
            {
                this.currentImage = 0;
            }
            else
            {
                this.currentImage++;
            }

            this.loadCurrentImage();
//            $(this.elementId + '_img').src = this.images[this.currentImage];

            return false;
        },


        loadCurrentImage: function()
        {
            if (images.length > 1)
            {
                $(this.elementId + '_previous').innerHTML = (this.currentImage + 1);
            }



            var imgTag = new Asset.image(this.images[this.currentImage], {style: 'display:none;', id: this.elementId + '_img', onload: this.showImage.bind(this)});

            $(this.elementId + '_img').style.visibility = 'hidden';
            $(this.elementId + '_img').src = this.images[this.currentImage];
        },

        showImage: function()
        {
//            alert($(this.elementId + '_img').style.visibility);
//            $(this.elementId + '_img').style.visibility = 'show';

            var myFx = new Fx.Style(this.elementId + '_img', 'opacity', {duration: 350}).start(0,1);

        }
    };

    return imagepagerObj;

}

//-->