<?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:HBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    styleName="listItem"
    height="{lib_flex_store_productsView_ProductListItem.HEIGHT}"
    automationName="{product.name}">

    <mx:Metadata>
       [Event(name="productQtyChange", type="lib_flex_store_samples_flexstore_ProductListEvent")]
       [Event(name="removeProduct", type="lib_flex_store_samples_flexstore_ProductListEvent")]
    </mx:Metadata>
    
    <mx:Script>
    <![CDATA[
    
        // import samples.flexstore.Product;
        // import samples.flexstore.ProductListEvent;
        
        public static const HEIGHT:int = 30;
        
        [Bindable]
        public var product:lib_flex_store_samples_flexstore_Product;
        
        private function qtyChange():void
    	{
            product.qty = int(qty.text);
            var event:lib_flex_store_samples_flexstore_ProductListEvent = new lib_flex_store_samples_flexstore_ProductListEvent(lib_flex_store_samples_flexstore_ProductListEvent.PRODUCT_QTY_CHANGE);
            event.product = product;
    		dispatchEvent(event);
        }
        
        private function removeItem():void
        {
            var event:lib_flex_store_samples_flexstore_ProductListEvent = new lib_flex_store_samples_flexstore_ProductListEvent(lib_flex_store_samples_flexstore_ProductListEvent.REMOVE_PRODUCT);
            event.product = product;
    		dispatchEvent(event);
        }
        
    ]]>
    </mx:Script>
    
    <mx:CurrencyFormatter currencySymbol="$" id="cf" precision="2"/>
    
    <mx:Button id="removeButton"
        width="14" height="14" 
        icon="@Embed('lib-flex-store-assets-trashcan.png')"
        toolTip="Remove from cart"
        click="removeItem()"/>

    <mx:Image id="productImage" width="12" height="24" source="{product.image}"/>

    <mx:Label id="productName" maxWidth="100" text="{product.name}"/>

    <mx:Spacer width="100%" />

    <mx:Label id="productPrice" 
        text="{cf.format(product.price)}" textAlign="right"/>
        
    <mx:states>
        <mx:State name="showQuantity">
            <mx:AddChild>
                <mx:TextInput id="qty" width="25" text="{product.qty}" 
                    textAlign="right" maxChars="3" change="qtyChange()" />
           </mx:AddChild>
       </mx:State>        
    </mx:states>
    
</mx:HBox>