social_cheesecake 0.2.0 → 0.3.0

data/app/assets/javascripts/socialcheesecake/_header.js

@@ -1,5 +1,5 @@
 /**
- * @license SocialCheesecake JavaScript Library v0.2.0
+ * @license SocialCheesecake JavaScript Library v0.3.0
  * https://github.com/adiezbal/SocialCheesecake
  * Developed by Alicia Díez (https://github.com/adiezbal)
  * Copyright 2011, Technical University of Madrid (Universidad Politécnica de Madrid)

data/app/assets/javascripts/socialcheesecake/actor.js

@@ -12,10 +12,11 @@ var socialCheesecake = socialCheesecake || {};
 		}
 		this.id = settings.id;
 		this.name = settings.name;
+		this.extraInfo = (settings.extraInfo) ? settings.extraInfo : undefined;
 		this.opacity = 1;
 		this._focused = false;
 		this._selected = false;
-		this._hidden = false;
+		this._hidden = true;
 		this._filtered = false;
 		this.fading = "none";
 		this.parents = [];
@@ -23,50 +24,69 @@ var socialCheesecake = socialCheesecake || {};
 		
 		var actor = this;
 		var actor_div = actor.getDiv();
-		var mouseoverCallback = function(){
+		
+		actor_div.addEventListener("mouseover", function(){
 			var sector;
-			actor.focus();
+			if( !actor.isSelected() ){				
+				actor.focus();
+			}
 			for (var subsector in actor.parents){
 				sector = actor.parents[subsector].parent;
 				sector.focus();
 				sector.changeColor(sector.mouseover.color);
 				actor.parents[subsector].changeColor(actor.parents[subsector].mouseover.color);
 			}
-		}
-		var mouseoutCallback = function(){
+		}, false);
+		actor_div.addEventListener("mouseout", function(){
 			var sector;
-			actor.unfocus();
+			if( !actor.isSelected() ){
+				actor.unfocus();
+			}
 			for (var subsector in actor.parents){
 				sector = actor.parents[subsector].parent;
 				sector.unfocus();
 				sector.changeColor(sector.mouseout.color);
 				actor.parents[subsector].changeColor(sector.mouseout.color);
 			}
-		}
-		actor_div.addEventListener("mouseover", mouseoverCallback, false);
-		actor_div.addEventListener("mouseout", mouseoutCallback, false);
+		}, false);
 		actor_div.addEventListener("mousedown", function(){
 			var sector;
 			if( actor.isSelected()){
 				// Deactivate actor
-				actor._selected = false;
-				actor.unfocus();
-				actor_div.addEventListener("mouseover", mouseoverCallback, false);
-				actor_div.addEventListener("mouseout", mouseoutCallback, false);
+				actor.unselect();
 			}else{
 				//Activate actor
-				actor._selected = true;
-				actor.focus();
-				actor_div.removeEventListener("mouseover", mouseoverCallback, false);
-				actor_div.removeEventListener("mouseout", mouseoutCallback, false);
+				actor.select();
 			}
-		});
+		}, false);
+	}
+	
+	socialCheesecake.Actor.prototype.getParentsIds = function() {
+		var parents = this.parents;
+		var parentsIds = [];
+		
+		for(var i in parents){
+			parentsIds.push(parents[i].id);
+		}
+		return parentsIds;
 	}
 	
 	socialCheesecake.Actor.prototype.isSelected = function() {
 		return this._selected;
 	}
 	
+	socialCheesecake.Actor.prototype.select = function() {
+		var actor = this;
+		actor._selected = true;
+		actor.focus();
+	}
+	
+	socialCheesecake.Actor.prototype.unselect = function() {
+		var actor = this;
+		actor._selected = false;
+		actor.unfocus();
+	}
+	
 	socialCheesecake.Actor.prototype.focus = function() {
 		var actor_div = this.getDiv();
 		var newClass="";
@@ -109,18 +129,24 @@ var socialCheesecake = socialCheesecake || {};
 			}
 		}
 		actor_div.setAttribute("style", newStyle);
-		this.setDivOpacity(0);
 		this.fading= "none";
 	}
 	
 	socialCheesecake.Actor.prototype.show = function() {
-		if(this.isFiltered()) return;
 		var actor_div = this.getDiv();
+		var newStyle=" display: inline;";
+		
+		if(this.isFiltered()) return;
+		
 		this._hidden = false;
 		if (actor_div.getAttribute("style")){
-			var newStyle = actor_div.getAttribute("style").replace(/display\s*:\s*none;/, "");
-			actor_div.setAttribute("style", newStyle);
+			if (actor_div.getAttribute("style").match(/display\s*:\s*[a-z]*;/)){
+				newStyle = actor_div.getAttribute("style").replace(/display\s*:\s*[a-z]*;/, "display: inline;");	
+			}else{
+				newStyle = actor_div.getAttribute("style").concat("display: inline;");
+			}		
 		}
+		actor_div.setAttribute("style", newStyle);
 	}
 	
 	socialCheesecake.Actor.prototype.isHidden = function() {
@@ -162,22 +188,18 @@ var socialCheesecake = socialCheesecake || {};
 	
 	socialCheesecake.Actor.prototype.fade = function(time, modifyDisplay) {
 		var actor = this;	
+		var time = (time) ? time : 300;
 		var deltaOpacity = 1000.0/ (60.0 *time);
 		var grow = 0;
 		
-		//console.log(">Fade actor "+ actor.id+" now with opacity "+ x);
-		//console.log("     >Fading value "+ this.fading);
-		
 		if (this.fading == "out"){
 			grow = -1;
 		}else if (this.fading == "in"){
 			grow = 1;
-			if (modifyDisplay) actor.show();
 		}
 		var opacity = this.opacity + grow * deltaOpacity;
 		opacity = Math.round(opacity*1000)/1000;
 		actor.setDivOpacity(opacity);
-		var x = actor.opacity;
 				
 		if (((this.fading == "out") && (opacity >= 0))||
 	 			((this.fading == "in") && (opacity <= 1))){
@@ -185,8 +207,6 @@ var socialCheesecake = socialCheesecake || {};
 				actor.fade(time, modifyDisplay);
       });
     }else{
-    	//console.log("STOP FADING Actor "+ actor.id + " now with opacity "+x);
-    	//console.log("     >Fading value "+ this.fading);
     	this.fading = "none";
     	if((modifyDisplay) && (opacity <= 0)) actor.hide();
     }
@@ -194,13 +214,18 @@ var socialCheesecake = socialCheesecake || {};
 	
 	socialCheesecake.Actor.prototype.fadeOut = function(time, modifyDisplay) {
 		this.fading = "out";
+		this.setDivOpacity(1);
 		this.fade(time, modifyDisplay);
 	}
 	
 	socialCheesecake.Actor.prototype.fadeIn = function(time, modifyDisplay) {
-		if(this.isFiltered()) return;
-		this.fading = "in";
-		this.fade(time, modifyDisplay);
+		var actor = this;
+		
+		if(actor.isFiltered()) return;
+		actor.fading = "in";
+		actor.setDivOpacity(0);
+		if (modifyDisplay) actor.show();
+		actor.fade(time, modifyDisplay);
 	}
 	
 	socialCheesecake.Actor.prototype.getCheesecake = function (){

data/app/assets/javascripts/socialcheesecake/cheesecake.js

@@ -1,23 +1,33 @@
 var socialCheesecake = socialCheesecake || {};
 (function() {
-	//General variable settings (with dafault values)
-	/*  Normal */
-	var sectorFillColor = "#eeffee";					//normal, mouseout, mouseup states	
-	var sectorFocusColor = "#77ff77";					//mousedown state	
-	var sectorHoverColor = "#aaffaa";					//mouseover state
-	var sectorTextAndStrokeColor = "#1F4A75";	//text and border color
 	
-	/* Extra */
-	var extraSectorFillColor = "#D4E4EA";			//normal, mouseout, mouseup states for extra sectors
-	var extraFocusColor = "#1FA0F7";					//mousedown state for extra sectors
-	var extraHoverColor = "#1FA0F7";					//mouseover state for extra sectors
-	var extraTextAndStrokeColor = "#1F4A75";	//text and border color for extra sectors
+	//General variable settings (with default values)
+	socialCheesecake.colors = {
+		normalSector : {
+			background : "#eeffee", //normal, mouseout, mouseup states
+			highlight : "#77ff77",	//mousedown state	
+			hover : "#aaffaa",			//mouseover state
+			font : "#1F4A75",				//text
+			border : "#1F4A75"			//stroke
+		},
+		extraSector : {
+			background : "#e5e5e5",
+			highlight : "#1FA0F7",
+			hover : "#D4E4EA",
+			font : "#1F4A75",
+			border : "#1F4A75"
+		},
+		greySector : {
+			background : "#f5f5f5",
+			highlight : "#f5f5f5",
+			hover : "#f5f5f5",
+			font : "#666",
+			border : "#666"
+		}
+	}
 	
-	/* Grey */
-	var greySectorFillColor = "#f5f5f5";			//normal, mouseout, mouseup states for grey auxiliar sectors
-	var greyFocusColor = "#f5f5f5";						//mousedown state for grey auxiliar sectors
-	var greyHoverColor = "#f5f5f5";						//mouseover state for grey auxiliar sectors
-	var greyTextAndStrokeColor = "#666";			//text and border color for grey auxilar sectors
+	/* Number of actors to animate */
+	var maxVisibleActors = 30;
 	
 	socialCheesecake.Cheesecake = function(cheesecakeData) {
 		var jsonSectors = cheesecakeData.sectors;
@@ -34,6 +44,8 @@ var socialCheesecake = socialCheesecake || {};
 		cheesecake.auxiliarSectors = [];
 		cheesecake.stage = new Kinetic.Stage(cheesecakeData.container.id, 
 			cheesecakeData.container.width, cheesecakeData.container.height);
+		cheesecake.stage.add(new Kinetic.Layer());
+		cheesecake.stage.mainLayer = cheesecake.stage.layers[0];
 		cheesecake.grid = new socialCheesecake.Grid({
 			parent : this,
 			grid_id : cheesecakeData.grid.id,
@@ -42,107 +54,158 @@ var socialCheesecake = socialCheesecake || {};
 		cheesecake.searchEngine = new socialCheesecake.SearchEngine({
 			parent : this
 		});
-		cheesecake.matchActorsNumber = cheesecakeData.match || true;
-		cheesecake.changes = {};
-		
-		var extraSector = new socialCheesecake.Sector({
-			parent : cheesecake,
-			center : {
-				x : cheesecakeData.center.x,
-				y : cheesecakeData.center.y
-			},
-			label: "+",
-			rOut : cheesecakeData.rMax,
-			color : socialCheesecake.Cheesecake.getExtraSectorFillColor(),
-			mouseover : {
-				color : socialCheesecake.Cheesecake.getExtraSectorHoverColor(),
-				callback : function(sector) {
-					sector.focus();
-				}
-			},
-			mouseout : {
-				color : socialCheesecake.Cheesecake.getExtraSectorFillColor(),
-				callback : function(sector) {
-					sector.unfocus();
+		cheesecake.matchActorsNumber = cheesecakeData.match;
+		if(cheesecake.matchActorsNumber==null) cheesecake.matchActorsNumber = true;
+		cheesecake._initialState = {};
+		cheesecake._changes = {};
+		cheesecake.onChange = function(cheesecake){};
+		if(cheesecakeData.maxVisibleActors != undefined) 
+			socialCheesecake.Cheesecake.setMaxVisibleActors(cheesecakeData.maxVisibleActors);
+		if(cheesecakeData.onChange)
+			cheesecake.onChange = cheesecakeData.onChange;
+		//Text settings
+		if(cheesecakeData.text){
+			for( var style in cheesecakeData.text){
+				socialCheesecake.text[style]= cheesecakeData.text[style];
+			}
+		}
+		//Color settings
+		if(cheesecakeData.colors){
+			for( var type in cheesecakeData.colors){
+				for (var color in cheesecakeData.colors[type]){
+					socialCheesecake.colors[type][color]= cheesecakeData.colors[type][color];
 				}
-			},
-			mouseup : {color : socialCheesecake.Cheesecake.getExtraSectorFillColor()},
-			mousedown : {color : socialCheesecake.Cheesecake.getExtraSectorFocusColor()},
-			auxiliar : true,
-			textAndStrokeColor : socialCheesecake.Cheesecake.getExtraSectorTextAndStrokeColor()
-		});
-		cheesecake.sectors[jsonSectors.length] = extraSector;
+			}
+		}
 		
-		for(var i = 0; i < jsonSectors.length; i++) {			
+		if(jsonSectors.length < 16){
+			var extraSector = new socialCheesecake.Sector({
+				parent : cheesecake,
+				center : {
+					x : cheesecakeData.center.x,
+					y : cheesecakeData.center.y
+				},
+				label: "+",
+				rOut : cheesecakeData.rMax,
+				color : socialCheesecake.colors.extraSector.background,
+				mouseover : {
+					color : socialCheesecake.colors.extraSector.hover,
+					callback : function(sector) {
+						sector.focus();
+						cheesecake.grid.hideAll();
+					}
+				},
+				mouseout : {
+					color : socialCheesecake.colors.extraSector.background,
+					callback : function(sector) {
+						sector.unfocus();
+						cheesecake.grid.fadeInAll(300, true);
+					}
+				},
+				mouseup : {color : socialCheesecake.colors.extraSector.background},
+				mousedown : {
+					color : socialCheesecake.colors.extraSector.highlight
+					/*callback : function(sector){
+						cheesecake.focusAndBlurCheesecake(sector);
+					}*/
+				},
+				subsectors : [{
+					name : "New Subsector 1"
+				}],
+				auxiliar : true,
+				fontColor : socialCheesecake.colors.extraSector.font,
+				borderColor : socialCheesecake.colors.extraSector.border
+			});
+			cheesecake.sectors[jsonSectors.length] = extraSector;
+		}
+		var minNumSectors = Math.min(jsonSectors.length, 16);
+		for(var i = 0; i < minNumSectors; i++) {			
 			var settings = {
 				parent : cheesecake,
 				center : {
 					x : cheesecakeData.center.x,
 					y : cheesecakeData.center.y
 				},
+				id : jsonSectors[i].id,
 				label : jsonSectors[i].name,
 				rOut : cheesecakeData.rMax,
 				subsectors : jsonSectors[i].subsectors,
 				mouseover : {
-					color : socialCheesecake.Cheesecake.getSectorHoverColor(),
+					color : socialCheesecake.colors.normalSector.hover,
 					callback : function(sector) {
-						/* FIX FOR EXECUTING MOUSEOUT BEFORE MOUSEOVER */				
-						for(var i in cheesecake.sectors){
-							cheesecake.sectors[i].getRegion().removeEventListener("mouseout");
-							if(cheesecake.sectors[i]!= sector){
-							 cheesecake.sectors[i].unfocus();
-							 cheesecake.sectors[i].changeColor(cheesecake.sectors[i].mouseout.color);
-							}
-						}
-						sector.getRegion().addEventListener("mouseout", function() {
-							sector.eventHandler('mouseout');
-						});
-						/* END of FIX */
 						document.body.style.cursor = "pointer";
 						cheesecake.grid.hideAll();
 						cheesecake.grid.fadeIn(sector.actors, 300, true);
 						sector.focus();
+						if(cheesecake.highlightedSector != null){
+							cheesecake.highlightedSector.fan(false, 
+								function(){
+									sector.fan(true);
+								}
+							);
+						}else{
+							sector.fan(true);
+						}
 						sector.getCheesecake().setHighlightedSector(sector);
-						//sector.getCheesecake().fanInSector(sector, true);
 					}
 				},
 				mouseout : {
-					color : socialCheesecake.Cheesecake.getSectorFillColor(),
+					color : socialCheesecake.colors.normalSector.background,
 					callback : function(sector) {
 						document.body.style.cursor = "default";
+						cheesecake.grid.hide(sector.actors);
 						cheesecake.grid.fadeInAll(300, true);
 						sector.unfocus();
 						sector.getCheesecake().setHighlightedSector(null);
-						//sector.getCheesecake().fanInSector(sector, false);
+						sector.fan(false);
 					}
 				},
 				mousedown : {
-					color : socialCheesecake.Cheesecake.getSectorFocusColor(),
+					color : socialCheesecake.colors.normalSector.highlight,
 					callback : function(sector) {
 						cheesecake.focusAndBlurCheesecake(sector);
 						cheesecake.grid.hideAll();
 						cheesecake.grid.fadeIn(sector.actors,300, true);
 					}
 				},
-				mouseup : { color : socialCheesecake.Cheesecake.getSectorFillColor() },
-				textAndStrokeColor : socialCheesecake.Cheesecake.getSectorTextAndStrokeColor()
+				mouseup : { color : socialCheesecake.colors.normalSector.background },
+				fontColor : socialCheesecake.colors.normalSector.font,
+				borderColor : socialCheesecake.colors.normalSector.border
 			};
 			cheesecake.sectors[i] = new socialCheesecake.Sector(settings);
 		}
 		cheesecake.calculatePortions();
+		cheesecake._setInitialState();
 		cheesecake.draw();
 	}
 	
 	socialCheesecake.Cheesecake.prototype.draw = function(){
 		var sectors = this.sectors;
+		var mainLayer = this.stage.mainLayer;
 		for (var sector in sectors){
-			this.stage.add(sectors[sector].getRegion());
+			mainLayer.add(sectors[sector].getRegion());
+		}
+		this.stage.draw();
+	}
+	
+	socialCheesecake.Cheesecake.prototype.disable = function(){
+		var layers = this.stage.layers;
+		for(var layer in layers){
+			layers[layer].listen(false);
+		}
+	}
+	
+	socialCheesecake.Cheesecake.prototype.enable = function(){
+		var layers = this.stage.layers;
+		for(var layer in layers){
+			layers[layer].listen(true);
 		}
 	}
 	
 	socialCheesecake.Cheesecake.prototype.focusAndBlurCheesecake = function(sector) {
 		var cheesecake = this;
-		var regions = cheesecake.stage.getShapes();
+		var mainLayer = this.stage.mainLayer;
+		var regions = mainLayer.getShapes();
 		var sectorIndex;
 		for(var i in cheesecake.sectors) {
 			if(cheesecake.sectors[i] === sector) sectorIndex = i;
@@ -151,9 +214,10 @@ var socialCheesecake = socialCheesecake || {};
 			throw "sector doesn't belong to this cheesecake"
 		for(var i = (regions.length - 1); i >= 0; i--) {
 			if(!regions[i].permanent) {
-				cheesecake.stage.remove(regions[i]);
+				mainLayer.remove(regions[i]);
 			}
 		}
+		mainLayer.clear();
 		this.setHighlightedSector(sector);
 		
 		//Add auxiliar sectors
@@ -167,21 +231,22 @@ var socialCheesecake = socialCheesecake || {};
 			delta : 2 * Math.PI - sector.delta,
 			rOut : cheesecake.rMax,
 			mouseout : {
-				color : socialCheesecake.Cheesecake.getGreySectorFillColor(),
+				color : socialCheesecake.colors.greySector.background,
 				callback : function() {
 					document.body.style.cursor = "default";
 				}
 			},
-			mousedown : { color : socialCheesecake.Cheesecake.getGreySectorFocusColor() },
-			mouseup : { color : socialCheesecake.Cheesecake.getGreySectorFillColor() },
+			mousedown : { color : socialCheesecake.colors.greySector.highlight },
+			mouseup : { color : socialCheesecake.colors.greySector.background },
 			mouseover : {
-				color : socialCheesecake.Cheesecake.getGreySectorHoverColor(),
+				color : socialCheesecake.colors.greySector.hover,
 				callback : function() {
 					document.body.style.cursor = "pointer";
 				}
 			},
-			color : socialCheesecake.Cheesecake.getGreySectorFillColor(),
-			textAndStrokeColor : socialCheesecake.Cheesecake.getGreySectorTextAndStrokeColor(),
+			color : socialCheesecake.colors.greySector.background,
+			fontColor : socialCheesecake.colors.greySector.font,
+			borderColor : socialCheesecake.colors.greySector.border,
 			auxiliar : true
 		};
 		var dummySettings = {
@@ -212,14 +277,13 @@ var socialCheesecake = socialCheesecake || {};
 		var dummySector = new socialCheesecake.Sector(dummySettings)
 		cheesecake.auxiliarSectors.push(dummySector);
 
-		cheesecake.stage.add(greySector.getRegion());
-		cheesecake.stage.add(dummySector.getRegion());
+		mainLayer.add(greySector.getRegion());
+		mainLayer.add(dummySector.getRegion());
 
 		//Animations
 		var greyMousedownCallback = function() {
 			greySector.label = "";
 			cheesecake.unfocusAndUnblurCheesecake();
-			cheesecake.grid.showAll();
 		}
 		var greyResizeCallback = function() {
 			greySector.mousedown.callback = greyMousedownCallback;
@@ -256,18 +320,27 @@ var socialCheesecake = socialCheesecake || {};
 	}
 	socialCheesecake.Cheesecake.prototype.recoverCheesecake = function() {
 		var cheesecake = this;
-		var regions = cheesecake.stage.getShapes();
+		var lastSector = this.highlightedSector;
+		var mainLayer = this.stage.mainLayer;
+		var regions = mainLayer.getShapes();
 
 		//Delete the auxiliar sectors
 		for(var i = (regions.length - 1); i >= 0; i--) {
 			if(!regions[i].permanent) {
-				cheesecake.stage.remove(regions[i]);
+				mainLayer.remove(regions[i]);
+				cheesecake.auxiliarSectors.pop();
 			}
 		}
-		cheesecake.auxiliarSectors.pop();
-
+		mainLayer.clear();
+		
 		// Add the former sectors and actors
 		cheesecake.draw();
+		if(lastSector){
+			lastSector.color = lastSector.originalAttr.color;
+			lastSector.fan(false);
+			lastSector.unfocus();
+			this.setHighlightedSector(null);
+		}
 		cheesecake.grid.fadeInAll(300, true);
 	}
 	socialCheesecake.Cheesecake.prototype.unfocusAndUnblurCheesecake = function() {
@@ -290,7 +363,6 @@ var socialCheesecake = socialCheesecake || {};
 		//Animate and go back to the general view
 		sectorNewDelta = cheesecake.sectors[sector.simulate].delta;
 		sectorNewPhi = cheesecake.sectors[sector.simulate].phi;
-		this.setHighlightedSector(null);
 		sector.putTogether();
 		sector.resizeDelta({
 			anchor : "M",
@@ -318,99 +390,93 @@ var socialCheesecake = socialCheesecake || {};
 	/**
 	 * actorId 		- actor which changes one of its parents
 	 */
-	socialCheesecake.Cheesecake.prototype.updateActorMembership = function (actorId){
-		var changes = this.changes;
+	socialCheesecake.Cheesecake.prototype.updateActorMembership = function (actor){
+		var changes = this._changes;
 		var grid = this.grid;
 		var changesInActors;
 		var alreadyChanged = false;
-		var actorParents = grid.getActor(actorId).parents;
-		var actorSubsectors = [];
-		
-		for(var parent in actorParents){
-			actorSubsectors.push(actorParents[parent].id);
-		}
+		var actorId = actor.id;
+		var actorParents = actor.getParentsIds();
+		var actorName = actor.name;
+		var actorExtraInfo = actor.extraInfo;
+		var onChange = this.onChange;
 		
 		if(changes.actors != undefined){
 			changesInActors = changes.actors
-			for( var actor in changesInActors){
-				if(changesInActors[actor].id == actorId){
+			for( var a in changesInActors){
+				if(changesInActors[a].id == actorId){
 					alreadyChanged = true;
-					changesInActors[actor].subsectors = actorSubsectors;
+					changesInActors[a].subsectors = actorParents;
 				}
 			}
 			if(!alreadyChanged){
 				changesInActors.push({
 					id : actorId,
-					subsectors : actorSubsectors
+					subsectors : actorParents,
+					name : actorName,
+					extraInfo : actorExtraInfo,
+					justAdded : false
 				});
 			}
 		}else{
 			changes.actors = [];
 			changes.actors.push({
 				id : actorId,
-				subsectors : actorSubsectors
+				subsectors : actorParents,
+				name : actorName,
+				extraInfo : actorExtraInfo,
+				justAdded : false
 			});
 		}
+		//Execute onChange Callback
+		onChange(this);
 	}
 	
 	socialCheesecake.Cheesecake.prototype.calculatePortions = function (){
 		var sectors = this.sectors;
 		var match = this.matchActorsNumber;
 		var deltaExtra = Math.PI / 8;
-		var deltaSector;
-		var minDeltaSector = Math.PI / 6;
+		var minDeltaSector = Math.PI / 8;
 		var phi = ((5 * Math.PI) / 4) - (deltaExtra / 2);
-		var sectorActors;
+		var sectorActors = [];
+		var sectorPortions = [];
+		var totalSectors = sectors.length;
 		var totalActors = 0;
-		var consideredActors = 0;
-		var littleSectors = 0;
-		var isLittle = [];
+		var totalAngle = 2*Math.PI;
+		var unusedAngle;
 		
-		sectors[sectors.length-1].phi = phi;
-		sectors[sectors.length-1].delta = deltaExtra;
-		sectors[sectors.length-1].originalAttr.phi = sectors[sectors.length-1].phi;
-		sectors[sectors.length-1].originalAttr.delta = sectors[sectors.length-1].delta;
-		phi += deltaExtra;
-		
-		if(this.grid.actors.length == 0) match =false;
-		if(match){
-			//Calculate total number of actors
-			for (var i = 0; i < sectors.length -1; i++){
-				totalActors += (sectors[i].actors.length);				
-			}
-			consideredActors = totalActors;
-			//Calculate percentage of actors of each sector
-			for (var i = 0; i < sectors.length -1; i++){
-				sectorActors = sectors[i].actors.length;			
-				if( sectorActors / totalActors <= 0.1){ 
-					isLittle[i] = true;
-					littleSectors++;
-					consideredActors -= sectors[i].actors.length;
-				}
-			}
-			//Assign width
-			for (var i = 0; i < sectors.length -1; i++){
-				if(isLittle[i]){
-					deltaSector = minDeltaSector;
-				}else{
-					deltaSector = (sectors[i].actors.length / consideredActors)* 
-						(2*Math.PI - deltaExtra - littleSectors*minDeltaSector);
-				}
-				sectors[i].phi = phi;
-				sectors[i].delta = deltaSector;
-				sectors[i].originalAttr.phi = sectors[i].phi;
-				sectors[i].originalAttr.delta = sectors[i].delta;
-				phi += deltaSector;
-			}
+		//Begin with the extra Sector, if it exists
+		if (sectors[sectors.length-1].auxiliar){
+			sectors[sectors.length-1].phi = phi;
+			sectors[sectors.length-1].delta = deltaExtra;
+			sectors[sectors.length-1].originalAttr.phi = sectors[sectors.length-1].phi;
+			sectors[sectors.length-1].originalAttr.delta = sectors[sectors.length-1].delta;
+			phi += deltaExtra;
+			totalSectors = sectors.length -1;
+			totalAngle -= deltaExtra;
+		}
+		if(!match){
+			unusedAngle = 0;
 		}else{
-			deltaSector = (2 * Math.PI - deltaExtra) / (sectors.length-1);
-			for (var i = 0; i < sectors.length -1; i++){
-				sectors[i].phi = phi;
-				sectors[i].delta = deltaSector;
-				sectors[i].originalAttr.phi = sectors[i].phi;
-				sectors[i].originalAttr.delta = sectors[i].delta;
-				phi += deltaSector;
+			unusedAngle = totalAngle - totalSectors * minDeltaSector
+		}
+		for(var i = 0; i < totalSectors; i++) {
+			sectorActors[i] = sectors[i].actors.length;
+			totalActors += sectorActors[i];
+			sectorPortions[i] = minDeltaSector;
+			if(!match) sectorPortions[i] = totalAngle / totalSectors;
+		}
+		for(var i = 0; i < totalSectors; i++) {
+			if(totalActors!=0){
+				sectorPortions[i] += (sectorActors[i] / totalActors) * unusedAngle;				
+			}else{
+				sectorPortions[i] = totalAngle / totalSectors;
 			}
+			sectors[i].phi = phi;
+			sectors[i].delta = sectorPortions[i];
+			sectors[i].originalAttr.phi = sectors[i].phi;
+			sectors[i].originalAttr.delta = sectors[i].delta;
+			phi += sectors[i].delta;
 		}
 	}
 	
@@ -423,152 +489,63 @@ var socialCheesecake = socialCheesecake || {};
 		}
 	}
 	
-	socialCheesecake.Cheesecake.prototype.getChanges = function (){
-		return this.changes;
+	socialCheesecake.Cheesecake.prototype.getSectorById = function(id){
+		var sectors = this.sectors;
+		var sector;
+		for (var i in sectors){
+			if (sectors[i].id == id){
+				sector = sectors[i];
+				break;
+			}
+		}
+		return sector;
 	}
 	
-	/**
-	 * sector - sector to open or to close
-	 * open - true: expand sector
-	 * 			- false: shrink sector
-	 */	
-	socialCheesecake.Cheesecake.prototype.fanInSector = function (sector, open){
+	socialCheesecake.Cheesecake.prototype.getSubsectorById = function(id){
 		var sectors = this.sectors;
-		var minDelta = Math.PI/5;
-		var prevSectorIndex = 0;
-		var laterSectorIndex = 0;
-		var deltaToChange = 0;
-		
-		if(open && (sector.delta >= minDelta)) return; 
-		
-		//Find the sector's neighbours
-		for(var i= 0; i<sectors.length; i++){
-			if(sectors[i]=== sector){
-				prevSectorIndex = i-1;
-				laterSectorIndex = (i+1);
-				//console.log("current "+i)
+		var subsectors;
+		var subsector;
+		for (var i in sectors){
+			subsectors = sectors[i].subsectors;
+			for (var j in subsectors){
+				if (subsectors[j].id == id){
+					subsector = subsectors[j];
+					break;
+				}
 			}
 		}
-		if(prevSectorIndex < 0) prevSectorIndex = sectors.length -1;
-		if(laterSectorIndex >= sectors.length) laterSectorIndex = 0;
-		
-		//Animate the three sectors
-		if(open){
-			deltaToChange = (minDelta - sector.delta)/2;
-			sector.resizeDelta({
-				anchor: "m",
-				delta: minDelta
-			});
-			console.log("delta to change "+ deltaToChange);
-			console.log("delta of prev "+ sectors[prevSectorIndex].delta);
-			console.log("delta of later "+ sectors[laterSectorIndex].delta);
-			sectors[prevSectorIndex].resizeDelta({
-				anchor: "b",
-				delta : (sectors[prevSectorIndex].delta - deltaToChange)
-			});
-			sectors[laterSectorIndex].resizeDelta({
-				anchor: "e",
-				delta : (sectors[laterSectorIndex].delta - deltaToChange)
-			});
-		}else{
-			sector.resizeDelta({
-				anchor: "m",
-				delta: sector.originalAttr.delta
-			});
-			sectors[prevSectorIndex].resizeDelta({
-				anchor: "b",
-				delta : sectors[prevSectorIndex].originalAttr.delta
-			});
-			sectors[laterSectorIndex].resizeDelta({
-				anchor: "e",
-				delta : sectors[laterSectorIndex].originalAttr.delta
-			});
-		}
-	}
-	//Colors and text style settings
-	/** Sector Normal Fill Color (also mouseout and mouseup) */
-	socialCheesecake.Cheesecake.getSectorFillColor = function (){
-		return sectorFillColor;
-	}
-	socialCheesecake.Cheesecake.setSectorFillColor = function (newColor){
-		if(typeof newColor === "string") sectorFillColor = newColor;
-	}
-	/** Extra Sectors Normal Fill Color (also mouseout and mouseup) */
-	socialCheesecake.Cheesecake.getExtraSectorFillColor = function (){
-		return extraSectorFillColor;
-	}
-	socialCheesecake.Cheesecake.setExtraSectorFillColor = function (newColor){
-		if(typeof newColor === "string") extraSectorFillColor = newColor;
-	}
-	/** Grey Sectors Normal Fill Color (also mouseout and mouseup) */
-	socialCheesecake.Cheesecake.getGreySectorFillColor = function (){
-		return greySectorFillColor;
-	}
-	socialCheesecake.Cheesecake.setGreySectorFillColor = function (newColor){
-		if(typeof newColor === "string") greySectorFillColor = newColor;
-	}
-	/** Sector Focus Fill Color (mousedown) */
-	socialCheesecake.Cheesecake.getSectorFocusColor = function (){
-		return sectorFocusColor;
-	}
-	socialCheesecake.Cheesecake.setSectorFocusColor = function (newColor){
-		if(typeof newColor === "string") sectorFocusColor = newColor;
-	}
-	/** Extra Sectors Focus Fill Color (mousedown) */
-	socialCheesecake.Cheesecake.getExtraSectorFocusColor = function (){
-		return extraFocusColor;
-	}
-	socialCheesecake.Cheesecake.setExtraSectorFocusColor = function (newColor){
-		if(typeof newColor === "string") extraFocusColor = newColor;
-	}
-	/** Grey Sectors Focus Fill Color (mousedown) */
-	socialCheesecake.Cheesecake.getGreySectorFocusColor = function (){
-		return greyFocusColor;
-	}
-	socialCheesecake.Cheesecake.setGreySectorFocusColor = function (newColor){
-		if(typeof newColor === "string") greyFocusColor = newColor;
+		return subsector;
 	}
-	/** Sector Hover Fill Color (mouseover) */
-	socialCheesecake.Cheesecake.getSectorHoverColor = function (){
-		return sectorHoverColor;
-	}
-	socialCheesecake.Cheesecake.setSectorHoverColor = function (newColor){
-		if(typeof newColor === "string") sectorHoverColor = newColor;
-	}
-	/** Extra Sectors Hover Fill Color (mouseover) */
-	socialCheesecake.Cheesecake.getExtraSectorHoverColor = function (){
-		return extraHoverColor;
-	}
-	socialCheesecake.Cheesecake.setExtraSectorHoverColor = function (newColor){
-		if(typeof newColor === "string") extraHoverColor = newColor;
-	}
-	/** Grey Sectors Hover Fill Color (mouseover) */
-	socialCheesecake.Cheesecake.getGreySectorHoverColor = function (){
-		return greyHoverColor;
-	}
-	socialCheesecake.Cheesecake.setGreySectorHoverColor = function (newColor){
-		if(typeof newColor === "string") greyHoverColor = newColor;
-	}
-	/** Sector Text and Stroke Color */
-	socialCheesecake.Cheesecake.getSectorTextAndStrokeColor = function (){
-		return sectorTextAndStrokeColor;
-	}
-	socialCheesecake.Cheesecake.setSectorTextAndStrokeColor = function (newColor){
-		if(typeof newColor === "string") sectorTextAndStrokeColor = newColor;
+	
+	socialCheesecake.Cheesecake.prototype.getChanges = function (){
+		return this._changes;
 	}
-	/** Extra Sectors Hover Fill Color (mouseover) */
-	socialCheesecake.Cheesecake.getExtraSectorTextAndStrokeColor = function (){
-		return extraTextAndStrokeColor;
+	
+	socialCheesecake.Cheesecake.prototype.getInitialState = function (){
+		return this._initialState;
 	}
-	socialCheesecake.Cheesecake.setExtraSectorTextAndStrokeColor = function (newColor){
-		if(typeof newColor === "string") extraTextAndStrokeColor = newColor;
+	
+	socialCheesecake.Cheesecake.prototype._setInitialState = function (){
+		var state = this._initialState;
+		var actors = this.grid.actors;
+		
+		state.actors = [];
+		for( var actor in actors ){
+			state.actors.push({ 
+				id: actors[actor].id ,
+				subsectors : actors[actor].getParentsIds(),
+				name : actors[actor].name,
+				extraInfo : actors[actor].extraInfo
+			})
+		}		
 	}
-	/** Grey Sectors Hover Fill Color (mouseover) */
-	socialCheesecake.Cheesecake.getGreySectorTextAndStrokeColor = function (){
-		return greyTextAndStrokeColor;
+
+	/** Number of actors to animate */
+	socialCheesecake.Cheesecake.getMaxVisibleActors = function(){
+		return maxVisibleActors;
 	}
-	socialCheesecake.Cheesecake.setGreySectorTextAndStrokeColor = function (newColor){
-		if(typeof newColor === "string") greyTextAndStrokeColor = newColor;
+	socialCheesecake.Cheesecake.setMaxVisibleActors = function(number){
+		if(typeof number === "number") maxVisibleActors = number;
 	}
 	
 })();