var ShoppingCart = new Class({
    Implements: [Options, Events],
    options:
    {
        cartId: 'shoppingCart',
        url: '/eshop/cart_helper.aspx',
        isIE6: /msie|MSIE 6/.test(navigator.userAgent),
        spinner: '<img src="/images/loader.gif"/>',
        subtotal: 0,
        path: '/images/eshop/'
    },
    initialize: function(options)
    {
        this.setOptions(options);
        this._initCart();
    },
    _initCart: function()
    {
        this._getCartCount();
    
        var cart = new Element('div', {
            id: this.options.cartId
        }).inject($(document.body));
        
        new Element('a', {
            href: 'javascript:;',
            html: '<img src="'+this.options.path+'btn_viewcart1.gif" alt="View Cart" />',
            styles:
            {
                color: '#990000'
            },
            events:
            {
                click: function()
                {
                    this.disableScreen(document.body);
                    new Request.JSON({
                        url: this.options.url,
                        onComplete: function(response)
                        {
                            if(response && response.error == '')
                            {
                                $('loadingMessage').setStyle('display', 'none');
                                var container = $(document.body);
                                if($('showCart'))
                                {
                                    $('showCart').fade('in');
                                    $('showCart').setStyles({
                                        left: Math.ceil(container.getWidth()/2) - 450 + container.getScroll().x,
                                        top: Math.ceil(container.getHeight()/2) - 250 + container.getScroll().y
                                    });
                                    this._showCart(response.products);
                                    return;
                                }
                                
                                var div = new Element('div', {
                                    id: 'showCart',
                                    styles: 
                                    {
                                        width: 900,
                                        height: 500,
                                        opacity: 0,
                                        backgroundColor: '#a06500',
                                        position: 'absolute',
                                        zIndex: 10002,
                                        left: Math.ceil(container.getWidth()/2) - 450 + container.getScroll().x,
                                        top: Math.ceil(container.getHeight()/2) - 250 + container.getScroll().y
                                    }
                                }).inject(container);
                                
                                var close = new Element('div', {
                                    html: 'X',
                                    styles:
                                    {
                                        position: 'absolute',
                                        top: 10,
                                        right: 10,
                                        color: '#fff',
                                        cursor: 'pointer'
                                    },
                                    events:
                                    {
                                        click: function()
                                        {
                                            this._getCartCount();
                                            this.enableScreen();
                                            
                                        }.bind(this)
                                    }
                                }).inject(div);
                                
                                var headerImg = new Element('img', {
                                    src: this.options.path + 'shoppingcart_hd.gif',
                                    styles:
                                    {
                                        position: 'absolute',
                                        top: 5,
                                        left: 320
                                    }
                                }).inject(div);
                                
                                var clearCart = new Element('div', {
                                    html: '<img src="'+this.options.path+'btn_clearcart.gif" alt="Clear Cart" />',
                                    styles:
                                    {
                                        position: 'absolute',
                                        bottom: 10,
                                        right: 120,
                                        color: '#fff',
                                        cursor: 'pointer'
                                    },
                                    events: 
                                    {
                                        click: function()
                                        {
                                            
                                             new Request.JSON({
                                                url: this.options.url,
                                                onComplete: function(response)
                                                {
                                                    if(response && response.error == '')
                                                    {
                                                        $('cartCount').set('text', 0);
                                                        this.enableScreen();
                                                    }
                                                }.bind(this)
                                             }).post({'action': 'clear'});
                                        }.bind(this)
                                    }
                                }).inject(div);
                                
                                var checkout = new Element('div', {
                                    html: '<a href="/shopping/checkout-methods"><img src="'+this.options.path+'btn_checkout.gif" alt="Checkout" /></a>',
                                    styles:
                                    {
                                        position: 'absolute', 
                                        bottom: 10,
                                        right: 10,
                                        color: '#fff',
                                        cursor: 'pointer'
                                    }
                                }).inject(div);
                                
                                var box = container.getSize();
                                var scroll = container.getScroll();
                                var w = 900;
                                var h = 500;
                                new Fx.Morph(div, {
                                    onComplete: function(e)
                                    {
                                        this._showCart(response.products);
                                    }.bind(this)
                                }).start({
			                        opacity: 1
                                });
                            }
                            else
                                this.enableScreen();
                            
                        }.bind(this)
                    }).post({'action': 'view'});
                    
                    //this._showCart();
                }.bind(this)
            }
        }).inject(cart);
        
        new Element('span', {text: ' ', styles:{color: '#990000'}}).inject(cart);
        new Element('span', {
            html: '<a href="/shopping/checkout-methods"><img src="'+this.options.path+'btn_checkout1.gif" alt="Checkout" /></a>',
            styles: {color: '#990000', cursor: 'pointer'}
        }).inject(cart);
        
        new Element('div', {
            html: '<span style="color:#990000" id="cartCount">0</span> item(s)'
        }).inject(cart);
        
    },
    //type= image S or L id, pid = product id
    addToCart: function(type, pid)
    {
        //IE6 needs delay otherwise it won't work properly
        var delay = this.options.isIE6 ? 100 : 0;
    
        var id = 'productImg' + type + pid;
        //disable the button
        var link = $('addToCart' + type + pid);
        
        (function(){
            var origContent = link.get('html');
            link.set('html', this.options.spinner);
            var cart = $(this.options.cartId);
            
            
            var clone = $(id).clone().setStyles({
                position: 'absolute',
                left: $(id).getPosition().x,
                top: $(id).getPosition().y
            }).inject($(document.body));
            
            
            
            var numOfOptions = parseInt($('numOfOptions' + pid).get('text'));
            var options = new Object();
            for(var i = 0; i < numOfOptions; i++)
            {
                options['optionType' + i] = $('option_' + i + "_" + pid).getProperty('type');
                options['option' + i] = $('option_' + i + "_" + pid).value;
            }
            options['action'] = 'add';
            options['id'] = pid;
            options['numOfOptions'] = numOfOptions;
            
            
            var morph = new Fx.Morph(clone, {
                duration: 1000,
                transition: Fx.Transitions.Quint.easeOut,
                onComplete: function()
                {
                    clone.destroy();
                    //send to the server!
                    
                    new Request.JSON({
                        url: this.options.url,
                        onComplete: function(response)
                        {
                            if(response && response.error == '')
                            {
                                var item = parseInt($('cartCount').get('text'));
                                ++item;
                                $('cartCount').set('text', item);
                            }
                            else
                            {
                                //print out the error
                                //$(this.options.container).set('text', 'There is an error processing your request.  Please try again.');
                            }
                            link.set('html', origContent);
                            
                        }.bind(this)
                    }).post(options);
                    
                    
                }.bind(this)
            });
            
            
            //alert('x: ' + cart.getPosition().x + ' -y: ' + cart.getPosition().y);
            //for ie6 since it needs to recalculate the position of the shopping cart
            //it doesn't need to subtract the body scroll
            morph.start({
                'left': [clone.getPosition().x, cart.getPosition().x + (Browser.Engine.trident  ? 0 : $(document.body).getScroll().x)],
                'top': [clone.getPosition().y, cart.getPosition().y + (Browser.Engine.trident  ? 0 : $(document.body).getScroll().y)],
                'width': [clone.getWidth(), 0],
                'height': [clone.getHeight(), 0]
            });
        }).delay(delay, this);
    },
    disableScreen: function(id)
    {
        var ele = $(id);
        
           
        if($('disableScreen'))
        {
            $('disableScreen').setStyle('opacity', .9);
            $('loadingMessage').setStyles({
                display: 'inline',
                left: (ele.getWidth() / 2) - 25 + ele.getScroll().x,
                top: (ele.getHeight() / 2) - 25 + ele.getScroll().y
            });
            
            if(this.options.isIE6 && $('iframeDS'))
            {
                $('iframeDS').setStyle('opacity', .9);
            }
        }
        else
        {
            if(this.options.isIE6)
            {
                new Element('iframe', {
                    id: 'iframeDS',
                    styles:
                    {
                        backgroundColor: '#e1ce93',
                        opacity: .9,
                        position: 'absolute',
                        width: ele.getScrollSize().x,
                        height: ele.getScrollSize().y,
                        left: 0,
                        top: 0,
                        zIndex:10001
                    }
                }).inject($(document.body));
                
            }
        
            new Element('div', {
                id: 'disableScreen',
                styles:
                {
                    backgroundColor: '#e1ce93',
                    opacity: .9,
                    position: 'absolute',
                    width: ele.getScrollSize().x,
                    height: ele.getScrollSize().y,
                    left: 0,
                    top: 0,
                    zIndex:10001
                }
            }).inject($(document.body));
            
            new Element('div', {
                html: '<img src="/images/loader.gif"/><br/>Requesting Data...',
                id: 'loadingMessage',
                styles:
                {
                    width: 200,
                    height: 50,
                    position: 'absolute',
                    left: (ele.getWidth() / 2) - 25 + ele.getScroll().x,
                    top: (ele.getHeight() / 2) - 25 + ele.getScroll().y
                }
            }).inject($('disableScreen'));
        }
        
        
        $(this.options.cartId).setStyles({
            //position: 'relative',
            visibility: 'hidden'
        });
    },
    enableScreen: function()
    {
        if($('disableScreen'))
            $('disableScreen').fade('out');
        if($('iframeDS'))
            $('iframeDS').setStyle('opacity', 0);
        $(this.options.cartId).setStyles({
            //position: 'fixed',
            visibility: 'visible'
        });
        $('showCart').setStyle('opacity', '0');
    },
    _showCart: function(products)
    {
        var container = $('showCart');
        if($('cartData'))
            $('cartData').dispose();
        
        var div = new Element('div', {
            html: '&nbsp;',
            id: 'cartData',
            styles: 
            {
                overflow: 'auto',
                height: 400,
                width: 800,
                position: 'absolute',
                left: 50,
                top: 50
            }
        }).inject(container);
        
        var table = new Element('table', {
            id: 'cartData',
            cellpadding: 0,
            cellspacing: 1,
            width: '800',
            align: 'center',
            styles:
            {
                color: '#333',
                width: 783,
                marginTop: -20
            }
        }).addClass('listingContainer').inject(div);
        
        var tbody = new Element('tbody').inject(table);
        var tr = new Element('tr').inject(tbody);
        
        if(products.length == 0)
        {
            var td = new Element('td', {
                html: "There is no item in the cart",
                styles:
                {
                    color: '#fff',
                    paddingTop: 20
                }
            }).inject(tr);
        }
        else
        {
            tr.addClass('footer');
            var height = 40;
            //header
            new Element('td', {align: 'center', height: height, html: 'Remove' }).inject(tr);
            new Element('td', {align: 'center', height: height, html: 'Update' }).inject(tr);
            new Element('td', {align: 'center', height: height, html: 'Code' }).inject(tr);
            new Element('td', {align: 'center', height: height, html: 'Name' }).inject(tr);
            new Element('td', {align: 'center', height: height, html: 'Quantity' }).inject(tr);
            new Element('td', {align: 'center', height: height, html: 'Price' }).inject(tr);
            new Element('td', {align: 'center', height: height, html: 'Total' }).inject(tr);
            
            
            
            var cssClass = 'row'
            height = 50;
            this.options.subtotal = 0;
            for(var i = 0; i < products.length; i++)
            {
                var p = products[i];
                tr = new Element('tr', {
                    id: 'cartItem' + p.key,
                    events:
                    {
                        mouseenter: function()
                        {
                            this.addClass('over');
                        },
                        mouseleave: function()
                        {
                            this.removeClass('over');
                        }
                    }
                }).addClass(cssClass).inject(tbody);
                
                if(p.saleprice != 0)
                    p.price = p.saleprice;
                
                var total = Math.round(p.price * p.quantity * 100)/100;
                this.options.subtotal += total;
                new Element('td', {align: 'center', height: height, key: p.key, total: total, html: 'Remove', styles:{color: '#442513', fontWeight: 'bold', cursor: 'pointer'},
                    events:
                    {
                        click: function(e)
                        {
                            var evt = new Event(e);
                            this.options.subtotal -= evt.target.getProperty('total');
                            
                            
                            new Request.JSON({
                                url: this.options.url,
                                onComplete: function(response)
                                {
                                    if(response && response.error == '')
                                    {
                                        
                                        $('cartItem' + evt.target.getProperty('key')).dispose();    
                                        $('cartSubTotal').set('text', 'Sub-Total: $' + this.options.subtotal);        
                                    }
                                }.bind(this)
                            }).post({'action': 'remove', 'key': evt.target.getProperty('key')});
                        }.bind(this)
                    }
                }).inject(tr);
                new Element('td', {align: 'center', height: height, key: p.key, total: total, price: p.price, html: 'Update', styles:{color: '#442513', fontWeight: 'bold', cursor: 'pointer'}, 
                    events:
                    {
                        click: function(e)
                        {
                            var evt = new Event(e);
                            var tempKey = evt.target.getProperty('key');
                            var input = $('update' + tempKey);
                                
                            new Request.JSON({
                                url: this.options.url,
                                onComplete: function(response)
                                {
                                    if(response && response.error == '')
                                    {
                                        this.options.subtotal -= evt.target.getProperty('total');
                                        var temp = evt.target.getProperty('price') * input.value;
                                        this.options.subtotal += temp;
                                        $('cartSubTotal').set('text', 'Sub-Total: $' + this.options.subtotal);
                                        
                                        if(input && input.value == 0)
                                            $('cartItem' + tempKey).dispose();
                                        else
                                            $('total' + tempKey).set('text', '$' + temp);    
                                        
                                        
                                    }
                                }.bind(this)
                            }).post({'action': 'update', 'key': tempKey, 'quantity': input.value});
                        }.bind(this)
                    }
                }).inject(tr);
                new Element('td', {align: 'center', height: height, html: p.code}).inject(tr);
                new Element('td', {align: 'center', height: height, html: p.name + '<br/>' + p.options}).inject(tr);
                new Element('td', {align: 'center', height: height, html: '<input type="text" id="update'+ p.key +'" value="'+p.quantity+'" class="input-text" style="width:50px" />'
                
                
                }).inject(tr);
                new Element('td', {align: 'center', height: height, text: '$' + p.price}).inject(tr);
                new Element('td', {align: 'center', id: 'total' + p.key, height: height, text: '$' + total}).inject(tr);
               cssClass = (cssClass == 'row' ? 'altrow' : 'row');
            }
            
            tr = new Element('tr').addClass('footer').inject(tbody);
            td = new Element('td', {
                id: 'cartSubTotal',
                height: 20,
                colspan: 7, 
                align: 'right',
                html: 'Sub-Total: $' + this.options.subtotal,
                styles:
                {
                    padding: 6
                }
            }).inject(tr);
        }
    },
    _getCartCount: function()
    {
        new Request.JSON({
            url: this.options.url,
            onComplete: function(response)
            {
                if(response && response.error == '')
                    $('cartCount').set('text', response.count);
            }
        }).post({'action': 'count'});
    }
    
});