(function($){
    $.marquee = function(el, options){

        var base = this;
        base.$el = $(el);
        base.el = el;
        base.w = base.$el.width();
        base.l = $(base.el).offset().left;
        base.el.width = $("li:first-child", base.el).width();
        
        base.$el.data("marquee", base);
        
        base.init = function(){
			base.options = $.extend({},$.marquee.defaultOptions, options);
			
			base.$el.hover(function(){
				base.$el.stop();
			}, function(){
				base.marquee();
			})
			
			end = base.w - base.l;
			base.marquee();

        };
        
        base.marquee = function() {
		//If the pos is <= base.l - first li width then append to the end and remove this item
		pos = base.$el.offset().left;

		//alert(pos + ":" + (base.l-base.el.width));
		if(pos <= (base.l-base.el.width)) {
			txt = $("li:first-child", base.el).html();
			base.$el.append("<li>"+txt+"</li>");
			$("li:first-child", base.el).remove();
			base.$el.css({'left': '2px'});
			pos = base.$el.offset().left;
	        base.l = $(base.el).offset().left;
	        base.el.width = $("li:first-child", base.el).width();
		}
        	
    	switch(base.options.direction) {
    		case("ltr"):
				base.$el.animate({'left' : '+=1px'}, base.options.speed, base.marquee);
    		break;
    		case("rtl"):
				base.$el.animate({'left' : '-=1px'}, base.options.speed, base.marquee);
    		break;
    	}
        };
       
        base.init();
    };
    
    $.marquee.defaultOptions = {
    	viewerWidth : 960,
    	speed : 30,
    	easing : 'swing',
    	direction : 'rtl'
    };
    
    $.fn.marquee = function(options){
        return this.each(function(){
            (new $.marquee(this, options));
        });
    };
    
})(jQuery);