/*global define */
define(['jquery', 'underscore', 'backbone', 'd3'], 				
	function($, _, Backbone, d3) {
	'use strict';
		
	// Build the main header view of the application
	var CircleBadgeView = Backbone.View.extend({
				
		initialize: function (options) {
			
			if(!d3){ console.log('SVG is not supported'); return null; }

			/* OPTIONS:
			 *  data: an array of content with which to draw the circle badge. 
			 *  Each item in the array represents one circle badge and should have a count and may include an optional className to give the circle SVG elements and a label to display underneath the circle
			 *  	Example format:	
			 *  				[{count: 1045, 		   label: "metadata", className: "metadata"},
								 {count: "inner text", label: "data", 	  className: "data", r: 40}]
					r = radius of the circle - can be an int or if nothing is sent for radius, it will be determined based on the count length
			 *  id: The id to use for the svg element
			 *  title = optional text to append to the end of the row of circles
			 *  useGlobalR = use the same radius for all circles in the data array. Pass true to determine the radius for each circle dynamically and use the largest found
			 *  globalR = use the same radius for all circles in the data array. Pass a number to use as the radius for every circle
			 *  className = class to give the SVG element
			 *  margin = margin in pixels between circles
			 */
			
			this.id		    = options.id	 	   || "";
			this.data	    = options.data	   	   || [{count: 0, className: "default"}];
			this.title	    = options.title	   	   || null;
			this.globalR    = options.globalR      || null;
			this.useGlobalR = options.useGlobalR   || false;
			this.className  = options.className    || "";
			this.margin	    = options.margin	   || 20;
			this.titlePlacement = options.titlePlacement || null;
			this.height     = options.height       || null;
		},
		
		// http://stackoverflow.com/questions/9651167/svg-not-rendering-properly-as-a-backbone-view
		// Give our el a svg namespace because Backbone gives a different one automatically
		nameSpace: "http://www.w3.org/2000/svg",
		  _ensureElement: function() {
		     if (!this.el) {
		        var attrs = _.extend({}, _.result(this, 'attributes'));
		        if (this.id) attrs.id = _.result(this, 'id');
		        if (this.className) attrs['class'] = _.result(this, 'className');
		        var $el = $(window.document.createElementNS(_.result(this, 'nameSpace'), _.result(this, 'tagName'))).attr(attrs);
		        this.setElement($el, false);
		     } else {
		        this.setElement(_.result(this, 'el'), false);
		     }
		 },
				
		tagName: "svg",
					
		render: function () {									
			var viewRef = this;
			
			/*
			* ========================================================================
		    * Calculate the radius for the circle/circles
			* ========================================================================
			*/
			
			var radiuses = [30, 30, 30, 30, 40, 50, 60];
				_.each(this.data, function(d, i){

					if((viewRef.globalR)){
						d.r = viewRef.globalR;
					}	
					//If no radius or global radius number is specified, we will determine the radius based on the count length
					if(!d.r){		
						if(d.count < 10){ 	   							 	//i.e. is 1 digit 
							d.r = radiuses[0];
							if(radiuses[0] > viewRef.globalR){
								viewRef.globalR = radiuses[0];
							}
						}
						else if((d.count >= 10) && (d.count < 100)){ 	   	//i.e. is 2 digits 
							d.r = radiuses[1];
							if(radiuses[1] > viewRef.globalR){
								viewRef.globalR = radiuses[1];
							}
						}
						else if((d.count >= 100) && (d.count < 1000)){     //i.e. is 3 digits 
							d.r = radiuses[2];
							if(radiuses[2] >  viewRef.globalR){
								 viewRef.globalR = radiuses[2];
							}
						}
						else if((d.count >= 1000) && (d.count < 10000)){   //i.e. is 4 digits 
							d.r = radiuses[3];
							if(radiuses[3] >  viewRef.globalR){
								 viewRef.globalR = radiuses[3];
							}
						}
						else if((d.count >= 10000) && (d.count < 100000)){ //i.e. is 5 digits
							d.r = radiuses[4];
							if(radiuses[4] >  viewRef.globalR){
								 viewRef.globalR = radiuses[4];
							}
						}
						else if((d.count >= 100000) && (d.count < 1000000)){ //i.e. is 6 digits
							d.r = radiuses[5];
							if(radiuses[5] >  viewRef.globalR){
								 viewRef.globalR = radiuses[5];
							}
						}
						else if(d.count >= 1000000){ //i.e. is 7+ digits
							d.r = radiuses[6];
							if(radiuses[6] >  viewRef.globalR){
								 viewRef.globalR = radiuses[6];
							}
						}
					}					
				});
				
			/*
			* ========================================================================
			* Draw the circles
			* ========================================================================
			*/
			
			//Select the SVG element
			var svg = d3.select(this.el)
						.attr("class", "circle-badge " + this.className); 
			
			if(this.height)
				svg.attr("height", this.height);
			
			//Draw the circles
			var circle = svg.selectAll("circle")
							.data(this.data)
							.enter().append("svg:circle")
							.attr("class", function(d, i){ return d.className; })
							.attr("r", function(d, i){
								if(viewRef.useGlobalR){
									d.r = viewRef.globalR;
								}
								return d.r; 
							})
							.attr("transform", function(d, i){ 
								if(i == 0){
									d.x = d.r + 5;
								}
								else{
									d.x = viewRef.data[i-1].x + viewRef.data[i-1].r + viewRef.margin + d.r;
								}
								return "translate(" + d.x + "," + (d.r + 5) + ")"; //Add 5 pixels to allow for a 5px stroke
							});
			
			/*
			* ========================================================================
		    * Draw the text inside and beside the circle(s)
			* ========================================================================
			*/
			//Draw the text labels underneath the circles
			svg.append("g")
				.selectAll("text")
				.data(this.data)
				.enter().append("svg:text")
				.attr("transform", function(d, i){
					return "translate(" + d.x + "," + ((d.r*2) + 25) + ")";
				})
				.attr("class", function(d){ return d.className + " label"; })
				.attr("text-anchor", "middle")
				.text(function(d){ return d.label; });
			
			//Draw the count labels inside the circles
			svg.append("g")
				.selectAll("text")
				.data(this.data)
				.enter().append("svg:text")
				.text(function(d){ return typeof d.count == "string" ? d.count : appView.commaSeparateNumber(d.count) || 0; })
				.attr("transform", function(d, i){

					var y = (viewRef.titlePlacement == "inside")? d.r-12 : d.r+12;

					return "translate(" + d.x + "," + y + ")";
				})
				.attr("class", function(d){ return d.className + " count"; })
				.attr("text-anchor", "middle");
					
			if(this.title){
				
				if(this.titlePlacement == "inside"){

					//Draw the title next to the circles at the end
					var title = svg.append("text")
								.data(this.data)
								.text(this.title)
								.attr("class", "title") 
								.attr("text-anchor", "middle")
								.attr("transform", function(d, i){
									return "translate(" + d.x + "," + (d.r + 30) + ")";
								});

				}
				else{
					//Draw the title next to the circles at the end
					svg.append("text")
						.text(this.title)
						.attr("class", "title") 
						.attr("transform", function(d, i){ return "translate(" + (viewRef.data[viewRef.data.length-1].x + viewRef.data[viewRef.data.length-1].r + viewRef.margin) + "," + (viewRef.data[viewRef.data.length-1].r + 5) + ")"; })
						.attr("text-anchor", "left");	
				}
			}
	        
			return this;
		}	
	});
	return CircleBadgeView;		
});