(function($){
	$.fn.extend({
		flowBanner: function(options){

			var defaults = {
				control: false,
				speed: 10,
				ctrlSelector: 'box-flow-ctrl',
				wrapSelector: 'box-flow-wrap',
				playSelector: 'btn-play',
				pauseSelector: 'btn-pause',
				playText: 'Play',
				pauseText: 'Stop'
			};

			var opt = $.extend(defaults, options);

			return this.each(function(){
					var o = opt;
					var left = 0,
							timer = '',
							ctrl = o.control,
							speed = o.speed,
							ctrlSelector = o.ctrlSelector,
							wrapSelector = o.wrapSelector,
							playSelector = o.playSelector,
							pauseSelector = o.pauseSelector,
							playText = o.playText,
							pauseText = o.pauseText,
							$box = $(this),
							$wrap = '<div class="'+ wrapSelector +'"><\/div>',
							$banner = $box.children("li"),
							$bannerSize = $banner.length,
							$bannerW= $banner.outerWidth(true),
							$ctrlHtml = '';
							$ctrlHtml += '<div class="'+ ctrlSelector +'">';
							$ctrlHtml += '	<button type="button" class="'+ playSelector +'">'+ playText +'<\/button>';
							$ctrlHtml += '	<button type="button" class="'+ pauseSelector +'">'+ pauseText +'<\/button>';
							$ctrlHtml += '<\/div>';
							

					$box.wrap($wrap);
					$box.width($bannerW * $bannerSize);
					flowPlay();

					if(ctrl){
						$box.parent().before($ctrlHtml);

						$box.parent().prev('.'+ ctrlSelector).on("click", "button", function(e){
							e.preventDefault;

							if($(this).hasClass(playSelector)){
								flowPause();
								flowPlay();
							}

							if($(this).hasClass(pauseSelector)){
								flowPause();
							}
						});
					}

					$box.on("mouseenter", function(){
						flowPause();
					}).on("mouseleave", function(){
						flowPlay();
					});

					$banner.on("focusin", "a", function(){
						flowPause();
					}).on("focusout", "a", function(){
						flowPause();
						flowPlay();
					});

					function flow(){

						if(Math.abs(left) >= $bannerW){
							left = 0;
							$box.children("li").first().appendTo($box);
						}

						left = left - 1;
						$box.css({'left': left});

					}

					function flowPause(){
						clearInterval(timer);
					}

					function flowPlay(){
						timer = setInterval(flow, speed);
					}

			});
		}
	});
})(jQuery);

$(function(){
	$(".box-flow").flowBanner({
		control: true
		//speed: 20
	});
});