/*----------------------- Scriptaculous fixes ------------------------*/ 
/*------------Overrides some methods from dragdrop.js ----------------*/
   
    // Fix to make more than one element draggable on a page
    Draggables.register = function(draggable) {
        this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
        this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
        this.eventKeypress  = this.keyPress.bindAsEventListener(this);

        Event.observe(document, "mouseup", this.eventMouseUp);
        Event.observe(draggable.element, "mousemove", this.eventMouseMove);
        Event.observe(document, "keypress", this.eventKeypress);
        this.drags.push(draggable);
    }
    
    Draggables.unregister = function(draggable) {
        this.drags = this.drags.reject(function(d) {return d==draggable});
        Event.stopObserving(document, "mouseup", this.eventMouseUp);
        Event.stopObserving(draggable.element, "mousemove", this.eventMouseMove);
        Event.stopObserving(document, "keypress", this.eventKeypress);
    }

    // Fix for droppable in scrolled div
    Droppables.add = function(element) {
        element = $(element);
        var options = Object.extend({
          greedy:     true,
          hoverclass: null,
          tree:       false,
          scrollid:   null
        }, arguments[1] || { });
        
        // cache containers
        if(options.containment) {
          options._containers = [];
          var containment = options.containment;
          if(Object.isArray(containment)) {
            containment.each( function(c) {options._containers.push($(c))});
          } else {
            options._containers.push($(containment));
          }
        }
        
        if(options.accept) options.accept = [options.accept].flatten();
        
        Element.makePositioned(element); // fix IE
        options.element = element;
        
        this.drops.push(options);
    }
  
    
    Droppables.isAffected = function(point, element, drop) {
        if( drop.scrollid ){
          Position.includeScrollOffsets = true;
          scrolling_element = $(drop.scrollid)
          var container_off = Element.cumulativeOffset(scrolling_element); 
          if( point[1] < container_off[1] || point[1] > Element.getHeight(scrolling_element) + container_off[1])
            {return false;}
          else if( point[0] < container_off[0] || point[0] > Element.getWidth(scrolling_element) + container_off[0])
            {return false;}
        }
        return (
          (drop.element!=element) &&
          ((!drop._containers) ||
            this.isContained(element, drop)) &&
          ((!drop.accept) ||
            (Element.classNames(element).detect( 
              function(v) {return drop.accept.include(v)} ) )) &&
          Position.within(drop.element, point[0], point[1]) );
    }       
/*-------------------- End of scriptaculous fixes ------------------------*/ 





/*---------------- BaobazDressingRoom class definition -------------------*/
 
BaobazDressingRoom = Class.create({
    ie6: (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1),
    ie7: (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 7.0") != -1),
 
    options: {
        simpleProductTypeLabel: 'simple',
        configurableProductTypeLabel: 'configurable'
    },
    
    initialize: function(custom_options) {
        //Set option values:
        Object.extend(this.options, custom_options || {});
        //Fixes for IE (:hover support for IE6, setting position:relative for draggable elements container)
        this.prepareIE();
        //Register draggable elements (scriptaculous dragdrop.js required):
        this.registerDraggables();
        //Register droppable elements:
        this.registerDroppables(); 
        //Add handlers for ajax answers (defined in ajaxify_handlers.js):
        Ajaxify.addHandlers(true);    
    },
    
    //Fixes for IE (:hover support for IE6, setting position:relative for draggable elements container)
    prepareIE: function() {
        if(this.ie6) {
            $$('.configurable-list li').invoke('observe', 'mouseenter', function() {
                this.addClassName('over');
            }).invoke('observe', 'mouseleave', function() {
                this.removeClassName('over');
            });
        }  
          
        if(this.ie6 || this.ie7)
            $('cl-wrapper').setStyle({position: 'relative'});    
    },
    
    
    // Crazy fix for IE6-7 disappearing elements:
    fixIE: function(itemsCollection) {
        itemsCollection.each(function(elem) {
            elem.setStyle({width: elem.getWidth() + 'px'});
        });
    },


    //Register draggable elements (scriptaculous dragdrop.js required):
    registerDraggables: function() {
            $$('ol.configurable-list img.draggable').each(function(drag_elem) {
        	// Do special js for IE
        	if(this.ie6 || this.ie7) {
        		new Draggable(drag_elem, { 
                    revert: true,
                    starteffect: '',
                    endeffect: '',
                    scroll: $$('.silhouette-items')[0],
        			ghosting: false, 
                    reverteffect: function(element, top_offset, left_offset) {
                        new Effect.Move(element, {x: -left_offset, y: -top_offset, duration: 0});
                    }, 
        			onStart: function() {
        				$('cl-wrapper').setStyle({position: 'static'});
        			},
        			onEnd: function() {
        				$('cl-wrapper').setStyle({position: 'relative'});
        			}
                });
        	}
        	else { 
                new Draggable(drag_elem, { 
                    revert: true, 
                    starteffect: '',
                    endeffect: '',
                    scroll: $$('.silhouette-items')[0], 
                    ghosting: true,
                    reverteffect: function(element, top_offset, left_offset) {
                        new Effect.Move(element, {x: -left_offset, y: -top_offset, duration: 0});
                    }
                });
            }
        }, this);
    },


    //register droppable elements:
    registerDroppables: function() {
        $$('.silhouette-items li').each(function(elem) {
            this.addDroppable(elem);
        }, this);
    },
    
    
    //register one droppable element (scriptaculous dragdrop.js required):    
    addDroppable: function(elem) {
        Droppables.add(elem, {
            accept: 'draggable',
            scrollid: 'drop-area',
            onDrop: function(dragged_elem, drop_target, event) {
                drop_target.addClassName('loading');
                var dragged_elem_id_parts = dragged_elem.id.split('-');
                if (dragged_elem_id_parts[3]) {
                    item_id = dragged_elem_id_parts[3];
                } else {
                    item_id = 0;
                }

                //   ZADIG modifications for store_views /xx/xx/
                var url = "/dressingroom/index/getProductData";
                var location = new String(window.location).replace('http://', '').split('/', 3);
                if (location.length == 3) {
                    if (location[1].length == 2 && location[2].length == 2) {
                        url = '/' + location[1] + '/' + location[2] + url;
                    }
                }

                new Ajax.Request(url,
                {
                    method:'post',
                    parameters: {productId: dragged_elem_id_parts[2], itemId: item_id},
                    onSuccess: function(transport){
                        $('drag-and-drop-error').hide();
                        var response = transport.responseText || "";
                        if (response != "") {
                            var responseObj = eval('('+response+')');
                            var div = this.createDiv(dragged_elem_id_parts[0], responseObj);
                            drop_target.update(div);
                            
                            var initialWrapper = drop_target.down('span.hidden');
                            if(initialWrapper) {
                                var initialOption = initialWrapper.readAttribute('data-initial');
                                var optPrice = this.getPriceForSize(responseObj, initialOption);
                                this.selectSize(drop_target, responseObj.id, optPrice, responseObj.priceFormat, initialOption, responseObj.sizeAttrId);
                            }
                        } else {
                            $('drag-and-drop-error').update(Translator.translate('Could not load the product.')).show();
                        }
                        drop_target.removeClassName('loading');
                        this.updateTotalPrice();
                    }.bind(this),
                    onFailure: function(){
                        $('drag-and-drop-error').update(Translator.translate('Could not load the product.')).show();
                    }
                });
            }.bind(this)
        });
    }, 
    
    
    //add new droppable zone:
    addDroppableZone: function() {
        $$('ol.silhouette-items li:last-child')[0].removeClassName('last').insert({after: new Element('li').addClassName('last')});
        this.fixIE($$('ol.silhouette-items > li'));                
        // add drag and drop funcionality to new product zone
        this.addDroppable($$('ol.silhouette-items > li:last-child')[0]); 
    },


    //Generate html for product dropped on droppable zone:
    createDiv: function(type, productDataObj) {
        switch (type) {
            case 'wishlist':
                var initialOption = false;
                var html = '<div class="selected-product" id="wishlist-product-'+productDataObj.id+'">'
                + '<div class="prod-info right">'
                +     '<span class="close" onclick="dressingRoom.clearDiv($(this))"><span>&times;</span></span>'
                +     '<p class="selected-product-name name"><a href="'+productDataObj.link+'">'+productDataObj.name+'</a></p>'
                +     '<div class="selected-product-price price-box">'+productDataObj.price+'</div>';
                if (productDataObj.type == this.options.configurableProductTypeLabel) {
                    var format = new String(productDataObj.priceFormat);                
                    optionsPrice = new Product.OptionsPrice(productDataObj.config);
                    spConfig = new Array();
                    if(productDataObj.config.fillSelect && productDataObj.config.fillSelect != false) {
                        productDataObj.config.fillSelect = false;
                    }
                    spConfig = new Product.Config(productDataObj.config);
                    $$('.product_addtocart_form').each(function(formElem) {
                        formElem.select('select:disabled').each(function(selectElem) {
                            selectElem.disabled = false;
                        });
                    });
                    html += '<div class="sizes-box">'
                    +         '<label>' + Translator.translate('Size') + ' :</label>'                    
                    +         '<select onchange="this.options[this.selectedIndex].onclick()">';
                    productDataObj.sizes.options.each(function(option) {
                        html += '<option id="option-id-'+option.value+'" value="'+option.value+'"';
                        if (option.inStock == 0) {
                            html += ' disabled="disabled"';
                        } else {                            
                            var optPrice = this.getPriceForSize(productDataObj, option.value);
                            html += 'onclick="dressingRoom.selectSize($(this).up(\'li\'), '+productDataObj.id+', '+optPrice+', ';
                            html += "'"+format+"'"+', '+option.value+', '+productDataObj.sizeAttrId+')"';                           
                            if(!initialOption) {
                                html += ' selected="selected"';                      
                                initialOption = option.value;
                            }
                        }
                        html += '>'+option.label+'</option>'; 
                    }, this);                       
                    html +=   '</select>'                    
                    +     '</div>'
                    +     '<span class="hidden" data-initial="' + initialOption + '"></span>';
                }
                html += '<div class="buttons">'
                +          '<button type="button" class="btn-add-to-cart" onclick="$(this).up(\'.buttons\').addClassName(\'buttons-clicked\'); ';
                if(productDataObj.type == this.options.configurableProductTypeLabel)
                    html += 'spConfig.setAttributeOptionMultiple(' + productDataObj.sizeAttrId + ', $(this).up(\'li\').down(\'select\').value, ' + productDataObj.id +'); ';         
                html +=    '$(\'product_addtocart_form-'+productDataObj.id+'\''+').submit()"><span>' + Translator.translate('Add to Cart') + '</span></button>'
                +          '<a class="selected-product-link" href="'+productDataObj.link+'">' + Translator.translate('To product page') + '</a>'
                +          '<span class="loading"></span>'
                +       '</div>'
                + '</div>'
                + '<img class="selected-product-image" src="'+productDataObj.image+'" title="'+productDataObj.name+'" alt="'+productDataObj.name+'" width="140" height="177" class="prod-img" />'
                + '</div>';
            break;
            case 'cart':
                var html = '<div class="selected-product" id="cart-product-'+productDataObj.id+'">'
                + '<div class="prod-info right">'
                +     '<span class="close" onclick="dressingRoom.clearDiv($(this))"><span>&times;</span></span>'
                +     '<p class="selected-product-name name"><a href="'+productDataObj.link+'">'+productDataObj.name+'</a></p>';
                if (productDataObj.type == this.options.configurableProductTypeLabel) {
                    html += '<div class="selected-product-price price-box">'+this.formatPrice(productDataObj.config.basePrice, productDataObj.priceFormat)+'</div>';
                }
                else if (productDataObj.type == this.options.simpleProductTypeLabel) {
                    html += '<div class="selected-product-price price-box">'+productDataObj.price+'</div>';
                }
                if (productDataObj.type == this.options.configurableProductTypeLabel) {
                    html += '<div class="sizes-box">'
                    +         '<label>' + Translator.translate('Size') + ' :</label>'
                    +         '<select>';
                        productDataObj.sizes.options.each(function(option) {
                            html += '<option id="option-id-'+option.value+'"';
                            html += '">'+option.label+'</option>'; 
                        });                       
                    html +=   '</select>'                   
                    +     '</div>';
                }
                html += '<div class="buttons">'
                +         '<span class="in-cart"></span>'
                +         '<a class="selected-product-link" href="'+productDataObj.link+'">' + Translator.translate('To product page') + '</a>'
                +     '</div>'
                + '</div>'
                + '<img class="selected-product-image" src="'+productDataObj.image+'" title="'+productDataObj.name+'" alt="'+productDataObj.name+'" width="140" height="177" class="prod-img" />'
                +'</div>';            
            break;
            default:
                var html = '';            
            break;
        }
        
        return html;
    },


    //retrieve price of the selected size of the product: 
    getPriceForSize: function(productDataObj, productOption) {
        var productOptions = productDataObj.config.attributes[productDataObj.sizeAttrId].options;
        var basePrice = productDataObj.config.basePrice;
        var priceModifier = false;
        for(var i=0; i<productOptions.length; i++) {
            if(productOptions[i].id == productOption) {
                priceModifier = productOptions[i].price
                break;
            }
        }
        var resultPrice = false;
        if(priceModifier) {
            resultPrice = Number(priceModifier) + Number(basePrice);
        }
        return resultPrice;
    },
 
    
    formatPrice: function(price, format) {
        price = new Number(price);
        price = price.toFixed(2);
        price = price.toString().replace(',', '.');
        formattedPrice = format.replace('#{price}', price);   
        return '<span class="price">' + formattedPrice + '</span>';
    },


    selectSize: function(targetDiv, productId, price, priceFormat, optionId, attributeId) {
        targetDiv.down('.price-box').update(this.formatPrice(price, priceFormat));
        spConfig.setAttributeOptionMultiple(attributeId, optionId, productId);
        this.updateTotalPrice();
        return false;
    },


    updateTotalPrice: function() {
        var newPrice = 0.00;
        $$('.selected-product-price span').each(function(span) {
           var temp = span.innerHTML;
           var priceString = temp.replace('€', '');
           priceString = priceString.replace('&nbsp;','');
           if(priceString.indexOf(',') != -1) {
               priceString = priceString.replace(',', '.');
           }
           newPrice += Number(priceString);
        });

        var spanPrice = $$('.dressing-total')[0].down('span.price');
        newPrice = String(newPrice);
        if(newPrice.indexOf('.') == -1) {
            newPrice = String(newPrice) + '.00';
        }
        newPrice = newPrice.replace('.', ',');

        newPrice += '&nbsp;€';
        spanPrice.update(newPrice);
        return;
    },
 
    
    //clear content of dressing area item:
    clearDiv: function (el) {
        el.up('li').update('');
        this.updateTotalPrice();
    },  
    
    
    //remove one item from dressing room:    
    removeWishlistItem: function (el) {
        el.up('li').addClassName('removing');
        var elIdParts = el.id.split('-');

        var url = "/wishlist/index/remove";
        var location = new String(window.location).replace('http://', '').split('/', 3);
        if (location.length == 3) {
            if (location[1].length == 2 && location[2].length == 2) {
                url = '/' + location[1] + '/' + location[2] + url;
            }
        }

        new Ajax.Request(url,{
            method: 'post',
            parameters: {item: elIdParts[0]},
            onSuccess: function (transport) {
                el.up('li').removeClassName('removing').update();
                var dressingAreaItems = $$('.silhouette-items .selected-product');
                if(dressingAreaItems.length)
                    dressingAreaItems.each(function(dressingItem){
                        if(dressingItem.id == 'wishlist-product-'+elIdParts[1])
                            dressingItem.up('li').update();
                    });
            },
            onFailure: function () {
                el.up('li').removeClassName('removing');
                $('drag-and-drop-error').update(Translator.translate('Could not remove the product from wishlist.')).show();
            }
        });
    },

    
    clearDressingroom: function() {
        new Ajax.Request("/dressingroom/index/clear",
        {
            method:'post',
            onSuccess: function(transport){
                $('clear-dressingroom-error').hide();
                var response = transport.responseText || "";
                if (response != "") {
                    var responseObj = eval('('+response+')');
                } else {
                    $('clear-dressingroom-error').update(Translator.translate('Could not clear the dressingroom.'));
                    $('clear-dressingroom-error').show();
                }
                // update displayed list - remove all wishlist products images
                $$('ol.configurable-list li').each(function(li){
                    if (li.select('img.draggable')[0].id.split('-')[0]=='wishlist') {
                        li.update('');
                    }
                });
                $$('.silhouette-items li div.selected-product').each(function(div){
                    if (div.id.split('-')[0]=='wishlist') {
                        div.up('li').update('');
                    }
                })                       
            },
            onFailure: function(){
                $('clear-dressingroom-error').update(Translator.translate('Could not clear the dressingroom.')).show();
            }
        });
    },

    addToCartAll: function() {
        $$('.silhouette-items li').each(function(elem) {
            var productDiv = $(elem).down(0);
            if(productDiv) {
                if(productDiv.id.indexOf('-') != -1) {
                    var divIdArray = productDiv.id.split('-');
                    if(divIdArray[0] == 'wishlist') {
                        var productId = divIdArray[2];
                        var buttonAddToCartElement = $(elem).down('.btn-add-to-cart'); //[object HTMLButtonElement]
                        var productType = buttonAddToCartElement.readAttribute('producttype');

                        // add product to cart
                        $(buttonAddToCartElement).up('.buttons').addClassName('buttons-clicked');
                        if(productType == this.options.configurableProductTypeLabel) {
                            var sizeAttrId = this.configurableSizeAttrId[productId];
                            spConfig.setAttributeOptionMultiple(sizeAttrId, $(buttonAddToCartElement).up('li').down('select').value, productId);
                        }
                        $('product_addtocart_form-' + productId).submit();
                    }
                }
            }
        }, this);
        return true;
    }
});