$(function () {
    productDetail.init();
});

var productDetail = {
    template: null,
    init: function () {
        productDetail.template = $('#product-overlay-template').html();
        $(".facebook-share").bind("click", function () {
            var text = $(".left-column>p.large").text();
            productDetail.facebookshare(text);
            return false;
        });
        $('.find-your-juice .pipe li').bind('mouseover', function () {
            var urlSegment = $(this).attr('urlSgment');
            $(this).addClass('hover');
            if ($(this).hasClass('notLoaded')) {
                productDetail.loadPipeElement(urlSegment, $(this));
            } else {
                productDetail.displayOverlay();
            }
        });
        $('.find-your-juice .pipe li').bind('mouseout', function () {
            $(this).removeClass('hover');
            productDetail.displayOverlay();
        });
    },
    loadPipeElement: function (segment, element) {
        $.ajax({
            url: '/api/products/' + segment + '/highlights',
            dataType: 'json',
            success: function (data) {
                productDetail.onPipeJsonLoaded(data, element);
            }
        });
    },
    onPipeJsonLoaded: function (data, element) {
        var output = Mustache.to_html(productDetail.template, data);
        if (element.hasClass("notLoaded")) {
            element.removeClass('notLoaded');
            element.append(output);
        }
        productDetail.displayOverlay();
    },
    getXPos: function (obj) {
        if ($.browser.webkit) {
            var xPropStr = obj.css("-webkit-transform");
            var tempArr = xPropStr.split(",");
            var xTransform = tempArr[4];
            xTransform = xTransform ? xTransform : 0;
            return xTransform;
        } else {
            return obj.position().left;
        }

    },
    displayOverlay: function () {
        var hoverElement = $('.pipe .hover .product-overlay');
        var overlaycontainer = $('#overlay-container');
        if (hoverElement.length) {
            overlaycontainer.append(hoverElement.clone());
            var parentX = Number(productDetail.getXPos($('.pipe>ul')));
            var listItemX = Number(productDetail.getXPos($('.pipe>ul .hover')));
            var xOffset = parentX + listItemX + 240;
            overlaycontainer.css({ 'left': xOffset });
        } else {
            overlaycontainer.find('.product-overlay').remove();
        }
    },
    facebookshare: function (text) {
        var imgName = $('.bottle').attr('src');
        imgName = imgName.split('/').pop();
        imgName = imgName.split('.')[0];
        imgName = imgName + '-small'
        var staticLoc = "http://" + document.domain + '/Resources/managed/products/productshots/' + imgName + '.png';
        FB.ui({
            method: 'stream.publish',
            message: "",
            attachment: {
                name: 'Naked Juice',
                caption: text,
                media: [
                    {
                        "type": "image",
                        "src": staticLoc,
                        "href": window.location.href
                    }],
                description: (
                    'Naked Juice sharable factoid'
                ),
                href: window.location.href
            },
            user_prompt_message: 'Personal message here'
        }, function (response) {
            console.log(response);
            if (response && response.post_id) {
                //alert('Post was published.');
            } else {
                //alert('Post was not published.');
            }
        })
    }
}