Q.Node.prototype.type = "Node";
Q.Text.prototype.type = "Text";
Q.Group.prototype.type = "Group";
Q.Edge.prototype.type = "Edge";

var graph;

function getUuid() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 32; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
    //s[8] = s[13] = s[18] = s[23] = "-";
  
    var uuid = s.join("");
    return uuid;
}

$(function(){
    Q.addCSSRule(".maximize", "margin: 0px !important;position: fixed !important;top: 0px;bottom: 0px;right: 0px;left: 0px;z-index: 1030;height: auto !important; width: auto !important;");
    graph = new Q.Graph("canvas");

    var styles = {};
    styles[Q.Styles.SELECTION_COLOR] = "#0F0";
    graph.styles = styles;

    graph.originAtCenter = false;
    graph.editable = true;

    graph.onElementCreated = function (element, evt) {
        if (element instanceof Q.Edge) {
            element.setStyle(Q.Styles.EDGE_WIDTH, 2);
            element.name = graph.name;
            if(element.edgeType && element.edgeType != Q.Consts.EDGE_TYPE_DEFAULT){
                element.setStyle(Q.Styles.EDGE_BUNDLE, false);
                element.imageType = "2";
            } else {
            	element.imageType = "1";
            }
            element.type=1;
            return;
        }
        if (element instanceof Q.Text) {
            element.setStyle(Styles.LABEL_BACKGROUND_COLOR, "#2898E0");
            element.setStyle(Styles.LABEL_COLOR, "#FFF");
            element.setStyle(Styles.LABEL_PADDING, new Q.Insets(3, 5));
            return;
        }
        
        if (element instanceof Q.Node) {
            var dataTransfer = evt.dataTransfer;
    	    var imageType = dataTransfer.getData('imageType');
    	    element.imageType = imageType;
    	    element.type=2;
	        element.newId = getUuid();
        }
    }

    graph.onLabelEdit = function(element, label, text, elementUI){
        if(!text){
            return false;
        }
        element.name = text;
        //此处调用后台保存
    }

    appendInteractionMenu(graph);

    initToolbox();
    initToolbar();
    initDatas();

//监听面板调整大小事件，同步graph大小
 

});

function ensureVisible(node){
    var bounds = graph.getUIBounds(node);
    var viewportBounds = graph.viewportBounds;
    if(!viewportBounds.contains(bounds)){
        graph.sendToTop(node);
        graph.centerTo(node.x, node.y);
    }
}

function setInteractionMode(evt, info){
    graph.interactionMode = info.value;
    currentInteractionMode = info.value;
    if(info.value == Q.Consts.INTERACTION_MODE_CREATE_EDGE){
        graph.edgeUIClass = info.edgeUIClass;
        graph.edgeType = info.edgeType;
		graph.name = info.name;
    }
}

function initToolbar(){
    var toolbar = document.getElementById("linePanel");
    var buttons = {
        interactionModes:[{name: "默认模式", value:Q.Consts.INTERACTION_MODE_DEFAULT, selected: true, icon:'/business/topo/images/default_icon.png', action: setInteractionMode},
            {name: '框选模式', value:Q.Consts.INTERACTION_MODE_SELECTION, icon:'/business/topo/images/rectangle_selection_icon.png', action: setInteractionMode},
            {name: '浏览模式', value:Q.Consts.INTERACTION_MODE_VIEW, icon:'/business/topo/images/pan_icon.png', action: setInteractionMode}],
        zoom: [{name: "放大", icon:"/business/topo/images/zoomin_icon.png", action: function(){graph.zoomIn()}},
            {name: "缩小", icon:"/business/topo/images/zoomout_icon.png", action: function(){graph.zoomOut()}},
            {name: "1:1", icon:"/business/topo/images/zoomout_icon.png",action: function(){graph.scale = 1;}},
            {name: '纵览', icon:'/business/topo/images/overview_icon.png', action: function(){this.zoomToOverview()}},
            {name: '最大化', icon:'/business/topo/images/fullscreen_icon.png', action: function(){
                if($("#graph_panel").hasClass("maximize")){
                    $("#graph_panel").removeClass("maximize")
                }else{
                    $("#graph_panel").addClass("maximize")
                }
                graph.updateViewport();
            }}]
    };
    createToolBar(buttons, toolbar, graph, false, false);

}

function initToolbox(){
     var toolbox = document.getElementById("toolbox");
	 var linePanel = document.getElementById("linePanel");
	 createToolBar({a: [
        {name: '普通连线', value:Q.Consts.INTERACTION_MODE_CREATE_EDGE, icon:'/business/topo/images/edge_icon.png', action: setInteractionMode},
        {name: '正交直线', value:Q.Consts.INTERACTION_MODE_CREATE_EDGE, icon:'/business/topo/images/edge_orthogonal_icon.png', action: setInteractionMode, edgeType: Q.Consts.EDGE_TYPE_ORTHOGONAL_HORIZONTAL}
	 ]}, 
		linePanel, graph,  
		"btn-group-vertical", false);

    createDNDImage(toolbox, "/business/topo/images/icons/1.png", "Internet图标", {type: "Node", label: "Internet图标", image: "/business/topo/images/icons/1.png",imageType:"1"});
    createDNDImage(toolbox, "/business/topo/images/icons/2.png", "ONU设备", {type: "Node", label: "ONU设备", image: "/business/topo/images/icons/2.png",imageType:"2"});
    createDNDImage(toolbox, "/business/topo/images/icons/3.png", "路由器", {type: "Node", label: "路由器", image: "/business/topo/images/icons/3.png",imageType:"3"});
	createDNDImage(toolbox, "/business/topo/images/icons/4.png", "交换机", {type: "Node", label: "交换机", image: "/business/topo/images/icons/4.png",imageType:"4"});
	createDNDImage(toolbox, "/business/topo/images/icons/1.png", "三层交换机", {type: "Node", label: "三层交换机", image: "/business/topo/images/icons/1.png",imageType:"1"});
	createDNDImage(toolbox, "/business/topo/images/icons/5.png", "程控交换机", {type: "Node", label: "程控交换机", image: "/business/topo/images/icons/5.png",imageType:"5"});
	//createDNDImage(toolbox, "/business/topo/images/icons/ap.png", "AP", {type: "Node", label: "AP", image: "/business/topo/images/icons/ap.png"});
	//createDNDImage(toolbox, "/business/topo/images/icons/firewall.png", "防火墙", {type: "Node", label: "防火墙", image: "/business/topo/images/icons/firewall.png"});
	//createDNDImage(toolbox, "/business/topo/images/icons/fangyu.png", "入侵防御设备", {type: "Node", label: "入侵防御设备", image: "/business/topo/images/icons/fangyu.png"});
	//createDNDImage(toolbox, "/business/topo/images/icons/jiance.png", "入侵检测设备", {type: "Node", label: "入侵检测设备", image: "/business/topo/images/icons/jiance.png"});
	//createDNDImage(toolbox, "/business/topo/images/icons/pc.png", "PC", {type: "Node", label: "PC", image: "/business/topo/images/icons/pc.png"});
	//createDNDImage(toolbox, "/business/topo/images/icons/print.png", "打印机", {type: "Node", label: "打印机", image: "/business/topo/images/icons/print.png"});
	//createDNDImage(toolbox, "/business/topo/images/icons/camera.png", "摄像头", {type: "Node", label: "摄像头", image: "/business/topo/images/icons/camera.png"});
	//createDNDImage(toolbox, "/business/topo/images/icons/use.png", "应用服务器", {type: "Node", label: "应用服务器", image: "/business/topo/images/icons/use.png"});
}

function initDatas(){
    Q.loadJSON(jsonDataUrl, function(json){
        var topoNodes = json.nodes;
        var relations = json.relations;
        initTopology(topoNodes,relations);

        graph.callLater(function(){
            //var layouter = new Q.TreeLayouter(graph);
            //layouter.doLayout();
            graph.moveToCenter();
        })

        

       
    });
}



function initTopology(topoNodes,topoRelations)
{
    var map = {};
    for(var i=0;i<topoNodes.length;i++)
    {
        var node = topoNodes[i];
        var qNode = new Q.Node();
        qNode.name=node.name;
        qNode.location = new Q.Point(node.x,node.y);
        
        qNode.image = "/business/topo/images/icons/"+node.image+".png";
        qNode.newId = node.id;
        qNode.imageType = node.image;
        
        graph.graphModel.add(qNode);
        map[node.id] = qNode;
    }
    //for(var i=0;i<topoNodes.length;i++)
    //{
    //    var node = topoNodes[i];
    //    var parent = node.parent;
    //    if(parent){
    //        parent = map[parent];
    //        if(parent){
    //            map[node.id].parent = parent;
    //        }
    //    }
    //}
    for(var i=0;i<topoRelations.length;i++)
    {
        var relation = topoRelations[i];
        var nodeFrom = map[relation.from_id];
        var nodeTo = map[relation.to_id];
        if(nodeFrom && nodeTo){
            var edge = graph.createEdge(nodeFrom, nodeTo);
            edge.name = relation.name;
            edge.fromNode = relation.fromNode;
            edge.toNode = relation.toNode;
            edge.imageType = relation.edge_type;
            edge.type = 1;
			if(relation.edge_type==2) {
				edge.edgeType = Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;
			}
			
            edge.info = relation;
        }
    }
}