//ECube.d.setLogLevel(3);

// Deze functie bepaalt wat er gebeurt als er op de knop 
// met id showErezZoomViewer geklikt wordt. De functie
// ShowZoomDivListener wordt aangeroepen. In de producttemplate
// kun je in de functie ShowV1Images bepalen wat-ie precies doet
var ShowZoomDivListener = function(eventObject){
    return true;
};
ECube.registerOnLoadFunction(function(e){
    // in denham there might not be a zoom viewer
    var button = $('showErezZoomViewer');
    var image = $('showErezZoomViewer_Image');
    if(button){
        ECube.d.log(2, "Setting ShowZoomDivListener as listener for ", button);
        button.observe('click', function(eventObject){
            return ShowZoomDivListener(eventObject);
        });
    };
    if(image){
        ECube.d.log(2, "Setting ShowZoomDivListener as listener for ", image);
        image.observe('click', function(eventObject){
            return ShowZoomDivListener(eventObject);
        });
    };
})




/*******************************************************************************************

    ProductVariations
     
*******************************************************************************************/







// do the initial declaration.. we still expect the object to be filled on time of the dom:loaded
var ProductColorVariations = $H();
// no prototyping because we can only do this once each page
var ProductColorVariationsObj = {
 variationValues: $H(),
 currentColor: '',
 initialize: function(variationValues){

     ECube.d.log(2, "Running initialize method of ProductColorVariationsObj object");
     ProductColorVariationsObj.variationValues = variationValues;
     // als we maten op de pagina vinden, gaan we daarvoor events attachen
     console.log("variaties object",variationValues);
     if($('product_size')) { 
         if(!$('product_color')) ProductColorVariationsObj.currentColor = ProductColorVariationsObj.variationValues.keys()[0];
          console.log("currentColor: ",ProductColorVariationsObj.currentColor);
         $('product_size').observe('change',ProductColorVariationsObj._evt_sizeChange); 
         $('product_size').observe('variation:change',ProductColorVariationsObj._evt_sizeChange); 
     }
     // als we kleuren op de pagina vinden, gaan we daarvoor events attachen
     if($('product_color')) { 
         $('product_color').observe('change',ProductColorVariationsObj._evt_colorChange); 
         $('product_color').observe('variation:change',ProductColorVariationsObj._evt_colorChange); 
         $('product_color').fire('variation:change');
     }
 },
 _evt_colorChange: function(eventObject){
     ECube.d.log(2, "Running _evt_colorChange listener function");
     // de vraag was de kleur te veranderen
     // indien de kleur niet is ingevuld moeten de selectboxes worden gereset
     if(!$F(this)||$F(this)=='__NULL__') { 
         if($('product_size')) $('product_size').options.length = 1;
         ProductColorVariationsObj._propagateProduct(null,false);
         return;
     } 
     
     ECube.d.log(2, "A product has been selected");
     // store the size that was originally selected, if any, so we can
     // select it again, if possible
     var previouslySelectedSize = null;
     var sizeDropdown = $('product_size');
     if(sizeDropdown){
          previouslySelectedSize = $(sizeDropdown.options[$('product_size').selectedIndex]).innerHTML;
     };
     
     // a new color is a new top level product, not a variation
     ProductColorVariationsObj.currentColor = $F(this).replace(/\-\d*$/,'');
     var product = ProductColorVariationsObj.variationValues.get(ProductColorVariationsObj.currentColor);
     
     if(! product){
         ECube.d.log(0, 'In _evt_colorChange without a product');
         return false; // shouldn't happen, of course
     }
     
     var productToLoad = product; // can also be a size variation, if it turns out there is one
     var productInSameSizeExists = false;
     // fill the size dropdown with sizes for the newly selected product
     if(sizeDropdown){

         sizeDropdown.options.length = 1; // clear the dropdown
         product.ProductSizeVariations.each(function(size){
             var opt = new Element('option',{
                 value: size.ProductNo
             });
             if(size.maatValueExtended == previouslySelectedSize){
                 opt.selected = true;
                 productToLoad = size;
                 productInSameSizeExists = true;
             };
             opt.update(size.maatValueExtended);
             sizeDropdown.appendChild(opt);
         });
         
         // reset the size dropdown if no previous size exists
         if(! productInSameSizeExists){
             for(var i = 0; i < sizeDropdown.options.length ; i++){
                 sizeDropdown.options[i].selected = false;
             };
             sizeDropdown.options[0].selected = true;
         };
         
         sizeDropdown.fire('variation:change');
     }

     ProductColorVariationsObj._propagateProduct(productToLoad,true);
 },
 _evt_sizeChange: function(eventObject){
  console.log("in _evt_sizeChange", eventObject);
     // kennelijk is de maat veranderd, we gaan het product bij deze maat opzoeken
     var product = ProductColorVariationsObj.variationValues.get(ProductColorVariationsObj.currentColor).ProductSizeVariations.find(function(elem){
         return (elem.ProductNo == $F(this));
     },this);
     // update de pagina met de huidige variatie
     ProductColorVariationsObj._propagateProduct(product,false);
 },
 _propagateProduct: function(product, updateImages){
     if(! product) {
         ECube.d.log(0, "_propagateProduct called without product");
     }
     ECube.d.log(2, "Running _propagateProduct for product ", product, " with updateImages set to ", updateImages);
     $$('.ProductGrossPrice').invoke('update',product.Alt_ProductGrossPrice);
     // update the add to basket url
     $$('.urlHasProduct').each(function(elem){
         ECube.d.log(3, "Updating  add to basket link ", elem);
            // update the add to basket url
         // in some rare cases an incomplete url ends up in href which then causes
         // trouble in the order process. so make sure we either have no url at all
         // or one that is certainly valid
         var url = elem.readAttribute('href')
         elem.writeAttribute('href', '');
            var replacement = '/Offer/AddProduct/' + product.ProductNo;
         url = url.replace(/\/Offer\/AddProduct\/[\d\-]+/, replacement);
         elem.writeAttribute('href',url);
         
         if(product.ProductIsInBasket){
             elem.addClassName('ProductIsInBasket');
         }
         else {
             elem.removeClassName('ProductIsInBasket');
         };
     });

     try {
         if(updateImages){
             ECube.d.log(2, "Image must be updated");
             ShowV1Images(product)
         };
     } catch(err) {
         ECube.d.log(0, "Fout (bij aanroep ShowV1Images): ", err);
     };
 }
};

// this allows us to set a multi language tle as the error message (by overruling)
ProductColorVariationsObj.noProductSelectedMessage = 'Selecteer een kleur of maat a.u.b.';

// We do not want to mess with EpagesShop.miniBasket.addToBasket itself as that
// is used for all sorts of different addtobasket links. The check whether
// we can add the current product to the basket (ie whether it has a size and a color)
// can be done in the canSubmitToBasketFunction of the relevant link
ProductColorVariationsObj.canSubmitToBasketFunction = function(eventObject){
    // console.log("clicked on by ", $(this));
     if(!((!$('product_color')||$F('product_color')!='__NULL__') && (!$('product_size')||$F('product_size')!='__NULL__'))){
         alert(ProductColorVariationsObj.noProductSelectedMessage);
         window.event? event.returnValue = false : eventObject.preventDefault(); /* IE : standards */
         return false;
     }
     if(this.hasClassName('ProductIsInBasket')) {
         window.event? event.returnValue = false : eventObject.preventDefault(); /* IE : standards */
         return false;
     }
     // HACK for some reason it is possible to end up with links that are not
     // variation products but main level products. this can't possibly be correct
     var url = this.href;
     if(! url){
         window.event? event.returnValue = false : eventObject.preventDefault(); /* IE : standards */
         return false;
     };
     if(! url.match(/AddProduct\/\d+\-\d+/)){
         console.log('we have an invalid url: ', url);
         window.event? event.returnValue = false : eventObject.preventDefault(); /* IE : standards */
         return false;
     };
     this.addClassName('ProductIsInBasket');
     return true;
};
ECube.registerOnLoadFunction(function(e){
    $$('a.mustCheckIfColorAndSizeAreSelected').each(function(linkObj){
        // for links that submit to the mini basket, set a function that will
        // be checked by EpagesShop.miniBasket.addToBasket before submitting
        if( linkObj.hasClassName('addtobasket')){
            linkObj['canSubmitToBasketFunction'] = ProductColorVariationsObj.canSubmitToBasketFunction;
        } else {
            // in DPT we don't submit to the mini basket so we have to roll our own onclick that
            // checks the outcome of ProductColorVariationsObj.canSubmitToBasketFunction before
            // propagating the event or abandoning it
            linkObj.observe("click", function(eventObject){
                
                var currentObj = $(this);
                var fn = ProductColorVariationsObj.canSubmitToBasketFunction.bind(currentObj);
                if(! fn(eventObject)){
                    window.event? event.returnValue = false : eventObject.preventDefault(); /* IE : standards */
                    return false;
                };
                return true;
            });
        }
    })
})

document.observe('dom:loaded',function(eventObject){ 
 if(ProductColorVariations != $H()){ 
     ProductColorVariationsObj.initialize(ProductColorVariations); 
 };
});

/*******************************************************************************************

    Einde ProductVariations
    
*******************************************************************************************/

