if(typeof(MEC_NS) == 'undefined'){
	MEC_NS = {};
}

MEC_NS.Picture = function(type, id, mecJson){
	this.type = type;
	if(!id){
		id = new UUID().toString();
	}
	this.id = id;
	if(!mecJson){
		mecJson = this.getDefaultMecJson();
	}
	this.mecJson = mecJson;
};

/*获取id。 必需的方法*/
MEC_NS.Picture.prototype.getID = function(){
	return this.id;
};

/*加载数据*/
MEC_NS.Picture.loadData = function(callback) {
	UrlSelectUtil.nav.loadNavItems(callback);
};

/*获取设计的html， 页面上怎么显示控件完全依赖于此方法。 必需的方法*/
MEC_NS.Picture.prototype.getDesignHtml = function(){
	return getDesignHtml(this);
};

/*页面上显示控件完成后调用此方法，主要用于一些必须要使用js对页面进行后置操作时，无需要此方法可至空。 不必需的方法，有此方法系统自动调用*/
MEC_NS.Picture.prototype.afterDesignHtmlBuild = function(){
	var theId = this.id;
};

/*获取构建属性编辑窗体的html，添加和单击控件后会调用此方法，由此方法去构建属性编辑窗体。 必需的方法*/
MEC_NS.Picture.prototype.getAttrDlgHtml = function(){

	var theId = this.id;
	
	var htm = "<div id=\"MADPture_"+theId+"\" class=\"MADPture_Container\">";
	htm += "<div class=\"title\">"+SystemEnv.getHtmlNoteName(4650)+"</div>";  //基本信息
	htm += "<div class=\"form-group\">"
			+ "<div class=\"row\" style='display: none'>"
				+ "<div class=\"col-4\" style=\"vertical-align: top;padding-top: 2px;\">"
					+ "<div class=\"add-img-control\" onclick=\"MADPicture_PicSet('"+theId+"');\">"
						+ "<img id=\"pic_img_"+theId+"\" style=\"display: none;\"/>"
						+ "<input type=\"hidden\" id=\"pic_type_"+theId+"\"/>"
						//+ "<input type=\"hidden\" id=\"pic_path_"+theId+"\"/>"
						+ "<div id=\"pic_addbtn_"+theId+"\" class=\"light-add\"></div>"
					+ "</div>"
				+ "</div>"
			+ "</div>"

			+ "<div class=\"row\">"
				+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4255)+"</span>"  //来源：
					+ "<div class=\"col-10 fupload-control\">"
					+ "<input id=\"pic_path_"+theId+"\" type=\"text\" class=\"form-control\"  data-autobind  placeholder=\""+SystemEnv.getHtmlNoteName(6198)+"\" style=\"padding-right:54px;box-sizing: border-box;\"/>"
					//填写图片路径或上传一张图片
					+ "<div class=\"form-control-inline-btn\" onclick=\"MADPicture_PicSet('"+theId+"');\">" + SystemEnv.getHtmlNoteName(3518) //添加
					+ "</div>"
				+ "</div>"
			+ "</div>"

			+ "<div class=\"row\">"
				+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4474)+"</span>"  //尺寸：
				+ "<div class=\"col-10\">"
					+ "<select id=\"picturesize_"+theId+"\" data-autobind class=\"form-control\" onchange=\"MADPicture_SizeChange('"+theId+"');\">"
						+ "<option value=\"1\">"+SystemEnv.getHtmlNoteName(4475)+"</option>"  //指定大小
						+ "<option value=\"2\">"+SystemEnv.getHtmlNoteName(4476)+"</option>"  //原图大小
						+ "<option value=\"3\">"+SystemEnv.getHtmlNoteName(4483)+"</option>"  //自适应
					+ "</select>"
				+ "</div>"
			+ "</div>"

			+ "<div id=\"pictureSizeAttr_"+theId+"\">"

				+ "<div class=\"row\">"
					+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4191)+"</span>"  //宽度：
					+ "<div class=\"col-m-8\">"
						+ "<input class=\"form-control\" data-autobind='width' id=\"width_"+theId+"\" type=\"text\" placeholder=\""+SystemEnv.getHtmlNoteName(4477)+"\"/>" //如：450，此处缺省则为页面宽度
					+ "</div>"
				+ "</div>"

				+ "<div class=\"row\">"
					+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4128)+"</span>"  //高度：
					+ "<div class=\"col-m-8\">"
						+ "<input class=\"form-control\" data-autobind='height' id=\"height_"+theId+"\" type=\"text\"/>"
					+ "</div>"
				+ "</div>"

				+ "</div>"
				+ "<div class=\"row\">"
					+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4478)+"</span>"  //链接：
					+ "<div class=\"col-m-8\">"
						+ "<div style='width:100%;' class=\"sbHolder\"><a href=\"javascript:void(0);\" onclick=\"javascript:showNavPanel('#uiview_0_"+theId+"');\" class=\"sbToggle sbToggle-btc\" style=\"right: 3px;top: 3px;\"></a>"
						+ "<input class=\"panel-input\" id=\"uiview_0_"+theId+"\" readonly='readonly' unselectable='on' autocomplete=\"off\" onclick=\"javascript:showNavPanel(this);\">"
						+ "<input id=\"ui_0_"+theId+"\" type=\"hidden\" />"
						+ "<input id=\"source_0_"+theId+"\" type=\"hidden\" />"
						+ "<input id=\"custom_0_"+theId+"\" type=\"hidden\"/>"
						+ "<input id=\"jscode_0_"+theId+"\" type=\"hidden\"/>"
					+ "</div>"
				+ "</div>"
			+ "</div>";


	htm += "</div>";		
	htm += "<div class=\"bottom\"><div class=\"save-btn\" onclick=\"refreshMecDesign('"+theId+"');\">"+SystemEnv.getHtmlNoteName(3451)+"</div></div>";  //确定
	htm += "</div>";
	
	htm += "<div class=\"MAD_Alert\">"+SystemEnv.getHtmlNoteName(4115)+"</div>";  //已生成到布局
	
	return htm;
};

/*构建属性编辑窗体完成后调用此方法，主要用于一些必须要使用js对页面进行后置操作时，无需要此方法可至空。 不必需的方法，有此方法系统自动调用*/
MEC_NS.Picture.prototype.afterAttrDlgBuild = function(){

	var theId = this.id;
	
	var pic_type = this.mecJson["pic_type"];
	var pic_path = this.mecJson["pic_path"];
	$("#pic_type_"+theId).val(pic_type);
	$("#pic_path_"+theId).val(pic_path);
	MADPicture_SetPicPath(theId, pic_path);
	var picturesize = Mec_FiexdUndefinedVal(this.mecJson["picturesize"]);
	$("#picturesize_"+theId).val(picturesize);
	MADPicture_SizeChange(theId);
	$("#width_"+theId).val(this.mecJson["width"]);
	$("#height_"+theId).val(this.mecJson["height"]);
	var navContainer = $('#source_0_' +theId).parent();
	var source = this.mecJson["source"];
	var uiid = this.mecJson["uiid"];
	var custom = this.mecJson["custom"];
	var jscode = this.mecJson["jscode"];
	$("#source_0_"+theId).val(source);
	UrlSelectUtil.nav.setNavLinkName( navContainer, {
		uiid: uiid,
		custom: custom,
		jscode: jscode,
		sourcetype: source
	});
	if(source==1){
		//获取dataurl
		var dataurl = UrlSelectUtil.MOBILE_PAGE_PREFIX + String(uiid).replace('homepage_',"");
		//调用生成
		UrlSelectUtil.link.setUrlLink($("#uiview_0_"+theId).parent(),dataurl);
	}else if(source==2){
		UrlSelectUtil.link.setUrlLink($("#uiview_0_"+theId).parent(),custom);
	}else if(source==3){
		$("#uiview_0_"+theId).val("脚本");
	}
	$("#ui_0_"+theId).val(uiid);
	$("#custom_0_"+theId).val(custom);
	$("#jscode_0_"+theId).val(jscode);
	$("#source_0_"+theId).val(source);
	MADPicture_SourceChange(theId);
};

/*获取JSON*/
MEC_NS.Picture.prototype.getMecJson = function(){
	var theId = this.id;
	
	this.mecJson["id"] = theId;
	this.mecJson["mectype"] = this.type;
	
	var $attrContainer = $("#MADPture_"+theId);
	if($attrContainer.length > 0){
		this.mecJson["pic_type"] = $("#pic_type_"+theId).val();	//0本地图片  1网址获取
		this.mecJson["pic_path"] = $("#pic_path_"+theId).val();
		var picturesize = $("#picturesize_"+theId).val();
		this.mecJson["picturesize"] = picturesize;
		if(picturesize == '3'){
			this.mecJson["width"] = '100%';
			this.mecJson["height"] = '';
		}else{
			this.mecJson["width"] = $("#width_"+theId).val();
			this.mecJson["height"] = $("#height_"+theId).val();
		}
		this.mecJson["source"] = $("#source_0_"+theId).val();	//1系统组件  2自定义
		this.mecJson["uiid"] = $("#ui_0_"+theId).val();
		this.mecJson["custom"] = $("#custom_0_"+theId).val();
		this.mecJson["jscode"] = $("#jscode_0_"+theId).val();
	}
	
	return this.mecJson;
};

MEC_NS.Picture.prototype.getDefaultMecJson = function(){
	return {
		id: this.id,
		mectype: this.type,
		picturesize: "1",
		pic_type: "0", //0本地图片  1网址获取
		pic_path: "",
		width: "450",
		height: "150",
	};
};

MEC_NS.Picture.prototype.getEmptyPicPath = function(){
	return "/mobilemode/images/mec/pic-icon_wev8.png";
};

function MADPicture_PicSet(theId){
	var pic_typeV = $("#pic_type_"+theId).val();
	var pic_pathV = $("#pic_path_"+theId).val();
	var params = "pic_type=" + pic_typeV + "&pic_path=" + encodeURIComponent(pic_pathV);

	showPicsetModal(params, function(result){
		var picPath = result["pic_path"];
		$("#pic_type_"+theId).val(result["pic_type"]);
		$("#pic_path_"+theId).val(picPath);
		
		MADPicture_SetPicPath(theId, picPath);
	});
}

function MADPicture_SetPicPath(theId, picPath){
	var $picAddbtn = $("#pic_addbtn_"+theId);
	var $picImg = $("#pic_img_"+theId);
	var mecHandler = MECHandlerPool.getHandler(theId);

	if(picPath && picPath != ""){
		$picAddbtn.hide();
		$picImg.show();
		$picImg[0].src = picPath;
	}else{
		$picImg.hide();
		$picAddbtn.show();
	}
	mecHandler.autobind && mecHandler.autobind.update();
}

function MADPicture_SizeChange(mec_id){
	var pictureSizeV = $("#picturesize_"+mec_id).val();
	if(pictureSizeV == "1"){
		$("#pictureSizeAttr_"+mec_id).show();
	}else{
		$("#pictureSizeAttr_"+mec_id).hide();
	}
}

function MADPicture_SourceChange(mec_id){
	var sourceV = $("#source_0_"+mec_id).val();
	var $ui = $("#ui_0_"+mec_id);
	var $custom = $("#custom_0_"+mec_id);
	var $jscode = $("#jscode_0_"+mec_id);
	if(sourceV == "1"){
		$custom.hide();
		$jscode.hide();
		$ui.show();
	}else if(sourceV == "2"){
		$ui.hide();
		$jscode.hide();
		$custom.show();
	}else if(sourceV == "3"){
		$custom.hide();
		$ui.hide();
		$jscode.show();
	}
}

function MADPicture_getUISelectOptionHtml(){
	var htm = "<option value=\"\"></option>",
		common_mec_nav_items = require('navPanel').getNavItems();

	for(var i = 0; i < common_mec_nav_items.length; i++){
		var uiid = common_mec_nav_items[i]["uiid"];
		var uiname = common_mec_nav_items[i]["uiname"];
		htm += "<option value=\""+uiid+"\">"+uiname+"</option>";
	}
	return htm;
}