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  placeholder=""  class="input-box da" type="text"  autocomplete="off" name="imurl['+pic+']" value=""> 图片：<input  class="input-box xiao" type="text" onblur="skpsize(this,1)"  autocomplete="off" name="pic['+pic+']" value=""> 上移幅度: <input  class="input-box txiao" type="text"   autocomplete="off" name="top['+pic+']" value="40">  </div><input  class="xwwhs" type="text"  autocomplete="off" name="x['+pic+']" value="'+jQuery('#anniu1').css('left')+'">						 <input  class="xwwhs" type="text"  autocomplete="off" name="y['+pic+']" value="'+jQuery('#anniu1').css('top')+'">						 <input  class="xwwhs" type="text"  autocomplete="off" name="w['+pic+']" value="245">						 <input  class="xwwhs" type="text"  autocomplete="off" name="h['+pic+']" value="165"> </div>';
	
	var newdiv = '<div id="anniu'+pic+'" title="图片'+pic+'" class="abs" style="left:'+jQuery('#anniu1').css('left')+'; top:'+jQuery('#anniu1').css('top')+'; color: rgb(255, 255, 255); font-size: 20px; line-height: 33px; width:245px; height:165px; text-align: center;"><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/O1CN012GuOkqZdDmbySzK_!!456989075.jpg"></div>';
	
	if (pic <= 30) {
		jq("#picbox").append(newpic);
		jq("#dmspmk").append(newdiv);
		dqplsd();
		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() {
	jQuery('#dmspmk .abs').draggable({
		stop: function () {
			var zjid = jQuery(this).attr("id");
			getxy(zjid, this.style.left, this.style.top);
		}
	});
}


function getxy(objid, xs, ys) {
	var reg = /\d+/; 
    var thisid = objid.match(reg);	
jQuery('[name="x['+thisid+']"]').val(xs);
	jQuery('[name="y['+thisid+']"]').val(ys);
}

function bianjikuang() {
	jQuery("input.input-box,select").change(function () {
		var thisname = jQuery(this).attr('name');
		var thiszhi = jQuery(this).val();
		getinput(thisname, thiszhi);
	});

}

//读取记录后的操作
function yunguiwei() {
	duname();
	imgguiwei();
htmguiwei();
}

function duname() {
	var objarrs = jQuery("input.input-box,select");
	for (var i = 0; i < objarrs.length; i++) {
		getinput(objarrs[i].name, objarrs[i].value)
	}
}


function imgguiwei(){
	var mun = jq("#picbox .control-group").length;
	for (var i = 0; i <= mun; i++) {	
		jQuery('#anniu'+i+' img').attr('src', jQuery('[name="pic['+i+']"]').val());		
		jQuery('#anniu'+i+'').width(jQuery('[name="w['+i+']"]').val());
		jQuery('#anniu'+i+'').height(jQuery('[name="h['+i+']"]').val());
		jQuery('#anniu'+i+'').css('left',jQuery('[name="x['+i+']"]').val());
		jQuery('#anniu'+i+'').css('top',jQuery('[name="y['+i+']"]').val());
}}

bianjikuang();

function getinput(objname, zhis) {
	switch (objname) {	
		case 'show_width':
			jQuery('#dmspmk').width(zhis);		
			break;
		case 'show_height':
			jQuery('#dmspmk').height(zhis);
			break;	
		case 'mkbjtu':
			jQuery('#dmspmk').css('background-image', 'url(' + zhis + ')');
			break;
		case 'mkbjs':
			jQuery('#dmspmk').css('background-color', zhis);
			break;	
		case 'bjsd':
			jQuery('#dmspmk').css('background-attachment', zhis);
			break;	
		default:
	}
}
function htmguiwei() {
    if (jQuery('#htmlxs1').val() != "none") { 
        htmlChange(1);
        jQuery('#htmldome1').html(jQuery('#htmldaima1').val());
        jQuery('#htmldome1').css('width', jQuery('[name="dmw[1]"]').val());
        jQuery('#htmldome1').css('height', jQuery('[name="dmh[1]"]').val());
        jQuery('#htmldome1').css('left', jQuery('[name="dmx[1]"]').val());
        jQuery('#htmldome1').css('top',jQuery('[name="dmy[1]"]').val());
    }

    if (jQuery('#htmlxs2').val() != "none") { 
        htmlChange(2);
        jQuery('#htmldome2').html(jQuery('#htmldaima2').val());
        jQuery('#htmldome2').css('width', jQuery('[name="dmw[2]"]').val());
        jQuery('#htmldome2').css('height', jQuery('[name="dmh[2]"]').val());
        jQuery('#htmldome2').css('left', jQuery('[name="dmx[2]"]').val());
        jQuery('#htmldome2').css('top',jQuery('[name="dmy[2]"]').val());
    }
    
   
 }