//--------------------------------------------------------------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------------------
// EZImagesScroller - a simple image scroller.
// sample usage:
// <a id="btnLeft">&lt;</a><div id="container"></div><a id="btnright">&gt;</a>
// <script>var imagesScroller = new EZImagesScroller(......);
// parameters:
// container - the DOM object for div where images will be displayed ... document.getElementById('container')
// imageList - semicolon delimited list of image urls
// btnLeft - DOM object, usually a link or button, to indicate scroll left action
// btnRight - DOM object, usually a link or button, to indicate scroll right action
// startingPosition - position to start
// size - how many images to display
// attributes - any attributes to attach to images 
//--------------------------------------------------------------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------------------

function EZImagesScroller(container, imageList, id1List, id2List, dtList, btnLeft, btnRight, startingPosition, size, attributes)
{
    this.container = container;
    var images_array = imageList.split(";");
    this.images = new Array();
    this.id1_array = id1List.split(";");
    this.id2_array = id2List.split(";");
    this.dt_array = dtList.split(";");
    for (var i=0; i<images_array.length; i++)
    {
        this.images[i] = new Image();
        this.images[i].src = images_array[i];
    }
    this.btnLeft = btnLeft;
    this.btnRight = btnRight;
    this.position = startingPosition;
    this.size = size;
    this.attributes = attributes;
    
    var that = this;
    
    this.btnLeft.onclick = function(ev)
    {
        that.ScrollLeft();
        return false;
    }
    this.btnRight.onclick = function(ev)
    {
        that.ScrollRight();
        return false;
    }
    
    this.DrawContainer();
}

EZImagesScroller.prototype =
{
    // draw the images, also show/hide scroll buttons
    DrawContainer : function()
    {
        // show or hide left/right button
        this.btnLeft.style.display = (this.position>0) ? '' : 'none';
        this.btnRight.style.display = (this.position+this.size<this.images.length) ? '' : 'none';
        var html = '';
        for (var i=this.position; i<this.images.length && i<this.position+this.size; i++)
        {
            html += '<img src="' + this.images[i].src + '" ' + this.attributes + ' onmouseover="showBadgePopup(this, ' + this.id1_array[i] + ', \'' + this.dt_array[i] + '\', \'' + this.id2_array[i] + '\');" />';
        }
        this.container.innerHTML = html;
    },
    
    ScrollLeft : function()
    {
        if (this.position > 0)
        {
            this.position--;
            this.DrawContainer();
        }
    },
    
    ScrollRight : function()
    {
        if (this.position+this.size<this.images.length)
        {
            this.position++;
            this.DrawContainer();
        }
    }
};