$.fn.fishbone = function(data) {
    var colors = ['#f89782', '#1a84ce', '#f7a259', '#43a6da', '#f9bf3b', '#88c7cc', '#ef6d5f', '#d9d9d9', '#f03852', '#3a9284'];

    ////对应插件颜色下标，8：红色、2：橘黄、4：黄色、7：绿色
    //var sourcedatacolor = { "工作": 8, "运输": 2, "转移": 4, "在库": 7 };
    //var sourcedatacolordirection = { "工作": "top", "运输": "top", "转移": "top", "在库": "bottom" };

    //对应插件颜色下标，8：红色、2：橘黄、4：黄色、7：绿色
    var sourcedatacolor = { "red": 8, "green": 7 };
    var sourcedatacolordirection = { "red": "top", "green": "bottom" };

    /**入口*/
    //1.创建dom
    $(this).children().remove();
    $(this).append(creatafishbone(data));
    //2.自适应
    var rowcount = fixwindow();
    //3.翻页滚动效果
    jquery(".fishbone").slide({
        titcell: ".hd ul",
        maincell: ".bd>ul",
        autopage: true,
        effect: "left",
        autoplay: false,
        scroll: rowcount,
        vis: rowcount
    });
    
    /**自适应 平均分布*/
    function fixwindow() {
        //item所占的宽度 = 自身宽度+paddingleft
        var item = $(".fishbone .bd .item");
        var paddingleft = parseint(item.css('padding-left'));
        var item_w = item.width() + paddingleft;

        //显示区域
        var bd_w = $(".fishbone .bd").width();
        //能显示的个数 取整
        var rowcount = parseint(bd_w / item_w);
        if (rowcount > item.size()) {
            //rowcount = item.size();
            $(".fishbone .prevleftimg,.fishbone .nextrightimg").show();
        } else {
            $(".fishbone .prevleftimg").show();
        }
        //设置新的宽度使其平均分布
        var item_w_temp = bd_w / rowcount - paddingleft;
        item.width(item_w_temp);
        return rowcount;
    };
    /**li左边框线颜色 border-left-color 动态获取*/
    function getcolor(i) {
        var length = colors.length;
        var color = 'gray';
        if (i <= length - 1) {
            color = colors[i];
        } else {
            color = colors[i % length];
        }
        return color;
    };
    /**轴线上圆点位置纵坐标，见图片line-point.png*/
    function getlinepointy(i) {
        var length = colors.length;
        var y = 0;
        if (i <= length - 1) {
            y = -i * 20;
        } else {
            y = -(i % length) * 20;
        }
        return y + "px";
    };
    /**第一行日期圆点位置纵坐标，图片line-first.png*/
    function getlinefirsty(i) {
        var length = colors.length;
        var y = 0;
        if (i <= length - 1) {
            y = -i * 60;
        } else {
            y = -(i % length) * 60;
        }
        return y + "px";
    };
    /** .title-left背景纵坐标，0px开始，见图片title.png*/
    function gettitlelefty(i) {
        var length = colors.length;
        var y = 0;//图片位置
        if (i <= length - 1) {
            y += -i * 60;
        } else {
            y += -(i % length) * 60;
        }
        return y + "px";
    };
    /** .title-center背景纵坐标，600px开始，见图片title.png*/
    function gettitlecentery(i) {
        var length = colors.length;
        var y = -598;//图片位置
        if (i <= length - 1) {
            y += -i * 60;
        } else {
            y += -(i % length) * 60;
        }
        return y + "px";
    };
    /**.title-right背景纵坐标，1200px开始，见图片title.png*/
    function gettitlerighty(i) {
        var length = colors.length;
        var y = -1200;//图片位置
        if (i <= length - 1) {
            y += -i * 60;
        } else {
            y += -(i % length) * 60;
        }
        return y + "px";
    };
    /**创建dom结构*/
    function creatafishbone(data) {
        var fishbone = $("<div class='fishbone'/>");
        var wrapper = $("<div class='wrapper'></div>");
        var bd = $("<div class='bd'></div>");
        var ul_item = $("<ul/>");
        //遍历数据
        $(data).each(function (index) {
            var colorindex = sourcedatacolor[data[index].colorlevel] === undefined ? 7 : sourcedatacolor[data[index].colorlevel];
            var colordirection = sourcedatacolordirection[data[index].colorlevel] === undefined ? "bottom" : sourcedatacolordirection[data[index].colorlevel];
            var itemclass = itemclass(index);//显示在轴上方或下方标识 top/bottom
            var color = getcolor(colorindex);
            var linefirsty = getlinefirsty(colorindex);
            var titlelefty = gettitlelefty(index);//index
            var titlecentery = gettitlecentery(index);
            var titlerighty = gettitlerighty(index);
            
            var ul = $("<ul></ul>");
            //遍历封装属性
            if(itemclass=='top'){
                $.each(this, function (name, value) {
                    if (name === "sourcedate") {
                        var postiony = colordirection != "top" ? -31 : 9;
                        var postionc = colordirection != "top" ? "colord" : "";
                        //var vlist = value.split('=');
                        //var li = $("<li>" + vlist[0]+"<br/>" + vlist[1] + "</li>").css("margin", "0px 0px 0px -42px").css("height", "22px");//9是原计算结果的偏移量，显示位置正合适
                        var li = $("<li>" + value + "</li>").css("margin", "0px 0px 0px -100px").css("height", "120px");//9是原计算结果的偏移量，显示位置正合适
                        li.appendto(ul);
                        var li2 = $("<li class='line-first'>&nbsp;</li>")
                            .css('background-position-y', (parseint(linefirsty) + postiony) + "px").addclass(postionc);
                        li2.appendto(ul);
                        var li3 = $("<li class='t_l'>&nbsp;</li>").css("height","60px");
                        li3.appendto(ul);
                        return;
                    }
                });
            }
            if(itemclass=="bottom"){
                $.each(this, function (name, value) {
                    if (name === "sourcedate") {
                        var postiony = colordirection != "bottom" ? -7 : 33;
                        var postionc = colordirection != "bottom" ? "colord" : "";
                        var li3 = $("<li class='t_l'>&nbsp;</li>").css("height", "60px");
                        li3.appendto(ul);
                        var li2 = $("<li class='line-first'>&nbsp;</li>")
                            .css('background-position-y', (parseint(linefirsty) - postiony) + "px").addclass(postionc);
                        li2.appendto(ul);
                        //var vlist = value.split('=');
                        //var li = $("<li>" + vlist[1] + "<br/>" + vlist[0] + "</li>").css("margin", "0px 0px 0px -42px").css("height", "22px");//9是原计算结果的偏移量，显示位置正合适
                        var li = $("<li>" + value + "</li>").css("margin", "0px 0px 0px -100px").css("height", "120px");//9是原计算结果的偏移量，显示位置正合适
                        li.appendto(ul);
                        return;
                    }
                });
            }
            //封装轴线上的圆点
            var linepointy = getlinepointy(colorindex);
            var point = $("<li class='line-last line-point'></li>").css('background-position', '0px ' + linepointy);
            point.appendto(ul);
            
            //生成一个item（一个完整的案件）
            var li_item = $("<li class='item'></li>");
            var content = $("<div class='content'></div>");
            ul.appendto(content);
            content.appendto(li_item);
            li_item.addclass(itemclass(index)).appendto(ul_item);
        });
        ul_item.appendto(bd);
        bd.appendto(wrapper);

        var prev = $("<div class='prev'/>");
        var next = $("<div class='next'/>");
        var line = $("<div class='line'/>");
        var bgmsg = $("<div class='k-grid-norecords' style='font-size:14.5px;'>没有数据</div>");

        var l1 = $("<a class='prevleftimg'></a>");
        var r1 = $("<a class='nextrightimg'></a>");

        if (data.length > 0)
            fishbone.append(wrapper).append(prev).append(next).append(line).append(l1).append(r1);
        else
            fishbone.append(bgmsg);
        return fishbone;
    };
    /**item添加样式，显示在上方或下方*/
    function itemclass(index) {
        index += 1;
        if (index % 2 == 0) {
            //偶数显示到下方
            return "bottom";
        } else {
            //奇数显示到上方
            return "top";
        }
    }
}

function hidefishboneprevbutton() {
    $(".prevleftimg").show();
}

function showfishboneprevbutton() {
    $(".prevleftimg").show();
}

function hidefishbonenextbutton() {
    $(".nextrightimg").show();
}

function showfishbonenextbutton() {
    $(".nextrightimg").show();
}