var ShoppingCart = {
    CartItems : {},
    OverlayAnimation : null,
    refresh : function(id) {        
        var items = $A($(id).getElementsByTagName('li'));
        if (!items.length) {
            $(id + '-notice').update('Il tuo carrello è vuoto');
            return;
        }
        var products = $A([]);
        items.each(function(li) {
            if (!li.id || li.getElementsByTagName('input').length == 0)
                return;
            var key = li.id.replace(id, '');
            var count = $F(li.getElementsByTagName('input')[0]) || 0;
            var product = new CartProduct();
            product.ProductKey = key;
            product.Quantity = count;
            products.push(product);
        });
        UserService.RefreshCartProducts(products, ShoppingCart.updateProducts);
    },
    quantityChange : function(e) {    
        var key = String.fromCharCode( e.which || e.keyCode );
		if (e.keyCode == Event.KEY_RETURN ) {
			e.stop();
			ShoppingCart.refresh();
            return false;
		}
		if (e.keyCode > 0) {
		    return false;
		}
        var digit = Number(key);
        if (isNaN(digit)) {
            e.stop();
            return false;
        }
    },
    updateProducts : function(products) {
        ShoppingCart.CartItems = {};
        $$('ul.cart-list').invoke('update');
        if (!products)
        {
            alert('Il carrello è vuoto');
            return;
        }
    
        $A(products).each(ShoppingCart.updateProduct);
    },
    updateProduct : function(product, btn) {
        if (typeof btn != 'number')
            btn.unlock();
        ShoppingCart.CartItems[product.ProductKey] = product;
        var cartLists = $$('ul.cart-list');
        cartLists.each(function(list) {
            var children = list.getElementsByTagName('li');
            var count = children.length;
            if (!count) {
                list.update('<li class="header"><strong>Nome</strong><span>Prezzo</span><span class="qty">Q.t&agrave;</span></li>');
                list.insert('<li class="footer"><strong>Totale: &euro;<span class="cart-total-popup"></span></strong></li>');
                count += 2;
            }
            var footer = $(children[count - 1]).remove();
            var prefix = list.id;
            count -= 2;
        
            var li = $(prefix + product.ProductKey);
            if (!li) {
                li = new Element('li', {
                    id : prefix + product.ProductKey,
                    className : 'row'
                });
                list.insert(li);
            }
            li.update(
                ('<span><img src="/assets/#{Picture}" alt="" /></span>' +
                '<strong>#{Title}</strong>' +
                '<em>&euro;#{TotalPrice}</em>' +
                '<span class="qty">' +
                '<input onkeypress="ShoppingCart.quantityChange(event);" style="width:20px" type="text" maxlength="2" value="#{Quantity}" name="products[' + count + '].Quantity" />' +
                '<input type="hidden" value="#{ProductKey}" name="products[' + count + '].ProductKey" />' + 
                '</span>').interpolate(product)
            );
            list.insert(footer);
            $(prefix + '-notice').update();
        });
        // evaluate total
        var total = $A(cartLists[0].getElementsByTagName('em')).inject(0, function(sum, el) {
            var price = el.innerHTML.replace('.', '').replace(',', '.').replace(/[^\d\.]+/gi, '');
            return Number(price) + sum;
        });
        total = String.format('{0:c}', total).replace(/[^\d\.,]+/gi, '').replace('.', '|').replace(',', '.').replace('|', ',');
        
        $$('.cart-total-popup').invoke('update', total);
        ShoppingCart.showOverlay(product.ProductKey, btn);
    },
    showOverlay : function(key, btn) {
        var product = ShoppingCart.CartItems[key];
        if (!product || typeof btn == 'number')
            return;
        var position = btn.cumulativeOffset();
        
        var overlay = $('overlay-' + key);
        var text = $('overlay-info-' + key);
        if (!overlay) {
            overlay = new Element('div', {className:'overlay-box',id:'overlay-' + key}).setStyle({
                position:'absolute',
                width:'190px',
                color:'#FFF',
                fontSize:'90%',
                border:'1px solid #000',
                left: (position.left) + 'px',
                top: (position.top - 30) + 'px'
            });
            var box = new Element('div').setStyle({
                background:'#000',
                height:'1.8em'
            }).setOpacity(0.7);
            overlay.insert(box);
            text = new Element('div',{id:'overlay-info-' + key}).setStyle({
                lineHeight:'1.8em',
                position:'absolute',
                padding:'0 5px',
                left:0,
                top:0
            });
            overlay.insert(text);
        }
        if (!overlay.parentNode)
            $(document.getElementsByTagName('body')[0]).insert(overlay);
        text.update('Nel carrello: <strong>#{Quantity}</strong> (<strong>&euro;#{TotalPrice}</strong>)'.interpolate(product));
        if (ShoppingCart.OverlayAnimation)
            window.clearTimeout(ShoppingCart.OverlayAnimation);
        ShoppingCart.OverlayAnimation = window.setTimeout(function() {
            if (overlay && overlay.parentNode)
                overlay.remove();
        }, 2200);
    },
    init : function() {
        var emptyButtons = $$('.cart-empty-btn');
        var refreshButtons = $$('.cart-refresh-btn');
        var addToCartButtons = $$('.add-to-cart');
        
        emptyButtons.each(function(btn) {
            btn.observe('click', function(e) {
                e.stop();
                ShoppingCart.CartItems = {};
                $('cart-item-list').update();
                $('cart-notice').update('Il tuo carrello &egrave; vuoto').show();
                
                UserService.ClearCart();
            });
        });
        refreshButtons.each(function(btn) {
            btn.observe('click', function(e) {
                e.stop();
                var id = btn.id.replace('-refresh', '');
                ShoppingCart.refresh(id);
            });
        });
        addToCartButtons.each(function(btn) {
            var key = btn.classNames().find(function(c) { return c.startsWith('product-');}).replace('product-', '');
            
            btn.observe('mouseout', function() {
                var overlay = $('overlay-' + key);
                if (overlay)
                    overlay.remove();
            });
            btn.observe('mouseover', function() {
                ShoppingCart.showOverlay(key, btn);
            });
            btn.observe('click', function(e) {
                e.stop();
                btn.lock(); 
                UserService.AddToCart(key, ShoppingCart.updateProduct, null, btn);
            });
        });
        
    }
};
document.observe('dom:loaded', ShoppingCart.init);