<?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:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
      width="{COL_WIDTH_4}" height="{COL_HEIGHT_4}"
      borderStyle="solid"
      borderColor="#FFFFFF"
      horizontalScrollPolicy="off" verticalScrollPolicy="off"
      rollOver="rollOverHandler(event)"
      rollOut="rollOutHandler(event)"
      mouseDown="mouseDownHandler(event)"
      mouseMove="mouseMoveHandler(event)"
      mouseUp="mouseUpHandler(event)"
      click="clickHandler(event)"
      currentState="4cols"
      automationName="{product.name}"
      dropShadowColor="#000000"
      shadowDistance="2"
      >
  
      <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 mx.events.*;
          import mx.core.*;
          
          //import samples.flexstore.Product;
          //import samples.flexstore.ProductThumbEvent;
          
          public static const COL_WIDTH_4:int = 162;
          public static const COL_HEIGHT_4:int = 122;
          public static const COL_WIDTH_3:int = 217;
          public static const COL_HEIGHT_3:int = 165;
          public static const COL_WIDTH_2:int = 327;
          public static const COL_HEIGHT_2:int = 250;
          public static const COMPARE_WIDTH:int = 162;
          public static const HORIZONTAL_GAP:int = 2;
          public static const VERTICAL_GAP:int = 3;
  
          [Bindable]
          public var product:lib_flex_store_samples_flexstore_Product;
  
          private function rollOverHandler(event:MouseEvent):void
                  {
              setStyle("borderColor", "#CCCCCC");
              setStyle("dropShadowEnabled", true);
              buttons.visible = true;
          }
  
          private function rollOutHandler(event:MouseEvent):void
                  {
              setStyle("borderColor", "#FFFFFF");
              setStyle("dropShadowEnabled", false);
                          buttons.visible = false;
          }
  
          private var dragStartPoint:Point;
  
          public function mouseDownHandler(event:MouseEvent):void
          {
              if (event.target != purchase &&
                  event.target != compare &&
                  event.target != details)
              {
                  dragStartPoint = new Point(event.stageX, event.stageY);
                  dragStartPoint = globalToLocal(dragStartPoint);
  
              }
          }
  
          public function mouseMoveHandler(event:MouseEvent):void
          {
              if (dragStartPoint != null)
              {
                  var dragEvent:DragEvent = new DragEvent(DragEvent.DRAG_START, true);
                  dragEvent.localX = dragStartPoint.x;
                  dragEvent.localY = dragStartPoint.y;
                  dragEvent.buttonDown = true;
                  dispatchEvent(dragEvent);
  
                  rollOutHandler(event);
  
                  dragStartPoint = null;
              }
          }
  
          public function mouseUpHandler(event:MouseEvent):void
          {
              if (dragStartPoint != null)
              {
                  dragStartPoint = null;
              }
          }
  
          public function clickHandler(event:MouseEvent):void
          {
              if (event.target != purchase &&
                  event.target != compare &&
                  event.target != details)
              {
                  dispatchEvent(new lib_flex_store_samples_flexstore_ProductThumbEvent(lib_flex_store_samples_flexstore_ProductThumbEvent.DETAILS, product));
              }
          }
  
          ]]>
      </mx:Script>
  
      <mx:CurrencyFormatter currencySymbol="</mx:VBox>
  
          </mx:HBox>
  
          <mx:Spacer height="8"/>
  
      </mx:VBox>
  
      <mx:VBox id="buttons" visible="false" verticalGap="4" paddingRight="8" right="8" top="12">
          <mx:Button id="purchase" icon="@Embed('lib-flex-store-assets-icon-cart-empty.png')" 
              click="dispatchEvent(new lib_flex_store_samples_flexstore_ProductThumbEvent(lib_flex_store_samples_flexstore_ProductThumbEvent.PURCHASE, product))" 
              width="30" toolTip="Add to cart"/>
          <mx:Button id="compare" icon="@Embed('lib-flex-store-assets-icon-compare.png')" 
              click="dispatchEvent(new lib_flex_store_samples_flexstore_ProductThumbEvent(lib_flex_store_samples_flexstore_ProductThumbEvent.COMPARE, product))" 
              width="30" toolTip="Add to compare list"/>
          <mx:Button id="details" icon="@Embed('lib-flex-store-assets-icon-details.png')" 
              click="dispatchEvent(new lib_flex_store_samples_flexstore_ProductThumbEvent(lib_flex_store_samples_flexstore_ProductThumbEvent.DETAILS, product))" 
              width="30" toolTip="Show details"/>
      </mx:VBox>
  
      <mx:states>
  
          <mx:State name="compare">
              <mx:SetProperty name="height" value="502"/>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Label text="Battery: 36 hours"/>
              </mx:AddChild>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Label text="Warranty: 1 year"/>
              </mx:AddChild>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Label text="Battery: 36 hours"/>
              </mx:AddChild>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Label text="Headset: Included"/>
              </mx:AddChild>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Label text="Email: Yes"/>
              </mx:AddChild>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Label text="Width: 2'"/>
              </mx:AddChild>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Label text="Height: 5'"/>
              </mx:AddChild>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Label text="Weight: 4"/>
              </mx:AddChild>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Label text="Mail-in Rebate: $20"/>
              </mx:AddChild>
          </mx:State>
  
          <mx:State name="4cols">
              <mx:SetProperty name="width" value="{COL_WIDTH_4}"/>
              <mx:SetProperty name="height" value="{COL_HEIGHT_4}"/>
          </mx:State>
  
          <mx:State name="3cols">
              <mx:SetProperty name="width" value="{COL_WIDTH_3}"/>
              <mx:SetProperty name="height" value="{COL_HEIGHT_3}"/>
              <mx:SetProperty target="{img}" name="width" value="60"/>
              <mx:SetProperty target="{img}" name="height" value="120"/>
              <mx:AddChild relativeTo="{descr}">
                          <mx:Label text="{product.highlight1}" color="#EE8D0C"/>
              </mx:AddChild>
              <mx:AddChild relativeTo="{descr}">
                          <mx:Label text="{product.highlight2}" color="#EE8D0C"/>
              </mx:AddChild>
          </mx:State>
  
          <mx:State name="2cols" basedOn="3cols">
              <mx:SetProperty name="width" value="{COL_WIDTH_2}"/>
              <mx:SetProperty name="height" value="{COL_HEIGHT_2}"/>
              <mx:SetProperty target="{img}" name="width" value="60"/>
              <mx:SetProperty target="{img}" name="height" value="120"/>
              <mx:AddChild relativeTo="{vb}">
                  <mx:Text width="100%" text="{product.description}"/>
              </mx:AddChild>
          </mx:State>
  
      </mx:states>
  
  </mx:Canvas>