slideShow = {
    imgList : null,
    indexCount : 0,
    currIndex : 0,
    startIndex : 0,
    lastIndex : 0,
    currImg : 1,
    prev : null,
    next : null,
    _self : this,

    init : function (prevEl, nextEl){
        this.currImg = 1;
        this.prevEl = $('#prev');
        this.nextEl = $('#next');
        this.imgList = $('#image-list');
        this.indexCount = $('#image-list li').length;
        this.lastIndex = this.indexCount - 1;
        this._hide();
        this._bind();
    },

    _hide : function() {
        this.imgList.children('li').each(function(index){
               $(this).hide();
               this.id = 'img-'+index;
        })

        this.imgList.children('li:first').show();
        this.currIndex =  0;
    },

    _bind : function(){
        this.prevEl.bind('click', function(){
           slideShow.previous();
        })
        this.nextEl.bind('click', function(){
            slideShow.next();
        });

        this.imgList.children('li').children('div').children('img').bind('click', function(){
            slideShow.next();
        });
    },

    previous : function() {
       prevIndex = (this.currIndex == 0) ? this.lastIndex: this.currIndex - 1;

        $('#img-'+prevIndex).fadeIn();
        $('#img-'+slideShow.currIndex).fadeOut();
        this.currIndex = prevIndex;
        $('#cur-img').html(this.currIndex + 1)
    },

    next : function(){
        nextIndex = (this.currIndex == this.lastIndex) ? this.startIndex: this.currIndex + 1;

        $('#img-'+nextIndex).fadeIn();
        $('#img-'+slideShow.currIndex).fadeOut();
        this.currIndex = nextIndex;
        $('#cur-img').html(this.currIndex + 1)
    }
}