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

dojo.widget.defineWidget(
  "atg.b2cblueprint.widget.ShippingGroupItem", 
  dojo.widget.HtmlWidget, {
    
    // templatePath: dojo.uri.dojoUri(contextPath+"/javascript/widget/template/calculateOrderShippingItem.html"),
    templateString: '<div><dt><span style="display:block" dojoAttachPoint="currentItems"></span></dt><dt><span dojoAttachPoint="saturdayDelivery" style="display:block;"><input type="checkbox" id="RichCartSaturdayDelivery${this.data.index}" onclick="atg.b2cblueprint.shipping.clickSaturdayDeliveryCheckbox(\'${this.data.name}\',this, ${this.data.index})" disabled/>${this.i18n.deliveryOnSaturday}</span></dt><dt><select style="display:block;margin-top:5px;width:250px" id="${this.data.name}${this.data.index}" dojoAttachPoint="calculateShippingSelect" onchange="atg.b2cblueprint.shipping.changeMethodOnPopup(this,\'calculateOrderShipping\',${this.data.index}); return false;"></select></dt></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
    i18n: null,
    showDelivery: false,
    // Called after creation - setup any extra display elements of the widget
    postCreate: function(args, frag) {
      
      if (this.showDelivery) {
        dojo.html.show(this.saturdayDelivery);
      } else {
        dojo.html.hide(this.saturdayDelivery);
      }
      
      var commerceItemsData = ''; 
      
      for (var i=0; i < this.data.commerceItems.length; i++){
        commerceItemsData += this.data.commerceItems[i].name + " - " + this.data.commerceItemsQuantities[i];
        if ((i >= 0) && (i < this.data.commerceItems.length-1)) {
          commerceItemsData += ", <br/>";
        }
      }
      
      this.currentItems.innerHTML = commerceItemsData;
      

      for (var i=0; i < this.data.availableShippingMethods.length; i++){
        var shippingMethod = this.data.availableShippingMethods[i];
        
        
        
        
        var elOptNew = document.createElement('option');
        if (shippingMethod == 'LTL') {
           elOptNew.text = this.i18n.LTL;
        } if (shippingMethod == 'USPS') {
           elOptNew.text = this.i18n.USPS;
        } else if (shippingMethod == 'Express 1 Day Delivery') {
           elOptNew.text = this.i18n.expressDelivery;
        } else if (shippingMethod == 'Expedite 2 to 3 Business Day Delivery') {
           elOptNew.text = this.i18n.expediteDelivery;
        } else if (shippingMethod == 'Standard 4 to 7 Business Day Delivery') {
           elOptNew.text = this.i18n.standardDelivery;
        } else if (shippingMethod == 'Express 1 Day Delivery LL') {
           elOptNew.text = this.i18n.expressDeliveryLL;
        } else if (shippingMethod == 'Expedite 2 to 3 Business Day Delivery LL') {
           elOptNew.text = this.i18n.expediteDeliveryLL;
        } else if (shippingMethod == 'Standard 4 to 7 Business Day Delivery LL') {
           elOptNew.text = this.i18n.standardDeliveryLL;
        }

        elOptNew.value = shippingMethod;
        try {
           
           this.calculateShippingSelect.add(elOptNew, null); // standards compliant; doesn't work in IE
        } catch(ex) {
           this.calculateShippingSelect.add(elOptNew); // IE only
        }
        
        
      }
      
      
      // 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
    }
    
  }
);