davidpadua
12/3/2013 - 1:27 AM

Sellect desellect buttons example

Sellect desellect buttons example

/////////////////////////////////////////LEGENDA CONTROLS
/////////////////////////////////////////LEGENDA CONTROLS
/////////////////////////////////////////LEGENDA CONTROLS
//:::: current legenda button
var clickedButton;
var currentCircle;
var numberOfLegendaButtons = 4;
//empty array that will receive the dynamic symbols
var legendaButtonsList = [];
//names of the images/buttons
var legendaButtonsNames = ["A - Coluna de direção", "B - Braço/Ponteira direção (Rótulas)", "C - União homocinética (cardam)", "D - Caixa de direção"];

for (var i = 0; i < numberOfLegendaButtons; i++){

		//::::get the symbol
		var legendaButton = sym.getSymbol("legendaBtn_" + i);
		//::::set the name
    legendaButton.setVariable("elementSelected", "legenda_" + i);
    legendaButton.$("myName").text(legendaButtonsNames[i]);	
    //::::push each symbol into an empty array
		legendaButtonsList.push(legendaButton);

}

$.each(legendaButtonsList, function( count, symbolInTheArray ){
	var controlButton = $(symbolInTheArray.getSymbolElement());
	//var controlButtoName = symbolInTheArray.getVariable("myName");

	//::::MOUSEOVER
	controlButton.bind ("mouseover",function(){
			var controlButtonOver = sym.getSymbol(controlButton).$("myOver");
      TweenLite.to(controlButtonOver, 0.25, {css:{opacity:1}, ease:Linear.easeNone});
  });
  //::::MOUSEOUT
	controlButton.bind ("mouseout",function(){
			var controlButtonOut = sym.getSymbol(controlButton).$("myOver");
      TweenLite.to(controlButtonOut, 0.25, {css:{opacity:0}, ease:Linear.easeNone});
  });
  //::::CLICK
  controlButton.bind ("click",function(){

  var selectedCircle = symbolInTheArray.getVariable("elementSelected");
  var posIN = "270px";
	//:::: the state of the button
  if(clickedButton === null){
  //alert("NULL");
	clickedButton = controlButton;
	var controlButtonState = sym.getSymbol(clickedButton).$("myStateOn");
  TweenLite.to(controlButtonState, 0.25, {css:{opacity:1, width:"240px"}, ease:Linear.easeNone});

  currentCircle = sym.$(selectedCircle);
	TweenLite.to(currentCircle, 1, {css:{left:posIN}, ease:Expo.easeInOut});

  }else{
	//alert("esta CHEIO");
  var controlButtonState = sym.getSymbol(clickedButton).$("myStateOn");
  //controlButtonState.css("opacity", 0);
  //controlButtonState.css("width", "200px");
  TweenLite.to(controlButtonState, 0.25, {css:{opacity:0, width:"200px"}, overwrite:false, ease:Linear.easeNone});
  //TweenLite.to(controlButton, 0.5, {css:{left:"33px"}, ease:Expo.easeInOut});
  clickedButton = controlButton;
  TweenLite.to(sym.getSymbol(clickedButton).$("myStateOn"), 0.25, {css:{opacity:1, width:"240px"}, overwrite:false, ease:Linear.easeNone});
  //:::: hide current exercice
  TweenLite.to(currentCircle, 0.5, {css:{left:"1250px"}, ease:Expo.easeInOut});
  //:::: updates current exercice
  currentCircle = sym.$(selectedCircle);
	//:::: shows updated current exercice
  TweenLite.to(currentCircle, 1, {css:{left:posIN}, delay:0.3, ease:Expo.easeInOut});
  }

  });

});