dojo.provide("atg.b2cblueprint.widget.RichCartSummaryItem");

dojo.widget.defineWidget(
  "atg.b2cblueprint.widget.RichCartSummaryItem", 
  dojo.widget.HtmlWidget, {
    
    //templatePath: dojo.uri.dojoUri(contextPath+"/javascript/widget/template/richCartSummaryItem.html"),    
    templateString: '<div class="atg_CoD_cartItem"><a href="${this.data.url}" dojoAttachPoint="imageLink"><img src="${this.data.imageUrl}" alt="${this.data.name}"/></a><div><h4><a href="${this.data.url}" dojoAttachPoint="titleLink">${this.data.name}</a></h4><del class="oldPrice" dojoAttachPoint="oldPriceContainer" style="display:none;"></del><span class="newPrice" dojoAttachPoint="newPriceContainer" style="color:black;">${this.data.price}</span><div class="atg_CoD_availability" dojoAttachPoint="availabilityContainer"></div><dl dojoAttachPoint="propertiesContainer"></dl></div></div>',
 
    // Define all global variables for the widget.
    isContainer: false,   // core var, shows Dojo that this widget will not contain other widgets
    data: null,           // Data object for this widget. Will be passed in during widget initialisation
    
    // Called after creation - setup any extra display elements of the widget
    postCreate: function(args, frag) {
      
      // Display the old (strikethrough) price if there is a value for it. This value will
      // only be set on the 'data' object if we should be displaying it
      if (this.data.oldPrice){
        this.oldPriceContainer.innerHTML=this.data.oldPrice;
        dojo.html.show(this.oldPriceContainer);
        this.newPriceContainer.style.color = 'red';
      }
      
      // Create dt/dd pair for each extra item property and append to properties container
      for (var i=0; i<this.data.properties.length; i++){
        var prop=this.data.properties[i];
        var dt=document.createElement('dt');
        var dd=document.createElement('dd');
        dt.innerHTML=prop.name+":";
        dd.innerHTML=prop.value;
        
        this.propertiesContainer.appendChild(dt);
        this.propertiesContainer.appendChild(dd);
      }
      
      // Show/hide availability message depending on whether it was set
      if (this.data.availability){
        this.availabilityContainer.innerHTML=this.data.availability;
      }
      else{
        dojo.html.hide(this.availabilityContainer);
      }
      
      // Remove image/title links if linkItem=false
      if (!this.data.linkItem){
        // Just replace the <a> tags with their contents. 
        dojo.dom.replaceNode(this.imageLink, this.imageLink.firstChild);
        dojo.dom.replaceNode(this.titleLink, this.titleLink.firstChild);
      }
    },
    
    /**
     * Highlight the item
     */
    highlight: function(){   
      dojo.lfx.html.highlight(this.domNode, this.highlightColor, this.highlightDuration, dojo.lfx.easeOut).play();
    },
    
    /**
     * Scroll this item into view within the rich cart. This function calculates the scroll position
     * so that the node is positioned as close to the center of the cart as possible. 
     * If the item is at the start or end of the list, then it will scroll to the top or bottom
     * of the lists, otherwise it attempts to get as close to center as possible
     */
    scrollIntoView: function(){
      var node=this.domNode;
      var parent = node.parentNode; // cart.csContent (element with scroll bars)
      var cart=parent.parentNode;   // cart.domNode
      
      // Get absolute positions of cart and this item node - calculate absolute centers
      var cartHeight = dojo.html.getContentBox(cart).height;
      var absCartCenter=dojo.html.getAbsolutePosition(cart).top+Math.ceil(cartHeight/2);      
      var nodeHeight = dojo.html.getContentBox(node).height;
      var absNodeCenter = dojo.html.getAbsolutePosition(node).top+Math.ceil(nodeHeight/2);
      
      // How much do we need to change the scroll by to get the node into the center?
      var desiredScrollChange=absNodeCenter-absCartCenter;
      
      // Calculate the desired scrollTop value, taking into account min and max values
      var minScrollTop=0;
      var maxScrollTop=parent.scrollHeight-dojo.html.getContentBox(parent).height;
      var desiredScrollTop=parent.scrollTop;
      desiredScrollTop+=desiredScrollChange;
      desiredScrollTop = (desiredScrollTop < minScrollTop) ? minScrollTop:desiredScrollTop;
      desiredScrollTop = (desiredScrollTop > maxScrollTop) ? maxScrollTop:desiredScrollTop;
      
      // Scroll to the new position
      //parent.scrollTop=desiredScrollTop;
      var anim=this.smoothScroll(parent,parent.scrollTop,desiredScrollTop,this.scrollDuration);
      anim.play();

      //dojo.debug("absCartCenter:"+absCartCenter+" absNodeCenter:"+absNodeCenter);
      //dojo.debug("desiredScrollChange: "+desiredScrollChange+" desiredScrollTop: "+desiredScrollTop+" currentScrollTop:"+parent.scrollTop);  
    },
    
    /**
     * Returns an animation object that will perform a smooth scroll to a position
     */
    smoothScroll: function(nodeToScroll,currentScrollTop,desiredScrollTop,duration){
      var anim = new dojo.lfx.Animation({
          beforeBegin: function(){
            delete this.curve;
            anim.curve = new dojo.lfx.Line(currentScrollTop,desiredScrollTop);
          },
          onAnimate: function(value){
            nodeToScroll.scrollTop=value;
          }
        },
        duration, 
        null, //curve, will be set in scrollTo
        dojo.lfx.easeOut);
      return anim; // dojo.lfx.Animation
    }
  }
);