var ProductInfo = Class.create();
ProductInfo.prototype = {
    
    initialize: function(selector,target)
    {        
        var that = this;
        $$(selector).each(function(el, index){
          el.observe('click', that.loadInfo.bind(that));  
        });
        $$(".hide-product").each(function(el, index){
          el.observe('click', that.hideProduct.bind(that));
        });

    },
    
    createLoader: function(selector)
    {
        var loader = new Element('div', {id: 'ajax-preloader'});
        loader.innerHTML = "<p class='loading'><img src='/skin/frontend/jeram/default/images/ajax-loader.gif' /><br />loading...</p>";
        $(selector).appendChild(loader);
        $('ajax-preloader').setStyle({
            position: 'absolute',
            top: document.viewport.getScrollOffsets().top + 200 + 'px',
            left: '35%'
        });
    },
    
    destroyLoader: function()
    {
        $('ajax-preloader').remove();
    },
    
    setContent: function(content, selector)
    {
      
        $(selector).down('div.product-image').innerHTML=content.image;
        $(selector).down('div.product-image').show();
				$(selector).down('div.product-body').innerHTML=content.body;
				$(selector).down('div.product-body').show();
				$(selector).down('a.hide-product').appear();
				
				$(selector).down('div.category-body').hide();
				$(selector).down('div.category-image').hide();
    },
    
    hideProduct: function(e)
    {
        var item = e.element().up(1);
        item.down('div.product-image').fade();
				item.down('div.product-body').hide();
				item.down('a.hide-product').fade();
				item.down('div.category-body').show();
				item.down('div.category-image').appear();
    },

    loadInfo: function(e)
    {
        e.stop();

        var that = this;
				var trigger = e.element().up(0);
				var productUrl = '/ajax/product/quickview/id/' + trigger.id.gsub('product-link-', ''); // TODO: url !!!
								
        this.createLoader(trigger.rel);
        new Ajax.Request(productUrl, {
						requestHeaders: {Accept: 'application/json'},
            onSuccess: function(response) {
								var json = response.responseText.evalJSON(true);
                that.setContent(json, trigger.rel);
                that.destroyLoader();
            }
        }); 
    }
}