function wbparseno(val){
	val = val || 0;
	val = (val<0 ? 0 : val);
	return parseint(val);
};
(function($){
	$.fn.jqdrag=function(h){return i(this,h,'d');};
	$.fn.jqresize=function(h){return i(this,h,'r');};
	$.jqdnr={
		$options:{},
		$callopt:{mode:'',id:'',val:'',lnk:''},
		$callfn:'',
		dnr:{},e:0,
		drag:function(v){
			if(m.k == 'd'){
				e.css({left:m.x+v.pagex-m.px,top:m.y+v.pagey-m.py});
			}else{
				e.css({width:math.max(v.pagex-m.px+m.w,0),height:math.max(v.pagey-m.py+m.h,0)});
			}
			return false;
		},
		stop:function(){
			var pos=e.parent();
			var pos_wh={width:pos.width(),height:pos.height()};
			var map_pos={left:e.position().left,top:e.position().top,width:e.width(),height:e.height()};
			var s = "pos_w="+pos_wh.width+",pos_h="+pos_wh.height+",<br/>map_pos_left="+map_pos.left+",map_pos_top="+map_pos.top+",<br/>map_pos_width="+map_pos.width+",map_pos_height="+map_pos.height;
			var aval = wbparseno(map_pos.left)+","+wbparseno(map_pos.top)+","+wbparseno(map_pos.left+map_pos.width)+","+wbparseno(map_pos.top+map_pos.height);
			//alert(aval);			
			pos.parent().find('p[ref='+e.attr("ref")+'] .rect-value').val(aval);
			//$("#debug").html($.jqdnr.$options.linklabel);
			e.css('opacity',m.o);$(document).unbind('mousemove',j.drag).unbind('mouseup',j.stop);
		}
	};
	var j=$.jqdnr,m=j.dnr,e=j.e,
	i=function(e,h,k){
		return e.each(function(){
			var opts=$.jqdnr.$options;
			h=(h)?$(h,e):e;
			h.bind('mousedown',{e:e,k:k},function(v){
				if(opts.modeview) return false;
				var d=v.data,p={};e=d.e;
				/*attempt utilization of dimensions plugin to fix ie issues*/
				if(e.css('position') != 'relative'){try{e.position(p);}catch(e){}}
				m={x:p.left||f('left')||0,y:p.top||f('top')||0,w:f('width')||e[0].scrollwidth||0,h:f('height')||e[0].scrollheight||0,px:v.pagex,py:v.pagey,k:d.k,o:e.css('opacity')};
				e.css({opacity:0.8});	
				$(document).mousemove($.jqdnr.drag).mouseup($.jqdnr.stop);
				return false;
			}).unbind("mouseover").mouseover(function(e){
				$(this).find('.'+opts.mapbgcmp).css({background:opts.mapviewcolor,opacity:opts.mapopacity});
				return false;
			}).unbind("mouseout").mouseout(function(e){
				$(this).find('.'+opts.mapbgcmp).css({background:opts.mapcolor,opacity:opts.mapviewopacity});
				return false;
			}).unbind('click').click(function(e){
				if(jquery.isfunction($.jqdnr.$callfn)){
					var val=$(this).parent().parent().find('p[ref='+$(this).attr("ref")+'] .rect-value').val();
					var lnk=$(this).parent().parent().find('p[ref='+$(this).attr("ref")+'] .link-value').val();
					var opt=$.jqdnr.$callopt;
					opt.val=val;
					opt.lnk=lnk;
					$.jqdnr.$callfn(opt);
				};
				return false;
			});
		});
	},
	f=function(k){return parseint(e.css(k))||false;};
})(jquery);
/**
 * @name jquery imagemaps plugin
 * @license gpl
 * @version 0.0.4
 * @date 08 04, 2020
 * @category jquery plugin
 * @author sj li
 * @copyright (c) sj li
 */
(function($) {
    jquery.fn.imagemaps = function(popts) {
		//settings,callfn,opt
		popts = popts || {};
		settings=popts.items;
		callfn=popts.fn;
		opt=popts.options;
        var $container = this;
		var $options={"imgcmp":"image-maps-container","btncmp":"button-container","addtext":"增加热区","savetext":"保存热区","lnkcmp":"link-container","linklabel":"链接","lnktitle":"标题","poscmp":"position-container","mapcmp":"map-position","mapbgcmp":"map-position-bg","mapcolor":"#333","mapviewcolor":"#f00","mapopacity":0.5,"mapviewopacity":0.3,"createmap":false,defaulttype:"text","modeview":true,"hideedit":true};
        if ($container.length == 0){
			return false;
		};
		if(settings != undefined && !jquery.isarray(settings)){
			return false;
		};
		if(jquery.isplainobject(opt)){
			for(var p in opt){
				$options[p] = opt[p];
			}
		}
		settings = settings || [];
		$_imgname = $container.attr("id");
		$mapname = $_imgname+"_map";
		var selexists="#"+$options.imgcmp+$_imgname;
		if($(selexists).length>0) return;
		if($options.createmap){
			var cs = "";
			for(var i=0;i<settings.length;i++){
				cs += "<area shape='rect' coords='"+settings[i].xy+"' href='"+settings[i].href+"'/>";
			};
			$container.find("map").remove();
			$container.append("<map name='"+$mapname+"'>"+cs+"</map>");
		};
		$container.each(function(){
			var container = $(this);
			var $images = container.find('img[ref=imagemaps]');
			$images.wrap('<div id="'+$options.imgcmp+$_imgname+'" class="'+$options.imgcmp+'" style="position:relative;"></div>').css('border','1px solid #ccc');
			$images.each(function(){
				var _img_container = $(this).parent();
				_img_container.append('<div class="'+$options.btncmp+'"><input type="button" class="add" value="'+$options.addtext+'" />&nbsp;&nbsp;<input type="button" class="save" value="'+$options.savetext+'" /></div>').append('<div class="'+$options.lnkcmp+'"></div>').append('<div class="'+$options.poscmp+'" style="position:absolute"></div>');				
				var _img_offset = $(this).offset();
				var _img_container_offset = _img_container.offset();				
				_img_container.find('.'+$options.poscmp).css({
					top: _img_offset.top - _img_container_offset.top,
					left: _img_offset.left - _img_container_offset.left,
					width:$(this).width(),
					height:$(this).height(),
					border:'1px solid transparent'
				});
				if($mapname !=''){
					var index = 1;
					var _link_conrainer = container.find('.'+$options.lnkcmp);
					var _position_conrainer = container.find('.'+$options.poscmp);
					for(var i=0;i<settings.length;i++){
						var coords = settings[i].xy;
						var href = settings[i].href;
						_link_conrainer.append('<p ref="'+index+'" class="map-link"><span class="link-number-text">'+$options.linklabel+'_'+index+'</span>: <input type="text" size="60" class="link-value" name="'+$_imgname+'_link_'+index+'" value="'+href+'" /><input type="'+$options.defaulttype+'" class="rect-value" name="'+$_imgname+'_rect_'+index+'" value="'+coords+'" /></p>');
						coords = coords.split(',');
						_position_conrainer.append('<div ref="'+index+'" class="'+$options.mapcmp+'" style="left:'+coords[0]+'px;top:'+coords[1]+'px;width:'+(coords[2]-coords[0])+'px;height:'+(coords[3]-coords[1])+'px;"><div class="'+$options.mapbgcmp+'"></div><span class="link-number-text">'+$options.lnktitle+'_'+index+'</span><span class="delete">x</span><span class="resize"></span></div>');
						index++;
					};
				}
			});			
		});
		function btnfn(btn,para){
			if($options.modeview) return;
			var container = $(btn).parent().parent();
			var imgid = container.parent().attr("id");
			var _link_container = container.find('.'+$options.lnkcmp);
			var _position_container = container.find('.'+$options.poscmp);
			var area_w = math.floor(container.find('img[ref=imagemaps]').attr("width"))/2-2;
			var area_h = math.floor(container.find('img[ref=imagemaps]').attr("height")/3)-2;
			var left=5,top=5;
			var x2=left+area_w,y2=top+area_h;
			var aval = left+","+top+","+x2+","+y2;
			var index = _link_container.find('.map-link').length +1;
			if(para=="save"){
				var vals=[];
				var lnks=[];
				_link_container.find(" .rect-value").each(function(index){
					vals.push($(this).val());
				});
				_link_container.find(" .link-value").each(function(index){
					lnks.push($(this).val());
				});
				if(jquery.isfunction(callfn)){
					callfn({'mode':para,'id':imgid,'val':vals,'lnk':lnks});
				}
				return;
			}
			_link_container.append('<p ref="'+index+'" class="map-link"><span class="link-number-text">'+$options.linklabel+'_'+index+'</span>: <input type="text" class="link-value" name="'+$_imgname+'_link_'+index+'" value="#" /><input type="'+$options.defaulttype+'" class="rect-value" name="'+$_imgname+'_rect_'+index+'" value="'+aval+'" /></p>');
			_position_container.append('<div ref="'+index+'" class="'+$options.mapcmp+'" style="left:'+left+'px;top:'+top+'px;width:'+area_w+'px;height:'+area_h+'px;"><div class="'+$options.mapbgcmp+'"></div><span class="link-number-text">'+$options.lnktitle+'_'+index+'</span><span class="delete">x</span><span class="resize"></span></div>');
			bind_map_event(imgid);
			define_css();
		}
		$('#'+$_imgname+' .'+$options.btncmp+' .add').click(function(){
			btnfn(this,'add');
		});
		$('#'+$_imgname+' .'+$options.btncmp+' .save').click(function(){
			btnfn(this,'save');
		});
		function bind_map_event(imgid){
			$.jqdnr.$options = $options;
			$.jqdnr.$callfn=callfn;
			$.jqdnr.$callopt.id=imgid;
			$.jqdnr.$callopt.mode = ($options.modeview)?"view":"edit";
			$('#'+imgid+' .'+$options.poscmp+' .'+$options.mapcmp).each(function(index){
				$(this).jqresize($(this).find(".resize")).jqdrag();
			});
			$('#'+imgid+' .'+$options.poscmp+' .'+$options.mapcmp+' .delete').unbind('click').click(function(){
				var map_position = $(this).parent();
				var container = map_position.parent().parent();
				var ref = map_position.attr('ref');
				var _link_container = container.find('.'+$options.lnkcmp);
				var _position_container = container.find('.'+$options.poscmp);
				var val=_link_container.find('.map-link[ref='+ref+'] .rect-value').val();
				var lnk=_link_container.find('.map-link[ref='+ref+'] .link-value').val();
				_link_container.find('.map-link[ref='+ref+']').remove();
				_position_container.find('.'+$options.mapcmp+'[ref='+ref+']').remove();
				var index = 1;
				_link_container.find('.map-link').each(function(){
					$(this).attr('ref',index).find('.link-number-text').html($options.linklabel+'_'+index);
					index ++;
				});
				index = 1;
				_position_container.find('.'+$options.mapcmp).each(function(){
					$(this).attr('ref',index).find('.link-number-text').html($options.linklabel+'_'+index);
					index ++;
				});
				if(jquery.isfunction(callfn)) callfn({"mode":"del","id":imgid,"val":val,"lnk":lnk});
			});
		};
		bind_map_event($_imgname);		
		function define_css(){
			_display = ($options.modeview) ? "none" : "block";
			$container.find('.'+$options.btncmp).css({display:_display});
			_editdisplay = ($options.hideedit) ? "none" : "block";
			$container.find('.'+$options.lnkcmp).css({display:_editdisplay});
			$container.find('.'+$options.mapcmp).css({position:'absolute',border:'1px solid #333','font-weight':'bold'});
			$container.find('.link-number-text').css({display:"none"});
			_opacity = ($options.modeview) ? $options.mapviewopacity : $options.mapopacity;
			$container.find('.'+$options.mapcmp+' .'+$options.mapbgcmp).css({
				position:'absolute',
				top:0,left:0,right:0,bottom:0,
				background:$options.mapcolor,
				opacity:_opacity
			});
			$container.find('.'+$options.mapcmp+' .resize').css({
				display:_display,
				position:'absolute',
				right:0,
				bottom:0,
				width:10,
				height:10,
				cursor:'nw-resize',
				background:'#000'
			});
			$container.find('.'+$options.mapcmp+' .delete').css({
				display:_display,
				position:'absolute',
				right:0,
				top:0,
				width:10,
				height:12,
				'line-height':'11px',
				'font-size':12,
				'font-weight':'bold',
				background:'#000',
				color:'#fff',
				'font-family':'arial',
				'padding-left':'2px',
				cursor:'pointer',
				opacity : 1
			});
		};
		define_css();
    };
})(jquery);