(function($){
	$.fn.extend({
		cooqui: function(options){
	    	var defaults = {
					fps: 60,
					scale: 8,
					distance: 200,
					background: false,
					elementsX: 25,
					elementsY: 25,
					itemSize: 2,
					itemScale: 1.0,
					itemColors: ["#cccccc"],
					unique: true,
				};
	    	
        	op = $.extend({}, defaults, options);
        	return this.each(function(){
				var element = $(this);
				new Cooqui(op, element);
			});
		}
	});
	
	function Cooqui(opts, elemt)
	{
		var obj = this;
		var element = elemt;
		var options = opts;
		var jCanvas = null;
		var canvas = null;
		var context = null;
		var frameTime = Math.floor(1000/options.fps);
		var pi2 = 2*Math.PI;
		var elementsX = options.elementsX+options.itemSize;
		var elementsY = options.elementsY+options.itemSize;
		var clear = function(){
				context.clearRect(0, 0, canvas.width, canvas.height);
				if(options.background)
				{
					context.fillStyle = options.background;
					context.fillRect(0, 0, canvas.width, canvas.height);
				}
			};
		
		var drawCircle = function(x, y, radius, color){
				context.beginPath();
				context.arc(x, y+2, radius, 0, pi2, false);
				if(color)
				{
					context.fillStyle = color;
					context.fill();
				}
			};
		
		var draw = function(){
				context.clearRect(0, 0, canvas.width, canvas.height);
				var iMax = ((canvas.width - (options.itemSize * 2))/elementsX);
				var c = 0;
				for(var i=0; i<iMax + 1; i++)
				{
					var x = i* (iMax) + options.itemSize;
					for(var j=0; j<iMax; j++)
					{
							var y = j*iMax;
							var radius = options.itemSize;
							var color = options.itemColors[c++%options.itemColors.length];
							drawCircle(x, y, radius, color);
					}
				}
				context.globalAlpha = 1;
			};
		
		var resize = function(){
			canvas.width = Math.floor(jCanvas.width()/options.scale);
			canvas.height = Math.floor(jCanvas.height()/options.scale);
		};
		
		var init = function(){
			if(options.unique) {
				//element.children(".jq-cabg-canvas").remove();
			}

			var contInnerWidth = element.outerWidth();
			var initialSpace = ((contInnerWidth - (options.itemSize * 2))/elementsX);
			var contOuterWidth = contInnerWidth + 2*initialSpace;
			var secondSpace = ((contOuterWidth - (options.itemSize * 2))/elementsX);
			var properWidth = contInnerWidth + 2*secondSpace;
			var properSpace = ((properWidth - (options.itemSize * 2))/elementsX) +1;

			if(element.children(".jq-cabg-canvas").length){
				jCanvas = element.children(".jq-cabg-canvas");
			} else {
				jCanvas = $("<canvas class=\"jq-cabg-canvas interactive-background\"></canvas>");
			}

			canvas = jCanvas[0];
			context = canvas.getContext("2d");
			
			if(!element.children(".jq-cabg-canvas").length){
				if (element.is('.overlay-baner')) {
					jCanvas.css({position:"absolute",left:-properSpace,top:"0px",right:-properSpace,bottom:"0px",
					width:properWidth+5,height:"100%",zIndex:"-1"});
				} else {
					jCanvas.css({position:"absolute",left:'-2px',top:"0px",right:'-2px',bottom:"0px",
					width:'calc(100% + 4px)',height:"100%",zIndex:"-1"});
				}
				element.addClass("jq-cabg canvas-background");
				element.append(jCanvas);
				canvas.width = Math.floor(jCanvas.width()/options.scale);
				canvas.height = Math.floor(jCanvas.height()/options.scale);
			} 
			
			draw();

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