/*

=======
EXAMPLE
=======


<!-- ++++++++++++++++++++++++++++++++++++++
include jQuery and SlidingViewer libraries 
+++++++++++++++++++++++++++++++++++++++ -->

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/SlidingViewer.js"></script>


<!-- ++++++++++++++++++++++++++++++++++++++
create a SlidingViewer instance
+++++++++++++++++++++++++++++++++++++++ -->

<script type="text/javascript">

jQuery(document).ready(function () {
    window.myviewer = new SlidingViewer("viewer1", 500);
});

</script>


<!-- ++++++++++++++++++++++++++++++++++++++
add markup to page. all elements need explicit height and width
+++++++++++++++++++++++++++++++++++++++ -->

<div id="viewer1" style="width:100px; height:75px; position:relative; overflow:hidden;">
    <div class="itemContainer" style="height:75px; position:absolute;">
        <div class="item" style="width:100px; height:75px; float:left;">Hello</div>
        <div class="item" style="width:100px; height:75px; float:left;">Animated</div>
        <div class="item" style="width:100px; height:75px; float:left;">World</div>
    </div>
</div>



<!-- ++++++++++++++++++++++++++++++++++++++
add controlls for viewer
+++++++++++++++++++++++++++++++++++++++ -->

<input type="button" value="prev" onclick="myviewer.prev();">
<a href="#" onclick="myviewer.goto(0); return false;">1</a>
<a href="#" onclick="myviewer.goto(1); return false;">2</a>
<a href="#" onclick="myviewer.goto(2); return false;">3</a>
<input type="button" value="next" onclick="myviewer.next();">

*/




if (typeof jQuery == 'undefined') {
    alert('Error: SlidingViewer.js is missing jQuery dependency');
}


function SlidingViewer (elementId, transitionSpeed)
{
    this.viewer = jQuery('#'.elementId);
    this.itemContainer = jQuery('.itemContainer', this.viewer);
    this.itemWidth = jQuery('.itemContainer .item:first', this.viewer).width();
    this.itemCount = jQuery('.itemContainer .item', this.viewer).length;
    this.itemContainer.css('width', this.itemWidth * this.itemCount);
    this.transitionSpeed = transitionSpeed;
    this.isTransitioning = false;
    this.currentIndex = 0;
    var thisViewer = this;
    this.endTransition = function () {
        thisViewer.isTransitioning = false;
    }
}


SlidingViewer.prototype.next  = function () {
    this._slideOnePosition();
}


SlidingViewer.prototype.prev = function () {
    this._slideOnePosition(true);
}


SlidingViewer.prototype.goto = function (itemIndex) {
    if (itemIndex >= this.itemCount) {
        return;
    }
    var newPosition = 0 - (itemIndex * this.itemWidth);
    this._slideTo(newPosition);
}


SlidingViewer.prototype.getCurrentIndex = function () {
    return this.currentIndex;
}


SlidingViewer.prototype.getItemCount = function () {
    return this.itemCount;
}


SlidingViewer.prototype._slideOnePosition = function (isReversed) {
    var currentPosition = parseInt(this.itemContainer.css("left"));
    if (! currentPosition) {
        currentPosition = 0;
    }
    var newPosition = isReversed
        ? currentPosition + this.itemWidth
        : currentPosition - this.itemWidth;
    this._slideTo(newPosition);
}


SlidingViewer.prototype._slideTo = function (position) {
    if (this.isTransitioning) {
        return;
    }
    if (position > 0 || position < (0 - this.itemContainer.width() + this.itemWidth)) {
        return;
    }
    this.isTransitioning = true;
    this.currentIndex = Math.abs(position) / this.itemWidth;
    this.itemContainer.animate(
        {
            left: position + 'px'
        },
        this.transitionSpeed,
        this.endTransition
    );
}