social_cheesecake 0.3.0 → 0.4.0

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

@@ -1,8 +1,8 @@
 /**
- * @license SocialCheesecake JavaScript Library v0.3.0
+ * @license SocialCheesecake JavaScript Library v0.4.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)
+ * Developed by Alicia Diez (https://github.com/adiezbal)
+ * Copyright 2011, Technical University of Madrid (Universidad Politecnica de Madrid)
  * Licensed under the MIT or GPL Version 2 licenses.
  * Date: Dec 22 2011
  *

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

@@ -1,243 +1,259 @@
-var socialCheesecake = socialCheesecake || {};
+var socialCheesecake = socialCheesecake || {}; 
 (function() {
 	socialCheesecake.Actor = function(settings) {
-		if(!settings) throw "No arguments passed to the function"
-		if(!settings.parent) throw "Actor must be associated to at least a subsector"
-		var defaultSettings = {
-		}
-		for(var property in defaultSettings) {
-			if(!( property in settings)) {
-				settings[property] = defaultSettings[property];
-			}
-		}
+		if(!settings)
+			throw "No arguments passed to the function"
+		if(!settings.parent)
+			throw "Actor must be associated to at least a subsector"
+		
 		this.id = settings.id;
 		this.name = settings.name;
 		this.extraInfo = (settings.extraInfo) ? settings.extraInfo : undefined;
-		this.opacity = 1;
+		this.opacity = socialCheesecake.Grid.maxOpacity;
 		this._focused = false;
 		this._selected = false;
 		this._hidden = true;
 		this._filtered = false;
 		this.fading = "none";
 		this.parents = [];
-		if(settings.parent) this.parents.push(settings.parent);
-		
+		if(settings.parent)
+			this.parents.push(settings.parent);
+
 		var actor = this;
 		var actor_div = actor.getDiv();
-		
-		actor_div.addEventListener("mouseover", function(){
+
+		actor_div.addEventListener("mouseover", function() {
 			var sector;
-			if( !actor.isSelected() ){				
-				actor.focus();
-			}
-			for (var subsector in actor.parents){
+			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);
+				sector.colorHandler("mouseover");
+				actor.parents[subsector].colorHandler("mouseover");
 			}
 		}, false);
-		actor_div.addEventListener("mouseout", function(){
+		actor_div.addEventListener("mouseout", function() {
 			var sector;
-			if( !actor.isSelected() ){
-				actor.unfocus();
-			}
-			for (var subsector in actor.parents){
+			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);
+				sector.colorHandler("mouseout");
+				actor.parents[subsector].colorHandler("mouseout");
 			}
 		}, false);
-		actor_div.addEventListener("mousedown", function(){
+		actor_div.addEventListener("click", function() {
 			var sector;
-			if( actor.isSelected()){
-				// Deactivate actor
+			if(actor.isSelected()) {
 				actor.unselect();
-			}else{
-				//Activate actor
+			} else {
 				actor.select();
+				actor.unfocus();
 			}
 		}, false);
 	}
-	
+
 	socialCheesecake.Actor.prototype.getParentsIds = function() {
 		var parents = this.parents;
 		var parentsIds = [];
-		
-		for(var i in parents){
+
+		for(var i in parents) {
 			parentsIds.push(parents[i].id);
 		}
 		return parentsIds;
 	}
-	
+
+	socialCheesecake.Actor.prototype.addClass = function(cssClass) {
+		var actor_div = this.getDiv();
+		var newClass = "";
+		var classRegExp = new RegExp("(^|\\s)" + cssClass + "($|\\s)");
+
+		if(actor_div.getAttribute("class")) {
+			newClass = actor_div.getAttribute("class");
+			if(!(newClass.match(classRegExp)) ) {
+				newClass = newClass.concat(" " + cssClass);
+				actor_div.setAttribute("class", newClass);
+			}
+		} else {
+			newClass = cssClass;
+			actor_div.setAttribute("class", newClass);
+		}
+	}
+
+	socialCheesecake.Actor.prototype.removeClass = function(cssClass) {
+		var actor_div = this.getDiv();
+		var newClass = "";
+		var classRegExp = new RegExp("(^|\\s)" + cssClass + "($|\\s)");
+
+		if(actor_div.getAttribute("class")) {
+			newClass = actor_div.getAttribute("class");
+			if (newClass.match(classRegExp)){
+				classRegExp = new RegExp("(^|\\s)" + cssClass);
+				newClass = actor_div.getAttribute("class").replace(classRegExp, "");
+				actor_div.setAttribute("class", newClass);
+			}
+		}
+	}
+
 	socialCheesecake.Actor.prototype.isSelected = function() {
 		return this._selected;
 	}
-	
+
 	socialCheesecake.Actor.prototype.select = function() {
-		var actor = this;
-		actor._selected = true;
-		actor.focus();
+		this._selected = true;
+		this.addClass("selected");
 	}
-	
+
 	socialCheesecake.Actor.prototype.unselect = function() {
-		var actor = this;
-		actor._selected = false;
-		actor.unfocus();
+		this._selected = false;
+		this.removeClass("selected");
 	}
-	
+
 	socialCheesecake.Actor.prototype.focus = function() {
-		var actor_div = this.getDiv();
-		var newClass="";
 		this._focused = true;
-		if (actor_div.getAttribute("class")){
-			if (!(actor_div.getAttribute("class").match(/\sfocused/) )){
-				newClass = actor_div.getAttribute("class").concat(" focused");
-				actor_div.setAttribute("class", newClass);
-			}
-		}else{
-			newClass = "focused";
-			actor_div.setAttribute("class", newClass);
-		}
+		this.addClass("focused");
 	}
-	
+
 	socialCheesecake.Actor.prototype.unfocus = function() {
-		var actor_div = this.getDiv();
-		var newClass="";
 		this._focused = false;
-		if (actor_div.getAttribute("class")){
-			newClass = actor_div.getAttribute("class").replace(/(^|\s)focused($|\s)/, "");
-			actor_div.setAttribute("class", newClass);
-		}	
+		this.removeClass("focused");
 	}
-	
-	socialCheesecake.Actor.prototype.isFocused = function() {		var actor = this;
+
+	socialCheesecake.Actor.prototype.isFocused = function() {
+		var actor = this;
 		var gridIdPrefix = this.getCheesecake().grid.divIdPrefix;
 		return this._focused;
 	}
-	
+
 	socialCheesecake.Actor.prototype.hide = function() {
 		var actor_div = this.getDiv();
-		var newStyle=" display: none;";
+		var newStyle = " display: none;";
 		this._hidden = true;
-		if (actor_div.getAttribute("style")){
-			if (actor_div.getAttribute("style").match(/display\s*:\s*[a-z]*;/)){
-				newStyle = actor_div.getAttribute("style").replace(/display\s*:\s*[a-z]*;/, "display: none;");			
-			}else{
+		if(actor_div.getAttribute("style")) {
+			if(actor_div.getAttribute("style").match(/display\s*:\s*[a-z]*;/)) {
+				newStyle = actor_div.getAttribute("style").replace(/display\s*:\s*[a-z]*;/, "display: none;");
+			} else {
 				newStyle = actor_div.getAttribute("style").concat("display: none;");
 			}
 		}
 		actor_div.setAttribute("style", newStyle);
-		this.fading= "none";
+		this.fading = "none";
 	}
 	
 	socialCheesecake.Actor.prototype.show = function() {
 		var actor_div = this.getDiv();
-		var newStyle=" display: inline;";
-		
-		if(this.isFiltered()) return;
-		
+		var newStyle = " display: inline;";
+
+		if(this.isFiltered())
+			return;
+
 		this._hidden = false;
-		if (actor_div.getAttribute("style")){
-			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{
+		if(actor_div.getAttribute("style")) {
+			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() {
 		return this._hidden;
 	}
-	
+
 	socialCheesecake.Actor.prototype.isFiltered = function() {
 		return this._filtered;
 	}
-	
+
 	socialCheesecake.Actor.prototype.isVisible = function() {
 		return !(this.isHidden() || this.isFiltered());
 	}
-	
+
 	socialCheesecake.Actor.prototype.filter = function() {
 		this._filtered = true;
 		this.fadeOut(100, true);
 	}
-	
+
 	socialCheesecake.Actor.prototype.unfilter = function() {
 		this._filtered = false;
 	}
-	
+
 	socialCheesecake.Actor.prototype.setDivOpacity = function(opacity) {
 		opacity = (opacity > 1) ? 1 : opacity;
 		opacity = (opacity < 0) ? 0 : opacity;
 		var actor = this;
 		var actor_div = this.getDiv();
-		
+
 		this.opacity = opacity;
-		var newStyle="opacity: "+this.opacity + ";";
-		
-		if (actor_div.getAttribute("style")){
+		var newStyle = "opacity: " + this.opacity + ";";
+
+		if(actor_div.getAttribute("style")) {
 			newStyle = actor_div.getAttribute("style").replace(/opacity\s*:\s*[a-zA-Z0-9.]*;/g, "");
-			newStyle = newStyle.concat("opacity: "+this.opacity + ";");			
+			newStyle = newStyle.concat("opacity: " + this.opacity + ";");
 		}
 		actor_div.setAttribute("style", newStyle);
 	}
-	
+
 	socialCheesecake.Actor.prototype.fade = function(time, modifyDisplay) {
-		var actor = this;	
+		var actor = this;
 		var time = (time) ? time : 300;
-		var deltaOpacity = 1000.0/ (60.0 *time);
+		var minOpacity = socialCheesecake.Grid.minOpacity;
+		var maxOpacity = socialCheesecake.Grid.maxOpacity;
+		var deltaOpacity = ((maxOpacity - minOpacity)* 1000.0) / (60.0 * time);
 		var grow = 0;
 		
-		if (this.fading == "out"){
+		if(this.fading == "out") {
 			grow = -1;
-		}else if (this.fading == "in"){
+			if(deltaOpacity > (this.opacity - minOpacity)) deltaOpacity = this.opacity - minOpacity;
+		} else if(this.fading == "in") {
 			grow = 1;
+			if(deltaOpacity > (maxOpacity - this.opacity)) deltaOpacity = maxOpacity - this.opacity;
 		}
+		
 		var opacity = this.opacity + grow * deltaOpacity;
-		opacity = Math.round(opacity*1000)/1000;
+		opacity = Math.round(opacity * 1000) / 1000;
 		actor.setDivOpacity(opacity);
-				
-		if (((this.fading == "out") && (opacity >= 0))||
-	 			((this.fading == "in") && (opacity <= 1))){
-		  requestAnimFrame(function() {
+
+		if(((this.fading == "out") && (opacity > minOpacity)) || ((this.fading == "in") && (opacity < maxOpacity))) {
+			requestAnimFrame(function() {
 				actor.fade(time, modifyDisplay);
-      });
-    }else{
-    	this.fading = "none";
-    	if((modifyDisplay) && (opacity <= 0)) actor.hide();
-    }
+			});
+		} else {
+			this.fading = "none";
+			if((modifyDisplay) && (opacity <= minOpacity))
+				actor.hide();
+		}
 	}
-	
+
 	socialCheesecake.Actor.prototype.fadeOut = function(time, modifyDisplay) {
+		var maxOpacity = socialCheesecake.Grid.maxOpacity;
 		this.fading = "out";
-		this.setDivOpacity(1);
+		this.setDivOpacity(maxOpacity);
 		this.fade(time, modifyDisplay);
 	}
-	
+
 	socialCheesecake.Actor.prototype.fadeIn = function(time, modifyDisplay) {
 		var actor = this;
-		
-		if(actor.isFiltered()) return;
+		var minOpacity = socialCheesecake.Grid.minOpacity;
+
+		if(actor.isFiltered())
+			return;
 		actor.fading = "in";
-		actor.setDivOpacity(0);
-		if (modifyDisplay) actor.show();
+		actor.setDivOpacity(minOpacity);
+		if(modifyDisplay)
+			actor.show();
 		actor.fade(time, modifyDisplay);
 	}
-	
-	socialCheesecake.Actor.prototype.getCheesecake = function (){
+
+	socialCheesecake.Actor.prototype.getCheesecake = function() {
 		return this.parents[0].parent.parent;
 	}
-	
-	socialCheesecake.Actor.prototype.getDiv = function () {
+
+	socialCheesecake.Actor.prototype.getDiv = function() {
 		var gridIdPrefix = this.getCheesecake().grid.divIdPrefix;
 		var actor_id = this.id;
-		var actor_div = document.getElementById(gridIdPrefix+actor_id);
+		var actor_div = document.getElementById(gridIdPrefix + actor_id);
 		return actor_div;
 	}
-	
-})();  
-  
+})();

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

@@ -1,34 +1,5 @@
 var socialCheesecake = socialCheesecake || {};
 (function() {
-	
-	//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"
-		}
-	}
-	
-	/* Number of actors to animate */
-	var maxVisibleActors = 30;
-	
 	socialCheesecake.Cheesecake = function(cheesecakeData) {
 		var jsonSectors = cheesecakeData.sectors;
 		var cheesecake = this;
@@ -40,137 +11,75 @@ var socialCheesecake = socialCheesecake || {};
 		cheesecake.rMax = cheesecakeData.rMax;
 		cheesecake.sectors = [];
 		cheesecake.highlightedSector = null;
-		cheesecake.highlightedSectorCallback = cheesecakeData.highlightedSectorCallback || undefined;
+		cheesecake.onSectorHighlight = cheesecakeData.onSectorHighlight || null;
+		cheesecake.onSectorFocusBegin = cheesecakeData.onSectorFocusBegin || null;
+		cheesecake.onSectorFocusEnd = cheesecakeData.onSectorFocusEnd || null;
+		cheesecake.onSectorUnfocusBegin = cheesecakeData.onSectorUnfocusBegin || null;
+		cheesecake.onSectorUnfocusEnd = cheesecakeData.onSectorUnfocusEnd || null;
+		cheesecake.syncSectorFocusCallbacks = cheesecake.syncSectorFocusCallbacks || false;
 		cheesecake.auxiliarSectors = [];
-		cheesecake.stage = new Kinetic.Stage(cheesecakeData.container.id, 
-			cheesecakeData.container.width, cheesecakeData.container.height);
+		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,
-			divIdPrefix : cheesecakeData.grid.divIdPrefix || "actor_"
+			divIdPrefix : cheesecakeData.grid.divIdPrefix || "actor_",
+			maxOpacity : cheesecakeData.grid.maxOpacity || 1,
+			minOpacity : cheesecakeData.grid.minOpacity || 0
 		});
 		cheesecake.searchEngine = new socialCheesecake.SearchEngine({
 			parent : this
 		});
 		cheesecake.matchActorsNumber = cheesecakeData.match;
-		if(cheesecake.matchActorsNumber==null) cheesecake.matchActorsNumber = true;
+		if(cheesecake.matchActorsNumber == null)
+			cheesecake.matchActorsNumber = true;
 		cheesecake._initialState = {};
 		cheesecake._changes = {};
-		cheesecake.onChange = function(cheesecake){};
-		if(cheesecakeData.maxVisibleActors != undefined) 
-			socialCheesecake.Cheesecake.setMaxVisibleActors(cheesecakeData.maxVisibleActors);
+		cheesecake.onChange = function(cheesecake) {
+		};
 		if(cheesecakeData.onChange)
 			cheesecake.onChange = cheesecakeData.onChange;
 		//Text settings
-		if(cheesecakeData.text){
-			for( var style in cheesecakeData.text){
-				socialCheesecake.text[style]= cheesecakeData.text[style];
+		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];
+		if(cheesecakeData.colors) {
+			for(var type in cheesecakeData.colors) {
+				for(var color in cheesecakeData.colors[type]) {
+					socialCheesecake.colors[type][color] = cheesecakeData.colors[type][color];
 				}
 			}
 		}
-		
-		if(jsonSectors.length < 16){
+		//Extra sector if necessary
+		if(jsonSectors.length < 16) {
 			var extraSector = new socialCheesecake.Sector({
 				parent : cheesecake,
-				center : {
-					x : cheesecakeData.center.x,
-					y : cheesecakeData.center.y
-				},
-				label: "+",
+				center : cheesecake.center,
+				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
+				type : "extraSector"
 			});
 			cheesecake.sectors[jsonSectors.length] = extraSector;
 		}
 		var minNumSectors = Math.min(jsonSectors.length, 16);
-		for(var i = 0; i < minNumSectors; i++) {			
+		for(var i = 0; i < minNumSectors; i++) {
 			var settings = {
 				parent : cheesecake,
-				center : {
-					x : cheesecakeData.center.x,
-					y : cheesecakeData.center.y
-				},
+				center : cheesecake.center,
 				id : jsonSectors[i].id,
 				label : jsonSectors[i].name,
 				rOut : cheesecakeData.rMax,
 				subsectors : jsonSectors[i].subsectors,
-				mouseover : {
-					color : socialCheesecake.colors.normalSector.hover,
-					callback : function(sector) {
-						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);
-					}
-				},
-				mouseout : {
-					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.fan(false);
-					}
-				},
-				mousedown : {
-					color : socialCheesecake.colors.normalSector.highlight,
-					callback : function(sector) {
-						cheesecake.focusAndBlurCheesecake(sector);
-						cheesecake.grid.hideAll();
-						cheesecake.grid.fadeIn(sector.actors,300, true);
-					}
-				},
-				mouseup : { color : socialCheesecake.colors.normalSector.background },
-				fontColor : socialCheesecake.colors.normalSector.font,
-				borderColor : socialCheesecake.colors.normalSector.border
+				type : "normalSector"
 			};
 			cheesecake.sectors[i] = new socialCheesecake.Sector(settings);
 		}
@@ -178,142 +87,106 @@ var socialCheesecake = socialCheesecake || {};
 		cheesecake._setInitialState();
 		cheesecake.draw();
 	}
-	
-	socialCheesecake.Cheesecake.prototype.draw = function(){
+
+	socialCheesecake.Cheesecake.prototype.draw = function() {
 		var sectors = this.sectors;
-		var mainLayer = this.stage.mainLayer;
-		for (var sector in sectors){
-			mainLayer.add(sectors[sector].getRegion());
-		}
+		this.addToLayer(sectors);
 		this.stage.draw();
 	}
-	
-	socialCheesecake.Cheesecake.prototype.disable = function(){
+
+	socialCheesecake.Cheesecake.prototype.disable = function() {
 		var layers = this.stage.layers;
-		for(var layer in layers){
+		for(var layer in layers) {
 			layers[layer].listen(false);
 		}
 	}
-	
-	socialCheesecake.Cheesecake.prototype.enable = function(){
+
+	socialCheesecake.Cheesecake.prototype.enable = function() {
 		var layers = this.stage.layers;
-		for(var layer in layers){
+		for(var layer in layers) {
 			layers[layer].listen(true);
 		}
 	}
-	
+
 	socialCheesecake.Cheesecake.prototype.focusAndBlurCheesecake = function(sector) {
 		var cheesecake = this;
-		var mainLayer = this.stage.mainLayer;
-		var regions = mainLayer.getShapes();
 		var sectorIndex;
 		for(var i in cheesecake.sectors) {
-			if(cheesecake.sectors[i] === sector) sectorIndex = i;
+			if(cheesecake.sectors[i] === sector)
+				sectorIndex = i;
 		}
 		if(sectorIndex == null)
 			throw "sector doesn't belong to this cheesecake"
-		for(var i = (regions.length - 1); i >= 0; i--) {
-			if(!regions[i].permanent) {
-				mainLayer.remove(regions[i]);
-			}
-		}
-		mainLayer.clear();
-		this.setHighlightedSector(sector);
-		
+		cheesecake.clearLayer();
+		cheesecake.setHighlightedSector(sector);
+
 		//Add auxiliar sectors
 		var greySettings = {
 			parent : cheesecake,
-			center : {
-				x : cheesecake.center.x,
-				y : cheesecake.center.y
-			},
+			center : cheesecake.center,
 			phi : sector.phi + sector.delta,
 			delta : 2 * Math.PI - sector.delta,
 			rOut : cheesecake.rMax,
-			mouseout : {
-				color : socialCheesecake.colors.greySector.background,
-				callback : function() {
-					document.body.style.cursor = "default";
-				}
-			},
-			mousedown : { color : socialCheesecake.colors.greySector.highlight },
-			mouseup : { color : socialCheesecake.colors.greySector.background },
-			mouseover : {
-				color : socialCheesecake.colors.greySector.hover,
-				callback : function() {
-					document.body.style.cursor = "pointer";
-				}
-			},
 			color : socialCheesecake.colors.greySector.background,
-			fontColor : socialCheesecake.colors.greySector.font,
-			borderColor : socialCheesecake.colors.greySector.border,
-			auxiliar : true
-		};
-		var dummySettings = {
-			parent : cheesecake,
-			center : {
-				x : cheesecake.center.x,
-				y : cheesecake.center.y
-			},
-			phi : sector.phi,
-			delta : sector.delta,
-			rOut : sector.rOut,
-			label : sector.label,
-			simulate : sectorIndex,
-			mouseout : {
-				callback : function() {
-					document.body.style.cursor = "default";
-				}
-			},
-			mouseover : {
-				callback : function() {
-					document.body.style.cursor = "pointer";
-				}
-			},
-			auxiliar : true
+			auxiliar : true,
+			type : "greySector"
 		};
 		var greySector = new socialCheesecake.Sector(greySettings);
 		cheesecake.auxiliarSectors.push(greySector);
-		var dummySector = new socialCheesecake.Sector(dummySettings)
-		cheesecake.auxiliarSectors.push(dummySector);
-
-		mainLayer.add(greySector.getRegion());
-		mainLayer.add(dummySector.getRegion());
+		var dummySector = this.getAuxiliarClone(sectorIndex);
 
+		cheesecake.addToLayer(greySector);
+		cheesecake.addToLayer(dummySector);
 		//Animations
-		var greyMousedownCallback = function() {
+		var greyClickCallback = function() {
 			greySector.label = "";
 			cheesecake.unfocusAndUnblurCheesecake();
-		}
+		};
 		var greyResizeCallback = function() {
-			greySector.mousedown.callback = greyMousedownCallback;
+			greySector.click = {
+				callback : greyClickCallback
+			}
 			greySector.label = "GO BACK";
-		}
+		};
 		var greyRotateToCallback = function() {
 			greySector.resizeDelta({
 				delta : 3 * Math.PI / 2,
 				anchor : "M",
 				callback : greyResizeCallback
 			});
-		}
+		};
 		var dummyResizeCallback = function() {
+			var grid = cheesecake.grid;
+			grid.hideAll();
+			grid.show(cheesecake.sectors[sectorIndex].actors);
 			dummySector.splitUp();
-		}
+		};
 		var dummyRotateToCallback = function() {
-			dummySector.resizeDelta({
-				anchor : "M",
-				callback : dummyResizeCallback
-			});
-		}
-
+			var callback = function() {
+				dummySector.resizeDelta({
+					anchor : "M",
+					callback : dummyResizeCallback
+				});
+			}
+			if(cheesecake.onSectorFocusBegin) {
+				if(cheesecake.syncSectorFocusCallbacks) {
+					cheesecake.onSectorFocusBegin(cheesecake, callback);
+				} else {
+					cheesecake.onSectorFocusBegin(cheesecake);
+					callback();
+				}
+			} else {
+				callback();
+			}
+		};
 		greySector.rotateTo({
-			destination : 5*Math.PI / 4,
+			destination : 5 * Math.PI / 4,
 			callback : greyRotateToCallback,
 			anchor : "M"
 		});
 
 		dummySector.rotateTo({
-			destination : Math.PI / 4 ,
+			destination : Math.PI / 4,
 			callback : dummyRotateToCallback,
 			anchor : "M"
 		});
@@ -325,72 +198,106 @@ var socialCheesecake = socialCheesecake || {};
 		var regions = mainLayer.getShapes();
 
 		//Delete the auxiliar sectors
-		for(var i = (regions.length - 1); i >= 0; i--) {
-			if(!regions[i].permanent) {
-				mainLayer.remove(regions[i]);
-				cheesecake.auxiliarSectors.pop();
-			}
-		}
+		cheesecake.removeFromLayer(cheesecake.auxiliarSectors);
+		cheesecake.auxiliarSectors = [];
 		mainLayer.clear();
-		
+
 		// Add the former sectors and actors
 		cheesecake.draw();
-		if(lastSector){
+		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() {
 		var cheesecake = this;
 		var auxiliarSectors = this.auxiliarSectors;
-		var sector;
+		var dummySector;
 		var sectorNewDelta;
 		var sectorNewPhi;
 		var greySector;
-
-		//Localize the dummy and grey sectors
-		for(var i in auxiliarSectors) {
-			if(auxiliarSectors[i].simulate != null) {
-				sector = auxiliarSectors[i];
-			} else {
-				greySector = auxiliarSectors[i];
+		var actions = function() {
+			//Localize the dummy and grey sectors
+			for(var i in auxiliarSectors) {
+				if(auxiliarSectors[i].simulate != null) {
+					var options = {
+						phi : auxiliarSectors[i].phi,
+						delta : auxiliarSectors[i].delta,
+						rOut : auxiliarSectors[i].rOut
+					};
+					dummySector = cheesecake.getAuxiliarClone(auxiliarSectors[i].simulate, options);
+				} else {
+					greySector = auxiliarSectors[i];
+				}
 			}
-		}
 
-		//Animate and go back to the general view
-		sectorNewDelta = cheesecake.sectors[sector.simulate].delta;
-		sectorNewPhi = cheesecake.sectors[sector.simulate].phi;
-		sector.putTogether();
-		sector.resizeDelta({
-			anchor : "M",
-			delta : sectorNewDelta,
-			callback : function() {
-				sector.rotateTo({
-					destination : sectorNewPhi
-				});
-			}
-		});
-		greySector.resizeDelta({
-			anchor : "M",
-			delta : (2*Math.PI) - sectorNewDelta,
-			callback : function() {
-				greySector.rotateTo({
-					destination : sectorNewPhi + sectorNewDelta,
-					callback : function() {
-						cheesecake.recoverCheesecake();
+			//Animate and go back to the general view
+			dummyNewDelta = cheesecake.sectors[dummySector.simulate].delta;
+			dummyNewPhi = cheesecake.sectors[dummySector.simulate].phi;
+			dummySector.putTogether();
+			dummySector.resizeDelta({
+				anchor : "M",
+				delta : dummyNewDelta,
+				callback : function() {
+					if(cheesecake.onSectorUnfocusEnd) {
+						cheesecake.onSectorUnfocusEnd(cheesecake);
 					}
-				});
+					cheesecake.grid.showAll();
+					dummySector.rotateTo({
+						destination : dummyNewPhi
+					});
+				}
+			});
+			greySector.resizeDelta({
+				anchor : "M",
+				delta : (2 * Math.PI) - dummyNewDelta,
+				callback : function() {
+					greySector.rotateTo({
+						destination : dummyNewPhi + dummyNewDelta,
+						callback : function() {
+							cheesecake.recoverCheesecake();
+						}
+					});
+				}
+			});
+		}
+		if(cheesecake.onSectorUnfocusBegin) {
+			if(cheesecake.syncSectorFocusCallbacks) {
+				cheesecake.onSectorUnfocusBegin(cheesecake, actions);
+			} else {
+				cheesecake.onSectorUnfocusBegin(cheesecake);
+				actions();
 			}
-		});
+		} else {
+			actions();
+		}
+	}
+	
+	socialCheesecake.Cheesecake.prototype.addNewSector = function() {
+		var cheesecake = this;
+		var sectors = this.sectors;	
+		var newSector;
+		var settings = {
+			parent : cheesecake,
+			center : cheesecake.center,
+			/*id : jsonSectors[i].id,*/
+			label : "New Sector",
+			rOut : cheesecake.rMax,
+			subsectors : [{name : "New Subsector 1"}]
+		};
+		//move the extra sector to its new position, create new sector.
+		sectors.push(sectors[sectors.length-1]);
+		newSector = new socialCheesecake.Sector(settings);
+		cheesecake.sectors[sectors.length-2] = newSector;
+		cheesecake.calculatePortions();
 	}
 	
 	/**
 	 * actorId 		- actor which changes one of its parents
 	 */
-	socialCheesecake.Cheesecake.prototype.updateActorMembership = function (actor){
+	socialCheesecake.Cheesecake.prototype.updateActorMembership = function(actor) {
 		var changes = this._changes;
 		var grid = this.grid;
 		var changesInActors;
@@ -400,16 +307,16 @@ var socialCheesecake = socialCheesecake || {};
 		var actorName = actor.name;
 		var actorExtraInfo = actor.extraInfo;
 		var onChange = this.onChange;
-		
-		if(changes.actors != undefined){
+
+		if(changes.actors != undefined) {
 			changesInActors = changes.actors
-			for( var a in changesInActors){
-				if(changesInActors[a].id == actorId){
+			for(var a in changesInActors) {
+				if(changesInActors[a].id == actorId) {
 					alreadyChanged = true;
 					changesInActors[a].subsectors = actorParents;
 				}
 			}
-			if(!alreadyChanged){
+			if(!alreadyChanged) {
 				changesInActors.push({
 					id : actorId,
 					subsectors : actorParents,
@@ -418,7 +325,7 @@ var socialCheesecake = socialCheesecake || {};
 					justAdded : false
 				});
 			}
-		}else{
+		} else {
 			changes.actors = [];
 			changes.actors.push({
 				id : actorId,
@@ -431,8 +338,8 @@ var socialCheesecake = socialCheesecake || {};
 		//Execute onChange Callback
 		onChange(this);
 	}
-	
-	socialCheesecake.Cheesecake.prototype.calculatePortions = function (){
+
+	socialCheesecake.Cheesecake.prototype.calculatePortions = function() {
 		var sectors = this.sectors;
 		var match = this.matchActorsNumber;
 		var deltaExtra = Math.PI / 8;
@@ -442,34 +349,35 @@ var socialCheesecake = socialCheesecake || {};
 		var sectorPortions = [];
 		var totalSectors = sectors.length;
 		var totalActors = 0;
-		var totalAngle = 2*Math.PI;
+		var totalAngle = 2 * Math.PI;
 		var unusedAngle;
-		
+
 		//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;
+		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;
+			totalSectors = sectors.length - 1;
 			totalAngle -= deltaExtra;
 		}
-		if(!match){
+		if(!match) {
 			unusedAngle = 0;
-		}else{
+		} else {
 			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;
+			if(!match)
+				sectorPortions[i] = totalAngle / totalSectors;
 		}
 		for(var i = 0; i < totalSectors; i++) {
-			if(totalActors!=0){
-				sectorPortions[i] += (sectorActors[i] / totalActors) * unusedAngle;				
-			}else{
+			if(totalActors != 0) {
+				sectorPortions[i] += (sectorActors[i] / totalActors) * unusedAngle;
+			} else {
 				sectorPortions[i] = totalAngle / totalSectors;
 			}
 			sectors[i].phi = phi;
@@ -480,35 +388,126 @@ var socialCheesecake = socialCheesecake || {};
 		}
 	}
 	
-	socialCheesecake.Cheesecake.prototype.setHighlightedSector = function(sector){
-		if(this.highlightedSector != sector){
+	socialCheesecake.Cheesecake.prototype.addToLayer = function(sectors, layer){
+		var layer = layer || this.stage.mainLayer;
+		if(sectors instanceof Array){
+			for(var sector in sectors){
+				layer.add(sectors[sector].getRegion());
+			}
+		}else{
+			layer.add(sectors.getRegion());
+		}
+	}
+	
+	socialCheesecake.Cheesecake.prototype.removeFromLayer = function(sectors, layer){
+		var layer = layer || this.stage.mainLayer;
+		if(sectors instanceof Array){
+			for(var sector in sectors) {
+				try{
+					layer.remove(sectors[sector].getRegion());
+				}catch(e){
+				}
+			}
+		}else{
+			layer.remove(sectors.getRegion());
+		}
+	}
+	
+	socialCheesecake.Cheesecake.prototype.drawLayer = function(layer){
+		var layer = layer || this.stage.mainLayer;
+		layer.draw();
+	}
+	
+	socialCheesecake.Cheesecake.prototype.clearLayer = function(layer){
+		var layer = layer || this.stage.mainLayer;
+		var regions = layer.getShapes();
+		for(var i = (regions.length - 1); i >= 0; i--) {
+			layer.remove(regions[i]);
+		}
+		layer.clear();
+	}
+
+	socialCheesecake.Cheesecake.prototype.setHighlightedSector = function(sector) {
+		if(this.highlightedSector != sector) {
 			this.highlightedSector = sector;
-			if(this.highlightedSectorCallback){
-				this.highlightedSectorCallback(this);
+			if(this.onSectorHighlight) {
+				this.onSectorHighlight(this);
 			}
 		}
 	}
 	
-	socialCheesecake.Cheesecake.prototype.getSectorById = function(id){
+	socialCheesecake.Cheesecake.prototype.getAuxiliarClone = function(sectorIndex, options){
+		var dummy = null;
+		var cheesecake = this;
+		var sector = null;
+		var auxiliarSectors = cheesecake.auxiliarSectors;
+		var settings = {};
+		var options = options || {};
+		//Localize the dummy sector
+		for(var i in auxiliarSectors) {
+			if(auxiliarSectors[i].simulate != null) {
+				dummy = auxiliarSectors[i];
+			}
+		}	
+		if( sectorIndex != null){
+			sector = cheesecake.sectors[sectorIndex];
+			settings = {
+				phi : options.phi || sector.phi,
+				delta : options.delta || sector.delta,
+				rOut : options.rOut || sector.rOut,
+				label : options.label || sector.label,
+				borderColor : options.borderColor || socialCheesecake.colors[sector.type]["border"],
+				color : options.color || sector.color,
+				fontColor : options.fontColor || socialCheesecake.colors[sector.type]["font"],
+				simulate : sectorIndex,
+				auxiliar : true,
+				type: "dummySector"
+			}
+			//if dummy doesnt exist, create a new one
+			if(!dummy){ 
+				dummy = new socialCheesecake.Sector({
+					center : cheesecake.center,
+					parent : cheesecake
+				});
+				this.auxiliarSectors.push(dummy);
+			}
+			for(var property in settings){
+				dummy[property] = settings[property];
+			}
+		}
+		return dummy;
+	}
+	
+	socialCheesecake.Cheesecake.prototype.getFocusedSector = function(){
+		var dummy = this.getAuxiliarClone();
+		var sectors = this.sectors;
+		var sector = null;
+		if(dummy){
+			sector = sectors[dummy.simulate];
+		}
+		return sector;
+	}
+
+	socialCheesecake.Cheesecake.prototype.getSectorById = function(id) {
 		var sectors = this.sectors;
 		var sector;
-		for (var i in sectors){
-			if (sectors[i].id == id){
+		for(var i in sectors) {
+			if(sectors[i].id == id) {
 				sector = sectors[i];
 				break;
 			}
 		}
 		return sector;
 	}
-	
-	socialCheesecake.Cheesecake.prototype.getSubsectorById = function(id){
+
+	socialCheesecake.Cheesecake.prototype.getSubsectorById = function(id) {
 		var sectors = this.sectors;
 		var subsectors;
 		var subsector;
-		for (var i in sectors){
+		for(var i in sectors) {
 			subsectors = sectors[i].subsectors;
-			for (var j in subsectors){
-				if (subsectors[j].id == id){
+			for(var j in subsectors) {
+				if(subsectors[j].id == id) {
 					subsector = subsectors[j];
 					break;
 				}
@@ -516,37 +515,27 @@ var socialCheesecake = socialCheesecake || {};
 		}
 		return subsector;
 	}
-	
-	socialCheesecake.Cheesecake.prototype.getChanges = function (){
+
+	socialCheesecake.Cheesecake.prototype.getChanges = function() {
 		return this._changes;
 	}
-	
-	socialCheesecake.Cheesecake.prototype.getInitialState = function (){
+
+	socialCheesecake.Cheesecake.prototype.getInitialState = function() {
 		return this._initialState;
 	}
-	
-	socialCheesecake.Cheesecake.prototype._setInitialState = function (){
+
+	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 ,
+		for(var actor in actors ) {
+			state.actors.push({
+				id : actors[actor].id,
 				subsectors : actors[actor].getParentsIds(),
 				name : actors[actor].name,
 				extraInfo : actors[actor].extraInfo
 			})
-		}		
-	}
-
-	/** Number of actors to animate */
-	socialCheesecake.Cheesecake.getMaxVisibleActors = function(){
-		return maxVisibleActors;
-	}
-	socialCheesecake.Cheesecake.setMaxVisibleActors = function(number){
-		if(typeof number === "number") maxVisibleActors = number;
+		}
 	}
-	
 })();
-