this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	jQuery("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		jQuery("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");								 
		jQuery("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
	},
	function(){
		this.title = this.t;	
		jQuery("#preview").remove();
	});	
	jQuery("a.preview").mousemove(function(e){
		jQuery("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
jQuery(document).ready(function(){
	imagePreview();
});


var ProductInfo = Class.create();
ProductInfo.prototype = {
    settings: {
        'loadingMessage': 'Please wait ...'
    },
    
    initialize: function(selector, x_image, settings)
    {
        Object.extend(this.settings, settings);
        this.createWindow();  
        
        var that = this;
        jQuery(selector).each(function(el, index){
            el.observe('click', that.loadInfo.bind(that));
        })
        jQuery(x_image).each(function(el, index){
            el.observe('mouseover', that.showButton);
            el.observe('mouseout', that.hideButton);
        })
        
    },
    
    createLoader: function()
    {
        var loader = new Element('div', {id: 'ajax-preloader'});
        loader.innerHTML = "<p class='loading'><img src="+this.settings.loader+" /><br/>"+this.settings.loadingMessage+"</p>";
        document.body.appendChild(loader);
        jQuery('ajax-preloader').setStyle({
            position: 'absolute',
            top:  document.viewport.getScrollOffsets().top + 200 + 'px',
            left:  document.body.clientWidth/2 - 75 + 'px'
        });
    },
    
    destroyLoader: function()
    {
        jQuery('ajax-preloader').remove();
    },
    
    showButton: function(e)
    {
        el = this;
        while (el.tagName != 'P') {
            el = el.up();
        }
        jQuery(el).getElementsBySelector('.ajax')[0].setStyle({
            display: 'block'
        })
    },
    
    hideButton: function(e)
    {
        el = this;
        while (el.tagName != 'P') {
            el = el.up();
        }
        jQuery(el).getElementsBySelector('.ajax')[0].setStyle({
            display: 'none'
        })
    },
    
    createWindow: function()
    {
        var qWindow = new Element('div', {id: 'quick-window'});
        qWindow.innerHTML = '<div id="quickview-header"><a href="javascript:void(0)" id="quickview-close"></a></div><div class="quick-view-content"></div>';
        document.body.appendChild(qWindow);
        jQuery('quickview-close').observe('click', this.hideWindow.bind(this)); 
    },
    
    showWindow: function()
    {
        jQuery('quick-window').setStyle({
            top:  document.viewport.getScrollOffsets().top + 100 + 'px',
            left:  document.body.clientWidth/2 - jQuery('quick-window').getWidth()/2 + 'px',
            display: 'block'
        });
    },
    
    setContent: function(content)
    {
        jQuery('.quick-view-content')[0].insert(content);
    },
    
    clearContent: function()
    {
        jQuery('.quick-view-content')[0].replace('<div class="quick-view-content"></div>');
    },
    
    hideWindow: function()
    {
        this.clearContent();
        jQuery('quick-window').hide();
    },

    loadInfo: function(e)
    {
        e.stop();
        var that = this;
        this.createLoader();
        new Ajax.Request(e.element().href, {
            onSuccess: function(response) {
                that.clearContent();
                that.setContent(response.responseText);
                that.destroyLoader();
                that.showWindow();
            }
        }); 
    }
}