<?xml version="1.0" encoding="utf-8"?>
  <!--
  
//////////////////////////////////////////////////////////////////////////


  //
  // Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors.
  // All Rights Reserved.
  // The following is Sample Code and is subject to all restrictions on such code
  // as contained in the End User License Agreement accompanying this product.
  // If you have received this file from a source other than Adobe,
  // then your use, modification, or distribution of it requires
  // the prior written permission of Adobe.
  //
  
//////////////////////////////////////////////////////////////////////////


  -->
  <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
      xmlns:productsView="*"
      layout="vertical" 
      currentState="browse"
      verticalScrollPolicy="off"
      horizontalScrollPolicy="off"
      styleName="catalogPanel">
      
      <mx:Metadata>
          [Event(name="purchase", type="lib_flex_store_samples_flexstore_ProductThumbEvent")]
          [Event(name="compare", type="lib_flex_store_samples_flexstore_ProductThumbEvent")]
          [Event(name="details", type="lib_flex_store_samples_flexstore_ProductThumbEvent")]
      </mx:Metadata>
      
      <mx:Script>
          <![CDATA[
          import flash.utils.Dictionary;
          
          import mx.collections.ArrayCollection;
          import mx.collections.IViewCursor;
          import mx.core.DragSource;
          import mx.core.IUIComponent;
          import mx.effects.Effect;
          import mx.effects.Fade;
          import mx.effects.Move;
          import mx.events.EffectEvent;
          import mx.events.DragEvent;
          import mx.managers.DragManager;
  
          //import samples.flexstore.Product;
          //import samples.flexstore.ProductFilter;
          //import samples.flexstore.ProductFilterEvent;
          //import samples.flexstore.ProductThumbEvent;
         
       
          private var accepted:Dictionary = new Dictionary();
          private var thumbnails:Array;
          private var filterCount:int;
          private var thumbnailState:String = 'browse'; //either 'browse' or 'compare'
          [Bindable]
          private var titleButtons:lib_flex_store_productsView_CatalogTitleButtons; //the buttons that also allow the panel to switch sides
          
          override protected function createChildren():void
          {
              super.createChildren();
              titleButtons = new lib_flex_store_productsView_CatalogTitleButtons();
              titleBar.addChild(titleButtons);
              
          }
  
          override protected function layoutChrome(unscaledWidth:Number, unscaledHeight:Number):void
          {        
              super.layoutChrome(unscaledWidth, unscaledHeight);
              //when adding to a UIComponent (not a Container) need explicit width/height
              titleButtons.width = unscaledWidth / 2; //make it big so as we add cart items we can stretch)
              titleButtons.height = titleButtons.measuredHeight;
              //this placement algorithm is pretty hacky, there are better ways that probably
              //involve copying more of the Panel layoutChrome method and supporting methods
              titleButtons.move(statusTextField.x - titleButtons.width, titleTextField.y);
          }
          
          
          [Bindable]
          public var cartCount:int;
          
          //-----------------------------
          // catalog
          //-----------------------------
          
          private var _catalog:ArrayCollection;
          
          [Bindable]
          public function set catalog(c:ArrayCollection):void
          {
              _catalog = c;
              createThumbnails();
          }
          
          public function get catalog():ArrayCollection
          {
              return _catalog;
          }
          
          //----------------------------------------------------------------------
          // methods
          //----------------------------------------------------------------------
         
          private function createThumbnails():void
          {
              var i:int; //variables are hoisted up in scope so declare here to avoid warning
              if (thumbnails != null)
              {
                  for (i=0; i < thumbnails.length; i++)
                  {
                      thumbContent.removeChild(thumbnails[i]);
                  }
              }
              
              var row:int = 0;
              var col:int = -1;
              var n:int = catalog.length;
              thumbnails = new Array(n);
              filterCount = n;
              
              for (i=0; i < n; i++)
              {
                  var thumb:lib_flex_store_productsView_ProductCatalogThumbnail = new lib_flex_store_productsView_ProductCatalogThumbnail();
                  thumbnails[i] = thumb;
                  thumbnails[i].showInAutomationHierarchy = true;
                  thumb.product = catalog.getItemAt(i) as lib_flex_store_samples_flexstore_Product;
                  accepted[thumb.product] = true;
                  thumbContent.addChild(thumb);
                  thumb.addEventListener(lib_flex_store_samples_flexstore_ProductThumbEvent.PURCHASE, productThumbEventHandler);
                  thumb.addEventListener(lib_flex_store_samples_flexstore_ProductThumbEvent.COMPARE, productThumbEventHandler);
                  thumb.addEventListener(lib_flex_store_samples_flexstore_ProductThumbEvent.DETAILS, productThumbEventHandler);
                  thumb.addEventListener(DragEvent.DRAG_START,thumbDragStartHandler);
              }
  
              layoutCatalog();
          }
          
          private function thumbDragStartHandler(event:MouseEvent):void
          {
              if (DragManager.isDragging == false)
              {
                  var thumb:lib_flex_store_productsView_ProductCatalogThumbnail = event.target as lib_flex_store_productsView_ProductCatalogThumbnail;
                  var ds:DragSource = new DragSource();
                  ds.addData(thumb.product, "product");
  
                  var di:lib_flex_store_productsView_ProductCatalogThumbnail = new lib_flex_store_productsView_ProductCatalogThumbnail();
                  di.product = thumb.product;
                  
                  //the offset logic is honestly not the most intuitive but
                  //it's necessary to get the dragProxy positioned correctly
                  DragManager.doDrag(thumbContent, ds, event, di, -thumb.x, 
                                                     -thumb.y + thumbContent.verticalScrollPosition, 
                                                     0.5, false);
              }    
          }
          
          public function filter(productFilter:lib_flex_store_samples_flexstore_ProductFilter, live:Boolean):void
          {
              currentState = "browse";
              thumbnailState = "browse";
              var count:int=0;
              var n:int = thumbnails.length;
              var fadeOut:Fade = new Fade();
              fadeOut.alphaFrom = 1;
              fadeOut.alphaTo = .1;
              var targets:Array = [];
              for (var i:int = 0; i < n; i++)
              {
                  var thumb:lib_flex_store_productsView_ProductCatalogThumbnail = thumbnails[i];
                  var product:lib_flex_store_samples_flexstore_Product = thumb.product;
                  if (productFilter.accept(product))
                  {
                      accepted[product] = true;
                      thumb.alpha = 1;    
                      count++;
                  }
                  else
                  {
                      accepted[product] = false;
                      if (live)
                      {
                          thumb.alpha = .1;
                      }
                      else if (thumb.alpha == 1) //only fade if we hadn't started
                      {
                          targets.push(thumb);
                      }
                  }
              }
              productFilter.count = count;
              filterCount = count;
  
              if (targets.length > 0)    
              {
                  fadeOut.targets = targets;
                  fadeOut.play();
                  fadeOut.addEventListener(EffectEvent.EFFECT_END,
                      function(event:EffectEvent):void
                      {
                          layoutCatalog();
                      });
              }
              else if (!live)
              {
                  layoutCatalog();
              }
          }
          
          private function layoutCatalog():Effect
          {
              var tileWidth:Number;
              var tileHeight:Number;
              var numCols:int;
  
              if (filterCount > 9 || currentState == "compare")
              {
                  numCols = 4;
                  tileWidth = lib_flex_store_productsView_ProductCatalogThumbnail.COL_WIDTH_4;
                  tileWidth = currentState == "compare"
                      ? lib_flex_store_productsView_ProductCatalogThumbnail.COMPARE_WIDTH
                      : lib_flex_store_productsView_ProductCatalogThumbnail.COL_WIDTH_4
                  tileHeight = currentState == "compare"
                      ? height - 4
                      : lib_flex_store_productsView_ProductCatalogThumbnail.COL_HEIGHT_4;
              }
              else if (filterCount > 4)
                          {
                  numCols = 3;
                  tileWidth = lib_flex_store_productsView_ProductCatalogThumbnail.COL_WIDTH_3;
                  tileHeight = lib_flex_store_productsView_ProductCatalogThumbnail.COL_HEIGHT_3;
              }
                          else if (filterCount <= 9)
                          {
                  numCols = 2;
                  tileWidth = lib_flex_store_productsView_ProductCatalogThumbnail.COL_WIDTH_2;
                  tileHeight = lib_flex_store_productsView_ProductCatalogThumbnail.COL_HEIGHT_2;
              }
                          else
                          {
              }
              
              var row:int = 0;
              var col:int = -1;
  
                          var move:Move = null;
  
              var n:int = catalog.length;
                          for (var i:int = 0 ; i < n ; i++)
                          {
                  var product:lib_flex_store_samples_flexstore_Product = catalog.getItemAt(i) as lib_flex_store_samples_flexstore_Product;
                  var thumb:lib_flex_store_productsView_ProductCatalogThumbnail = thumbnails[i];
                  if (accepted[product])
                  {
                      thumb.currentState = "" + numCols + "cols";
                      col++;
                      if (col > numCols - 1)
                                          {
                          row++;
                          col = 0;
                      }
  
                      var xTo:Number = col * (tileWidth + lib_flex_store_productsView_ProductCatalogThumbnail.HORIZONTAL_GAP);
                      var yTo:Number = row * (tileHeight + lib_flex_store_productsView_ProductCatalogThumbnail.VERTICAL_GAP);
  
                      // If the thumbnail is already visible
                                          // animate it to its new position.
                      if (thumb.visible)
                                          {
                          // Animate only if the position is different
                                                  // from its current position.
                          if (thumb.x != xTo || thumb.y != yTo)
                                                  {
                              move = new Move(thumb);
                              move.xTo = xTo;
                              move.yTo = yTo;
                              move.play();
                          }
                      }
  
                      // If the thumbnail was not previously visible, sets its
                                          // x and y coordinates. We'll make it reappear after all
                      // the visible thumbnails have reached their new position.
                                          else
                                          {
                          thumb.x = xTo;
                          thumb.y = yTo;
                          thumb.includeInLayout = true;
                      }
                  }
                                  else
                                  {
                      thumb.visible = false;
                      thumb.includeInLayout = false;
                  }
              }
  
              if (!move)
                          {
                  // No visible thumbnails were animated to a new position;
                                  // fade in newly selected thumbnails right away.
                  fadeInThumbnails();
              }
                          else
                          {
                              //since movement is happening get the scrollbar back to the top
                                  thumbContent.verticalScrollPosition = 0;
                  // Fade in newly selected thumbnails after the last
                                  // visible thumbnail has moved to its new position.
                  move.addEventListener(EffectEvent.EFFECT_END,
                                          function(event:EffectEvent):void
                                          {
                                                  fadeInThumbnails();
                                          });
              }
              //return the last move to watch
              return move;
          }
          
          //return the last effect so we could add effectEnd handler if desired
          private function fadeInThumbnails():void
                  {
                          var n:int = thumbnails.length;
                          var effect:Fade = new Fade();
                          effect.alphaTo = 1;
                          var targets:Array = [];
                          for (var i:int = 0; i < n ; i++)
                          {
                              var thumb:lib_flex_store_productsView_ProductCatalogThumbnail = thumbnails[i];
                              if (accepted[thumb.product] && !thumb.visible)
                                  {
                      thumb.alpha = 0;
                      thumb.visible = true;
                      targets.push(thumb);
                  }
              }
              if (targets.length > 0)
              {
                  effect.targets = targets;
                  effect.play();
              }
          }
          
          private function showDetails(product:lib_flex_store_samples_flexstore_Product):void
          {
              if (currentState == "details")
                          {
                  details.product = product;
                  return;
              }
  
              var row:int = -1;
  
              //should be computed using border metrics instead of hard-coding the 20, but...
                          var xTo:Number = thumbContent.width - lib_flex_store_productsView_ProductCatalogThumbnail.COL_WIDTH_4 - 20;
              var yTo:Number;
  
              var move:Move;
              var first:Boolean = true;
              var selectedThumb:lib_flex_store_productsView_ProductCatalogThumbnail;
  
              var n:int = thumbnails.length;
                          for (var i:int = 0; i < n; i++)
                          {
                              var thumb:lib_flex_store_productsView_ProductCatalogThumbnail = thumbnails[i];
                  if (thumb.visible)
                                  {
                      row++;
                      yTo = row * (lib_flex_store_productsView_ProductCatalogThumbnail.COL_HEIGHT_4 + lib_flex_store_productsView_ProductCatalogThumbnail.VERTICAL_GAP);
  
                      thumb.currentState = "4cols";
  
                      if (thumb.x != xTo || thumb.y != yTo)
                                          {
                          move = new Move(thumb);
                          if (first)
                                                  {
                              move.addEventListener(EffectEvent.EFFECT_END,
                                                                  function(event:EffectEvent):void
                                                                  {
                                                                          details.product = product;
                                      currentState = "details";
                                                                  });
  
                              first = false;
                          }
                          move.xTo = xTo;
                          move.yTo = yTo;
                          move.play();
                      }
                      
                      if (thumb.product == product)
                      {
                          selectedThumb = thumb;
                      }
                  }
              }
              if (selectedThumb != null)
              {
                  //make sure that the selected thumb is visible in the list on the right
                  move.addEventListener(EffectEvent.EFFECT_END,
                                          function(e:EffectEvent):void
                                          {
                                              var curpos:int = thumbContent.verticalScrollPosition;
                                              if (selectedThumb.y < curpos)
                                              {
                                                  thumbContent.verticalScrollPosition = y;
                                              }
                                              else if (selectedThumb.y + lib_flex_store_productsView_ProductCatalogThumbnail.COL_HEIGHT_4 > curpos + thumbContent.height)
                                              {
                                                  //this logic doesn't seem to be perfect but it will do
                                                  var diff:int = selectedThumb.y - (curpos + thumbContent.height)
                                                  thumbContent.verticalScrollPosition += diff + lib_flex_store_productsView_ProductCatalogThumbnail.COL_HEIGHT_4 + lib_flex_store_productsView_ProductCatalogThumbnail.VERTICAL_GAP;
                                              }
                                          });
              }
              
          }
          
          private function productThumbEventHandler(event:lib_flex_store_samples_flexstore_ProductThumbEvent):void
          {
              if (event.type == lib_flex_store_samples_flexstore_ProductThumbEvent.DETAILS)
              {
                  showDetails(event.product);
              }
              else if (event.type == lib_flex_store_samples_flexstore_ProductThumbEvent.BROWSE)
              {
                  if (thumbnailState == "browse")
                  {                
                      currentState = "browse";
                      layoutCatalog();
                  }
                  else
                  {
                      compare();
                  }
              }
              else
              {
                  dispatchEvent(event);
              }
          }
          
          public function compare(toCompare:Array=null):void
          {
              currentState = "compare";
              thumbnailState = "compare";
              if (toCompare != null)
              {
                  var n:int = thumbnails.length;
                  for (var i:int = 0; i < n; i++)
                  {
                      accepted[thumbnails[i].product] = false;
                  }
                  for (i=0; i < toCompare.length; i++)
                  {
                      accepted[toCompare[i]] = true;
                  }
              }
              var lastEffect:Effect = layoutCatalog();
              if (lastEffect != null)
              {
                  lastEffect.addEventListener(EffectEvent.EFFECT_END,
                      function (event:EffectEvent):void
                      {
                          setCompareState();
                      });
              }
              else
              {
                  setCompareState();
              }
          }
          
          private function setCompareState():void
          {
              //avoid an issue if the user clicks quickly where we move into
              //compare state even though we're no longer in compare
              if (currentState == "compare") 
              {
                  var n:int = thumbnails.length;
                  for (var i:int = 0; i < n; i++)
                  {
                      var thumb:lib_flex_store_productsView_ProductCatalogThumbnail = thumbnails[i];
                      if (accepted[thumb.product])
                      {
                          thumb.currentState = "compare";
                      }
                  }
                  
              }
          }
          
          ]]>
      </mx:Script>
      
      <mx:Binding source="cartCount" destination="titleButtons.cartCount" />
      <!-- two-way binding between the states of panel title buttons and the product view state -->
      <mx:Binding source="lib_flex_store_ProductsView(parentDocument).currentState" destination="titleButtons.currentState" />
      <mx:Binding destination="lib_flex_store_ProductsView(parentDocument).currentState" source="titleButtons.currentState" />
  
      <mx:Canvas width="100%" height="100%" 
          verticalScrollPolicy="off"
          horizontalScrollPolicy="off"
          paddingRight="0">
          <mx:Canvas id="thumbContent" width="100%" height="100%" 
              horizontalScrollPolicy="off"/>
          <productsView:lib_flex_store_productsView_ProductDetails id="details"
              width="{lib_flex_store_productsView_ProductCatalogThumbnail.COL_WIDTH_4 * 3}"
              height="100%"
              visible="false"
              compare="productThumbEventHandler(event)"
              purchase="productThumbEventHandler(event)"
              browse="productThumbEventHandler(event)" />
      </mx:Canvas>
      
      <mx:states>
          <mx:State name="browse">
              <mx:SetProperty name="title" value="Browse"/>
          </mx:State>
  
          <mx:State name="compare">
              <mx:SetProperty name="title" value="Product Comparison"/>
          </mx:State>
  
          <mx:State name="details">
              <mx:SetProperty name="title" value="Product Details"/>
              <mx:SetProperty target="{details}" name="visible" value="true"/>
          </mx:State>
      </mx:states>
      
  </mx:Panel>