var ProductListing = new Class({
    Implements: [Options, Events],
    options:
    {
        container: '',
        cartInstance: '',    //need it to interact with the shopping cart
        category: '',       //the category that we want to retrieve the products from, empty = all products
        containerW: 580,
        containerH: 755,
        productPerPage: 10,
        url: 'products_helper.aspx',
        imagePath: 'images/products/',
        currPage: 1,
        _currView: null
    },
    initialize: function(options)
    {
        this.setOptions(options);
        this._setHighlight("page" + this.options.currPage);
        this._setViewMore("page" + this.options.currPage);
    },
    _setHighlight: function(page)
    {
        var productList = $(page).getElements('div.product')
        for(var i = 0; i < this.options.productPerPage; i++)
        {
            var item = productList[i];
            item.addEvents({
                mouseenter: function(){this.addClass('over');},
                mouseleave: function(){this.removeClass('over');}
            });
        }
    },
    _setViewMore: function(page)
    {
        var container = $(this.options.container);
        var productList = $(page).getElements('a.productDetails')
        for(var i = 0; i < productList.length; i++)
        {
            var item = productList[i];
            item.addEvents({
                click: function(e)
                {
                    var evt = new Event(e);
                    evt.stop();
                    this.showProduct($('productDetails' + evt.target.getProperty('pid')));
                }.bind(this)
            });
            
            var ele = $('productDetails' + item.getProperty('pid'));
            ele.setStyles({
                position: 'absolute',
                left: 0,
                top: 0,
                zIndex: 100,
                opacity: 0,
                width: container.getWidth() - 5,  //because of IE6 it needs 606 to float right not sure why
                height: container.getHeight()
            });
            
            var close = $('productDetailsHide' + item.getProperty('pid'));
            close.addEvent('click', function(){
                this.hideProduct();
            }.bind(this));
            
        }
    },
    showProduct: function(product)
    {
        var container = $(this.options.container);
        this.origH = container.getHeight()
        var height = this.options.containerH;
        
        if(this.origH < height)
        {
            new Fx.Morph(container, {
                onComplete: function(){
                    product.setStyles({
                        display: 'block',
                        height: height
                    }).fade(0.9);
                }
            }).start({
                height: [container.getHeight(), height]
            });
        }
        else
        {
            product.setStyle('display', 'block').fade(0.9);
        }
        this.options._currView = product;
    },
    hideProduct: function()
    {
        var container = $(this.options.container);
        this.options._currView.fade('out');
        var height = this.options.containerH;
        if(container.getHeight() >= height)
            new Fx.Morph(container).start({height: [container.getHeight(), this.origH]});
    }
   
});