amazon.lzx

<canvas width="780" height="540" bgcolor="#EAEAEA" fontsize="8">
    <!-- <inittimer/> -->

    <attribute name="developerToken" value="12FRM39DPGD6QZRMTEG2" type="string"/>

    <!-- dataset holding customer's recommendations -->
    <dataset name="dsRecommend"/>

    <!-- dataset to hold keyword search results -->
    <dataset name="dsKeyword"/>

    <!-- dataset to hold detailed cd information -->
    <dataset name="dsCDInfo"/>

    <include href="soap-api.lzx"/>
    <include href="resources.lzx"/>
    <include href="classlib.lzx"/>
    <include href="shoppinglist.lzx"/>
    <include href="address.lzx"/>
    <include href="creditcard.lzx"/>

    <!-- dataset to store cart items -->
    <dataset name="dsCart"/>

    <!-- dataset to store wish list items -->
    <dataset name="dsWish"/>

    <!-- dataset holding the list of credit cards accepted by the application -->
    <dataset name="dsCreditCard">
        <card id="VIS" name="Visa"/>
        <card id="AMX" name="American Express"/>
        <card id="DIS" name="Discover"/>
        <card id="DIN" name="Diners Club"/>
        <card id="JCB" name="JCB"/>
    </dataset>

    <dataset name="dsAddressList" src="data/addresses.xml"/>
    <dataset name="dsCreditCardList" src="data/creditcards.xml"/>

    <include href="recommendation.lzx"/>

    <script>
        /* This is a long-winded method for counting the number of 
        reviews. Unfortunately, there's no reliable way of doing so
        right now: */
        function countNodesByName( dp, nodeName ) {
            var numNodes = 0;
            do {
                if ( dp.getNodeName()==nodeName )
                numNodes++; 
            } while ( dp.selectNext() ); 

            return numNodes;
        }
    </script>

    <!-- Splash -->
<!--
    <splash persistent="true">
        <view resource="images/loading_bg.swf" />
        <view name="splash_anim" ratio="0.5" 
              resource="images/loading_anim.swf" />
    </splash>
-->

    <!-- Startup box
    <view name="progressBar" resource="splash_init_bar" 
          oninit="canvas.initdelay=400" pixellock="true" initstage="early">

        <handler name="onpercentcreated" reference="canvas" args="p">
            var pp = Math.floor( 90*p );
            canvas.splash_anim.stop( pp );
        </handler>

        <attribute name="hasSplash" value="true" />

        <method name="destroySplash">
            this.setAttribute( "hasSplash", false );
            canvas.splash.deleteView();
            this.deleteView();
        </method>

    </view> -->


    <view width="${parent.width}">

        <simplelayout axis="y"/>

        <view>
            <view resource="header"/>
            <view resource="laszlo_powered" x="276" y="13" onmouseover="setResourceNumber(2)" onmouseout="setResourceNumber(1)">
                <handler name="onclick">
                    lz.Browser.loadURL("http://laszlosystems.com", "_blank");
                </handler>
            </view>
        </view>

        <view width="${parent.width}">

            <view id="main" resource="background" x="-215">
                <attribute name="closed_posX" type="number" value="-199"/>
                <attribute name="open_posX" type="number" value="0"/>

                <view y="20" width="197" id="searchResultsArea">
                    <simplelayout axis="y" spacing="4"/>

                    <view id="cdlist" width="${parent.width-2}"> 
                        <simplelayout axis="y" spacing="4"/>
                        <view width="17" height="17"/>
                        <!-- Repeated view displaying the list of items 
                             matching the keyword search -->
                        <view name="searchResults" id="searchResultsPanel" width="${parent.width}">
                <datapath xpath="dsKeyword:/Details/Details" pooling="true"/>
                            <view width="${parent.width}" clickable="true" onmouseover="setBGColor(0xFFFFFF)" onmouseout="setBGColor(0xCAD0EC)">
                                <simplelayout axis="y"/>
                                <text x="4" font="lztahoe8,Arial,Helvetica" datapath="ProductName/text()" width="${parent.width-6}" resize="false"/>
                                <text x="4" font="lztahoe8,Arial,Helvetica" datapath="Artists/Artist[1]/text()" width="${parent.width-6}" resize="false"/>

                
                <remotecall name="userAsinSearch" funcname="AsinSearchRequest" remotecontext="$once{canvas.amazon}" dataobject="$once{dsCDInfo}"/>

                <handler name="ondata" args="mydata">
                    recommend.setAttribute('visible',  false );
                    cdinfo.setAttribute('visible',  true );
                    cdinfo.bringToFront();
                    infoLoader.hide();
                </handler>
                <handler name="onerror" args="error">
                    // two ways at getting data
                    Debug.write('ERROR:', error);
                    infoLoader.hide();
                </handler>
                <handler name="ontimeout">
                    Debug.write( "timeout in dataset: dsCDInfo" );
                    infoLoader.hide();
                </handler>

                                <!-- When one item is clicked, a request is sent to Amazon for
                     deatailed informations about the item -->
                                <handler name="onclick">
                                    
                    infoLoader.show();
                    var obj = new canvas.amazon.proto.AsinRequest();
                    obj.devtag = canvas.developerToken;
                    obj.tag = 'webservices-20';
                    obj.type = 'heavy';
                    obj.mode = 'music';
                    obj.asin = parent.datapath.xpathQuery("Asin/text()");                
                    Debug.write("asin search for "+obj.asin);
                    this.userAsinSearch.invoke([ obj ]);
                    //amazon.proxy.AsinSearchRequest([ obj ], canvas.cdinfodelegate);

                                    
                                </handler>
                            </view>
                        </view>

                        <loading_indicator id="searchLoader" resource="wait_search" align="center" y="120"/>

                    </view>

                </view>

                <!-- The search panel button -->
                <multistatebutton resource="search_panel" x="197" y="2" statenum="0" statelength="3" maxstate="1" onclick="this.toggle()" options="ignorelayout">
                    <method name="toggle">
                        if (this.statenum == 0) {
                            this.setStateNum(1);
                            main.animate('x', main.closed_posX, 333, false);
                        } else {
                            this.setStateNum(0);
                            main.animate('x', main.open_posX, 333, false);
                        }
                    </method>
                </multistatebutton>

                <recommendationpanel id="recommend" x="223" y="10" width="${parent.width-2*x}" height="${parent.height-y}"/>

                <view id="cdinfo" x="223" y="10" width="${parent.width-2*x}" height="${parent.height-y}" bgcolor="#CAD0EC" font="Arial,Helvetica" fontsize="11" datapath="dsCDInfo:/Details/Details">

                    <simplelayout axis="y" spacing="16"/>

                    <view resource="back_butt" x="300" onmouseover="setResourceNumber(2);" onmouseout="setResourceNumber(1);" onmouseup="setResourceNumber(1);" onclick="recommend.setAttribute('visible',  true); cdinfo.setAttribute('visible',  false ); recommend.bringToFront();"/>


                    <view name="info" width="${parent.width}" height="136">

                        <simplelayout axis="x" spacing="10"/>
                        <!-- Display CD cover: Image is draggable into either the shopping cart or the wish list -->
                        <view id="cover" datapath="ImageUrlMedium/text()" onmousedown="dragger.start(parent.parent.datapath.xpathQuery('ImageUrlSmall/text()'))" onmouseup="dragger.stop(); itemDropped(parent.parent.datapath);" ondblclick="cart.addItem(parent.parent.datapath)">
                            <attribute name="source" value="${this.data}"/>
                            <method name="itemDropped" args="dpath">
                                if (dragger.droppedInView(cart.parent)) {
                                    cart.addItem(dpath);
                                } else if (dragger.droppedInView(wish.parent)) {
                                    wish.addItem(dpath);
                                }
                            </method>
                        </view>

                        <view width="${parent.width-cover.width}">
                            <text datapath="ProductName/text()" width="${parent.width}" fontstyle="bold" fontsize="18" fgcolor="#666699"/>
                            <text y="20" datapath="Artists/Artist[1]/text()" width="${parent.width}" fontstyle="bold" fontsize="12" fgcolor="#666699"/>
                            <text y="40" fgcolor="#666699">Label:</text><text x="90" y="40" datapath="Manufacturer/text()" width="${parent.width}" fgcolor="#666699"/>
                            <text y="55" fgcolor="#666699">Realease Date:</text><text x="90" y="55" datapath="ReleaseDate/text()" width="${parent.width}" fgcolor="#666699"/>
                            <text y="70" fgcolor="#666699">Availability:</text><text x="90" y="70" datapath="Availability/text()" width="${parent.width}" fgcolor="#666699"/>
                            <text y="87" fgcolor="#666699" fontsize="14">List Price:</text><text x="90" y="87" datapath="ListPrice/text()" width="${parent.width}" fontsize="14" fgcolor="#666699"/>
                            <text y="105" fgcolor="#666699" fontstyle="bold" fontsize="16">Our Price:</text><text x="90" y="105" datapath="OurPrice/text()" width="${parent.width}" fontstyle="bold" fontsize="16" fgcolor="#666699"/>
                            <mouseview resource="cart_butt" x="214" y="105" width="54" height="18" onclick="cart.addItem(parent.parent.parent.datapath)"/>
                            <mouseview resource="wish_butt" x="270" y="105" width="54" height="18" onclick="wish.addItem(parent.parent.parent.datapath)"/>
                        </view>

                    </view>


                    <tabslider bgcolor="#586886" width="486" height="280" oninit="this.openTab(editorialTab)">

                        <tabpanel name="editorialTab" label="Editorial Review" oninit="this.setAnnotation( '-' );">
                            <text x="8" y="8" id="pokeme" datapath="ProductDescription/text()" multiline="true" width="${parent.width-16}">
                                <method name="applyData" args="t">
                                    
                                    super.applyData( t );
                                    if (  t != null && t.length )
                                        this.parent.setAnnotation( '' );
                                    else 
                                        this.parent.setAnnotation( '-' );
                                    
                                </method>
                            </text>
                        </tabpanel>

                        <tabpanel label="Tracks">

                            <view width="${parent.width}" height="${parent.height-20}" datapath="Tracks" clip="true">
                                <handler name="ondata">
                                    var dp = this.datapath;
                                    var track = dp.xpathQuery('Track');
                                    this.parent.setAnnotation( track.length );
                                </handler>

                                <view y="8" x="8" width="${parent.width}">
                                    <simplelayout axis="y"/>
                                    <!-- Repeated view displaying the list of tracks -->
                                    <view width="${parent.width}">
                                        <datapath xpath="Track/TrackName" pooling="true"/>
                                        <simplelayout axis="x" spacing="4"/>
                                        <text label="${(parent.clonenumber+1)+'.'}" width="20"/>
                                        <text datapath="text()" width="${parent.width}"/>
                                    </view>
                                </view>
                                <scrollbar/>
                            </view>

                        </tabpanel>

                        <tabpanel id="CustomerReviewsTab" label="Customer Reviews">

                            <view clip="true" width="${parent.width}" height="${parent.height-20}">
                                <view width="${parent.width}">
                                    <view x="8" y="8" width="${parent.width-50}" id="customerReviewsContainer">
                                        <datapath xpath="Reviews[1]/CustomerReviews" pooling="true"/>
                                        <simplelayout axis="y" spacing="0"/>

                                        <handler name="ondata">
                                            var dp = this.datapath;
                                            var cr = dp.xpathQuery('CustomerReview'); // array of customer reviews
                                            this.parent.parent.parent.setAnnotation( cr.length );
                                        </handler>


                                        <!-- Repeated view displaying the list of customer review -->
                                        <view datapath="CustomerReview" width="${parent.width}" name="replicatedReviews">
                                            <simplelayout axis="y" spacing="4"/>
                                            <view width="${parent.width}" onclick="parent.detail.animate('height', parent.detail.height==0?parent.detail.comment.height+10:0, 333, false)" onmouseover="this.summary.setColor(0x666699)" onmouseout="this.summary.setColor(0x000000)">
                                                <simplelayout axis="x" spacing="4"/>
                                                <!-- Gif displaying the number of stars -->
                                                <view resource="stars_rsc" datapath="Rating/text()" ondata="this.setResourceNumber(parseInt(this.data));"/>
                                                <!-- Title of the review -->
                                                <text name="summary" datapath="Summary/text()" fontstyle="bold" width="${parent.width}"/>
                                            </view>
                                            <!-- View displaying the body of the review when its title is clicked !-->
                                            <view name="detail" height="0" width="${parent.width}" clip="true">
                                            <view name="comment" width="${parent.width}">
                                                <text x="10" datapath="Comment/text()" multiline="true" width="${parent.width}"/>
                                            </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <scrollbar/>
                            </view>
                        </tabpanel>

                    </tabslider>

                </view>

                <loading_indicator id="infoLoader" resource="wait_info" align="center" y="120"/>
            </view>

            <mouseview resource="search_butt" y="1" onclick="SOAPsearch()">
                <inputtext id="searchKey" x="20" y="3" fontsize="11">
                    <handler name="onkeydown" args="k">
                        if (k==13) {
                            parent.SOAPsearch();
                        }
                    </handler>
                </inputtext>

        <remotecall name="myKSR1" funcname="KeywordSearchRequest" remotecontext="$once{canvas.amazon}" dataobject="$once{dsKeyword}">
          <param>
            <method name="getValue">
            /* Set up a KeywordRequest object as the arg to KeywordSearchRequest() */
                        var obj = new canvas.amazon.proto.KeywordRequest();
            obj.page = 1;
            obj.mode = 'music';
            obj.tag = 'webservices-20';
            obj.type = 'lite';
            obj.devtag = canvas.developerToken;
            obj.keyword = searchKey.text;
            //obj.format = 'xml';
            //obj.version = '1.0';
            return obj;
            </method>
          </param>
        </remotecall>

                <method name="SOAPsearch">
            
                    searchLoader.show();
                    main.animate("x", main.open_posX, 0, false);
            this.myKSR1.invoke();
            
                </method>

        <handler name="ondata" args="data">
          Debug.write('[1] dsKeyword got data:', data);
          searchLoader.hide();
        </handler>

        <handler name="onerror">
          Debug.write( "onerror in dataset: dsKeyword" );
          searchLoader.hide();
        </handler>

        <handler name="ontimeout">
          Debug.write( "ontimeout in dataset: dsKeyword" );
          searchLoader.hide();
        </handler>

            </mouseview>

            <view align="right" height="${parent.height}" font="Arial,Helvetica" fontsize="11">

                <simplelayout axis="x"/>

                <vtabpanel tabresource="slider_cart">
                    <view width="${parent.width}" height="${parent.height}">
                        <shoppinglist id="cart" datapath="dsCart:/" panel_to_nudge="$once{parent.parent}">
                            <method name="itemDropped" args="dpath">
                                if (dragsmall.droppedInView(wish.parent)) {
                                    wish.addItem(dpath);
                                    this.removeItem(dpath);
                                } else if (!dragsmall.droppedInView(cart.parent)) {
                                    this.removeItem(dpath);
                                } else if (dragsmall.droppedInTrash(cart.trashCan) ){
                                    this.removeItem(dpath);
                                    return
                                } 
                            </method>
                        </shoppinglist>
                        <view bgcolor="#586886" y="${parent.height-1}" height="1" width="${parent.width}"/>
                    </view>
                </vtabpanel>


                <vtabpanel tabresource="slider_wish">

                    <view width="${parent.width}" height="${parent.height}">
                        <shoppinglist id="wish" datapath="dsWish:/" panel_to_nudge="$once{parent.parent}">
                            <method name="itemDropped" args="dpath">
                                if (dragsmall.droppedInView(cart.parent)) {
                                    cart.addItem(dpath);
                                    this.removeItem(dpath);
                                } else if (dragsmall.droppedInTrash(wish.trashCan) ){
                                    this.removeItem(dpath);
                                    return
                                } else if (!dragsmall.droppedInView(wish.parent)) {
                                    this.removeItem(dpath);
                                }
                            </method>
                        </shoppinglist>
                        <view bgcolor="#586886" y="${parent.height-1}" height="1" width="${parent.width}"/>
                    </view>

                </vtabpanel>

                <vtabpanel id="checkout" tabresource="slider_checkout" openingsize="320">

                    <view width="${parent.width-parent.tab.width}" height="${parent.height}" clip="true">

                        <tabslider x="${-1}" y="8" width="${parent.width}" height="350" bgcolor="#586886" oninit="this.openTab(addressTab)">

                            <tabpanel name="addressTab" label="Shipping Address">

                                <addressmanager width="${parent.width}" height="290"/>

                            </tabpanel>

                            <tabpanel label="Shipping Method">

                                <view x="20" y="10" width="${parent.width}" fontsize="10">
                                    <simplelayout axis="y" spacing="6"/>
                                    <sel id="shipmentSelection"/>
                                    <view height="60">
                                        <simplelayout axis="x" spacing="4"/>
                                        <radiobutton valign="middle" val="7.99" selectionobject="${shipmentSelection}"/>
                                        <view valign="middle" width="60" resource="usps"/>
                                        <text valign="middle">Standard Shipping (3-7 business days)</text>
                                    </view>

                                    <view height="60">
                                        <simplelayout axis="x" spacing="4"/>
                                        <radiobutton valign="middle" val="12.99" selectionobject="${shipmentSelection}"/>
                                        <view valign="middle" width="60" resource="ups"/>
                                        <text valign="middle">Two Day Shipping (2 business days)</text>
                                    </view>

                                    <view height="60">
                                        <simplelayout axis="x" spacing="4"/>
                                        <radiobutton valign="middle" val="18.99" selectionobject="${shipmentSelection}"/>
                                        <view valign="middle" width="60" resource="fedex"/>
                                        <text valign="middle">One Day Shipping (1 business day)</text>
                                    </view>
                                </view>

                            </tabpanel>

                            <tabpanel label="Payment Method">

                                <cardmanager width="${parent.width}" height="290"/>

                            </tabpanel>

                        </tabslider>
                        <view y="357" resource="divider_panel" width="${parent.width}" stretches="both"/>

                        <view x="80" y="374" fontsize="14" fgcolor="#666699" fontstyle="bold">
                            <simplelayout axis="x" spacing="4"/>
                            <view width="120">
                                <simplelayout axis="y" spacing="2"/>
                                <text align="right">Items: $</text>
                                <text align="right">Shipping & Handling: $</text>
                                <text align="right" fontsize="18">Your Total: $</text>
                            </view>
                            <view width="100">
                                <simplelayout axis="y" spacing="2"/>
                                <text name="items" width="100" align="right" resize="false" text="${Math.round(cart.total*100)/100}"/>
                                <text name="shipment" width="100" align="right" resize="false" text="${shipmentSelection.val}"/>
                                <text width="100" align="right" fontsize="18" resize="false" text="${Math.round((cart.total+parseFloat(shipmentSelection.val))*100)/100}"/>
                            </view>
                        </view>

                        <mouseview y="448" resource="submit_butt" align="center"/>

                        <view x="${parent.width-1}" y="0" width="1" height="${parent.height}" bgcolor="#586886"/>
                        <view bgcolor="#586886" y="${parent.height-1}" height="1" width="${parent.width}"/>

                    </view>

                </vtabpanel>

            </view>
        </view>

    </view>

    <view name="dragger" opacity="0.5">

        <state name="dragging">
            <attribute name="x" value="${this.immediateparent.getMouse('x')}"/>
            <attribute name="y" value="${this.immediateparent.getMouse('y')}"/>
        </state>

        <method name="start" args="dragImage">
            this.setSource(dragImage);
            dragging.setAttribute('applied', true);
            this.setAttribute("visible", true);
        </method>

        <method name="stop">
            dragging.setAttribute('applied', false);
            this.setAttribute("visible", false);
        </method>

        <method name="droppedInView" args="theView">
            
            var absX = theView.getAttributeRelative( "x", canvas );
            return (this.x > absX && this.x < absX+theView.width);
            
        </method>

    </view>

    <view name="dragsmall" visible="false">
        <attribute name="dragging" value="false"/>
        <view name="img" x="12" y="5" width="50" height="50" clip="true" opacity="0.7"/>
        <view name="dragframe" resource="dragframe" x="${parent.img.x-12}" y="${parent.img.y-5}"/>

        <dragstate name="drag"/>

        <method name="start">
            this.dragging=true;
            drag.setAttribute('applied', true);
            this.setAttribute("visible", true);
        </method>

        <method name="display" args="dragView, dragImage">
            this.setAttribute("x", dragView.getAttributeRelative("x", canvas)-12);
            this.setAttribute("y", dragView.getAttributeRelative("y", canvas)-5);
            img.setSource(dragImage);
            this.setAttribute("visible", true);
        </method>

        <method name="hide">
            if (dragging!=true) this.setAttribute("visible", false);
        </method>

        <method name="stop">
            this.dragging=false;
            drag.setAttribute('applied', false);
            this.setAttribute("visible", false);
        </method>

        <method name="droppedInView" args="theView">
            
            // var absX = theView.getAttributeRelative( "x", canvas );
            var mouseY = canvas.getMouse('y')-theView.getAttributeRelative('y',canvas);
            var mouseX = canvas.getMouse('x')-theView.getAttributeRelative('x',canvas);
            return theView.containsPt(mouseX, mouseY);
            
        </method>
        
        <method name="droppedInTrash" args="theTrashCan">
            
            var mouseX = canvas.getMouse('x')-theTrashCan.getAttributeRelative('x',canvas);
            var mouseY = canvas.getMouse('y')-theTrashCan.getAttributeRelative('y',canvas);

            if ( theTrashCan.containsPt(mouseX, mouseY) ) 
                return true;
            return false;
            
        </method>


    </view>

</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2011 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
<!-- @LZX_VERSION@                                                         -->