    function generatePicAreaHTML( img_name_suffix ,index_id, img_title_value,img_suffix_value, isRequired, need_inputame) {
        img_name_value = img_name_suffix;
        var title = "";
        if (index_id > 0) { img_name_value = img_name_suffix + index_id; }
		if(need_inputame){ title = img_title_value; }else{ title = ''; }
        var pic_area_html = "";
                 pic_area_html += '<div class="up_showpic" id="up_showpic_' + img_name_value + '" style="display:block ;height:30px" >';
                 pic_area_html += '    <img  id="showpic_' + img_name_value + '" style="display:inline"   src="http://cache.ordns.com/images/2014/0817/upload_padding.png" ';
                 pic_area_html += '    title = "' + img_title_value + '" />';
                 pic_area_html += '    <a href="javascript:showPicArea(\'' + img_name_value + '\',\'' + img_title_value + '\',\'' + img_suffix_value + '\');showNextPicArea(\'' + img_name_suffix + '\',' + index_id + ');" ';
                 pic_area_html += '           style="display:line" id="upload_pic_' + img_name_value + '">上传图片</a>';
                 pic_area_html += '    <a href="###" style="display:none" onmouseover="showBigPic(\'' + img_name_value + '\')"   onmouseout="showBigPic(\'' + img_name_value + '\')"    ';
                 pic_area_html += '          id="preview_pic_' + img_name_value + '">图片预览</a>';
                 pic_area_html += '    <a href="javascript:deletePic(\'' + img_name_value + '\')" id="delete_pic_' + img_name_value + '" style="display:none">删除</a>';
                 pic_area_html += '    <input type="hidden" id="is_required_' + img_name_value + '" value="' + isRequired + '" >';
                 pic_area_html += '    <input type="hidden" id="id_' + img_name_value + '" value="" >';
				 pic_area_html += '    <input type="hidden" name="'+  img_name_value +'" title="'+ title +'" id="'+ img_name_value + '"  >';
                 pic_area_html += '    <span id="big_showpic_' + img_name_value + '"  style="display:none">';
                 pic_area_html += '        <div class="big_showpic"  >';
                 pic_area_html += '            <img id="big_showpic_src_' + img_name_value + '" src="about:blank" />';
                 pic_area_html += '        </div>';
                 pic_area_html += '        <i class="outter"  >◆</i><i class="inner" >◆</i>';
                 pic_area_html += '    </span>';
                 pic_area_html += '</div>';
                 pic_area_html += '<div class="clear"></div>';
        return pic_area_html;
    }
    function showBigPic(img_name_value) {
           var pic_area_object = document.getElementById('big_showpic_' + img_name_value);
           if (!pic_area_object) { showAlertBox("未找到图片上传组件"); return; }
           if (pic_area_object.style.display == 'block') { pic_area_object.style.display = 'none'; } else {
				var pic_src = document.getElementById('big_showpic_src_'+img_name_value);
				if(pic_src){ //重新拉取一下
					var img_src = pic_src.src;
					var imgIndex = img_src.indexOf("?");
					if(imgIndex > 0){ img_src = img_src.substring(0,imgIndex); }else{ img_src = img_src; }
					pic_src.src = "about:blank";
					pic_src.src = img_src;//+"?t="+Math.random();
				}
               pic_area_object.style.display = 'block';
           }
    }
    function showNextPicArea( img_name_suffix ,index_id) {
        if (index_id == -1) { index_id = 1; }
        img_name_value = img_name_suffix + (index_id+1);
        if (document.getElementById('up_showpic_' + img_name_value) != null) {
			document.getElementById('up_showpic_' + img_name_value).style.display = 'block';   
        }
    }
    function showPicArea( img_name_value , img_title_value,img_suffix_value) {
           var pic_area_object = document.getElementById('pic_area');
           if (!pic_area_object) { showAlertBox("未找到图片上传组件"); return; }
           pic_area_object.style.display = 'block';
		   //记录正在上传图片对应的input id的后缀
		   UPLOAD_IMG_NAME_VALUE = img_name_value;
            //清除上次上传框留下的痕迹。
           var jsonImgNameStatus = 'pic_area_status';
           document.getElementById(jsonImgNameStatus).innerHTML = '';
           document.getElementById('upload_pic_form').reset();
           document.getElementById('pic_text').innerHTML = '<strong>图片不允许超过<strong>1024 KB</strong>，支持jpg、jpeg、gif格式。</strong>';
           document.getElementById('upload_name').value=img_title_value;
           if (img_title_value.length > 10) {
               document.getElementById('pic_area_title').innerHTML = "上传图片(" + img_title_value.substring(0,10) + "...)";
            } else {
               document.getElementById('pic_area_title').innerHTML = "上传图片(" + img_title_value + ")"; 
            }
           
            if(!UPLOAD_IMG_MASK){
	             UPLOAD_IMG_MASK=$floatMask({
                     backgroundColor:"#000000",//默认#000000
                     zIndex:$("#pic_area").css("z-index")?($("#pic_area").css("z-index")-1):100,//默认250
                     opacity:0.3//默认0.8
                 });
	         }
	        UPLOAD_IMG_MASK.show();
			if($.cookie("upload_pic_cloud")=="1"){$("#upload_pic_cloud").attr("checked","checked");}
   }
   function closePicArea() {
           var pic_area_object = document.getElementById('pic_area');
           if (!pic_area_object) {
                showAlertBox("未找到图片上传组件");
                return;
           }
           pic_area_object.style.display = 'none';
		   UPLOAD_IMG_MASK && UPLOAD_IMG_MASK.hide();
    }

    //上传图片
    function uploadImg()
    {
        var img_name_value = UPLOAD_IMG_NAME_VALUE;
        var jsonImgNameStatus = 'pic_area_status';
        var path = document.getElementById('upload_pic').value;
        if(!path) return ;
        var temp = path.split( '.' );
        var suffix = temp[temp.length - 1].toLowerCase();
        if ( (suffix != 'jpg') && (suffix != 'png') && (suffix != 'bmp') && (suffix != 'jpeg') && (suffix != 'gif') )
        {
            document.getElementById(jsonImgNameStatus).innerHTML = '<font style="color:red">文件类型格式不正确</font>';return;
        }
        document.getElementById(jsonImgNameStatus).innerHTML = '<font style="color:red">正在上传...</font>';
        document.getElementById("img_name").value = img_name_value;
	    document.getElementById("upload_url").value = '';
        document.getElementById('upload_pic_form').submit();
    }
	function uploadCloud(){
		var obj=$("#upload_pic_cloud");
		if(obj.attr("checked")==true || obj.attr("checked")=="checked"){
			$.cookie("upload_pic_cloud","1");
		}else{
			$.cookie("upload_pic_cloud","0");
		}
	}
    function uploadUrl()
    {
        var img_name_value = UPLOAD_IMG_NAME_VALUE;
        var jsonImgNameStatus = 'pic_area_status';
        var url = document.getElementById('upload_url').value;
        if(!url) return ;
        var temp = url.split( '.' );
        var suffix = temp[temp.length - 1].toLowerCase();
        if ( (suffix != 'jpg') && (suffix != 'png') && (suffix != 'bmp') && (suffix != 'jpeg') && (suffix != 'gif') )
        {
            document.getElementById(jsonImgNameStatus).innerHTML = '<font style="color:red">文件类型格式不正确</font>';return;
        }
        document.getElementById(jsonImgNameStatus).innerHTML = '<font style="color:red">正在上传...</font>';
        document.getElementById("img_name").value = img_name_value;
        document.getElementById('upload_pic_form').submit();
    }

    //上传图片后的处理
   function showUploadImgResult( json ){
        var jsonImgNameStatus = 'pic_area_status';
        var img_name_value = UPLOAD_IMG_NAME_VALUE;
        var pic_path_value = json['url'];
		//上传成功
		if(json['state'] == 'SUCCESS'){
		    //try{
                    document.getElementById(jsonImgNameStatus).innerHTML = '<span class="msg0-icon-right"></span>上传成功！';
					//上传图片图标-->上传成功图标
                    document.getElementById('showpic_' + img_name_value).style.display = 'inline';
                    document.getElementById('showpic_' + img_name_value).src = 'http://pics0.paipaiimg.com/update/20130819/index_upload_success.png';
//                    document.getElementById('upload_pic_' + img_name_value).innerHTML = "修改图片";
                    // 隐藏 上传图片链接   
					document.getElementById('upload_pic_' + img_name_value).style.display = "none";
					// 显示 图片预览链接
                    document.getElementById('preview_pic_' + img_name_value).style.display = "inline";
                    //显示 删除链接
                    document.getElementById('delete_pic_' + img_name_value).style.display = 'inline';
					//图片预览的图片src
                    document.getElementById('big_showpic_src_' + img_name_value).src = pic_path_value;
					if(typeof(json['id'])!='undefined'){ document.getElementById('id_' + img_name_value).value = json['id']; }
					//将上传成功后的src保存到隐藏的input框中 url||中文名称
					if(document.getElementById(img_name_value).title){
					    document.getElementById(img_name_value).value = pic_path_value + "||" + document.getElementById(img_name_value).title;
					}else{
					    document.getElementById(img_name_value).value = pic_path_value ;
					}
                    //关闭 上传框
					if(img_name_value in GLOBALIMG){
                         GLOBALIMG[img_name_value] = true;
                     }
                    setTimeout(closePicArea, 30);
                //}catch(e){}
                
		}else{
		//上传失败
		    GLOBALIMG[img_name_value] = false;

            document.getElementById(jsonImgNameStatus).innerHTML = '<font style="color:red">'+ json['state'] +'</font>';
		}
		
    }
    
    function deletePic(img_name_value ) {
	   //记录需要删除图片的id后缀
	    DELETE_IMG_NAME_VALUE = img_name_value;
		//需要删除图片的url
		
	    var deleteurl = document.getElementById('big_showpic_src_' + img_name_value).src ;
        if(!deleteurl || deleteurl.indexOf("about:blank") == 0 ){
		    showAlertBox("抱歉，没有图片需要删除~~");
			return false;
		}
		
		//展示确认浮层框
		showConfirmBox();
        
    }
	
	//删除图片的回调
    function deleteShopImageCallback() {
	    //取回要删除图片的id后缀
        var  img_name = DELETE_IMG_NAME_VALUE;
		 closeDialog("confirmBox");
            //document.getElementById('showpic_' + img_name_value).style.display = 'inline';
            document.getElementById('showpic_' + img_name).src = 'http://imgcache.qq.com/qqshop/commission/css/upload_pedding.png';
            document.getElementById('upload_pic_' + img_name).style.display = "inline";
            document.getElementById('preview_pic_' + img_name).style.display = "none";
            document.getElementById('upload_pic_' + img_name).innerHTML = "重新上传";
            document.getElementById('delete_pic_' + img_name).style.display = 'none';
            document.getElementById('big_showpic_src_' + img_name).src = "about:blank";
            document.getElementById('id_'+img_name).value = "";
            document.getElementById(img_name).value = "";
            //重置图片是否必填的标志位
            var isRequired = ($('#is_required_'+img_name).val());
            if(img_name in GLOBALIMG){
                GLOBALIMG[img_name] = (isRequired == 'true')? false: true;
            }
    }

function $isBrowser(str){
	str=str.toLowerCase();
	var b=navigator.userAgent.toLowerCase();
	var arrB=[];
	arrB['firefox']=b.indexOf("firefox")!=-1;
	arrB['opera']=b.indexOf("opera")!=-1;
	arrB['safari']=b.indexOf("safari")!=-1;
        arrB['chrome']=b.indexOf("chrome")!=-1;
	arrB['gecko']=!arrB['opera']&&!arrB['safari']&&b.indexOf("gecko")>-1;
	arrB['ie']=!arrB['opera']&&b.indexOf("msie")!=-1;
	arrB['ie6']=!arrB['opera']&&b.indexOf("msie 6")!=-1;
	arrB['ie7']=!arrB['opera']&&b.indexOf("msie 7")!=-1;
        arrB['ie8']=!arrB['opera']&&b.indexOf("msie 8")!=-1;
        arrB['ie9']=!arrB['opera']&&b.indexOf("msie 9")!=-1;
        arrB['ie10']=!arrB['opera']&&b.indexOf("msie 10")!=-1;
	return arrB[str];
}

var $floatMask=(function(){
	/**
	 * 创建浮层遮罩对象
	 */
	var ie6=$isBrowser("ie6");
	//显示
	function show(){
		var c=this.mask;
		c.style.display = "block";
		keepMaskShow(c);
		if(!c.t){
			c.t = setInterval(function() {
				keepMaskShow(c);
			}, 50);
		}
	}
	//隐藏
	function hide(){
		var c=this.mask;
		c.style.display = "none";
		if(c.t){
			c.t=clearInterval(c.t);
		}
	}
	//保持浮层的全屏幕覆盖尺寸
	function keepMaskShow(c) {
		var ch = $getContentHeight(), wh = $getWindowHeight(), cw = $getContentWidth(), ww = $getWindowWidth(), ns = [wh, ww];
		if(ie6) {
			c.style.top = $getPageScrollHeight() + "px";
			c.style.left = $getPageScrollWidth() + "px";
		}
		if(ns.toString() != c.s.toString()) {
			c.s = ns;
			c.style.height = ns[0].toFixed(0) + "px";
			c.style.width = ns[1].toFixed(0) + "px";
			if(c.f) {
				c.f.style.height = ns[0].toFixed(0) + "px";
				c.f.style.width = ns[1].toFixed(0) + "px";
			}
		}
	}
	//创建浮层对象
	function createMask(opt) {
		opt=opt||{
			backgroundColor:"",
			zIndex:"",
			opacity:""
		};
		var c = document.createElement("div");
		c.style.display = "none";
		c.style.width = "0px";
		c.style.height = "0px";
		c.style.backgroundColor = opt.backgroundColor||"#000000";
		c.style.zIndex = opt.zIndex||250;
		c.style.position = "fixed";
		c.style.hasLayout = -1;
		c.style.left = "0px";
		c.style.top = "0px";
		c.style.filter = "alpha(opacity="+opt.opacity*100||80+");";
		c.style.opacity = opt.opacity||"0.8";
		document.body.appendChild(c);
		if(ie6) {
			var iframe=document.createElement("iframe");
			$extend(iframe.style,{
				position:"absolute",
				left:"0px",
				top:"0px",
				width:"100%",
				zIndex:-1,
				border:"none",
				backgroundColor:opt.backgroundColor||"#000000"
			});
			iframe.setAttribute("allowtransparency","yes");
			var t=setInterval(function(){
				try{
					iframe.contentWindow.document.body.style.backgroundColor=opt.backgroundColor||"#000000";
					clearInterval(t);
				}catch(e){}
			},50);
			c.appendChild(iframe);
			c.style.position = "absolute";
			c.f=iframe;
		}
		c.s = [0, 0];
		return c;
	}
	return function(opt){
		return {
			mask:createMask(opt),
			show:show,
			hide:hide
		};
	}
})();

function $getContentHeight(){
//获取页面内容的实际高度
var bodyCath=document.body;
var doeCath=document.compatMode=='BackCompat'?bodyCath:document.documentElement;
return (window.MessageEvent&&navigator.userAgent.toLowerCase().indexOf('firefox')==-1)?bodyCath.scrollHeight:doeCath.scrollHeight;
};
function $getWindowHeight(){
	var bodyCath=document.body;
	return (document.compatMode=='BackCompat'?bodyCath:document.documentElement).clientHeight;
};
function $getContentWidth(){
//获取页面内容的实际宽度
	var bodyCath=document.body;
	var doeCath=document.compatMode=='BackCompat'?bodyCath:document.documentElement;
	return (window.MessageEvent&&navigator.userAgent.toLowerCase().indexOf('firefox')==-1)?bodyCath.scrollWidth:doeCath.scrollWidth;
};
function $getWindowWidth(){
	var bodyCath=document.body;
	return (document.compatMode=='BackCompat'?bodyCath:document.documentElement).clientWidth;
};

function showAlertBox(msg){
     var msg = msg || "网络繁忙，稍后再试~";
	 if(document.getElementById("alertBox")){
	     document.getElementById("alertBox_txt").innerHTML = msg;
		 //动画 淡入
		 document.getElementById("alertBox").className = "layer_common_v2";
		 showDialog("alertBox");
	 }else{
	     alert(msg);
	 }
}

function showConfirmBox(msg){
     var msg = msg || "您确定要删除这张图片吗？";
	 if(document.getElementById("confirmBox")){
	     document.getElementById("confirmBox_txt").innerHTML = msg;
		 //动画 弹入
		 document.getElementById("confirmBox").className = "layer_common_v2";
		 showDialog("confirmBox");
	 }else{
	     confirm(msg);
	 }
}

//关闭提示框
function closeDialog(id){
	$('#'+id).addClass('layer_pop_out').css('display','none');
	this.mask.hide();
}

//弹出提示框
function showDialog(id){
   if(!this.mask){
	    this.mask=$floatMask({
            backgroundColor:"#000000",//默认#000000
            zIndex:100,//默认250
            opacity:0.3//默认0.8
        });
	}
	this.mask.show();
	$('#'+id).css('display',"block");
	//居中
	var w = parseInt($('#'+id).width());
	var h = parseInt($('#'+id).height());
	var doc = document.documentElement || document.body;
	var psw = document.documentElement.scrollLeft || document.body.scrollLeft , 
	    ww = document.documentElement.clientWidth || document.body.clientWidth, 
		psh = document.documentElement.scrollTop || document.body.scrollTop, 
		wh = document.documentElement.clientHeight || document.body.clientHeight;
	//console.log("w = "+w, "h = " + h, "psw = " + psw, "ww = " + ww, "psh = " + psh, "wh = " + wh, "left = " + (psw + (ww - w) / 2), "top = " + (psh + (wh - h) / 2));
    $('#'+id).css('left',psw + (ww - w) / 2);
    $('#'+id).css('top',psh + (wh - h) / 2);
}

$(function(){
	$(".up-tabs .up-tabs-title ul li").each(function(idx){
		$(this).click(function(){
			$(".up-tabs .up-tabs-title ul li").removeClass('active');$(this).addClass('active');
			$(".up-tabs .up-tabs-content .tab").hide();$(".up-tabs .up-tabs-content .tab").eq(idx).show();
		});
	});

});