package 
{
  import mx.containers.Canvas;
  import mx.containers.HBox;
  import mx.containers.ViewStack;
  import mx.controls.Button;
  import mx.collections.ArrayCollection; 
  import mx.skins.halo.TabSkin;
  import flash.events.MouseEvent;

  public class professional_flex_code_13_MultiRowTabs extends Canvas {
   
   // declare class properties
    public var myViewStack:ViewStack;
    public var tabsPerRow:Number = 4;
    public var rowHeight:Number = 22;			
    public var tabRows:Array = new Array();
    private var _dp:ArrayCollection;
    private var buttonArray:ArrayCollection;
    
    // default constructor
    public function professional_flex_code_13_MultiRowTabs(){
		          	
    }
    
    // getters and setters  
    public function get dp():ArrayCollection{
      return _dp;
    }              
    public function set dp(a:ArrayCollection):void{
      _dp=a;
			this.removeAllChildren();
	    buttonArray = new ArrayCollection();
      var start:Number = 0;
      var end:Number = tabsPerRow;
      var currentY:Number = 0;
      // add rows
      for(var i:Number=0; i<this.dp.length/tabsPerRow; i++){
        // add a new row of tabs by adding a HBox
        tabRows[i] = new HBox();
        // set HBox properties and style
        tabRows[i].percentWidth=100;
        tabRows[i].y = currentY;
        tabRows[i].setStyle("paddingTop",0);
        tabRows[i].setStyle("paddingBottom",0);
        tabRows[i].setStyle("horizontalGap",0);
        tabRows[i].setStyle("verticalGap",0);
        currentY = currentY + rowHeight;
        // add the HBox as a child
        this.addChild(tabRows[i]);  
        // add buttons
        for(var j:Number=start; j<end; j++){
          // add button and set properties and style
          var button:Button = new Button();
          button.label = this.dp[j].label;
          button.data = i + "|" + j;
          button.setStyle("upSkin",TabSkin);
          button.setStyle("downSkin",TabSkin);
          button.setStyle("overSkin",TabSkin);
          button.setStyle("selectedUpSkin",TabSkin);
          button.setStyle("selectedOverSkin",TabSkin);
          button.setStyle("selectedDownSkin",TabSkin);
          button.setStyle("selectedDisabledSkin",TabSkin);
          button.percentWidth=100;
          button.height = rowHeight;
          // add eventListener for mouse clicks
          button.addEventListener(MouseEvent.CLICK, clickHandler);
          // add button to the HBox
          tabRows[i].addChild(button);
          // set button selected as false
          button.selected=false;
          // set as selected button if in the o position
          if(j==0)button.selected=true;
          buttonArray.addItem(button);
        }
        // calculate buttons per row      
        start = start + tabsPerRow;
        end = end + tabsPerRow;
        if(end > this.dp.length){
          end = this.dp.length;  
        }
 
        var myRowNumber:Number = 0;
        var newCurrentY:Number = 0;
        // position rows so that selected tab is in bottom row
        for(var k:Number=0; k<tabRows.length; k++){
          if(myRowNumber != k){
            tabRows[k].y = newCurrentY;
            newCurrentY = newCurrentY + rowHeight;
          }
        }
        tabRows[myRowNumber].y = newCurrentY;
      }   
    }
    
    private function clickHandler(event:MouseEvent):void{
      // create array to hold row and button info
      var splitArray:Array = event.target.data.split("|");
      var myRowNumber:Number = Number(splitArray[0]);
      var myButtonIndex:Number = Number(splitArray[1]);
      // set viewStack selectedIndex
      this.myViewStack.selectedIndex=myButtonIndex;
      // set all buttons selected property to false
      for(var i:Number=0; i<buttonArray.length; i++){
        this.buttonArray[i].selected = false;
      }
      // set clicked button to selected
      event.target.selected=true;
      var currentY:Number = 0;
      // position rows so that selected tab is in bottom row
      for(var j:Number=0; j<tabRows.length; j++){
        if(myRowNumber != j){
          this.tabRows[j].y = currentY;
          currentY = currentY + rowHeight;
        }
      }
      this.tabRows[myRowNumber].y = currentY;
    }
  }
}