jQuery(document).ready(function() {
    jQuery('<div id="product-popup-qtip-blanket">')
                  .css({
                      position: 'absolute',
                      top: $(document).scrollTop(),
                      left: 0,
                      height: $(document).height(),
                      width: '100%',
                      opacity: 0.7,
                      backgroundColor: 'black',
                      zIndex: 5000
                  })
                  .appendTo(document.body)
                  .hide();


    jQuery('a.product-popup').click(function() {
        var href = jQuery(this).attr('href');
        if (href.match(/\/home\/wineshop\/product\.aspx\?prodid\=([A-Za-z0-9]+)/i)) {
            // Create qTip
            jQuery(this).qtip({
                content: {
                    title: {
                        text: 'Wine details',
                        button: 'Close'
                    },
                    text: '<div style="text-align:center"><br /><br /><br /><p><img src="/img/loading.gif" /></p><br /><br /><br /></div>'
                },
                position: {
                    target: $(document.body),
                    corner: 'center'
                },
                show: {
                    when: false,
                    solo: true
                },
                hide: false,
                style: {
                    width: 600,
                    border: {
                        width: 9,
                        radius: 9,
                        color: '#333333'
                    },
                    title: {
                        color: '#ffffff',
                        background: '#595536'
                    },
                    name: 'light'
                },
                api: {
                    beforeShow: function() {
                        jQuery('#product-popup-qtip-blanket').fadeIn(this.options.show.effect.length);
                    },
                    beforeHide: function() {
                        jQuery('#product-popup-qtip-blanket').fadeOut(this.options.hide.effect.length);
                    }
                }
            });

            qtip = jQuery(this).qtip('api');
            qtip.show();

            // Get Ajax Content
            var productId = href.split('=')[1];
            jQuery.ajax({
                type: 'POST',
                url: '/WebServices/Product.asmx/GetProductPopupHtml',
                data: '{"productId": "' + productId + '"}',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function(msg) {
                    var html = msg.d;
                    qtip.updateContent(html, true);
                }
            });
        }
        return false;
    });
});