/**
 * @class VariantBubble_Class
 *  This class is responsible into managing the Varianat Bubble Class
 * Please be aware that the properties of this class needs to be overridden based on the case that we will be using.
 *  The one which needs to be changed are
 *        this.VariantBubble_ImagePrefix   and    this.VariantBubble_ImageSuffix;
 * The other properties are DHTML Object IDs that needs to be populated with the data.....
 * In case there are other data that needs to be populated, we either need to support on this class or we need to prototype
 *  its methods.
 */

Core.VariantBubble_Class=function () {
    /**
     * The DHTML ID of the main layer of the Varianat bubble
     */
    this.VariantBubble_DivID="VariantBubble_Div";

    /**
     * The DHTML ID of the Product/Variant Image
     */
    this.VariantBubble_ImageID="VariantBubble_Image";

    /**
     * The DHTML ID of the quantity
     */
    this.VariantBubble_QuantityID="VariantBubble_Quantity";

    /**
     * The DHTML ID of the price label
     */
    this.VariantBubble_PriceID="VariantBubble_Price";

    /**
     * The DHTML ID of the product name label
     */
    this.VariantBubble_ProductNameID="VariantBubble_ProductName";
    /**
     * The DHTML ID of the product description label
     */
    this.VariantBubble_ProductDescID = "VariantBubble_ProductDesc";

    /**
     * The DHTML ID of the variant name label
     */
    this.VariantBubble_VariantNameID="VariantBubble_VariantName";
    /**
     * The DHTML ID of the variant name label
     */
    this.VariantBubble_VariantNameID2="VariantBubble_VariantName2";

    /**
     * The DHTML ID of the add to bag button on the bubble
     */
    this.VariantBubble_AddToBagID="VariantBubble_AddToBag";
     /**
     * The DHTML ID of the add to bag button on the bubble
     */
    this.VariantBubble_OutOfStockID="VariantBubble_OutOfStock";
    /**
     * The Prefix of the image
     */
    this.VariantBubble_ImagePrefix_LargeShade=IMAGES_RELATIVE_OR_ABSOLUTE_PATH +VARIANT_LARGE_SHADE_IMAGE_PREFIX;

    /**
     * The suffix of the image
     */
    this.VariantBubble_ImageSuffix_LargeShade=VARIANT_LARGE_SHADE_IMAGE_SUFFIX;
    
    this.VariantBubble_FavConfirmID = VAR_FAVORITE_CONFIRM_ID;
    this.VariantBubble_ProductInfoID = VAR_PRODUCT_INFO_ID;
    /**
     * Variant Code
     */
    this.Code="";
    /** 
     * Holds a reference to the parent control. If this value is present,
     * when attempting to show a new bubble, this control will attempt to hide
     * the parent
     */
    this.parentControlID=null;

    this.VIEWMOREDETAILS_ID="VARIANT_VIEWMOREDETAILS_OFPRODUCT";
    this.VIEWMOREDETAILS_INNERHTML_TEMPLATE="";
    
    /**
     * This is used to store Parent Description_Long extended property, it is set for the first time and for any subsequest request the WS call is not made 
     */
    this.VariantBubble_ParentLongDescription = "";
    
    /**
     * This method will attempt to hide the parent control (if present)
     */
    this.HideParentControl=function() {
        if (this.parentControlID!=null)
        {
            //MM_showHideLayers(this.parentControlID,'','hide');
            if (_ProductBubble_Class.PopUp != null)
            {
                _ProductBubble_Class.PopUp._PopupControlID=this.parentControlID;
                _ProductBubble_Class.PopUp.ShowModal();
            }
        }
    }
    
      /**
       * this method will hide add to bag and show outofstock item if the 
       * item is in stock or out of stock
       *
       */
    this.ManageStock=function(stockWeb) {
        if (AJAX_ENABLE_OUTOFSTOCK==true) {
           var stockqty=parseInt(stockWeb);
           var _bagObj=$get(this.VariantBubble_AddToBagID);
           var _outofstockobj=$get(this.VariantBubble_OutOfStockID);
           //
            var StockTresHold=1;
            try {
              StockTresHold=AJAX_GetTresHoldNumber();
            }
            catch (e) {   }
           //
           if (_outofstockobj!=null) {
              if (stockqty>StockTresHold) {
                
                _bagObj.style.display="";
                _outofstockobj.style.display="none";
              }
              else {
                 _bagObj.style.display="none";
                 _outofstockobj.style.display="";
              
              }
           }
         }
       }
    /**
     * This Method is called when the webservice is done with data retrieval
     * @param {object} result The data that comes into a JASON format from a web service
     */
    this.LoadVariantRequestComplete=function(result) {
        
        this.PopulateData(result);
    }
    
    /**
      * This function is used to populate the Description_Long extended property of Parent Product in Shade Bubble      
      */
    this.LoadVariantParentProductRequestComplete=function(result) {
        if ( result != null ) {
            var longDescription = _ProductBubble_Class.GetPropertyValue(result.Properties,"Description_Long");            
            var prodDescObj = $get(_VariantBubble_Class.VariantBubble_ProductDescID);
            if(prodDescObj != null){               
                prodDescObj.innerHTML = longDescription;
                this.VariantBubble_ParentLongDescription = longDescription;
            }
            
        }    
    }
    /**
     * it resets the quantity to 1 if previously selected and it is not 1
     * 
     */
    this.ResetQuantity=function() {
      try {
                 var _qtyobj=$get( this.VariantBubble_QuantityID);
                 if (_qtyobj!=null)  {
                     for (var i=0; i< _qtyobj.options.length; i++) {
                              var str = _qtyobj.options[i].value;
                              if (str=="1") { 
                                  _qtyobj.options.selectedIndex=i;
                                   break;
                               }
                     }
                 
                 }
          }
        catch (err) {  } 
     }
    /**
     * This Method populates the variant bubble
     * @param {object} result The data that comes into a JASON format from a web service
     */
    this.PopulateData=function(result)  {
        if ( this.VariantBubble_ParentLongDescription == ""){
            // before populating the data we need to make a request on the Parent product data to get the Description_Long extended property
            // and populate the VariantBubble_ProductDesc DIV
            _WebServiceAPI.LoadProduct(result.ParentProductCode,false,_VariantBubble_Class.LoadVariantParentProductRequestComplete);    
        }       
        this.HideParentControl();
        _QuickShop_Class.Hide();
        DoDefault();

        var obj=$get(this.VariantBubble_ImageID);
        if (obj!=null) {
           obj.src=this.VariantBubble_ImagePrefix_LargeShade + this.Code + this.VariantBubble_ImageSuffix_LargeShade;
        }
        var prodnameobj=$get(this.VariantBubble_ProductNameID);
        var prodDescObj = $get(this.VariantBubble_ProductDescID);
        var shadenameobj=$get(this.VariantBubble_VariantNameID);
        var shadenameobj2=$get(this.VariantBubble_VariantNameID2);
        var priceobj=$get(this.VariantBubble_PriceID);
        var viewmoredetailsobj=$get(this.VIEWMOREDETAILS_ID);
        var prodInfo = $get(this.VariantBubble_ProductInfoID);
        if (prodInfo!=null) {
          prodInfo.style.display = "block";
        }
        var confirmMsg = $get(this.VariantBubble_FavConfirmID);
        if (confirmMsg!=null) {
          confirmMsg.innerHTML='';
        }
        
        if (priceobj!=null) {
            priceobj.innerHTML="$ " + result.MainPrice;
        }
        if(prodnameobj!=null) {
            prodnameobj.innerHTML=result.ParentName;
        }
        /* This is not required to be set here any more. See this.LoadVariantParentProductRequestComplete=function(result) 
        if(prodDescObj != null){
            prodDescObj.innerHTML = result.ParentDescription;
        } */
        if(shadenameobj!=null) {
            shadenameobj.innerHTML=result.Name;
        }
        if(shadenameobj2!=null) {
            shadenameobj2.innerHTML=result.Name;
        }
        this.ManageStock(result.StockWeb);
        //handle view more details
       if(viewmoredetailsobj!=null) {
       
         //var strviewmoredetails=viewmoredetailsobj.innerHTML;
          var strviewmoredetails=AJAX_BUBBLE_VARIANT_VIEWDETAIL_TEMPLATE;
            // url rewriting determination
                 var _urlrewritten=""
                 if (result.URLRewrittenHomePage) {
                    if (result.URLRewrittenHomePage!="") {
                      //on this case override the actual url with urlrewriting.
                       strviewmoredetails=AJAX_BUBBLE_VARIANT_VIEWDETAIL_TEMPLATE_URL_REWRITTEN;
                       _urlrewritten=result.URLRewrittenHomePage;
                    }
                 }
                 //
         if (this.VIEWMOREDETAILS_INNERHTML_TEMPLATE=="") {
            this.VIEWMOREDETAILS_INNERHTML_TEMPLATE=strviewmoredetails;//preserve for future clicks
         }
         else {
             strviewmoredetails=this.VIEWMOREDETAILS_INNERHTML_TEMPLATE;
         }
         strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ParentProductCode$$$",result.ParentProductCode);
         strviewmoredetails=strviewmoredetails.replace("$$$AJAX_VariantCode$$$",this.Code);
         strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ProductCategoryCode$$$",result.CategoryPath);
         strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ProductRelativePath$$$",_ProductBubble_Class.GetRelativePath(result.CategoryHomePage));
          // url rewriting replacement
          if (_urlrewritten!="") {
            strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ProductURLRewrittenHomePage$$$",_urlrewritten);
          }
                  //
         viewmoredetailsobj.innerHTML= strviewmoredetails.toString();;
       }
         MM_showHideLayers(this.VariantBubble_DivID,'','show','QuickLook');//revist this part in a better manner!
        _CoreModalPopUp._PopupControlID=this.VariantBubble_DivID;
        _CoreModalPopUp.ShowModal();
       
        //The line below sets the last item shopping Cart Item
        _LastShoppingCartItem.PopulateData(this.Code,result.Name,result.ParentProductCode,result.ParentName,result.MainPrice);
        try {
              _CoreAjaxCoremetrics.CreateProductViewTag(this.Code,result.ParentName + ' - ' + result.Name,result.CategoryCode,result.CategoryName);
           }
        catch (err) {  }   
        
        this.ResetQuantity();
    }

    /**
     * This method is called when add to bag is clicked on the variant bubble,
     * it determines the SKU, quantity and customer ID automatically and passes to a web service
     */
    this.AddSingleProductToCart=function () {
        var ItemQuantity=1;
        ItemQuantity=GetSelectedValue(this.VariantBubble_QuantityID);
        MM_showHideLayers(_VariantBubble_Class.VariantBubble_DivID,'','hide')
        _CoreModalPopUp.Hide();
        //Set the last Item Item Shopping Cart Item Quantity
         _LastShoppingCartItem.ItemQuantity=ItemQuantity;
         //
         CoreAjaxCookie_AddVariant(this.Code); //creeates a cookie to determine the product was added via quick shop
        // call webservice method
        _WebServiceAPI.AddSingleProductToCart (GetCurrentCustomerID(),this.Code,ItemQuantity,_ShoppingCartBubble_Class.AddSingleProductToCartResultHandler)
    }
    
    this.AddToCartFromProductDetails=function(_code,_quantity) {
       this.Code=_code;
        _LastShoppingCartItem.ItemQuantity=_quantity;
         _WebServiceAPI.AddSingleProductToCart (GetCurrentCustomerID(),this.Code,_quantity,_ShoppingCartBubble_Class.AddSingleProductToCartResultHandler)   
    }
}

/*
 * It registers the VariantBubble_Class using registerClass method of MS AJAX Library
 */
 if (IsTypeDefined) { Core.VariantBubble_Class.registerClass('Core.VariantBubble_Class'); }

/*
 * It instantiate an object like Core.VariantBubble_Classthat will be used by other js on the ajax pages
 */
var _VariantBubble_Class=new Core.VariantBubble_Class();








/**
 * @class ProductBubble_Class
 * This class is responsible into managing the Product Bubble Class
 * Please be aware that the properties of this class needs to be overridden based on the case that we will be using.
 * The one which needs to be changed are
 *        this.VariantBubble_ImagePrefix   and    this.VariantBubble_ImageSuffix;
 * The other properties are DHTML Object IDs that needs to be populated with the data.....
 * In case there are other data that needs to be populated, we either need to support on this class or we need to prototype
 * its methods.
 *  this.RowSize=8 is a very important property, it manages how many variants will be shown in one row if
 * the product is a makeup product. It customizes building of shade table.
 */
var _backorderProperty='isBackOrdered';
var _backorderDateProperty='BackOrderDate';
var _productbubbleAddToBagSRC="/img/PU_QS_BTN_AddShppngBg.gif";
var _productbubbleBackOrderSRC="/img/PU_QS_BTN_backorder.gif";
var _productbubblePreOrderSRC="/img/PU_QS_BTN_preorder.gif";

Core.ProductBubble_Class=function() {
      this.DefaultVariantSelected="";
      /* is set true chnage borders instead of src */
      this.SetImageBorders=true;
     
      this.ImageBorderStyleOFF="2px solid #ffffff"
      
      this.ImageBorderStyleON="2px solid #000000"
      
      this.SwitchMainImageToVariant=false;
      /* saves message template */
     this.SavedBackOrderTemplateMessage="";
     /* ID of layer */
     this.SavedBackOrderTemplateMessageID="PRODUCT_BUBBLE_BKORDER_MESSAGE";
     /**
     * This property holds skus as comma delimited and determines to display only skus stored in 
     * the property below example prdcode1,prdcode2,prdcode3,prdcode4
     */
    this.FilterVariantList='';
    /**
     * The DHTML ID of the main layer of the Product bubble
     */
    this.Bubble_DivID="ProductBubble_Div";
    /**
     * The DHTML ID of the Product Image object
     */
    this.Bubble_ImageID="ProductBubble_Image";
    
    this.BubbleMediumShade_ImageID="BubbleMediumShade_ImageID";
    /**
     * The DHTML ID of the Quantity object
     */
    this.Bubble_QuantityID="ProductBubble_Quantity";
    /**
     * The DHTML ID   of the Product price label
     */
    this.Bubble_PriceID="ProductBubble_Price";
    /**
     * The DHTML ID   of the Product Name label
     */
    this.Bubble_ProductNameID="ProductBubble_ProductName";
    
     this.Bubble_ProductNameID2="ProductBubble2_ProductName";
    /**
     * The DHTML ID   of the Product description label
     */
    this.Bubble_ProductDescriptionID="ProductBubble_ProductDescription";
    /**
     * The DHTML ID   of the Variant Name label
     */
    this.Bubble_VariantNameID="ProductBubble_VariantName";
    /**
     * The DHTML ID   of the Add to bag object
     */
    this.Bubble_AddToBagID="ProductBubble_AddToBag"; //not used yet on js code
    
     /**
     * The DHTML ID   of the Out Of Stock Object (Optional);
     */
    this.Bubble_OutOfStockID="ProductBubble_OutOfStock"

    //Small Product Images
    /**
     * Small Image Prefix
     */
    this.Bubble_ImagePrefix_Product_Medium=IMAGES_RELATIVE_OR_ABSOLUTE_PATH + PRODUCT_MEDIUM_IMAGE_PREFIX;
    /**
     * Small Image Suffix
     */
    this.Bubble_ImageSuffix_Product_Medium=PRODUCT_MEDIUM_IMAGE_SUFFIX;

    //Small Shades
    /**
     * small shades prefix
     */
    this.Bubble_ImagePrefix_SmallShade=IMAGES_RELATIVE_OR_ABSOLUTE_PATH + VARIANT_SMALL_SHADE_IMAGE_PREFIX;
    /**
     * small shades suffix
     */
    this.Bubble_ImageSuffix_SmallShade=VARIANT_SMALL_SHADE_IMAGE_SUFFIX;

    //thumbnails
    /**
     * product thumbnails prefix
     */
    this.Bubble_ImagePrefix_MediumShade=IMAGES_RELATIVE_OR_ABSOLUTE_PATH + VARIANT_MEDIUM_SHADE_IMAGE_PREFIX;
    /**
     * product thumbnails suffix
     */
    this.Bubble_ImageSuffix_MediumShade=VARIANT_MEDIUM_SHADE_IMAGE_SUFFIX;

    /**
     * Product Code
     */
    this.Code="";
    /**
     *  The DHTML ID   of the drop down layer that lists all variants
     */
    this.Bubble_LayerDropDownListID="ProductBubble_VariantDropDownList";
    /**
     * The DHTML ID   of the drop down that lists all variants
     */
    this.Bubble_DropDownListID="DropDown_" + this.Bubble_LayerDropDownListID;
    /**
     * The DHTML ID   of small shades layer
     */
    this.ProductBubble_Small_ShadesID="ProductBubble_Small_Shades"
    /**
     * set to tru if has shades else set to false //check any valid property in db ???
     */
    this.IsMakeupProduct=false;
    /**
     * Number of elements per row
     */
    this.RowSize=7;        //Can be Changed
    /**
     * Current Index of the row
     */
    this.CurrentIndex=0;
    /**
     * temporary x postion of the mouse
     */
    this.tempX=0;
    /**
     * temporary y position of the mouse
     */
    this.tempY=0
    /**
     * The DHTML ID   of the variants thumbnail table
     */
    this.Variants_Main_All_Thumbnails='Ajax_Main_Bubble_All_Thumbnail_Shades';
    /**
     * The DHTML ID   of all variants
     */
    this.Variants_ThumbnailDivID='Ajax_allShades_layer';
    /**
     * set to true if multiple prices else set to false
     */
    this.HasMultiplePrices=false;
    /**
     * if all variants same price, this variable will hold the variant price
     */
    this.DistinctPrice=0;
     /**
     * if set to true, price will show on drop down if multiprice items
     */
    this.ShowPriceOnDropDown=false;
    
    this.ProductBubble_FavConfirmID = PRD_FAVORITE_CONFIRM_ID;
    this.ProductBubble_ProductInfoID = PRD_PRODUCT_INFO_ID;
    /**
     * If not null, this will hold a reference to the CoreModalPopup object to use
     * when show/hiding this object
     */
    this.PopUp=null;

    this.VIEWMOREDETAILS_ID="PRODUCT_BUBBLE_VIEWMOREDETAILS";
    this.VIEWMOREDETAILS_INNERHTML_TEMPLATE="";
    this.SelectShadeLabel="selectshadeLabel";
    this.DropDownShadeLabel="DropDownShadeLabel";
    this.DropDownSizeLabel="DropDownSizeLabel";
    //
    this.VIEWMOREDETAILS2_ID="PRODUCT_BUBBLE2_VIEWMOREDETAILS";
    this.VIEWMOREDETAILS_INNERHTML_TEMPLATE2="";
    this.lastClicked=null;
    /**
     * when product bubble is shown, preserve the category code and name
     * in case they are needed for the shades that will be selected from drop down
     * or from the color table of the bubble
     */
    this.CategoryCode="";
    this.CategoryName="";
    this.ProductName="";
    // shade name ext property
    this._ShadeNameExtProp="Shade_Name";
    
    
    /**
     * This Method is called when the webservice is done with data retrieval
     * @param {object} result the data that comes into a JASON format from a web service
     */
    this.LoadProductRequestComplete=function(result) {
        this.PopulateData(result);
    }


    this.ReportSelectedVarToCoremetrics=function() {
    
    
    
    }
     /**
     * This Method is called when the users selects different options in size drop down
     *
     */
    this.SelectItem=function(_varCodeToBeSelected) {
       var priceobj=$get(this.Bubble_PriceID);
        
         //TODO Reset Image if needed later.
        // alert('1');=='undefined'
        if (typeof(_varCodeToBeSelected)!='undefined') {
           if (_varCodeToBeSelected!="") {
                 this.SetVariantDropDownItemSelected(this.Bubble_DropDownListID, _varCodeToBeSelected);
           }
        }
        
        var selectedvalue=this.GetSelectedItem();
        
        if (selectedvalue!="") {
            var sku="";
            var price="";
            var webStock=0;
            var _backOrder="0";
            if (selectedvalue.indexOf("#") != -1){
		            var selectedvalue_array=selectedvalue.split("#");
		            sku=selectedvalue_array[0];
                    price=selectedvalue_array[1];
                    webStock=selectedvalue_array[2];
                    //alert(webStock);
                    _backOrder=selectedvalue_array[3];
                    _backOrderDate=selectedvalue_array[4]
                    //alert(_backOrderDate);
                    this.ManageStock(webStock,_backOrder,_backOrderDate);
                    priceobj.innerHTML="$ " + price;
                    //if make up product with shades
                    //set the color image on
                    //set the image on
                    //set the shade name selected
                    
                   
                    if (this.IsMakeupProduct) { //F.N added on 4/4/2007
                            try {
                                if (this.SetImageBorders==true )
                                {
                                        
                                         var _layerid='SM_' +  sku;
                                         this.SetLayerImageBorders(_layerid);
                                        
                                        
                                 }
                                 else {
                                     var selimg=$get('SM_' +  sku);
                                     if (selimg!=null) {
                                             this.getswapimagesrc(selimg, 'on');
                                     }
                                 }
                            }
                            catch(e) {
                            
                            }
                            try {
                            //set image name on the bubble
                             this.SetVariantImageandName(sku,this.GetSelectedItemText());
                            }
                            catch(e) {
                            
                            }
                    }
	        }
	    }
      }
    
    
      /**
       * this method will hide add to bag and show outofstock item if the 
       * item is in stock or out of stock
       *
       */
       this.ManageStock=function(stockWeb, backOrder, _BackDateMessage) {
         if (AJAX_ENABLE_OUTOFSTOCK==true) {
           var stockqty=parseInt(stockWeb);
           var _bagObj=$get(this.Bubble_AddToBagID);
           var _outofstockobj=$get(this.Bubble_OutOfStockID);
           var _bckordLabelobj=$get(this.SavedBackOrderTemplateMessageID);
            var StockTresHold=1;
            try { //placed try catch to handle any possible error on js because of js file caching, the AJAX_GetTresHoldNumber function was added on 5/29/2007
             StockTresHold=AJAX_GetTresHoldNumber();
            }
            catch (e) {   }
            if (_bckordLabelobj!=null) {
              _bckordLabelobj.style.display="none";
            }
            
           if (_outofstockobj!=null) {
              if (stockqty>StockTresHold) {
                    _bagObj.style.display="";
                    _bagObj.src=_productbubbleAddToBagSRC;
                    _outofstockobj.style.display="none";
              }
              else {
                    //alert(backOrder);
                    if (backOrder=="1" || backOrder=="2") {
                           //show addto bag
                            _bagObj.style.display="";
                            //chnage src
                            if (backOrder=="1") {
                               _bagObj.src=_productbubbleBackOrderSRC;
                            }
                            else {
                              _bagObj.src=_productbubblePreOrderSRC;
                            }
                           //hide stock obj
                            _outofstockobj.style.display="none";
                            //manage message
                           
                            if ( this.SavedBackOrderTemplateMessage=="") {
                               if (_bckordLabelobj!=null) {
                                  this.SavedBackOrderTemplateMessage=_bckordLabelobj.innerHTML;
                               }
                            }
                             if (_bckordLabelobj!=null) {
                                 var _backOrderMessage=this.SavedBackOrderTemplateMessage;
                                _backOrderMessage = _backOrderMessage.replace('$$$backorderdate$$$',_BackDateMessage);
                                _bckordLabelobj.innerHTML=_backOrderMessage;
                                _bckordLabelobj.style.display="";//display as a message.
                            }
                            
                    }
                    else {
                          _bagObj.style.display="none";
                          _outofstockobj.style.display="";
                          _StockNotification.Code=this.GetSelectedVariantCode();
                   }
              
              }         
           }
         }
       }
    
    
     /**
       * this methods set as selected an option of variant drop down.
       * item is in stock or out of stock
       *
       */
     this.SetVariantDropDownItemSelected=function(dropDownID,valueToSelect) {
            var selectedstr=valueToSelect;
            var selectedVal;
            if (selectedstr.indexOf("#") != -1){
		        selectedstr=selectedstr.slice(0,sku.indexOf("#"));
	        }
            var options=document.getElementById(dropDownID)
            if (options!=null) {
                for (var i=0; i< options.length; i++) {
                    var str = options[i].value;
			        str = str.slice(0,str.indexOf("#"));
                    if (str==selectedstr) { //valueToSelect
                        options.selectedIndex=i;
                        selectedVal = options[i].text;
                        break;
                    }
                }
            }
        } 
       
    this.SetVariantImageandName=function(varSku, varName) {
        // change the shade image and shade name
        var imgObj=$get(this.Bubble_ImageID);
        var varNameobj = $get(this.Bubble_VariantNameID);
        //alert(this.Bubble_ImagePrefix_MediumShade + varSku + this.Bubble_ImageSuffix_MediumShade);
        if (this.SwitchMainImageToVariant==true) {
            if (imgObj != null){
                imgObj.src=this.Bubble_ImagePrefix_MediumShade + varSku + this.Bubble_ImageSuffix_MediumShade;
            }
        }
        
        //set medium/large shade if exist
        var _medShadeObj=$get(this.BubbleMediumShade_ImageID);
        if (_medShadeObj != null){
        
                _medShadeObj.src=this.Bubble_ImagePrefix_MediumShade + varSku + this.Bubble_ImageSuffix_MediumShade;
                _medShadeObj.title=varName;
                _medShadeObj.style.display="";
        }
        
        
        if (varNameobj != null)
            varNameobj.innerHTML = varName;
         //report to coremetrics
             try {
                 _CoreAjaxCoremetrics.CreateProductViewTag(varSku, this.ProductName + ' - ' + varName,this.CategoryCode,this.CategoryName);
             }
             catch (err) {  }     
    }
    
    
      /**
     * This Method is called internaly to get the value of selected option
     *
     */
    this.GetSelectedItem=function() {
      var objdrp=$get(this.Bubble_DropDownListID);
      if (objdrp!=null) {
      return objdrp.options[objdrp.selectedIndex].value;
      }
      else {
        return "";
      }
    
    }
   this.GetSelectedItemText=function() {
      var objdrp=$get(this.Bubble_DropDownListID);
      if (objdrp!=null) {
    
      return objdrp.options[objdrp.selectedIndex].text;
      }
      else {
        return "";
      }
    
    }
    
    this.ContainsOneEmptyTextVariant=function() {
         var ContainsOneEmptyVariant=false;
         var objdrp=$get(this.Bubble_DropDownListID);
          if (objdrp!=null) {
              if (objdrp.options.length==1 ) {
                 if (objdrp.options[0].text=='') {
                   ContainsOneEmptyVariant=true;
                 }
              }
         }
        return ContainsOneEmptyVariant;
    }

  this.SetLayerImageBorders=function(_id)
        {
           
            var _obj=$get(_id);
            //alert( _obj.innerHTML);
            if (_obj != null)
            {
                
                if (this.lastClicked != null)
                {
                   //if (this.lastClicked.id==_id) return; //F.N: clicked on the same shade over and over, the if prevent by not changing the img src of the shade.
                   this.lastClicked.style.border=this.ImageBorderStyleOFF;
        	        
                }
                 _obj.style.border=this.ImageBorderStyleON;
                 this.lastClicked=_obj;
           }
                
  }	

this.getswapimagesrc=function(img, imgState)
{
    var imgSrc = '';
    var lastimgSrc = '';
    if (img != null)
    {
        var imgStateOn = "_on.";
        imgSrc = img.src;
        var imgPathAndFileName = imgSrc.slice(0, imgSrc.lastIndexOf(".") + 1);
        var imgFileExtension = imgSrc.slice(imgSrc.lastIndexOf(".") + 1, imgSrc.length);

        if (this.lastClicked != null)
        {
           if (this.lastClicked.src==img.src) return; //F.N: clicked on the same shade over and over, the if prevent by not changing the img src of the shade.
            lastimgSrc = this.lastClicked.src;
            var lastimgPathAndFileName = lastimgSrc.slice(0, lastimgSrc.lastIndexOf(".") + 1);           
            var lastimgFileExtension = lastimgSrc.slice(lastimgSrc.lastIndexOf(".") + 1, lastimgSrc.length);
	        lastimgSrc = lastimgPathAndFileName.slice(0, lastimgPathAndFileName.indexOf(imgStateOn)) + "." + lastimgFileExtension;
	        this.lastClicked.src = lastimgSrc
	        
        }
        if (imgState == 'on')
        {
	        imgSrc = imgPathAndFileName.slice(0, imgPathAndFileName.lastIndexOf(".")) + imgStateOn + imgFileExtension;
	        this.lastClicked = img;
	        img.src = imgSrc;
        }
    }
}	


     /**
     * it resets the quantity to 1 if previously selected and it is not 1
     * 
     */
    this.ResetQuantity=function() {
      try {
                 var _qtyobj=$get( this.Bubble_QuantityID);
                 if (_qtyobj!=null)  {
                     for (var i=0; i< _qtyobj.options.length; i++) {
                              var str = _qtyobj.options[i].value;
                              if (str=="1") { 
                                  _qtyobj.options.selectedIndex=i;
                                   break;
                               }
                     }
                 
                 }
          }
        catch (err) {  } 
     }
    /**
     * populates the product bubble
     * If it belongs to make up, it also builds the shade table with defautl 8 cells in one row.
     * @param {object} result the data that comes into a JASON format from a web service
     */
    this.PopulateData=function(result)  {
        if (result==null) {return false;}
        if (result.Variants==null) {return false;}               //product has no variants
        if (typeof(result)=='undefined') {return false;}
        if (typeof(result.Variants)=='undefined') {return false;} //product has no variants

        //check if the main layer exist. If it does not, return.
        
        var prodBubble=$get(this.Bubble_DivID);
        if ((prodBubble==null) || (prodBubble=='undefined')) {
            alert('The \"' + this.Bubble_DivID + '\" is not found.');
            return;
        }
        
         var _medShadeObj=$get(this.BubbleMediumShade_ImageID);
         if (_medShadeObj!=null) {
             _medShadeObj.style.display="none";
         }

        this.DetermineMultiplePrices(result.Variants);
        _QuickShop_Class.Hide();
        DoDefault();

        var obj=$get(this.Bubble_ImageID);
        var varNameobj = $get(this.Bubble_VariantNameID);
        // if the product is a Makeup product then show the first 
        // product swatch in the product imgage spot
        // add the Variant's Name under the image
        if (this.IsMakeupProduct) {
            _LastShoppingCartItem.IsVariantShade=true;
            // set the variant product image for the first variant
            if (obj!=null) {
               if ( this.SwitchMainImageToVariant==true) {
                  obj.src=this.Bubble_ImagePrefix_MediumShade + result.Variants[0].SKU + this.Bubble_ImageSuffix_MediumShade;
               }
               else {
                  obj.src=this.Bubble_ImagePrefix_Product_Medium + this.Code + this.Bubble_ImageSuffix_Product_Medium;
               
               }
            }
            
            if (varNameobj != null)
                varNameobj.innerHTML = result.Variants[0].Name;  
        }else{
            _LastShoppingCartItem.IsVariantShade=false;
            // show the product image
            // blank out the variant name just in case
            if (obj!=null) {
                obj.src=this.Bubble_ImagePrefix_Product_Medium + this.Code + this.Bubble_ImageSuffix_Product_Medium;
                if (varNameobj != null)
                    varNameobj.innerHTML = "";
            }
        }

        var prodnameobj=$get(this.Bubble_ProductNameID);
        var prodnameobj2=$get(this.Bubble_ProductNameID2);
      
        var priceobj=$get(this.Bubble_PriceID);
        var dropdownlistObj=$get(this.Bubble_LayerDropDownListID);
        var productBubbleSmShadesObj =$get(this.ProductBubble_Small_ShadesID);
        var productdescrobj=$get(this.Bubble_ProductDescriptionID);
        var prodInfo = $get(this.ProductBubble_ProductInfoID);
        if (prodInfo!=null) {
          prodInfo.style.display = "block";
        }
        var confirmMsg = $get(this.ProductBubble_FavConfirmID);
        if (confirmMsg!=null) {
          confirmMsg.innerHTML='';
        }
        
        if (priceobj!=null) {
            //priceobj.innerHTML="$ " + result.MainPrice;
            if (this.DistinctPrice!=0) { //means same price variants
                priceobj.innerHTML="$ " + this.DistinctPrice;
            }
            else { //means multiple prices
                priceobj.innerHTML=""; 
            }
            //
            if(prodnameobj!=null) {
               
                prodnameobj.innerHTML=result.Name;
            }
            //
            if(prodnameobj2!=null) {
                prodnameobj2.innerHTML=result.Name;
            }
            //
            if (productdescrobj!=null) {
               productdescrobj.innerHTML=result.Description;
            }
            //specific to shu
            var _objbubledesc=$get('ShoppingCartBubble_Description');
            if (_objbubledesc!=null) {
                 _objbubledesc.innerHTML=result.Description;
            }
            //
            var labelObj=$get( this.SelectShadeLabel);
            //
            var obj1=$get(this.DropDownShadeLabel);
            //
            var obj2=$get(this.DropDownSizeLabel);
           
            if (productBubbleSmShadesObj!=null) { //products with shades
                if (this.IsMakeupProduct) {
                    
                    if (labelObj!=null) {
                      labelObj.style.display="";
                    }
                    if (obj1!=null) {
                      obj1.style.display="";
                    }
                    if (obj2!=null) {
                      obj2.style.display="none";
                    }
                    
                     productBubbleSmShadesObj.innerHTML=this.GetShadeTableString(result,true);//'Makeup shades go here';
                     productBubbleSmShadesObj.style.display="";
             }
                else { //products with no shades
              
                     if (labelObj!=null) {
                      labelObj.style.display="none";
                     }
                       if (obj1!=null) {
                      obj1.style.display="none";
                    }
                     if (obj2!=null) {
                      obj2.style.display="";
                    }
                    productBubbleSmShadesObj.innerHTML="";
                    productBubbleSmShadesObj.style.display="none";
                }
            }
            
            if (dropdownlistObj!=null) {
                if (result.Variants!=null) {
                    var hasuniqueprices=false;
                    if (this.DistinctPrice!=0) {
                        hasuniqueprices=true;
                    }
                    dropdownlistObj.innerHTML=GenerateDropDownVariants(result.Variants,this.Bubble_DropDownListID,hasuniqueprices,this.ShowPriceOnDropDown,'_ProductBubble_Class.SelectItem();');
                    if (this.ContainsOneEmptyTextVariant()) { //hide if one empty variant with text=""
                       dropdownlistObj.style.visibility='hidden';
                       //hide labels for size and shade name
                        if (obj1!=null) {
                         obj1.style.display="none"; //shade name
                       }
                        if (obj2!=null) {
                          obj2.style.display="none"; //size
                        }
                    
                    }
                    else {
                    dropdownlistObj.style.visibility='visible'; //show the layer of the drop down
                    }
                    //dropdownlistObj.style.display='block';
                }
                else {
                    dropdownlistObj.style.visibility='hidden';
                    dropdownlistObj.style.display='none';
                }
            }
             var viewmoredetailsobj=$get(this.VIEWMOREDETAILS_ID);
             if(viewmoredetailsobj!=null) {
               
                 //var strviewmoredetails=viewmoredetailsobj.innerHTML;
                 var strviewmoredetails=AJAX_BUBBLE_PRODUCT_VIEWDETAIL_TEMPLATE;
                 // url rewriting determination
                 var _urlrewritten=""
                 if (result.URLRewrittenHomePage) {
                    if (result.URLRewrittenHomePage!="") {
                      //on this case override the actual url with urlrewriting.
                       strviewmoredetails=AJAX_BUBBLE_PRODUCT_VIEWDETAIL_TEMPLATE_URL_REWRITTEN;
                       _urlrewritten=result.URLRewrittenHomePage;
                    }
                 }
                 //
                 if (this.VIEWMOREDETAILS_INNERHTML_TEMPLATE=="") {
                    this.VIEWMOREDETAILS_INNERHTML_TEMPLATE=strviewmoredetails;//preserve for future clicks
                 }
                 else {
                     strviewmoredetails=this.VIEWMOREDETAILS_INNERHTML_TEMPLATE;
                 }
                  strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ParentProductCode$$$",this.Code);
                  strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ProductCategoryCode$$$",result.CategoryPath);
                  strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ProductRelativePath$$$",this.GetRelativePath(result.CategoryHomePage));
                  // url rewriting replacement
                  if (_urlrewritten!="") {
                     strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ProductURLRewrittenHomePage$$$",_urlrewritten);
                  }
                  //
                  viewmoredetailsobj.innerHTML= strviewmoredetails.toString();
                  //
               }
              //Populate some of the LastShoppingCartItem object properties, be sure to handle the price upon the addtobag item
              _LastShoppingCartItem.PopulateData("","",this.Code,result.Name,this.DistinctPrice);
              //report coremetrics for the product
              //save category name and code for the shades of product if clicked
              this.CategoryCode=result.CategoryCode;
              this.CategoryName=result.CategoryName;
              this.ProductName=result.Name;
              try {
                  _CoreAjaxCoremetrics.CreateProductViewTag(this.Code,result.Name,result.CategoryCode,result.CategoryName);
              }
              catch (err) {  }   
           // if (this.DistinctPrice==0){
           //alert(this.DefaultVariantSelected);
                    this.SelectItem(this.DefaultVariantSelected);//set the first item as selected
           // }
            //MM_showHideLayers( this.Bubble_DivID,'','show','QuickLook'); //????
             $get(this.Bubble_DivID).style.visibility='visible'
            _CoreModalPopUp._PopupControlID=this.Bubble_DivID;
            _CoreModalPopUp.ShowModal();
            
             this.ResetQuantity(); //reset qty to one if reviously selected 2,3
           
        }
    }

    /**
     * determines if all variants has the same exact price or a diffrent one. It will be needed the way
     * variants are displayed
     * @param {object} _Variants the data that comes into a JASON format from a web service
     */
    this.DetermineMultiplePrices=function(_Variants) {
        this.DistinctPrice=0;
        this.HasMultiplePrices=false;
        var ComparePrice =-1;

        for(var i=0; i<_Variants.length; i++){
            if(_Variants[i].MainPrice !=ComparePrice &&  i > 0) {
                this.HasMultiplePrices=true;
                break;
            }
            ComparePrice=_Variants[i].MainPrice;
        }

        if (!this.HasMultiplePrices) {
            this.DistinctPrice=ComparePrice;
        }
    }

    /**
     * it manages to build up the shade table
     * @param {object} ProductObject the data that comes into a JASON format from a web service
     */
    this.DisplayShadeTable=function(ProductObject) {
        if (ProductObject.Result!=null  && ProductObject.Result.Variants!=null) {
            // Show Modal Popup?
            /*
            if (this.PopUp != null)
            {
                this.PopUp._PopupControlID = this.Variants_Main_All_Thumbnails;
                this.PopUp.ShowModal();
            }
             */
            var innerHTMlString = this.GetShadeTableString(ProductObject.Result,false);
           // var obj = $get(this.Variants_Main_All_Thumbnails);
           var obj = $get(this.Variants_ThumbnailDivID);
           
            if (obj!=null) {
                //alert(innerHTMlString);
                obj.innerHTML=innerHTMlString; 
            }
            var prodnameobj2=$get(this.Bubble_ProductNameID2);

            if(prodnameobj2!=null) {
                prodnameobj2.innerHTML= ProductObject.Result.Name;
            }
            //href
            var viewmoredetailsobj=$get(this.VIEWMOREDETAILS2_ID);
             if(viewmoredetailsobj!=null) {
       
                 //var strviewmoredetails=viewmoredetailsobj.innerHTML;
                 var strviewmoredetails=AJAX_BUBBLE_PRODUCTTHUMBNAIL_VIEWDETAIL_TEMPLATE;
                   // url rewriting determination
                 var _urlrewritten=""
                 if (ProductObject.Result.URLRewrittenHomePage) {
                    if (ProductObject.Result.URLRewrittenHomePage!="") {
                      //on this case override the actual url with urlrewriting.
                       strviewmoredetails=AJAX_BUBBLE_PRODUCTTHUMBNAIL_VIEWDETAIL_TEMPLATE_URL_REWRITTEN;
                       _urlrewritten=ProductObject.Result.URLRewrittenHomePage;
                    }
                 }
                 //
                 if (this.VIEWMOREDETAILS_INNERHTML_TEMPLATE2=="") {
                    this.VIEWMOREDETAILS_INNERHTML_TEMPLATE2=strviewmoredetails;//preserve for future clicks
                 }
                 else {
                     strviewmoredetails=this.VIEWMOREDETAILS_INNERHTML_TEMPLATE2;
                 }
                  strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ParentProductCode$$$",this.Code);
                  strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ProductCategoryCode$$$",ProductObject.Result.CategoryPath);
                  strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ProductRelativePath$$$",this.GetRelativePath(ProductObject.Result.CategoryHomePage));
                  // url rewriting replacement
                  if (_urlrewritten!="") {
                     strviewmoredetails=strviewmoredetails.replace("$$$AJAX_ProductURLRewrittenHomePage$$$",_urlrewritten);
                  }
                  //
                  viewmoredetailsobj.innerHTML= strviewmoredetails.toString();
             }
            //coremetrics for product view
              this.CategoryCode=ProductObject.Result.CategoryCode;
              this.CategoryName=ProductObject.Result.CategoryName;
              this.ProductName=ProductObject.Result.Name;
              try {
                  _CoreAjaxCoremetrics.CreateProductViewTag(this.Code,ProductObject.Result.Name,ProductObject.Result.CategoryCode,ProductObject.Result.CategoryName);
              }
              catch (err) {  }  
            
            //
            this.ShowShades();
        }
    }
    
    
     /**
     * builds path for product details page from category page
     * @path {string} 
     */
    this.GetRelativePath=function(path) {
       //alert(path);
       var rel_path=path.toLowerCase();
       var path_array=path.split("/");
       if (path_array[path_array.length-1].indexOf(".") != -1){
        // rel_path=rel_path.replace(path_array[path_array.length-1],"")
         rel_path=rel_path.replace(".aspx","/");
       
       }
       return rel_path
    }
    
 
   // this.SetDefaultVariant=function() {
      // var _imglayerid="SM_" + VariantsToBeDisplayed[i].SKU;
       //if (this.SetImageBorders==true) { 
                                                 
          // this.SetLayerImageBorders( _imglayerid);
          // this.SetVariantDropDownItemSelected(this.Bubble_DropDownListID, VariantsToBeDisplayed[i].SKU );
          // this.SetVariantImageandName(VariantsToBeDisplayed[i].SKU,this.GetSelectedItemText());
          // this.ManageStock(_stock,_backorder,_backDate);
          
    
    //}
    /**
     * it manages to build up the string of the shade table
     * please be aware that this method uses the javascript
     * string builder class to improve the performance vs the regular string concatination
     * @param {object} result the data that comes into a JASON format from a web service
     * @param {bool} SmallShadesWanted true or false, if true, we build the thumbnails
     */
    this.GetShadeTableString=function(result,SmallShadesWanted) {
        if (result!=null  && result.Variants!=null) {
            var VariantsToBeDisplayed=result.Variants;
            var CurrentRowNumber=0;
            var CurrentCellInCurrentRow=0;
            var sb = new StringBuilder();
            var HasShadeSubGroup=false;
            var StartSubGroupConst='$#Begin#$';
            var PreviousSubGroupValue=StartSubGroupConst;
              var swatchW;
              var swatchH;
              if (SmallShadesWanted) {
                    swatchW=VARIANT_SMALL_SHADE_WIDTH;
                    swatchH=VARIANT_SMALL_SHADE_HEIGHT;
              }
              else {
              
                    swatchW=VARIANT_MEDIUM_SHADE_WIDTH;
                    swatchH=VARIANT_MEDIUM_SHADE_HEIGHT;
              }
            
            //alert(VariantsToBeDisplayed.Properties);
            if (typeof(SHADE_SUB_GROUP_FLD)!='undefined' || SHADE_SUB_GROUP_FLD!='') {
                   HasShadeSubGroup=true;
                   //sb.append("<table border=0 cellspacing=1 cellpadding=1 width='100%'><tr><td colspan='2'><div class='BL_pink1px'></div></td></tr><tr><td  valign=\"top\" align=\"left\" width=\"50\"  style=\"padding-left: 10px; padding-top: 10px; padding-right: 50px;\">");
                   sb.append("<div style=\"width:240px\" class=\"margin03_T padding05_L padding03_T padding02_B\">");
                     sb.append("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
                            sb.append("<tr>");
                                sb.append("<td>");
            }
            else {
                    //sb.append("<table border=0 cellspacing=1 cellpadding=1><tr>");
                     sb.append("<div style=\"width:240px\" class=\"margin03_T padding05_L padding03_T padding02_B\">");
                        sb.append("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
                            sb.append("<tr>");
                                sb.append("<td>");
            }
           
            var filter= this.FilterVariantList; //
            for(var i=0; i<VariantsToBeDisplayed.length; i++) {
            // if ((filter=='') || (filter.indexOf(VariantsToBeDisplayed[i].SKU)) !=-1)) {
              if (filter=='' || filter.indexOf(VariantsToBeDisplayed[i].SKU)!=-1) {
               if (HasShadeSubGroup==true) {
              //subgrouping get value
                       var currenSubGroupValue="";
                       currenSubGroupValue=this.GetPropertyValue(VariantsToBeDisplayed[i].Properties,SHADE_SUB_GROUP_FLD)
                //alert(currenSubGroupValue);
                //subgrouping build table
                if (PreviousSubGroupValue!=currenSubGroupValue && HasShadeSubGroup==true) {
                
                        if (PreviousSubGroupValue!=StartSubGroupConst) { //close subgrouping
                           // if (CurrentRowNumber>0 && CurrentCellInCurrentRow<this.RowSize) {
                           //     for(var k=CurrentCellInCurrentRow; k<this.RowSize; k++)
                           //     {
                           //         sb.append("<td><img src=\"" + SPACER_IMAGE + "\"" + " width=\"" + swatchW + "\" height=\"" +swatchH + "\" border=\"0\"></td>");
                                   
                           //     }
                           //  }
                            //sb.append("</tr></table>11</div></td></tr></table></div>" );
                           // sb.append("</tr></table></div></td></tr><tr><td colspan='2'><div class='BL_pink1px'></div></td></tr><td valign=\"top\" align=\"left\" width=\"50\" style=\"padding-left: 10px; padding-top: 10px; padding-right: 50px;\">" );
                                                            sb.append("</tr>");
                                                     sb.append("</table>");
                                                sb.append("</div>");
                                            sb.append("</td>");
                                       sb.append("</tr>");
                               sb.append("</table>");
                          sb.append("</div>");
                           sb.append("<div style=\"width:240px\" class=\"margin03_T padding05_L padding03_T padding02_B\">");
                                sb.append("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
                                    sb.append("<tr>");
                                         sb.append("<td>");
                        
                        }
                        sb.append("<div style=\"width:65px\" class=\"float_L A_80GREY_10R\">"+ currenSubGroupValue + "</div>" );
                             sb.append("<div style=\"width:170px\" class=\"float_L\">" );
                                        sb.append("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">" );
                                          sb.append("<tr>" );
                                            sb.append("<td>" );
                       
                       // sb.append("<div style='margin-left:0px' class=\"A_80GREY_10R\" >" );
                       // sb.append(currenSubGroupValue);
                       // sb.append("</div></td><td align=\"left\" style=\"padding-right: 20px;\">" );
                       // sb.append("<div class=\"Adrkpink10pxR\"><table border=0 cellspacing=1 cellpadding=1><tr>");
                        CurrentRowNumber+=1;
                        CurrentCellInCurrentRow=0;
                        PreviousSubGroupValue=currenSubGroupValue;
                
                    }
                 }
               
                //CurrentCellInCurrentRow = i -  CurrentRowNumber * this.RowSize - this.CurrentIndex;
               
               // if (CurrentCellInCurrentRow >= this.RowSize ) {
               //     sb.append("</tr><tr>");
               //     CurrentRowNumber+=1;
               //     CurrentCellInCurrentRow=0;
               // }
            
                if (SmallShadesWanted) {
                   
                                           var _backorder="0";
                                           //_backorder=GetBackOrderProperty(VariantsToBeDisplayed[i]);
                                           _backorder=this.GetPropertyValue(VariantsToBeDisplayed[i].Properties,_backorderProperty);
                                           _shadeNamextprop=this.GetPropertyValue(VariantsToBeDisplayed[i].Properties,this._ShadeNameExtProp);
                                           var _varNametoBeDisplayed=VariantsToBeDisplayed[i].Name;
                                           if (_shadeNamextprop!="" ) {
                                              _varNametoBeDisplayed=_varNametoBeDisplayed + " - " + _shadeNamextprop;
                                           }
                                           //sb.append("<td>");
                                           //sb.append("<img id='SM_" + VariantsToBeDisplayed[i].SKU +"' src='" + this.Bubble_ImagePrefix_SmallShade + VariantsToBeDisplayed[i].SKU +  this.Bubble_ImageSuffix_SmallShade + "' onclick=\"javascript:_ProductBubble_Class.getswapimagesrc(this,'on');_ProductBubble_Class.SetVariantDropDownItemSelected('" + this.Bubble_DropDownListID + "','" + VariantsToBeDisplayed[i].SKU + "');_ProductBubble_Class.SetVariantImageandName('" + VariantsToBeDisplayed[i].SKU + "', _ProductBubble_Class.GetSelectedItemText());_ProductBubble_Class.ManageStock(" + VariantsToBeDisplayed[i].StockWeb.toString() +",'" + _backorder + "');\" style=\"cursor:pointer\""  + " width=\"" + swatchW + "\"  height=\"" +swatchH + "\"" + "alt=\"" + VariantsToBeDisplayed[i].Name + "\">");
                                          //sb.append("</td>");  
                                           var _backDate="";
                                           _backDate=this.GetPropertyValue(VariantsToBeDisplayed[i].Properties,_backorderDateProperty);
                                           if (this.SetImageBorders==true) { 
                                                 var _imglayerid="SM_" + VariantsToBeDisplayed[i].SKU;
                                                 sb.append("<div class=\"PU_QS_Swtch_Cntnr\"><img id='SM_" + VariantsToBeDisplayed[i].SKU +"' src='" + this.Bubble_ImagePrefix_SmallShade + VariantsToBeDisplayed[i].SKU +  this.Bubble_ImageSuffix_SmallShade + "' onclick=\"javascript:_ProductBubble_Class.SetLayerImageBorders('" + _imglayerid +"');_ProductBubble_Class.SetVariantDropDownItemSelected('" + this.Bubble_DropDownListID + "','" + VariantsToBeDisplayed[i].SKU + "');_ProductBubble_Class.SetVariantImageandName('" + VariantsToBeDisplayed[i].SKU + "', _ProductBubble_Class.GetSelectedItemText());_ProductBubble_Class.ManageStock(" + VariantsToBeDisplayed[i].StockWeb.toString() +",'" + _backorder + "','" + _backDate + "');\" style=\"cursor:pointer\""  + " width=\"" + swatchW + "\"  height=\"" + swatchH + "\"" + "alt=\"" + _varNametoBeDisplayed +  "\" title=\"" + _varNametoBeDisplayed + "\" style=\"border:" + this.ImageBorderStyleOFF + "\"></div>");

                                                }
                                           else {
                                                sb.append("<div class=\"PU_QS_Swtch_Cntnr\"><img id='SM_" + VariantsToBeDisplayed[i].SKU +"' src='" + this.Bubble_ImagePrefix_SmallShade + VariantsToBeDisplayed[i].SKU +  this.Bubble_ImageSuffix_SmallShade + "' onclick=\"javascript:_ProductBubble_Class.getswapimagesrc(this,'on');_ProductBubble_Class.SetVariantDropDownItemSelected('" + this.Bubble_DropDownListID + "','" + VariantsToBeDisplayed[i].SKU + "');_ProductBubble_Class.SetVariantImageandName('" + VariantsToBeDisplayed[i].SKU + "', _ProductBubble_Class.GetSelectedItemText());_ProductBubble_Class.ManageStock(" + VariantsToBeDisplayed[i].StockWeb.toString() +",'" + _backorder + "','" + _backDate + "');\" style=\"cursor:pointer\""  + " width=\"" + swatchW + "\"  height=\"" + swatchH + "\"" + "alt=\"" + _varNametoBeDisplayed +  "\" title=\"" + _varNametoBeDisplayed +"\"></div>");
                                           //sb.append("<div class=\"PU_QS_Swtch_Cntnr\"><img src=\"/img/FPO_15x15_SWTCH_OFF.gif\" /></div>");        
                                           }
                }
                else {
                                         // sb.append("<td><img id='A_" + VariantsToBeDisplayed[i].SKU +"' src='" +  this.Bubble_Thumbnail_ImagePrefix + VariantsToBeDisplayed[i].SKU +  this.Bubble_Thumbnail_ImageSuffix + "'       onmouseover=\"javascript:_QuickShop_Class.ShowByObjectPosition(this,'" + VariantsToBeDisplayed[i].SKU +"',true,5,5);\" style=\"cursor:pointer;\"  width=\"100\" height=\"100\"></td>");
                                         // sb.append("<td><img id='A_" + VariantsToBeDisplayed[i].SKU +"' src='" +  this.Bubble_ImagePrefix_MediumShade + VariantsToBeDisplayed[i].SKU +  this.Bubble_ImageSuffix_MediumShade + "'       onmouseover=\"javascript:_QuickShop_Class.ShowByObjectPosition(this,'" + VariantsToBeDisplayed[i].SKU +"',true,5,5);\" style=\"cursor:pointer;\""  + " width=\"" + swatchW + "\"  height=\"" +swatchH + "\"></td>");
                                         sb.append("<td valign=\"top\">");
                                         if (VariantsToBeDisplayed[i].RecommendedByDiag == true)
                                         {
                                             sb.append("<div align=\"center\"><img src=\"" + DIAG_RECOMMENDATION_IMAGE + "\" width=\"" + DIAG_RECOMMENDATION_IMAGE_WIDTH + "\" height=\"" + DIAG_RECOMMENDATION_IMAGE_HEIGHT + "\" border=\"0\" alt=\"" + DIAG_RECOMMENDATION_IMAGE_ALT + "\" /></div>");
                                         }
                                         else
                                         {
                                             sb.append("<div align=\"center\"><img src=\"" + SPACER_IMAGE + "\"" + " width=\"" + DIAG_RECOMMENDATION_IMAGE_WIDTH + "\" height=\"" +DIAG_RECOMMENDATION_IMAGE_HEIGHT + "\" border=\"0\"></div>");
                                         }
                                         sb.append("<img id='A_" + VariantsToBeDisplayed[i].SKU +"' src='" +  this.Bubble_ImagePrefix_MediumShade + VariantsToBeDisplayed[i].SKU +  this.Bubble_ImageSuffix_MediumShade + "'       onmouseover=\"javascript:_QuickShop_Class.parentControlID='" + this.Variants_Main_All_Thumbnails + "';_QuickShop_Class.ShowIcon(this,'" + VariantsToBeDisplayed[i].SKU +"',true,5,5,true," +  VariantsToBeDisplayed[i].StockWeb.toString() + ");\" style=\"cursor:pointer;\""  + " width=\"" + swatchW + "\"  height=\"" +swatchH + "\"" + "alt=\"" + VariantsToBeDisplayed[i].Name + "\"><div align=\"center\" class=\"Ablack9pxRLH\">" + VariantsToBeDisplayed[i].Name  + "</div>");
                                         sb.append("</td>");
                }
                 CurrentCellInCurrentRow+=1;
             }
            }
             //end of for loop
             //if (CurrentRowNumber>0 && CurrentCellInCurrentRow<this.RowSize) {
                   // for(var i=CurrentCellInCurrentRow; i<this.RowSize; i++)
                   // {
                       // sb.append("<td>&nbsp;</td>");
                   //    sb.append("<td><img src=\"" + SPACER_IMAGE + "\"" + " width=\"" + swatchW + "\" height=\"" +swatchH + "\" border=\"0\"></td>");
                                   
                   // }
             //}
             //
             //sb.append("</tr></table>");
             
             //
             // if (HasShadeSubGroup) {
                                          //sb.append("</div></td></tr></table></div></td></tr></table>" );
                                                         sb.append("</tr>");
                                                     sb.append("</table>");
                                                sb.append("</div>");
                                            sb.append("</td>");
                                       sb.append("</tr>");
                               sb.append("</table>");
                          sb.append("</div>");
             //}
             if (CurrentRowNumber>5) {
               _CoreModalPopUp._IsforegroundElementLarge=true;
             }
             else {
               _CoreModalPopUp._IsforegroundElementLarge=false;
             }
             //alert(sb.toString());
            return sb.toString();
        }
        return "";
    }

    /**
     * set the shade table visible
     */
    this.ShowShades=function () {
        var obj= $get(this.Variants_Main_All_Thumbnails);
        
        if (obj!=null) {
            obj.style.visibility='visible';
            _CoreModalPopUp._IsforegroundElementLarge=true;
            _CoreModalPopUp._PopupControlID=this.Variants_Main_All_Thumbnails;
            _CoreModalPopUp.ShowModal();

            var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
            var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
            scrollLeft=scrollLeft+(document.documentElement.offsetWidth-obj.children[0].offsetWidth)/2;
            scrollTop=(document.documentElement.offsetHeight-obj.children[0].offsetHeight)/2;
            
            obj.style.visibility='visible';
            obj.style.top=scrollTop + "px";
            obj.style.left=scrollLeft +"px";
            // obj.style.top=this.tempY + "px";
            // obj.style.left=this.tempX +"px";
        }
    }

    /**
     * hides shades/variants
     */
    this.HideShades=function() {
        var obj= $get(this.Variants_Main_All_Thumbnails);
        if (obj!=null) {
            obj.style.visibility='hidden';
        }
        
        if (this.PopUp != null)
        {
            this.PopUp.Hide();
        }
        
        _QuickShop_Class.Hide();
    }

    /**
     * saves the current cursor coordinates when clicked on a particular link
     * needed when we want to display the bubble relative with cursor position clicked
     */
    this.LockCoordinates=function() {
        this.tempX=GetMouseCoordinateX();
        this.tempY=GetMouseCoordinateY();
    }

     /**
     * returns the current variant code from the drop down.
     * 
     */
    this.GetSelectedVariantCode=function() {
     
         var ItemCode="";
             ItemCode=GetSelectedValue(this.Bubble_DropDownListID);
           if(ItemCode!=null) {
               if(ItemCode!="") {
                   if (ItemCode.indexOf("#") != -1){
                      var my_array=ItemCode.split("#");
                      itemPrice=my_array[1];
		              ItemCode=my_array[0]; 
	               }
	            }
	       }
	       return ItemCode;
     }
    /**
     * Adds an item in the bag, the function determines the selected sku and calls the webservice method
     * to add item to the bag
     */
    this.AddSingleProductToCart=function () {
         var ItemQuantity=1;
         ItemQuantity=GetSelectedValue(this.Bubble_QuantityID);
         var ItemCode="";
         var itemPrice=0;
         ItemCode=GetSelectedValue(this.Bubble_DropDownListID);
           if(ItemCode!=null) {
               if(ItemCode!="") {
                   if (ItemCode.indexOf("#") != -1){
                      var my_array=ItemCode.split("#");
                      itemPrice=my_array[1];
		              ItemCode=my_array[0]; 
	    	          
	    	          //alert(itemPrice);
		              //alert(ItemCode);
	               }
	            }
	       }
	      var variantName=GetSelectedText(this.Bubble_DropDownListID);
          //alert(ItemCode);
          MM_showHideLayers(this.Bubble_DivID,'','hide') 
          //set shopping cart last item properties
          _LastShoppingCartItem.ItemQuantity=ItemQuantity; //save the quantity for later retrival
          _LastShoppingCartItem.ItemCode=ItemCode;         //save variant code
          _LastShoppingCartItem.ItemPrice=0;
          _LastShoppingCartItem.ItemName=variantName;
          if (itemPrice!=0) {
              _LastShoppingCartItem.ItemPrice=itemPrice; 
          }
       // hide modal
        _CoreModalPopUp.Hide();
        //adds the var code to cookie to determine for coremetrics on checkout coming from quick shop
        CoreAjaxCookie_AddVariant(ItemCode);
        //call web service methods
        _WebServiceAPI.AddSingleProductToCart (GetCurrentCustomerID(),ItemCode,ItemQuantity,_ShoppingCartBubble_Class.AddSingleProductToCartResultHandler)
    }
    
    /**
     * This function is used to return the Extended property value from the Properties array in JASON     
     */
     this.GetPropertyValue = function(Properties,Name){
        //alert(Properties.length);
        if ( Properties == null ) {return "";}
        if ( Name == null ) {return "";}
        for(var j=0; j<Properties.length; j++) {
            if (Properties[j].Name.toLowerCase()==Name.toLowerCase()) {
              return Properties[j].Value;
             // alert(Name);
              break;
            }
        }
        return "";           
     }
    
    
    
}

/**
 * It registers the ProductBubble_Class using registerClass method of MS AJAX Library
 */
 if (IsTypeDefined) { Core.ProductBubble_Class.registerClass('Core.ProductBubble_Class'); }

/*
 * It instantiates an object like ProductBubble_Class that will be used by other js on the ajax pages
 */
var _ProductBubble_Class=new Core.ProductBubble_Class();