/**
 * Created by taojiamin on 2017/3/24.
 */
var ctrl3d;
$(function(){
    //首先判断浏览器对3D的支持
    if(!webgl)return false;
    //然后判断是否有3D相关的数据推送；
    var $container = $("#container3d");
    var $pond = $container.find(".pond");
    if($container.size()==0)return false;
    //读取点信息
    var spots = [];
    $pond.find(".c3d-hotspot").each(function(n,f){
        spots.push({ "pitch": $(this).data("pitch"),
            "yaw": $(this).data("yaw"),
            "type": "pannel",
            "createTooltipArgs": f,
            "createTooltipFunc": spotHtml});
    });
    //初始化3D场景
    ctrl3d = jdpanorama.viewer('container3d', {
        "default": {
            "firstScene": "pond",
            "sceneFadeDuration": 2000,
            "autoLoad": true
        },
        "autoRotate":5,
        // "title": "白雪公主的城堡",
        // "author": "国内著名设计师",
        "fallback": "//www.jd.com",//设置一个链接，如果浏览器不支持webGl，则提示的同事展现一个替代的链接~ 这是替代链接的url。
        // "hotSpotDebug": true,//debug模式，点击获得各种数据
        // "autoLoad": true,//自动加载 ok!有效
        // "loadButtonLabel": "魔法屋加载中。。。",//如果设置不自动加载，将会出现一个提示，这是设置提示的文字，可点击，点击将触发加载
        // "showZoomCtrl": true,//缩放控制按钮，默认不设置也是true，想关闭设置false；
        // "showFullscreenCtrl": true,//全屏控制按钮，，默认也是true
        "showControls": false,//同时控制上面两项
        // "orientationOnByDefault": false,//默认方向，没看懂
        "pitch":$pond.data("pitch"),//默认方向之上下偏角
        "yaw": $pond.data("yaw"),//默认方向之左右偏角
        // "hfov":120,// 取值在50-120之间，默认缩放级别是100，另外取值范围是可以修改的
        // "roll":50,//Z轴旋转，这个设置后整个世界都倾斜了加载的按钮的文字？没生效！还是load。。。
        "scenes": {
            "pond": { "panorama": $pond.data("img"),
                // "panorama": "http://localhost/html/page/1.jpg",
                // "panorama": "http://img11.360buyimg.com/faner/s707x500_jfs/t2755/175/3025931161/704312/771a4d58/577dbc96N2e130b76.png",
                "hotSpots": spots}
        },
        "ready":function(){ // dom重构~注入相关icon
            // dom重构
            var tpl = ""
                + '<div class="c3d-new-pannel">'
                + ' <div class="c3d-move"><i class="c3di-left"></i><span class="c3di-tips">左右拖动图片试试看</span><i class="c3di-right"></i></div>'
                + ' <i class="c3di-fullctrl" clstag="pageclick|keycount|Pcshejibang_details|54"></i>'
                + '</div>';
            var $newPannel = $(tpl);
            $("#container3d").append($newPannel);
            get3dPrice();//拉取3D的sku价格
        },
        "onFullScreen":function(){ $("#container3d .c3di-fullctrl").addClass("c3di-isfull"); },
        "onCancelFullScreen":function(){ $("#container3d .c3di-fullctrl").removeClass("c3di-isfull"); },
        "onFirstDrag":function(){ $("#container3d .c3d-move").hide(); }
//价格和主图的拉取
    });
    //交互事件部分：
    $container.delegate('.c3d-close', 'click', function(event) { //锚点面板的关闭
        $(this).closest('.jdpano-pannel').removeClass("curr");
    }).delegate('.c3d-hotspot-tit', 'click', function(event) {//锚点的点击
        // 1.设置焦点，展示面板
        $(this).closest('.jdpano-pannel').addClass("curr").siblings().removeClass("curr");
        // 2.调整视角至中间
        var yaw = $(this).closest('.c3d-hotspot').data("yaw");
        var pitch = $(this).closest('.c3d-hotspot').data("pitch");
        if(yaw&&pitch){ ctrl3d.setYaw(yaw); ctrl3d.setPitch(pitch); }
        //3.右边列表的焦点切换
        var typeName = $(this).find(".c3d-spotname").text();
        $("#container2d .item span").filter(function(n,f){ return $(f).text()==typeName; }).trigger("click");
        //4.停止自动转屏
        ctrl3d.stopAutoRotate();
        //5.清除提示
        $container.find(".c3d-move").hide();
    }).delegate(".c3di-fullctrl","click",function(){ //全屏切换部分
        ctrl3d.toggleFullscreen();
    }).delegate(".c3dg-select","click",function(){//3d场景中sku选中,选中是对应列表的锚点上去~ 找这个sku，如果找到了，而且是个选空状态，就触发选中
        var $wrap = $(this).closest('.c3d-hotspot');
        var sku3d = $wrap.find(".c3d-goods").data("sku");
        var $findsku = $("#products_list .p-current .j_option").filter(function(n,f){ return $(f).data("id") == sku3d; });
        if($findsku.length){
            $findsku.trigger("click");
            $(this).hide().siblings('.c3dg-unselect').show();
        }
    }).delegate(".c3dg-unselect","click",function(){//3d场景中sku取消选中，选空是找到这个锚点的sku，如果是选中的，而且上面的勾是勾上的，就只触发一下勾即可！
        $(this).hide().siblings('.c3dg-select').show();
        var $wrap = $(this).closest('.c3d-hotspot');
        var sku3d = $wrap.find(".c3d-goods").data("sku");
        var $findsku = $("#products_list .p-current .j_option:first").filter(function(n,f){ return $(f).data("id") == sku3d; });
        if($findsku.length){
            $findsku.closest(".j_p-tab").find(".j_p-check.checked").trigger("click");
        }
    });
    function spotHtml(div,dom){ div.appendChild(dom); }
    function get3dPrice() {
        var $doms = $("#container3d .jdpano-pannel .c3d-goods .c3dgi-price");
        var skusArr = $.makeArray($doms.map(function(){
            return $(this).data("sku");
        }));
        if(skusArr.length){
            var skusStr = "J_" + skusArr.join(",J_");
            $.ajax({
                url: "//p.3.cn/prices/mgets?type=1&skuIds=" + skusStr,
                dataType: "jsonp",
                success: function(data) {
                    if (!data && !data.length) return false;
                    for (var i = 0; i < data.length; i++){
                        if (data[i].id) {
                            var sku = data[i].id.replace("J_", "");
                            var price = data[i].p;
                            $doms.filter("[data-sku="+sku+"]").html(0 >= price ? "\u6682\u65e0\u62a5\u4ef7" : "&yen;" + price);
                        }
                    }
                }
            });
        }
    }
});