jQuery(function() {
    var sliderHandler = new ImageSlider();
});

function ImageSlider() {
    this.$slideContainer = jQuery('#slideShowInner');
    this.visibleContainerWidth = 1004;
    this.itemsCount = jQuery('#slideShowInner .content').size();
    this.fullContainerWidth = this.itemsCount * this.visibleContainerWidth;
    this.inAnimation = false;
    this.$slideContainer.css({'width' : this.fullContainerWidth});
    this.timeoutHandler = null;
    this.TIMEOUT_LENGTH = 7500;
    this.$controlNavigation = jQuery('#controlWrap');
    this.controlNavigationWidth = this.itemsCount * 16;
    this.$controlNavigation.css({'width' : this.controlNavigationWidth});
    this.currentElement = 0;

    this.appendControlNavigation();
    this.setTimeout();
    this.registerClickHandler();

}

ImageSlider.prototype.registerClickHandler = function() {
    var _this = this;

    jQuery('#next').click(function() {
        _this.next();
    });

    jQuery('#prev').click(function(){
       _this.prev();
    });

    jQuery('#controlWrap div').click(function(){
        var index = jQuery('#controlWrap div').index(this);
       _this.slideToClickedElement(index);
    });
};

ImageSlider.prototype.next = function() {
    var _this = this;
    this.currentElement++
    this.currentPosition = this.$slideContainer.position().left;
    if(this.inAnimation) {
        return;
    }

    this.inAnimation = true;

    if(this.currentPosition <= -(this.fullContainerWidth-this.visibleContainerWidth))
    {
        this.currentElement = 0;

        this.$slideContainer.animate({
                    left: '0'
                },
        function(){
            _this.inAnimation = false;
            _this.setTimeout();
        });
        jQuery('#controlWrap > div').removeClass('active');
        jQuery('#controlWrap div:eq(' + this.currentElement + ')').addClass('active');
        return;
    }


    this.clearTimeout();

    jQuery('#slideShowInner').animate(
        {
           left : '-=' + this.visibleContainerWidth
        },
        function(){
            _this.inAnimation = false;
            _this.setTimeout();
        }
    );

    jQuery('#controlWrap > div').removeClass('active');
    jQuery('#controlWrap div:eq(' + this.currentElement + ')').addClass('active');
};

ImageSlider.prototype.prev = function() {
    var _this = this;
    this.currentPosition = this.$slideContainer.position().left;
    if(this.inAnimation) {
        return;
    }
    if(this.currentPosition >= 0)
    {
        return;
    }

    this.inAnimation = true;
    this.clearTimeout();

    jQuery('#slideShowInner').animate(
        {
           left : '+=' + this.visibleContainerWidth
        },
        function(){
            _this.inAnimation = false;
            _this.setTimeout();
        }
    );
};

ImageSlider.prototype.slideToClickedElement = function(index){
    var _this = this;
    var slideToPosition = index * 1004;
    if(this.inAnimation) {
        return;
    }
    this.inAnimation = true;
    this.clearTimeout();
    this.$slideContainer.animate(
        {
            left :  -slideToPosition
        },
        function(){
            _this.inAnimation = false;
            _this.setTimeout();
        }
    );
    this.currentElement = index;
    jQuery('#controlWrap > div').removeClass('active');
    jQuery('#controlWrap div:eq(' + this.currentElement + ')').addClass('active');
};

ImageSlider.prototype.setTimeout = function() {
    var _this = this;
    this.timeoutHandler = window.setTimeout(
        function() {
            _this.next();
        },
        this.TIMEOUT_LENGTH
    );
};

ImageSlider.prototype.clearTimeout = function() {
    if(null != this.timeoutHandler) {
        window.clearTimeout(this.timeoutHandler);
        this.timeoutHandler = null;
    }
};

ImageSlider.prototype.appendControlNavigation = function() {
    this.$slideContainer.after('<div id="controlWrap"></div>');
    for(var i=0; i<this.itemsCount; i++)
    {
        jQuery('#controlWrap').append('<div class="controlLink"></div>');
    }
    jQuery('#controlWrap div:first').addClass('active');


};