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 @ax-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 @ax-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;
      }
    }
  }