<style>
.picPreviewBoxM_new{
    overflow: visible;
}
.picPreviewBoxM_new .funMtext .input_r{
    margin:5px 3px 0;
}
.picPreviewBoxM_new .funMtext .delBtn{
    margin:5px 3px 0;
}
.picPreviewBoxM_new .inputBoxM{
    padding-top: 10px;
    position: relative;
}
.picPreviewBoxM_new .inputBoxM .cha_new{
    position: absolute;right: 6px;bottom: 10px;
    display: block;width: 8px;height: 7px;background: url("close_1.png");
    cursor: pointer;
}

.picPreviewBoxM_new .inputBoxM .input_text{
    color: #000;
}

.picPreviewBox_new
{
    overflow: visible;
}

.listImitate_new .inner{
    width: 134px;
}
.listImitate_new .link{
    width: 126px;
}

.labelImitate_new{
    width: 110px;
}
.labelImitate_new .newred{
    color: #ff0000;
}

.imitateSelect_new .imitateIe {
    width: 121px;
    border-color: #e0e0e0;
}
.imitateSelect_new .inputHover{
    border-color: #d9d9d9;
}

.mt10{
    margin-top: 10px;
}

input::-ms-clear{display:none;}

</style>

<dd class="list_item clearfix">
    <div class="addPicBox radius3">
        <div class="addPicLeft">全景图</div>
        <div class="addPicRight pre">
            <div class="addBtn radius5">
                <span id="360image"></span>
				<span id="360imageFlag" style="display:none;"></span>
            </div>
            
			<div class="addBtn radius5 ">
				<span class="yz-ewmp" id="panoramaImageWeiXinButton" lastTime=<?php //echo $wechatPanoramaData['last_time']; ?> wechatCacheKey=<?php //echo $wechatPanoramaData['wechat_cache_key']; ?> imageUploadType="panorama" imageLimitNum=15 wechatImageSrc="<?php //echo $wechatPanoramaData['wechat_image'];?>">微信传图</span>
			</div>

			<div id="panoramaImageWeiXinHtml" class="yz-ewm cf" style="display:none;">

				<!--二维码未过期-->
				<div id="panoramaImageWeiXinEwmValid" class="fl yz-ewmi">
					<img id="panoramaWechatImage" src="" />
				</div>

				<!--二维码过期-->
				<div id="panoramaImageWeiXinEwmExpiration" class="fl yz-ewmw" style="display: none;">
					<p>二维码已过期</p>
					<p><a id="panoramaWeicodeRefresh" class="JsweicodeRefresh">点此刷新</a></p>
				</div>

				<div class="fr pre yz-ewmr">
					<span class="yz-close" id="panoramaImageWeiXinClose">X</span>
					<p class="yz-ewmt">微信扫描二维码</p>
					<p>关注后直接上传手机中的<strong style="color:red; font-weight: 700;">全景图</strong></p>
				</div>

			</div>

            <p class="text">
				<font color=red>全景图须为全景相机拍摄，若不符标准，审核时被删除将影响标签等功能的使用</font>，最多上传<span class="number">15</span>张。
			</p>
        </div>
    </div>
</dd>

<dd class="list_item clearfix" id="imageInfo" style="<?php echo !empty($houseRelation360PicData) ? '' : 'display:none';?>">
    <div class="picPreviewBox radius3 picPreviewBox_new" >
        <p class="title">您选择的图片</p>
        <div id="showImage" class="picPreviewBoxM clearfix ui-sortable picPreviewBoxM_new">
			<?php 
			$imageNum = 0;
			if(!empty($houseRelation360PicData))
			{
				foreach($houseRelation360PicData as $key => $item)
				{
			?>
			<div class="mItem" id="image_<?php echo $item['id'];?>" imageNum="<?php echo $item['id'];?>">
				<div class="mItemInner">
					<div class="mPic">
						<img width="130" height="100" alt="" src="<?php echo $item['filename'];?>" style="opacity: 1;">
						<input type="hidden" name="imageUrl[<?php echo $item['id'];?>]" value="<?php echo $item['filename'];?>"> 
			            <!--<input type="hidden" name="p_sort[]" value="0" class="psort">-->
						<div class="funM" style="opacity: 0.6;">
							<div class="funMtext" style="opacity: 1;">
								<label>
									<a title="查看大图" imageNum="<?php echo $item['id'];?>" href="javascript:void(0);" target="_balnk" style="bottom:84px;" class="bigPicLin bigPicLinpanorama"></a>
									<input id='picPreview_<?php echo $item['id'];?>' type="radio" class="input_r Js_defaultPic" name="jsPicPreviewList" value="<?php echo $item['filename'];?>" <?php if(!empty($house_detail['pic1']) && $house_detail['pic1'] == $item['filename']){ echo "checked";} ?>>封面
								</label>
								<div class="delBtn delImage" imageNum="<?php echo $item['id'];?>" title="删除"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="imitateSelect imitateSelect_new imageSelect mt10">
					<label class="labelImitate labelImitate_new" style="display:none;">
						<i class="newred">*</i>选择全景图分类
					</label>
					<input type="text" class="imitate imitateIe" id="forward_<?php echo $item['id'];?>" readonly="" value="<?php echo isset($newImageType[$item['roomtype']]) ? $newImageType[$item['roomtype']] : '';?>">

					<input type="hidden" id="imageType_<?php echo $item['id'];?>" name="imageType[<?php echo $item['id'];?>]" value="<?php echo $item['roomtype'];?>">

					<div class="listImitate listImitate_new" style="display: none;">
						 <dl class="inner">
							<?php foreach($newImageType as $_key => $value){ ?>
								<dd>
									<a imageNum='<?php echo $item['id'];?>' class="link imageType" oid="<?php echo $_key;?>" href="#"><?php echo $value;?></a>
								</dd>
							<?php }?>
						</dl>
					</div>
				</div>
				<div class="inputBoxM jsNameInput nameInput ">
					<input type="text" name="imageTitle[<?php echo $item['id'];?>]" value="<?php echo $item['title'];?>" placeholder="图片描述10字" class="newaddTxt jsInputCount input_text w126" onclick="this.className='newaddTxt jsInputCount input_text w126 input_text_on'" onblur="this.className='newaddTxt jsInputCount input_text w126'" >
					<span class="cha_new" style="display: none"></span>
				</div>
			</div>
			<?php $imageNum = $item['id'];}}?>
		</div>
	</div>
</dd>

<script>

//360全景传图方法
var get_panorama_wechat_info;

//
var imageNum = <?php echo $imageNum;?>;

//360全景上传图片数据集
var imageArr = [];

//
var imageType = <?php echo json_encode($imageType);?>;

$(function(){
	<?php if(!empty($houseRelation360PicData)){ foreach($houseRelation360PicData as $key => $item){ ?>
		imageArr["image_"+<?php echo $item['id'];?>] = "<?php echo $item['filename'];?>";
	<?php }}?>

	//上传成功处理事件
	function uploadSuccessEvent(file, serverData)
	{
		if(serverData == '0')
		{
			return false;
		}

		imageNum++;

		imageArr['image_'+imageNum] = serverData;
		
		//租售宝360全景图片HTML结构
		var html = '';	
		html += '<div class="mItem" id="image_'+imageNum+'" imageNum="'+imageNum+'">';
		html += 	'<div class="mItemInner">';
		html +=			'<div class="mPic">';
		html +=				'<img width="130" height="100" alt="" src="'+serverData+'" style="opacity: 1;">';

		html +=				'<input type="hidden" name="imageUrl['+imageNum+']" value="'+serverData+'">';  
		
		//html +=             '<input type="hidden" name="p_sort[]" value="0" class="psort">';
		html +=				'<div class="funM" style="opacity: 0.6;"></div>';
		html +=				'<div class="funMtext" style="opacity: 1;">';
		html +=					'<label>';
		html +=					    '<a imageNum='+imageNum+' title="查看大图" href="javascript:void(0);" target="_balnk" style="bottom:84px;" class="bigPicLin bigPicLinpanorama"></a>';

		html +=						'<input type="radio" class="input_r Js_defaultPic" name="jsPicPreviewList" id="picPreview_'+imageNum+'" value="'+serverData+'">封面';

		html +=					'</label>';
		html +=					'<div class="delBtn delImage" imageNum="'+imageNum+'" title="删除"></div>';
		html +=				'</div>';
		html +=			'</div>';
		html +=		'</div>';
		html +=		'<div class="imitateSelect imitateSelect_new imageSelect mt10">';
		html +=			'<label class="labelImitate labelImitate_new" style="display: inline;">';
		html +=				'<i class="newred">*</i>选择全景图分类';
		html +=			'</label>';
		html +=			'<input type="text" class="imitate imitateIe" id="forward_'+imageNum+'" readonly="" value="" name="forwards">';
		html +=			'<input type="hidden" id="imageType_'+imageNum+'" name="imageType['+imageNum+']" value="">';
		html +=			'<div class="listImitate listImitate_new" style="display: none;">';
		html +=				'<dl class="inner">';
								for(var key in imageType)
								{
		html +=						'<dd>';
		html +=							'<a imageNum='+imageNum+' class="link imageType" oid="'+key+'" href="#">'+imageType[key]+'</a>';
		html +=						'</dd>';
								}
		html +=				'</dl>';
		html +=			'</div>';
		html +=		'</div>';
		html +=		'<div class="inputBoxM jsNameInput nameInput ">';

		html +=			'<input type="text" name="imageTitle['+imageNum+']" placeholder="图片描述10字" class="newaddTxt jsInputCount input_text w126" onclick="this.className=\'newaddTxt jsInputCount input_text w126 input_text_on\'" onblur="this.className=\'newaddTxt jsInputCount input_text w126\'" >';

		html +=			'<span class="cha_new" style="display: none"></span>';
		html +=		'</div>';
		html +=	  '</div>';

		$('#showImage').append(html);
		$('#imageInfo').show();
	}

	$('.imageSelect').live('click',function(){
		$(this).find(".imitate").focus().addClass("inputHover");
		$(this).find(".listImitate").show();
	}).hover(function(){
		$(this).addClass("imitateSelect2");
		$(this).find(".imitate").addClass("inputHover");
	},function(){
		$(this).removeClass("imitateSelect2");
		$(this).find(".imitate").removeClass("inputHover").end().find(".listImitate").hide();
	});
	
	//初始化页面是否加载swfUpload事件
	function swfUploadLoadedEvent()
	{
		//判断是否超过图片限制
		var mItemObj = $('#showImage').find('.mItem');

		if(mItemObj.length >= this.customSettings.upload_limit)
		{
			this.setButtonDisabled(true);
		}	
	}

	function fileDialogStartEvent() 
	{
		//判断是否超过图片限制
		var mItemObj = $('#showImage').find('.mItem');

		var n = this.customSettings.upload_limit - mItemObj.length;
		this.setFileQueueLimit(n);
	}
	
	//确认选择某个文件之后，触发事件
	function fileDialogCompleteEvent(numFilesSelected, numFilesQueued)
	{
		//判断是否超过图片限制
		var mItemObj = $('#showImage').find('.mItem');

		var count = parseInt(this.customSettings.upload_limit);
		
		if(numFilesSelected + mItemObj.length > count)
		{
			return false;
		}	

		this.startUpload();
	}

	//检查上传文件是否小于下限
	function fileQueuedMinLimit(fileObj)
	{
		if(fileObj.size < 358400)
		{
			alert(fileObj.name+'图片小于350，全景图大小不可低于350K，请换一张图片！');
			this.stopUpload();
		}
	}

	//删除全景图片
	$('.delImage').live('click',function(){
		var imageNum = $(this).attr('imageNum');
		
		//当前封面图片
		var picPreview = $('#pic1').val();
		
		//当前选中的图片
		var currentPicPreview = $('#picPreview_'+imageNum).val();
		
		//清空当前封面图
		if(picPreview == currentPicPreview)
		{
			 $('#pic1').val('');	
		}
		
		//删除选择的图片
		$('#image_'+imageNum).remove();

		if(typeof imageArr['image_'+imageNum] != 'undefined')
		{	
			//从360全景上传图片数据集中删除
			delete imageArr['image_'+imageNum];
		}
	});

	//选择图片类型
	$('.imageType').live('click',function(event){
		$(this).addClass("linkOn").parent("dd").siblings("dd").find(".link").removeClass("linkOn");

		var imageNum = $(this).attr('imageNum');
		var type = $(this).attr('oid');
		var text = $(this).html();
		
		$('#forward_'+imageNum).val(text);
		$('#imageType_'+imageNum).val(type);
	});

	var upload_url = 'http://nj.zsb.house365.com/pic/house/?uploadType=1';

	var swfUploadObj = new SWFUpload({
		// Backend Settings
		upload_url : upload_url,
		// File Upload Settings
		file_size_limit : "5 MB",
		file_types : "*.jpg;*.png;",
		file_types_description : "Images",
		file_upload_limit : "0",
		file_queue_limit : "5",
		custom_settings : {
			upload_target : "360imageFlag",
			upload_limit  : "15"
		},

		// Event Handler Settings - these functions as defined in Handlers.js
		// The handlers are not part of SWFUpload but are part of my website and control how
		// my website reacts to the SWFUpload events.	
		swfupload_loaded_handler : swfUploadLoadedEvent,
		file_queue_error_handler : fileQueueError,
		file_dialog_start_handler : fileDialogStartEvent,
		file_dialog_complete_handler : fileDialogCompleteEvent,
		file_queued_handler : fileQueuedMinLimit,
		upload_progress_handler : uploadProgress,
		upload_error_handler : uploadError,
		upload_success_handler : uploadSuccessEvent,
		upload_complete_handler : uploadComplete,

		
		// Button Settings
		button_image_url : "",
		button_placeholder_id : "360image",
		button_width: 96,
		button_height: 28,
		button_cursor: SWFUpload.CURSOR.HAND,
		button_text : '从电脑选择图片',
		// Flash Settings
		//flash_url : "<?=STATIC_SOURCE_URL?>/common/js/swf/swfupload.swf"
		flash_url : "/swfupload.swf"
		//Debug Settings
		//debug: true
	});
	

	//图片选择拖动 
	function picPreviewLives(obj){
		$("#"+obj).sortable();
		$("#"+obj).find(".mItemInner").find("img").live("mousemove",function(event){
			if($("#coordinates").length <=0)
			{
				$("<div id='coordinates' class='radius5' >点击拖动</div>").appendTo("body");
			}
			if($("#coordinates").length >=0)
			{  
				var oDiv=$("#coordinates");
				oDiv.css({left:event.pageX+4+'px',top:event.pageY+4+'px'})
			}
		}).live("mouseout",function(){
			$("#coordinates").remove()
		})
		
		$("#"+obj).find(".mItem").live("mousedown",function(){//
			$("#coordinates").hide();
			$(this).addClass("mItemHover");
			$(this).siblings(".mItem").find("img").css({opacity:0.4});
			$(this).siblings(".mItem").find(".funM").css({opacity:0.2});
			$(this).siblings(".mItem").find(".funMtext").css({opacity:0.4});
			
		}).live("mouseup",function(){
			$("#coordinates").hide();
			$(this).removeClass("mItemHover");	
			$(this).siblings(".mItem").find("img").css({opacity:1});
			$(this).siblings(".mItem").find(".funM").css({opacity:.6});
			$(this).siblings(".mItem").find(".funMtext").css({opacity:1});
		});
		
		$("#"+obj).find("label").live("mousedown",function(event){
			event.stopPropagation();
		});
		
		$("#"+obj).find(".delBtn").live("mousedown",function(event){
			event.stopPropagation();
		});

		$("#"+obj).find(".jsInputCount ").live("mousedown",function(event){
			event.stopPropagation();
		});
	} 

	picPreviewLives('showImage');

	//设置默认图片
	$('.Js_defaultPic').live('click',function(){
		var picVal = $(this).val();

		if(/^(http.+)_([0-9]+)x([0-9]+)\.([a-z]+)(\?pid=([0-9]+))?$/.test(picVal))
		{
			var imageValArr = /^(http.+)_([0-9]+)x([0-9]+)\.([a-z]+)(\?pid=([0-9]+))?$/.exec(picVal);

			picVal = imageValArr[1]+'_'+imageValArr[2]+'x'+imageValArr[3]+'.'+imageValArr[4];
		}
		
		$('#pic1').val(picVal);
	});

	//检查图片描述文字个数
	$('.newaddTxt').live('keyup',function(){
		var str = $(this).val();
		var obj_value_arr = str.split("");

		var num = 0;
		for (var i = 0; i < obj_value_arr.length; i++) 
		{
			num += returnStrLen(obj_value_arr[i]);
		}
		
		var str = $(this).val().substr(0, 10);
        $(this).val(str);
	});
	
	//查看360全景图片
	$('.bigPicLinpanorama').live('click',function(){
		var imageNum = $(this).attr('imageNum');
		var url = '';
		var num = 0;
		var chooseNum = 0;
		for(var key in imageArr)
		{
			var _image = key.split('_');
			var imageType = $('#imageType_'+_image[1]).val();

			if(imageNum == _image[1])
			{
				chooseNum = num;
			}
			
			var imageUrl = imageArr[key];

			
			if(/^(http.+)_([0-9]+)x([0-9]+)\.([a-z]+)(\?pid=([0-9]+))?$/.test(imageArr[key]))
			{
				var imageValArr = /^(http.+)_([0-9]+)x([0-9]+)\.([a-z]+)(\?pid=([0-9]+))?$/.exec(imageArr[key]);

				imageUrl = imageValArr[1]+'.'+imageValArr[4];
			}
			
			
			if(url)
			{
				url += ','+imageUrl+'|'+imageType;
			}
			else
			{//http://nj.sell.house365.com/360show/sphere_show.php
				url += 'http://nj.sell.house365.com/sphere_show.php?pic='+imageUrl+'|'+imageType;
			}

			num++;
		}
		
		if(url)
		{
			url += '&show='+chooseNum;
			$(this).attr('href',url);
		}
	});
});
</script>	