/* -------------------------- */		
/*     svglayerPlugin         */		
/* -------------------------- */	
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.svglayerPlugin = global.svglayerPlugin || {})));
}(this, function (exports) { 'use strict';

var svglayerPlugin = function svglayerPlugin(__mapper = {}) {

	var width = 600 // __mapper().config.width || 600
	var height = 400 // __mapper().config.height || 400

	var svg = d3.select('body').selectAll("svg").data(['svg'])
		.enter().append("svg")
		.attr("class", "svg")
		.attr("id", "svg")
		.attr("width", width)
		.attr("height", height)
		.style("border", "1px solid lightgray")
					// .on("mousedown", __mapper().config.mousedown)	
	
	
	
	var svglayerPlugin = function svglayerPlugin(payload) {
		var width = 600
		var height = 400
	
	  if ( d3.select('.plugin-style-block').empty() ) {
      d3.select('head').append('style').attr('class', 'plugin-style-block')
      .html('');
    }
		

	
		if (payload == null ) {								
						// d3.selectAll("svg").data([]).exit().remove()
						var svgLayer = d3.select('body').selectAll("svg").data(['svg'])
							.enter().append("svg")
							.attr("class", "svg")
							.attr("id", "svg")
							.attr("width", function() {return (typeof width !== 'undefined') ? width : 600})
							.attr("height", function() {return (typeof height !== 'undefined') ? height : 400})
							.style("border", "1px solid lightgray")
						return svgLayer

		} else if (payload == 'image') {
				  if ( d3.select('.image').empty() ) {
						var img = svg.selectAll("image").data([0])
								.enter()
									.insert("svg:image")
										.attr("xlink:href", "./image.jpg")
											.attr("x", "0")
											.attr("y", "0")
											.attr("width", function() {return (typeof width !== 'undefined') ? width : 600})
											.attr("height", function() {return (typeof height !== 'undefined') ? height : 400})
															
						return img
					}
		} else {
					// d3c.layer({cls: 'svg:g.links', item: 'path.link:data/diagonal')
					var dfn = function(d, i) { 
							return (d.id !== undefined) ? d.id :
												(d.idx !== undefined) ? d.idx :
													(d.key !== undefined) ? d.key : i 
					}

					// cls aggregate
					let parent =  (payload.parent !== undefined) ? payload.parent : 'svg'
					let cls = payload.cls || 'layer'
					let clsParts = cls.split(':')		// parent:g.class
					if (clsParts.length > 1) {		
							parent = clsParts[0]				// get parent
							let classPath = clsParts[1]
							
							let clsSubParts =classPath.split('.')		// parent:g.class
							if (clsSubParts.length > 1) {		
									cls = clsSubParts[1]				// get layer class
							}
					}

					
					// item aggregate
					var item = payload.item				// needed				
					var subclass = payload.subclass || item
					var itemParts = item.split('.')
					var data = 		payload.data || []
					if (itemParts.length > 1) {
							item = itemParts[0]
							subclass = itemParts[1]
							
							var dataParts = subclass.split(':')
							if (dataParts.length > 1) {
								subclass = dataParts[0]
								data = dataParts[1]
							}
							
					}
					var idfn = payload.idfn || dfn
					
					var layerMark = d3.select(parent).selectAll('.' + cls).data([cls])
					var layerEnter = layerMark.enter().append("g").attr("class", cls)		

					var elemsUpdate = d3.select("." + cls).selectAll(item + '.' + subclass).data(data, idfn)	
				
					var elemsEnter = elemsUpdate.enter().append(item).attr("class", subclass)
					var elemsMerge = elemsEnter.merge(elemsUpdate)
					var elemsExit = elemsUpdate.exit() //.remove()
					return {e: elemsEnter , u: elemsUpdate, x: elemsExit, m: elemsMerge}
					
		}	
	
	}

	svglayerPlugin.svg = function svg () {
		return d3.select("svg")
	}
	
	
	return svglayerPlugin

}

exports.svglayerPlugin = svglayerPlugin

}));