(function($){
    //plugin methods
    var methods = {
        init: function(){
            return this.each(function(){
                var $this = $(this);
                var data = $(this).data('imageScroller');
                $(this).find('ul').first().append($(this).find('ul').html());
                var totalWidth = 0;
                $(this).find('ul li').each(function(){
                    totalWidth += $(this).outerWidth(true);
                });
                $(this).find('ul').width(totalWidth);
                if(!data)
                {
                    $(this).data('imageScroller', {
                        elements: $this.find('ul li').length,
                        width: $this.find('ul li').first().outerWidth(true),
                        index:0,
                        scrolling:false
                    })
                }
                $(this).find('img.productBarLeft').bind('click.imageScroller', $(this).data('imageScroller'), methods.scrollLeft);
                $(this).find('img.productBarRight').bind('click.imageScroller', $(this).data('imageScroller'), methods.scrollRight);
            });
        },
        scrollRight: function(event){
            if(event.data.scrolling == false)
            {
                var first = $(this).siblings('ul').first();
                if(event.data.index == event.data.elements/2)
                {
                    first.css('marginLeft', 0);
                    event.data.index = 0;
                }
                event.data.scrolling = true;
                first.animate({
                    marginLeft: '-=' + event.data.width.toString()
                }, 400, function(){
                        event.data.scrolling = false;
                });
                event.data.index ++;
            }
            return false;
        },
        scrollLeft: function(event){
            if(event.data.scrolling == false)
            {
                var first = $(this).siblings('ul').first();
                if(event.data.index == 0)
                {
                    first.css('marginLeft', '-' + (event.data.width * event.data.elements / 2).toString() + 'px');
                    event.data.index = event.data.elements /2;
                }
                event.data.scrolling = true
                first.animate({
                    marginLeft: '+=' + event.data.width.toString()    
                }, 400, function(){
                        event.data.scrolling = false;
                });
                event.data.index --;
            }
            return false;
        }
    };

    $.fn.imageScroller = function(){
        var settings = {
            width: 100
        };
        
        return methods.init.apply(this);
    };
})(jQuery);


var width=0;
var showcaseUl;
var slide = 0;
var totalSlides;
var interval;
function scroll()
{
    scrollL();
}
function scrollL(){
    if(!scrolling)
    {
        if(slide == (totalSlides))
        {
            scrollReset();
        }
        scrolling = true
        showcaseUl.animate({
            marginLeft: '-=' + width.toString()
        }, 400, function(){
            scrolling = false;
        });
        slide++;
    }
}
function scrollR(){
    if(!scrolling)
    {
        if(slide == 0)
        {
            showcaseUl.css('marginLeft', '-' + (width * totalSlides) + 'px');
            slide = 6;
        }
        scrolling = true;
        showcaseUl.animate({
            marginLeft: '+=' + width.toString()
        }, 400, function(){
            scrolling = false;
        });
        slide--;
    }
}
function scrollReset(){
    showcaseUl.css('marginLeft', '0');
    slide=0;
}
var scrolling = false;
jQuery(window).load(function(){
    showcaseUl = $('#showcase ul');
    totalSlides = $('#showcase ul li img').length/2;
    width = $('#showcase ul li img').first().width();
    showcaseUl.width(width*(totalSlides*2));
    $('#showcase ul li:first-child').css('marginLeft', '-' + ($('#showcase ul li:first-child').width()/2/3) + 'px')
    showcaseUl.css('visibility', 'visible');
    interval = window.setInterval('scroll()', 2000);
    
    $('#showcase ul, #leftArrow, #rightArrow').mouseover(function(event){
        event.stopPropagation();
        window.clearInterval(interval);
        interval = 0;
    });
    $('#showcase ul, #leftArrow, #rightArrow').mouseout(function(event){
        event.stopPropagation();
        interval = window.setInterval('scroll()', 2000);
    });
    
    
    $('.productList.productRoller').imageScroller();
});