function link_sel(el)
{
    if (el==='')
        el = sliderBan.options.id;
    else
        el = $('#link_sliderban a:eq('+el+')');

    $('#link_sliderban a').removeClass('page_nav_selected');
    $(el).addClass("page_nav_selected");
};
$(window).load( function()
{
    sliderBan = new SliderBanner('sliderban', {
      'animationtype':    'fade',
      'speed':            700,
      'timeout':          4500,
      'id':             0
    });
    sliderBan.init();
    sliderBan.autoSlide();

    $('#link_sliderban a').click(function(){
        var ind = $('#link_sliderban a').index(this);
        sliderBan.options.id = ind;
        sliderBan.showElement();
        link_sel(ind);
        return false;
  })
});

var SliderBanner = function(id, options)
{
    var _this = this;
    this.id = id;

    this.options = options;
    if(this.options.currentid == null)
    this.options.currentid = 0;

    this.items = $('#ctr_'+this.id).children();
    this.autoTimer = null;
    this.manualTimer = null;

    this.autoSlide = function(direction)
    {
        this.autoTimer  = setTimeout(function() {
            _this.showNextElement(direction);
            _this.autoSlide(direction);
            },
        this.options.timeout);

    }
    this.init = function()
    {
        if(this.options.animationtype == 'slide')
        {
            $(this.items[0]).slideDown(this.options.speed);
        }
        else if(this.options.animationtype == 'fade')
        {
            $(this.items[0]).fadeIn(this.options.speed);
        }
        link_sel(0);
    }

    this.showNextElement = function(direction)
    {
        if (this.items.length == 1)
        {
             clearTimeout(this.autoTimer);
             return 0;
        }
        current = this.options.currentid;
        link_sel(current+1);

        if(direction == null)
        {
            if ((current+1) < this.items.length)
            {
                hideItem = current;
                showItem = current+1;
                this.options.currentid = current+1;
            }
            else
            {
                link_sel(0);
                hideItem = current;
                showItem = 0;
                this.options.currentid = 0;
            }
        }

        else
        {
            if(current > 0)
            {
                hideItem = current;
                showItem = current-1;
                this.options.currentid = current-1;
            }
            else
            {
                hideItem = current;
                showItem = this.items.length-1;
                this.options.currentid = this.items.length-1;
            }
        }

        firstItem = this.items[showItem];
        secondItem = this.items[hideItem];

        if(this.options.animationtype == 'slide')
        {
            $(firstItem).slideDown(this.options.speed);
            $(secondItem).slideUp(this.options.speed);
        }
        else if(this.options.animationtype == 'fade')
        {
            $(firstItem).fadeIn(this.options.speed);
            $(secondItem).fadeOut(this.options.speed);
        }

    };

    this.showElement = function(direction)
    {
        clearTimeout(this.autoTimer);

        current = this.options.currentid;
        if (current != this.options.id)
        {
            hideItem = current;
            showItem = this.options.id;
            this.options.currentid = this.options.id;

            firstItem = this.items[showItem];
            secondItem = this.items[hideItem];

            if(this.options.animationtype == 'slide')
            {
               $(firstItem).slideDown(this.options.speed);
               $(secondItem).slideUp(this.options.speed);
            }
            else if(this.options.animationtype == 'fade')
            {
               $(firstItem).fadeIn(this.options.speed);
               $(secondItem).fadeOut(this.options.speed);
            }
        }
    };
}