zhikeyidon();


function addpic()
{
	var pic=jq("#picbox .control-group").length;
	pic++;	
	var newpic='<div class="control-group"><label class="control-label" for=""> 链接 '+pic+'： </label><div class="control">  <input id="picnum'+pic+'"   class="input-box" type="text" autocomplete="off" name="imurl['+pic+']" value="">      按钮图A：                      <input id="linknum'+pic+'" class="input-box txiao" type="text"  onblur="skpsize(this,1)"   autocomplete="off" name="pica['+pic+']" value="">                      按钮图B：                      <input  class="input-box txiao" type="text" autocomplete="off" name="picb['+pic+']" value="">                      海报大图:                      <input class="input-box txiao" type="text"   onblur="skpsize(this,3)"   autocomplete="off" name="datu['+pic+']" value="">  <input style="display: none;"  type="text" name="x['+pic+']" value="'+jq('[name="dtx"]').val()+'">	<input  style="display: none;"  type="text" name="y['+pic+']" value="'+jq('[name="dty"]').val()+'">   <input style="display: none;"  type="text" name="w['+pic+']" value="300">	<input  style="display: none;"  type="text" name="h['+pic+']" value="76">                </div></div>';
	
	var newpop = '<span id="anniu'+pic+'" title="控制按钮'+pic+'" data-mkid="'+pic+'" class="htmlmk poabs" style="z-index:2;height: 76px; width:300px; left:'+jq('[name="dtx"]').val()+'; top:'+jq('[name="dty"]').val()+';  position: absolute;    cursor: move;z-index:3;"><i title="其他按钮横向对齐此按钮" data-mkid="'+pic+'" onclick="zjdq(this,1);"  class="hdq dqan">-</i><i onclick="zjdq(this,2);"  data-mkid="'+pic+'" title="其他按钮竖向对齐此按钮" class="zdq dqan" style="left: 15px;">:</i>  <img src="https://img.alicdn.com/imgextra/i4/456989075/TB2sHIbgeOSBuNjy0FdXXbDnVXa-456989075.jpg" /> </span>';
	
	if(pic<=30){
		jq("#picbox").append(newpic);
jq("#dmspmk").append(newpop);
		zhikeyidon();
	}else{
		alert("数量建议不要超过30个！");
	}
}
function delpic()
{
	var pic=jq("#picbox .control-group").length;
	pic--;
	if(pic>=1){
		jq("#picbox .control-group").eq(pic).remove();
		jq("#anniu"+(pic+1)).remove();
			
	}else{
		alert("亲再删就没有了啊！！！！");
	}
}


function zhikeyidon(){
	jq(function() {
jq('#dmspmk .poabs').draggable(
	{ 
		stop: function(){
			var zjid = jq(this).attr("data-mkid");
		//alert(zjid);
			jq('[name="x['+zjid+']"]').val(this.style.left);
			jq('[name="y['+zjid+']"]').val(this.style.top);
		} 
	}); 
	
jq('#dmspmk .poabsdt').draggable(
	{ 
		stop: function(){
			//alert(this.style.width);
			jq('[name="dtx"]').val(this.style.left);
			jq('[name="dty"]').val(this.style.top);
		} 
	}); 	
	
jq('#dmspmk #zuojt').draggable(
	{ 
		stop: function(){
			//alert(this.style.width);
			jq('[name="zjtx"]').val(this.style.left);
			jq('[name="zjty"]').val(this.style.top);
		} 
	}); 		
		
jq('#dmspmk #youjt').draggable(
	{ 
		stop: function(){
			//alert(this.style.width);
			jq('[name="yjtx"]').val(this.style.left);
			jq('[name="yjty"]').val(this.style.top);
		} 
	}); 	
		
	});
	
}
function yunguiwei() {
    for (var i = 0; i <= jq("#picbox .control-group").length; i++) {
    
//定位按钮
        jq("#anniu"+i+" img").attr('src',jq('[name="pica['+i+']"]').val());
        jq('#anniu'+i).css("left",jq('[name="x['+i+']"]').val());       
        jq('#anniu'+i).css("top",jq('[name="y['+i+']"]').val()); 
        jq('#anniu'+i).css("width",jq('[name="w['+i+']"]').val());        
        jq('#anniu'+i).css("height",jq('[name="h['+i+']"]').val());   
    }
    
    //箭头归位
     jq("#zuojt").attr('src',jq('[name="zuo"]').val());
     jq('#zuojt').css("left",jq('[name="zjtx"]').val()); 
     jq('#zuojt').css("top",jq('[name="zjty"]').val());   
     jq('#zuojt').css("width",jq('[name="zjtk"]').val()); 
     jq('#zuojt').css("height",jq('[name="zjtg"]').val());  
    
     jq("#youjt").attr('src',jq('[name="you"]').val());
     jq('#youjt').css("left",jq('[name="yjtx"]').val()); 
     jq('#youjt').css("top",jq('[name="yjty"]').val());   
     jq('#youjt').css("width",jq('[name="yjtk"]').val()); 
     jq('#youjt').css("height",jq('[name="yjtg"]').val());  
    
    
    //大图归位
     jq("#datu1").attr('src',jq('[name="datu[1]"]').val());
     jq('#datu1').css("left",jq('[name="dtx"]').val()); 
     jq('#datu1').css("top",jq('[name="dty"]').val());   
     jq('#datu1').css("width",jq('[name="dtw"]').val()); 
     jq('#datu1').css("height",jq('[name="dth"]').val());  
    
    //背景归位
    jq("#dmspmk").css({
	"background-image":'url("'+jq('[name="bgtu"]').val()+'")',
	"width":jq('[name="show_width"]').val(),
	"height":jq('[name="show_height"]').val()
}); 
}