social_cheesecake 0.2.0 → 0.3.0

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

@@ -8,10 +8,13 @@ var socialCheesecake = socialCheesecake || {};
 		this.parent = settings.parent;
 		this.id = settings.grid_id;
 		this.divIdPrefix = settings.divIdPrefix;
+		this.visibleActors = [];
 	}
   
 	socialCheesecake.Grid.prototype.addActor = function (actor_info, subsector) {
 		var actors = this.actors;
+		var visibleActors = this.visibleActors;
+		var maxVisibleActors = socialCheesecake.Cheesecake.getMaxVisibleActors();
 		var actor;
 		
 		//Check if the actor is already in the array
@@ -33,6 +36,10 @@ var socialCheesecake = socialCheesecake || {};
 			actor_info.parent = subsector;
 			actor = new socialCheesecake.Actor(actor_info);
 			actors.push(actor);
+			if(actors.length <= maxVisibleActors ){
+				actor.show();
+				visibleActors.push(actor);
+			}
 		}
 		return actor;
 	}
@@ -57,56 +64,114 @@ var socialCheesecake = socialCheesecake || {};
 	}
 	
 	socialCheesecake.Grid.prototype.getSelectedActors = function(){
-		var actors = this.actors;
+		var actors = this.visibleActors;
 		var selectedActors = [];
 		for (var i in actors){
-			if(actors[i].isSelected()) selectedActors.push(actors[i]);
+			if(actors[i] && actors[i].isSelected()) selectedActors.push(actors[i]);
 		}
 		return selectedActors;
 	}
 	
 	socialCheesecake.Grid.prototype.getShownActors = function(){
-		var actors = this.actors;
-		var shownActors = [];
-		for (var i in actors){
-			if((!actors[i].isHidden())&&(!actors[i].isFiltered())) shownActors.push(actors[i]);
+		return this.visibleActors;
+	}
+	
+	socialCheesecake.Grid.prototype.select = function (actor_ids) {
+		var actor;
+		
+		if (actor_ids instanceof Array) {
+			for(var i in actor_ids){
+				actor = actor_ids[i];
+				if (actor){
+					if(!(actor instanceof socialCheesecake.Actor)){
+						actor = this.getActor(actor);
+					}
+					actor.select();
+				}
+			}
+		} else {
+			actor = actor_ids;
+			if(!(actor_ids instanceof socialCheesecake.Actor)){
+				actor = this.getActor(actor_ids);
+			}
+			actor.select();
 		}
-		return shownActors;
+	}
+	
+	socialCheesecake.Grid.prototype.selectAll = function () {
+		this.select(this.visibleActors);
+	}
+	
+	socialCheesecake.Grid.prototype.unselect = function (actor_ids) {
+		var actor;
+		
+		if (actor_ids instanceof Array) {
+			for(var i in actor_ids){
+				actor = actor_ids[i];
+				if (actor){
+					if(!(actor instanceof socialCheesecake.Actor)){
+						actor = this.getActor(actor);
+					}
+					actor.unselect();
+				}
+			}
+		} else {
+			actor = actor_ids;
+			if(!(actor_ids instanceof socialCheesecake.Actor)){
+				actor = this.getActor(actor_ids);
+			}
+			actor.unselect();
+		}
+	}
+	
+	socialCheesecake.Grid.prototype.unselectAll = function () {
+		this.unselect(this.visibleActors);
 	}
 	
 	socialCheesecake.Grid.prototype.focus = function (actor_ids) {
+		var actor;
+		
 		if (actor_ids instanceof Array) {
 			for(var i in actor_ids){
-				var actor = actor_ids[i];
-				if(actor instanceof socialCheesecake.Actor){
+				actor = actor_ids[i];
+				if (actor){
+					if(!(actor instanceof socialCheesecake.Actor)){
+						actor = this.getActor(actor);
+					}
 					actor.focus();
-				}else{
-					this.getActor(actor).focus();
-				}				
+				}
 			}
 		} else {
-			if(actor_ids instanceof socialCheesecake.Actor){
-				actor_ids.focus();
-			}else{
-				this.getActor(actor_ids).focus();
-			}		
+			actor = actor_ids;
+			if(!(actor_ids instanceof socialCheesecake.Actor)){
+				actor = this.getActor(actor_ids);
+			}
+			actor.focus();
 		}
 	}
 	
 	socialCheesecake.Grid.prototype.focusAll = function () {
-		this.focus(this.actors);
+		this.focus(this.visibleActors);
 	}
 	
 	socialCheesecake.Grid.prototype.hide = function (actor_ids, ignoreSelected) {
 		var actor;
+		var visibleActors = this.visibleActors;
+		var visibleActorIndex = -1;
+		
 		if (actor_ids instanceof Array) {
 			for(var i in actor_ids){
 				actor = actor_ids[i];
-				if (!(actor instanceof socialCheesecake.Actor)){
-					actor = this.getActor(actor);
+				if (actor){
+					if (!(actor instanceof socialCheesecake.Actor)){
+						actor = this.getActor(actor);
+					}
+					if((!actor.isSelected())||(ignoreSelected)){
+						actor.hide();
+						visibleActors[visibleActors.indexOf(actor)] = false;
+					}
 				}
-				if((!actor.isSelected())||(ignoreSelected)) actor.hide();
-			}
+			}			
 		} else {
 			if(actor_ids instanceof socialCheesecake.Actor){
 				actor = actor_ids;
@@ -114,29 +179,47 @@ var socialCheesecake = socialCheesecake || {};
 				actor = this.getActor(actor_ids);
 			}
 			actor.hide();
+			visibleActors[visibleActors.indexOf(actor)] = false;
+		}
+		visibleActorIndex = visibleActors.indexOf(false);
+		while(visibleActorIndex >= 0){
+			visibleActors.splice(visibleActorIndex,1);
+			visibleActorIndex = visibleActors.indexOf(false);
 		}
 	}
 	
 	socialCheesecake.Grid.prototype.hideAll = function () {
-		this.hide(this.actors);		
+		this.hide(this.visibleActors);		
 	}
 	
 	socialCheesecake.Grid.prototype.show = function (actor_ids) {
+		var actor;
+		var visibleActors = this.visibleActors;
+		var maxActors = Math.min(actor_ids.length, socialCheesecake.Cheesecake.getMaxVisibleActors());
+		
 		if (actor_ids instanceof Array) {
-			for(var i in actor_ids){
-				var actor = actor_ids[i];
-				if(actor instanceof socialCheesecake.Actor){
-					actor.show();
-				}else{
-					this.getActor(actor).show();
-				}				
+			for(var i = 0; visibleActors.length < maxActors ; i++){
+				actor = actor_ids[i];
+					if (actor){
+					if (!(actor instanceof socialCheesecake.Actor)){
+						actor = this.getActor(actor);
+					}
+					if((!actor.isSelected())||(ignoreSelected)){
+						actor.show();
+						if(visibleActors.indexOf(actor) == -1) visibleActors.push(actor);
+					}
+				}
 			}
-		} else {
+		} else if(visibleActors.length < maxActors){
 			if(actor_ids instanceof socialCheesecake.Actor){
-				actor_ids.show();
+				actor = actor_ids;
 			}else{
-				this.getActor(actor_ids).show();
-			}		
+				actor = this.getActor(actor_ids);
+			}	
+			if((!actor.isSelected())||(ignoreSelected)){
+				actor.show();
+				if(visibleActors.indexOf(actor) == -1) visibleActors.push(actor);
+			}
 		}
 	}
 	
@@ -145,37 +228,48 @@ var socialCheesecake = socialCheesecake || {};
 	}
 	
 	socialCheesecake.Grid.prototype.unfocus = function (actor_ids) {
+		var actor;
+		
 		if (actor_ids instanceof Array) {
 			for(var i in actor_ids){
-				var actor = actor_ids[i];
-				if(actor instanceof socialCheesecake.Actor){
+				actor = actor_ids[i];
+					if (actor){
+					if(!(actor instanceof socialCheesecake.Actor)){
+						actor = this.getActor(actor);
+					}
 					actor.unfocus();
-				}else{
-					this.getActor(actor).unfocus();
 				}				
 			}
 		} else {
-			if(actor_ids instanceof socialCheesecake.Actor){
-				actor_ids.unfocus();
-			}else{
-				this.getActor(actor_ids).unfocus();
-			}		
+			actor = actor_ids;
+			if(!(actor_ids instanceof socialCheesecake.Actor)){
+				actor = this.getActor(actor_ids);
+			}
+			actor.unfocus();
 		}
 	}
 	
 	socialCheesecake.Grid.prototype.unfocusAll = function () {
-		this.unfocus(this.actors);
+		this.unfocus(this.visibleActors);
 	}
 	
 	socialCheesecake.Grid.prototype.fadeOut = function (actor_ids, time, modifyDisplay, ignoreSelected) {
 		var actor;
+		var visibleActors = this.visibleActors;
+		var visibleActorIndex = -1;
+		
 		if (actor_ids instanceof Array) {
 			for(var i in actor_ids){
 				actor = actor_ids[i];
-				if (!(actor instanceof socialCheesecake.Actor)){
-					actor = this.getActor(actor);
-				}	
-				if((!actor.isSelected())||(ignoreSelected)) actor.fadeOut(time, modifyDisplay);	
+				if (actor){
+					if (!(actor instanceof socialCheesecake.Actor)){
+						actor = this.getActor(actor);
+					}	
+					if((!actor.isSelected())||(ignoreSelected)){
+						actor.fadeOut(time, modifyDisplay);
+						visibleActors[visibleActors.indexOf(actor)] = false;
+					}
+				}
 			}
 		} else {
 			if(actor_ids instanceof socialCheesecake.Actor){
@@ -183,31 +277,49 @@ var socialCheesecake = socialCheesecake || {};
 			}else{
 				actor = this.getActor(actor_ids);
 			}
-			if((!actor.isSelected())||(ignoreSelected)) actor.fadeOut(time, modifyDisplay);			
+			if((!actor.isSelected())||(ignoreSelected)){
+				actor.fadeOut(time, modifyDisplay);
+				visibleActors[visibleActors.indexOf(actor)] = false;
+			}
+		}
+		visibleActorIndex = visibleActors.indexOf(false);
+		while(visibleActorIndex >= 0){
+			visibleActors.splice(visibleActorIndex,1);
+			visibleActorIndex = visibleActors.indexOf(false);
 		}
 	}
 	
 	socialCheesecake.Grid.prototype.fadeOutAll = function (time, modifyDisplay) {
-		this.fadeOut(this.actors, time, modifyDisplay);
+		this.fadeOut(this.visibleActors, time, modifyDisplay);
 	}
 	
 	socialCheesecake.Grid.prototype.fadeIn = function (actor_ids, time, modifyDisplay, ignoreSelected) {
 		var actor;
+		var visibleActors = this.visibleActors;
+		var maxActors = Math.min(actor_ids.length, socialCheesecake.Cheesecake.getMaxVisibleActors());
 		if (actor_ids instanceof Array) {
-			for(var i in actor_ids){
+			for(var i = 0; visibleActors.length < maxActors ; i++){
 				actor = actor_ids[i];
-				if (!(actor instanceof socialCheesecake.Actor)){
-					actor = this.getActor(actor);
+				if (actor){
+					if (!(actor instanceof socialCheesecake.Actor)){
+						actor = this.getActor(actor);
+					}
+					if((!actor.isSelected())||(ignoreSelected)){
+						actor.fadeIn(time, modifyDisplay);
+						if(visibleActors.indexOf(actor) == -1) visibleActors.push(actor);
+					}	
 				}
-				if((!actor.isSelected())||(ignoreSelected)) actor.fadeIn(time, modifyDisplay);		
 			}
-		} else {
+		} else if(visibleActors.length < maxActors){
 			if(actor_ids instanceof socialCheesecake.Actor){
 				actor = actor_ids;
 			}else{
 				actor = this.getActor(actor_ids);
 			}	
-			if((!actor.isSelected())||(ignoreSelected)) actor.fadeIn(time, modifyDisplay);
+			if((!actor.isSelected())||(ignoreSelected)){
+				actor.fadeIn(time, modifyDisplay);
+				if(visibleActors.indexOf(actor) == -1) visibleActors.push(actor);
+			}
 		}
 	}
 	

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

@@ -8,12 +8,13 @@ var socialCheesecake = socialCheesecake || {};
 			delta : Math.PI /2 ,
 			phi : 0,
 			label : "",
-			color : socialCheesecake.Cheesecake.getSectorFillColor(),
-			textAndStrokeColor : socialCheesecake.Cheesecake.getSectorTextAndStrokeColor(),
-			mouseover : { color : socialCheesecake.Cheesecake.getSectorHoverColor() },
-			mouseout : { color : socialCheesecake.Cheesecake.getSectorFillColor() },
-			mouseup : { color : socialCheesecake.Cheesecake.getSectorFillColor() },
-			mousedown : { color : socialCheesecake.Cheesecake.getSectorFocusColor() },
+			color : socialCheesecake.colors.normalSector.background,
+			fontColor : socialCheesecake.colors.normalSector.font,
+			borderColor : socialCheesecake.colors.normalSector.border,
+			mouseover : { color : socialCheesecake.colors.normalSector.hover },
+			mouseout : { color : socialCheesecake.colors.normalSector.background },
+			mouseup : { color : socialCheesecake.colors.normalSector.background },
+			mousedown : { color : socialCheesecake.colors.normalSector.highlight },
 			auxiliar : false
 		}
 		for(var property in defaultSettings) {
@@ -37,7 +38,8 @@ var socialCheesecake = socialCheesecake || {};
 		this.delta = settings.delta;
 		this.label = settings.label;
 		this.color = settings.color;
-		this.textAndStrokeColor = settings.textAndStrokeColor;
+		this.fontColor = settings.fontColor;
+		this.borderColor = settings.borderColor;
 		this.mouseover = settings.mouseover;
 		this.mouseup = settings.mouseup;
 		this.mouseout = settings.mouseout;
@@ -65,27 +67,21 @@ var socialCheesecake = socialCheesecake || {};
 					rIn : rInSubsector,
 					rOut : rOutSubsector,
 					actors : settings.subsectors[i].actors,
-					mouseover : { color : socialCheesecake.Cheesecake.getSectorHoverColor(),
+					color : socialCheesecake.colors.normalSector.background,
+					borderColor : socialCheesecake.colors.normalSector.border,
+					fontColor : socialCheesecake.colors.normalSector.font,
+					mouseover : { 
+						color : socialCheesecake.colors.normalSector.hover,
 						callback : function(subsector) {
-							/* FIX FOR EXECUTING MOUSEOUT BEFORE MOUSEOVER */					
-							for(var i in subsector.parent.subsectors){
-								subsector.parent.subsectors[i].getRegion().removeEventListener("mouseout");
-								if(subsector.parent.subsectors[i]!= subsector){
-								 subsector.parent.subsectors[i].changeColor(subsector.parent.subsectors[i].mouseout.color);
-								}
-							}
-							subsector.getRegion().addEventListener("mouseout", function() {
-								subsector.eventHandler('mouseout');
-							});
-							/* END of FIX */							
 							document.body.style.cursor = "pointer";
 							subsector.getCheesecake().grid.hideAll();
 							subsector.getCheesecake().grid.fadeIn(subsector.actors, 300, true);
 							subsector.getCheesecake().setHighlightedSector(subsector);
+							subsector.getCheesecake().stage.mainLayer.draw();
 						}
 					},
 					mouseout :{
-						color : socialCheesecake.Cheesecake.getSectorFillColor(),
+						color : socialCheesecake.colors.normalSector.background,
 						callback : function(subsector) {
 							document.body.style.cursor = "default";
 							subsector.getCheesecake().grid.fadeIn(subsector.parent.actors, 300, true);
@@ -93,11 +89,13 @@ var socialCheesecake = socialCheesecake || {};
 						}
 					},
 					mousedown : {
+						color : socialCheesecake.colors.normalSector.highlight,
 						callback : function(subsector) {
 							var selectedActors = subsector.getCheesecake().grid.getSelectedActors();
-							subsector.changeMembership(selectedActors);
+							if(selectedActors.length > 0) subsector.changeMembership(selectedActors);
 						}
-					}
+					},
+					mouseup : {color : socialCheesecake.colors.normalSector.background}
 				});
 				rInSubsector = rOutSubsector;
 				this.subsectors.push(subsector);
@@ -111,7 +109,8 @@ var socialCheesecake = socialCheesecake || {};
 			rIn : this.rIn,
 			rOut : this.rOut,
 			color : this.color,
-			textAndStrokeColor : this.textAndStrokeColor,
+			fontColor : this.fontColor,
+			borderColor : this.borderColor,
 			label : this.label,
 			mouseover : this.mouseover,
 			mouseout : this.mouseout,
@@ -132,7 +131,8 @@ var socialCheesecake = socialCheesecake || {};
 		var rIn = this.rIn;
 		var rOut = this.rOut;
 		var color = this.color;
-		var textAndStrokeColor = this.textAndStrokeColor;
+		var fontColor = this.fontColor;
+		var borderColor = this.borderColor;
 		var label = this.label;
 		var actors = this.actors;
 		
@@ -146,18 +146,21 @@ var socialCheesecake = socialCheesecake || {};
 		context.fillStyle = color;
 		context.fill();
 		context.lineWidth = 2;
-		context.strokeStyle = textAndStrokeColor;
+		context.strokeStyle = borderColor;
 		context.stroke();
 		if((this.auxiliar)&&(label=="+")){
 			socialCheesecake.text.addPlusCharacter(context, x, y, 0.5*(rOut-rIn) + rIn, 
-			phi, delta, textAndStrokeColor);
+				phi, delta, fontColor);
+		}else if((this.parent.auxiliar)&&(this.parent.label=="+")){
+			socialCheesecake.text.writeCurvedText(label, context, x, y, 0.7*(rOut-rIn) + rIn, 
+				phi, delta, fontColor, "newStyle");
 		}else{
 			socialCheesecake.text.writeCurvedText(label, context, x, y, 0.7*(rOut-rIn) + rIn, 
-			phi, delta, textAndStrokeColor);
+				phi, delta, fontColor);
 		}				
 		if(!this.auxiliar)
 			socialCheesecake.text.writeCurvedText("(" + actors.length + ")", context, x, y, 
-				0.55*(rOut-rIn) + rIn, phi, delta, textAndStrokeColor);
+				0.55*(rOut-rIn) + rIn, phi, delta, fontColor);
 	}
 	
 	socialCheesecake.Sector.prototype.getRegion = function() {
@@ -167,16 +170,16 @@ var socialCheesecake = socialCheesecake || {};
 				var context = this.getContext();
 				sector._draw(context);
 			});
-			sector._region.addEventListener('mouseover', function() {
+			sector._region.on('mouseover', function() {
 				sector.eventHandler('mouseover');
 			});
-			sector._region.addEventListener('mouseout', function() {
+			sector._region.on('mouseout', function() {
 				sector.eventHandler('mouseout');
 			});
-			sector._region.addEventListener('mousedown', function() {
+			sector._region.on('mousedown', function() {
 				sector.eventHandler('mousedown');
 			});
-			sector._region.addEventListener('mouseup', function() {
+			sector._region.on('mouseup', function() {
 				sector.eventHandler('mouseup');
 			});
 		}
@@ -203,6 +206,7 @@ var socialCheesecake = socialCheesecake || {};
 	
 	socialCheesecake.Sector.prototype.splitUp = function() {
 		var cheesecake = this.getCheesecake();
+		var mainLayer = cheesecake.stage.mainLayer;
 		var phi = this.phi;
 		var delta = this.delta;
 		var rOut = this.rOut;
@@ -223,9 +227,11 @@ var socialCheesecake = socialCheesecake || {};
 			label : "+",
 			parent : this,
 			auxiliar : true,
-			color : socialCheesecake.Cheesecake.getExtraSectorFillColor(),
+			color : socialCheesecake.colors.extraSector.background,
+			borderColor : socialCheesecake.colors.extraSector.border,
+			fontColor : socialCheesecake.colors.extraSector.font,
 			mouseover : {
-				color : socialCheesecake.Cheesecake.getExtraSectorHoverColor(),
+				color : socialCheesecake.colors.extraSector.hover,
 				callback : function (sector){
 					sector.resizeWidth({
 						width : extraWidth*1.5,
@@ -235,7 +241,7 @@ var socialCheesecake = socialCheesecake || {};
 				}
 			},
 			mouseout : {
-				color : socialCheesecake.Cheesecake.getExtraSectorFillColor(),
+				color : socialCheesecake.colors.extraSector.background,
 				callback : function(sector){
 					sector.resizeWidth({
 						width : extraWidth,
@@ -244,7 +250,9 @@ var socialCheesecake = socialCheesecake || {};
 						priority : true 
 					})
 				}
-			}
+			},
+			mousedown : { color: socialCheesecake.colors.extraSector.highlight},
+			mouseup : { color: socialCheesecake.colors.extraSector.background }
 		}		
 		//Add sector's subsectors
 		for(var i in subsectors){			
@@ -253,10 +261,10 @@ var socialCheesecake = socialCheesecake || {};
 			subsectors[i].rOut = rIn + sectorWidth;
 			subsectors[i].phi = phi;
 			subsectors[i].delta = delta;
-			cheesecake.stage.add(subsectors[i].getRegion());
+			mainLayer.add(subsectors[i].getRegion());
 			rIn += sectorWidth;
 		}
-		//Add extra subsectors 
+		//Add extra subsectors
 		rIn = 0;
 		for(var i = 0; i< parts- subsectors.length; i++){			
 			if(i == 0){
@@ -270,9 +278,11 @@ var socialCheesecake = socialCheesecake || {};
 					label : "+",
 					parent : this,
 					auxiliar : true,
-					color : socialCheesecake.Cheesecake.getExtraSectorFillColor(),
+					color : socialCheesecake.colors.extraSector.background,
+					borderColor : socialCheesecake.colors.extraSector.border,
+					fontColor : socialCheesecake.colors.extraSector.font,
 					mouseover : {
-						color : socialCheesecake.Cheesecake.getExtraSectorHoverColor(),
+						color : socialCheesecake.colors.extraSector.hover,
 						callback : function (sector){
 							sector.resizeWidth({
 								width : extraWidth*1.5,
@@ -282,7 +292,7 @@ var socialCheesecake = socialCheesecake || {};
 						}
 					},
 					mouseout : {
-						color : socialCheesecake.Cheesecake.getExtraSectorFillColor(),
+						color : socialCheesecake.colors.extraSector.background,
 						callback : function(sector){
 							sector.resizeWidth({
 								width : extraWidth,
@@ -291,7 +301,9 @@ var socialCheesecake = socialCheesecake || {};
 								priority : true 
 							})
 						}
-					}
+					},
+				mousedown : { color: socialCheesecake.colors.extraSector.highlight},
+				mouseup : { color: socialCheesecake.colors.extraSector.background }
 				}
 				var extraSector = new socialCheesecake.Subsector(extraSettingsFirst);  
 			}else{
@@ -299,36 +311,36 @@ var socialCheesecake = socialCheesecake || {};
 				extraSettings["rOut"]= rIn + extraWidth;
 				var extraSector = new socialCheesecake.Subsector(extraSettings); 
 			}
-			cheesecake.stage.add(extraSector.getRegion());
+			mainLayer.add(extraSector.getRegion());
 			this.extraSubsectors.push(extraSector);
 			rIn += extraWidth + sectorWidth;
 		}
+		mainLayer.draw();
 	}
 	
 	socialCheesecake.Sector.prototype.putTogether = function() {
 		var cheesecake = this.getCheesecake();
+		var mainLayer = cheesecake.stage.mainLayer;
 		var sector = (this.simulate != null) ? cheesecake.sectors[this.simulate] : this;
 		var subsectors = sector.subsectors;
 		var extraSubsectors = this.extraSubsectors;
 		//Clear subsectors from stage
 		for(var i = extraSubsectors.length ; i>0 ; i--){
-			cheesecake.stage.remove((extraSubsectors.pop()).getRegion());
+			mainLayer.remove((extraSubsectors.pop()).getRegion());
 		}
 		for(var i in subsectors) {
-			cheesecake.stage.remove(subsectors[i].getRegion());
+			mainLayer.remove(subsectors[i].getRegion());
 		}
 	}
 	
 	socialCheesecake.Sector.prototype.changeColor = function(color) {
 		var sector = this;
-		if (sector.getRegion().layer){
-			var context = sector.getRegion().layer.getContext();
-			var stage = sector.getCheesecake().stage;
-			sector.color = color;
-			context.restore();
-			context.save();
-			stage.draw();
-		}
+		var stage = sector.getCheesecake().stage;
+		var context = stage.mainLayer.getContext();
+		sector.color = color;
+		context.restore();
+		context.save();
+		stage.draw();
 	}
 	
 	/**
@@ -338,26 +350,27 @@ var socialCheesecake = socialCheesecake || {};
 		*	anchor - 	"beginning" , "b", "B"
 		*						"middle", "m", "M"
 		*						"end", "e", "E"
+		* priority - true to terminate other resizeDelta methods running
+		* callback - function to execute at the end of the animation
 	 */
 	socialCheesecake.Sector.prototype.resizeDelta = function(options) {
 		if(!options)
 			throw "No arguments passed to the function";
 		var sector = this;
-		var context = sector.getRegion().layer.getContext();
 		var stage = sector.getCheesecake().stage;
+		var context = stage.mainLayer.getContext();
 		var currentDelta = sector.delta;
 		var currentPhi = sector.phi;
 		var step = 0.05;
 		var goalDelta = Math.PI / 2;
 		var anchor = 1;
+		var goOn = true;
+		var grow = 0;
 		
 		if(options.step) step = options.step;
 		if(options.delta) {
 			goalDelta = options.delta;
 		}
-		console.log("resizing delta of sector "+ sector.label);
-		console.log("current delta "+ currentDelta);
-		console.log("delta to achieve "+ goalDelta);
 		
 		if(options.anchor) {
 			if((options.anchor.toLowerCase() == "b") || (options.anchor == "beginning"))
@@ -372,10 +385,19 @@ var socialCheesecake = socialCheesecake || {};
 			if(currentDelta - goalDelta < step) step = currentDelta - goalDelta;
 			currentDelta -= step;
 			currentPhi += anchor * step;
+			grow = -1;
 		} else if(currentDelta < goalDelta) {
 			if(goalDelta - currentDelta < step) step = goalDelta - currentDelta;
 			currentDelta += step;
 			currentPhi -= anchor * step;
+			grow = 1;
+		}
+		if(options.priority) sector.growDelta =grow;
+		if((sector.growDelta !=null)&&(grow != sector.growDelta)){
+			goOn = false;
+		}else{
+			goOn = true;
+			sector.growDelta = grow;
 		}
 		sector.delta = currentDelta;
 		sector.phi = currentPhi;
@@ -385,12 +407,15 @@ var socialCheesecake = socialCheesecake || {};
 		context.save();
 		stage.draw();
 		//Repeat if necessary
-		if(currentDelta != goalDelta) {
+		if(goOn && (Math.round(currentDelta*1000) != Math.round(goalDelta*1000))) {
 			requestAnimFrame(function() {
 				sector.resizeDelta(options);
 			});
-		} else if(options.callback) {
-			options.callback();
+		}else{
+			sector.growDelta = undefined;
+			if(options.callback) {
+				options.callback();
+			}
 		}
 	}
 
@@ -402,11 +427,12 @@ var socialCheesecake = socialCheesecake || {};
 		*						"middle", "m", "M"
 		*						"rOut", "rout", "out", "O", "o"
 		* priority - true to terminate other resizeWidth methods running
+		* callback - function to execute at the end of the animation
 	 */
 	socialCheesecake.Sector.prototype.resizeWidth = function(options) {
 		var sector = this;
-		var context = sector.getRegion().layer.getContext();
 		var stage = sector.getCheesecake().stage;
+		var context = stage.mainLayer.getContext();
 		var currentRIn = this.rIn;
 		var currentROut = this.rOut;
 		var currentWidth = (currentROut - currentRIn);
@@ -478,8 +504,8 @@ var socialCheesecake = socialCheesecake || {};
 		
 	socialCheesecake.Sector.prototype.focus = function() {
 		var sector = this;
-		var context = sector.getRegion().layer.getContext();
 		var stage = sector.getCheesecake().stage;
+		var context = stage.mainLayer.getContext();
 		sector.rOut = sector.originalAttr.rOut * 1.05;
 		context.restore();
 		context.save();
@@ -488,14 +514,41 @@ var socialCheesecake = socialCheesecake || {};
 	
 	socialCheesecake.Sector.prototype.unfocus = function() {
 		var sector = this;
-		var context = sector.getRegion().layer.getContext();
 		var stage = sector.getCheesecake().stage;
+		var context = stage.mainLayer.getContext();
 		sector.rOut = sector.originalAttr.rOut;
 		context.restore();
 		context.save();
 		stage.draw();
 	}
 	
+	/**
+	 * open - true: expand sector
+	 * 			- false: shrink sector
+	 * resizeDeltaCallback - callback to execute at the end of the animation
+	 */	
+	socialCheesecake.Sector.prototype.fan = function(open, resizeDeltaCallback){
+		var sector = this;
+		var minDelta = Math.PI/5;
+
+		if(open && (sector.delta >= minDelta)) return; 
+		if(open){
+			sector.getRegion().moveToTop();
+			sector.resizeDelta({
+				anchor: "m",
+				delta: minDelta,
+				callback : resizeDeltaCallback
+			});
+		}else{
+			sector.resizeDelta({
+				anchor: "m",
+				delta: sector.originalAttr.delta,
+				priority : true,
+				callback : resizeDeltaCallback
+			});
+		}
+	}
+	
 	socialCheesecake.Sector.prototype.rotateTo = function(options) {
 		// update stage
 		var sector = this;
@@ -504,11 +557,9 @@ var socialCheesecake = socialCheesecake || {};
 		var step = 0.05;
 		var anchor = 0;
 		var stage = sector.getCheesecake().stage;
-		var context = sector.getRegion().layer.getContext();
+		var context = stage.mainLayer.getContext();
 		if(!options) throw "No arguments passed to the function";
 		if(options.step) step = options.step;
-		/*if(options.context == null) throw "context must be defined";
-		var context = options.context;*/
 		if(options.destination == null) throw "destination must be defined";
 		if(options.anchor){
 			if((options.anchor.toLowerCase() == "b") || (options.anchor == "beginning"))
@@ -640,7 +691,8 @@ var socialCheesecake = socialCheesecake || {};
 		this.actors = [];
 		this.auxiliar = (settings.auxiliar) ? settings.auxiliar : false;
 		if(settings.color) this.color = settings.color;
-		if(settings.textAndStrokeColor) this.textAndStrokeColor = settings.textAndStrokeColor;
+		if(settings.fontColor) this.fontColor = settings.fontColor;
+		if(settings.borderColor) this.borderColor = settings.borderColor;
 		if(settings.mousedown != null) this.mousedown = settings.mousedown;
 		if(settings.mouseup != null) this.mouseup = settings.mouseup; 
 		if(settings.mouseover != null) this.mouseover = settings.mouseover; 
@@ -651,7 +703,8 @@ var socialCheesecake = socialCheesecake || {};
 			for(var actor in settings.actors){
 				var actor_info = {
 					id : settings.actors[actor][0],
-					name : settings.actors[actor][1]
+					name : settings.actors[actor][1],
+					extraInfo : settings.actors[actor][2]
 				}
 				this.addActor(actor_info ,this);
 			}
@@ -669,7 +722,8 @@ var socialCheesecake = socialCheesecake || {};
 		delta : this.delta,
 		auxiliar : this.auxiliar,
 		color : this.color,
-		textAndStrokeColor : this.textAndStrokeColor,
+		fontColor : this.fontColor,
+		borderColor : this.borderColor,
 		
 		mouseover : this.mouseover,
 		mouseout : this.mouseout,
@@ -718,7 +772,7 @@ var socialCheesecake = socialCheesecake || {};
 				actorInfo = { id : actors[i].id};
 				this.addActor(actorInfo, this);
 			}
-			this.getCheesecake().updateActorMembership(actors[i].id);
+			this.getCheesecake().updateActorMembership(actors[i]);
 			isMember = false;
 		}
 		this.getCheesecake().calculatePortions();