<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="map.aspx.cs" Inherits="Maticsoft.Web.Admin.eWebEditor.Dialog.map"
    ValidateRequest="false" EnableEventValidation="false" Title="热点编辑" %>

<html>
<head runat="server">
    <title>版面示意图修改</title>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link href="../../Css/style.css" rel="stylesheet" type="text/css" />

    <script src="../../js/Common.js" type="text/javascript"></script>

    <script language="JavaScript" type="text/javascript">
var oControl;
var oSeletion;
var sRangeType;
var oMap = null;

var sSrc = "";
var sUseMap = "";
var sWidth = "";
var sHeight = "";

var aHref = new Array();
var aCoords = new Array();
var aAlt = new Array(); 

var aLeft = new Array();
var aTop = new Array();
var aWidth = new Array();
var aHeight = new Array();

var aMapName = new Array();


// 初始化
function doInit(){
var areass=document.getElementById("HiddenField2").value;

var c_bg_style="background:url("+document.getElementById("HiddenField1").value+") #FF656B no-repeat"
	mapIframe.document.designMode="On";
	mapIframe.document.open();
	mapIframe1.document.open();
	mapIframe1.document.write("<body>");
	mapIframe1.document.write (areass);
	mapIframe1.document.write("</body>");
	mapIframe1.document.close();
	mapIframe.document.write("<body style=\""+c_bg_style+"\">");
	mapIframe.document.write("</body>");
	var aTags=mapIframe1.document.getElementsByTagName("area"); 
	
for (n=0;n<aTags.length;n++){
	gg=aTags[n].href.split("vvv")
	aHref[n]=gg[gg.length-1];
	//window.location.host.length
	//alert(aHref[n]);
	//alert(""+(window.location.protocol.length+2+window.location.host.length)+"gg"+(aHref[n].length-1-window.location.host.length-2-window.location.protocol.length));
	aHref[n]=aHref[n].substring((window.location.protocol.length+2+window.location.host.length),aHref[n].length)+"|"+aHref[n].substring((aHref[n].indexOf("=")+1),aHref[n].length);
	//alert(aHref[n]);
	aCoords[n]=aTags[n].coords;
	zbsss=aCoords[n].split(",")
	zb_l=parseInt(zbsss[0])
	zb_t=parseInt(zbsss[1])
	zb_w=parseInt(zbsss[2]-zbsss[0])
	zb_h=parseInt(zbsss[3]-zbsss[1])
	
	mapIframe.document.body.innerHTML += "<img id='myIMAGE"+n+"' src='../../Images/space.gif' style='position:absolute;zIndex:"+(n+1)+";width:"+zb_w+"px;height:"+zb_h+"px;left:"+zb_l+"px;top:"+zb_t+"px;border:#000 1px dotted;filter:alpha(opacity=50)'>";
}


	mapIframe.document.body.contentEditable = "true";
	mapIframe.document.ondblclick=new Function("return dblClick(mapIframe.event);");
	mapIframe.document.execCommand("2D-Position",true,true);
	mapIframe.document.execCommand("LiveResize", true, true);
	mapIframe.document.close();
}

// 双击修改链接属性
var objLink = new Object() ;
function dblClick(event){
document.getElementById("ccc2").bgColor='#FFF7EF';
ff.zhuangtai.value=1;
	var e=event.srcElement;
	if (e){
		if ((e.tagName=="IMG")&&(e.id!="SOURCEIMAGE")){
			var sID = e.id;
			var nID = parseInt(sID.substr(7));
			objLink.Href = aHref[nID];
			objLink.Alt = aAlt[nID];
			ff.cc_id.value=nID;//获取图片域的 ID
			//ff.cc_link.value=objLink.Href;//获取图片域的 连接地址
			//alert(ff.cc_link.value)
			for (var f=0; f<ff.cc_link1.length; f++){
				if(ff.cc_link1.options[f].value==ff.cc_link.value){
					ff.cc_link1.options[f].selected='selected';
					ff.cc_link2.value=ff.cc_link1.options[f].text;//获取图片域的 连接地址
				}
			}
		}
		var this_id=parseInt(ff.cc_id.value);
	var this_num=this_id+1;
		aHref[this_id]=ff.cc_link.value+"|"+ff.cc_link3.value;
		//alert(aHref[this_id]);
		aAlt[this_id]=ff.cc_link2.value;
		document.getElementById("ccc2").bgColor='#ffffff';
		ff.zhuangtai.value=0;
		alert("第 "+this_num+" 个 热区链接编辑成功！")
	}
	return false;
}

// 新建热点链接
function newMap(){
ff.cc_link2.value="";
	var n = aHref.length;
	aHref[n]="";
	mapIframe.document.body.innerHTML += "<img id='myIMAGE"+n+"' src='../../Images/space.gif' style='position:absolute;zIndex:"+(n+1)+";width:40;height:40;left:170px;top:0;border:#000 1px dotted;filter:alpha(opacity=50)'>";
	mapIframe.scrollBy(0,0);
	mapIframe.focus();
}

// 取自动递增热点名
function getAutoMapName(){
	var b=true;
	var n=0;
	var s=""
	while (b){
		n++;
		s = "AutoMap" + n;
		if (isValidMapName(s)){
			b=false;
		}
	}
	return s;

}

// 判断是否为不存在的名称
function isValidMapName(str){
	str=str.toUpperCase();
	for (var i=0; i<aMapName.length; i++){
		if (aMapName[i]==str){
			return false;
		}
	}
	return true;
}

function get_link(){
if (ff.zhuangtai.value!=1){
	alert("并不是淡红色编辑状态，请添加新热区并双击为淡红色添加编辑状态！")
}
else 
{
	var this_id=parseInt(ff.cc_id.value);
	var this_num=this_id+1;
		aHref[this_id]=ff.cc_link.value+"|"+ff.cc_link3.value;
		//alert(aHref[this_id]);
		aAlt[this_id]=ff.cc_link2.value;
		document.getElementById("ccc2").bgColor='#ffffff';
		ff.zhuangtai.value=0;
		alert("第 "+this_num+" 个 热区链接编辑成功！")}
}
function pass_cc_link(arrr1,arrr2){
newMap();
	ff.cc_link3.value=arrr1;
	ff.cc_link2.value=arrr2;
    var strUrl="ajax/getNewsUrl.aspx?ID="+arrr1;	
		Ajaxs.GET(strUrl,showNewsUrl);
	}
	function showNewsUrl(req)
	{
	    ff.cc_link.value=req.responseText; 
	    //alert(ff.cc_link.value);
	}
function done(){
	var b=false;
	for (var i=0; i<aHref.length; i++){
		var obj = mapIframe.document.getElementById("myIMAGE"+i);
		if (obj){
			b=true;
		}
	}
	
	if (b){
		var html = "";
		for (var i=0; i<aHref.length; i++){
			var obj = mapIframe.document.getElementById("myIMAGE"+i);
			if (obj){
				var nLeft = parseInt(obj.style.left);
				var nTop = parseInt(obj.style.top);
				var nWidth = parseInt(obj.style.width);
				var nHeight = parseInt(obj.style.height);
				var nRight = nLeft+nWidth;
				var nBottom = nTop+nHeight;
				//alert("aHref[i]是"+aHref[i]);
				if(aHref[i].indexOf("?")<0){
				html += "<area shape='rect'target='_blank' onclick=\"javascript:return showNewsMap("+aHref[i].split('|')[1]+")\" href=\""+aHref[i].split('|')[0]+"?id="+aHref[i].split('|')[1]+"\" coords='"+nLeft+","+nTop+","+nRight+","+nBottom+"'>";
				}else
				{
				    html += "<area shape='rect'target='_blank' onclick=\"javascript:return showNewsMap("+aHref[i].split('|')[1]+")\" href=\""+aHref[i].split('|')[0]+"\" coords='"+nLeft+","+nTop+","+nRight+","+nBottom+"'>";
				}
				}
			}
		}
		//alert(html);
		parent.document.getElementById("HiddenField1").value=html;
		window.close();
}

  function addA()
   {
   window.open("../A/add.aspx?type=1&paperName="+escape(document.getElementById("HiddenField_paperName").value)+"&qnum="+document.getElementById("HiddenField_Qnum").value+"&pageNum="+document.getElementById("HiddenField_PageNum").value);
   }
   function refulsh(pic,papername,qnum,pageNum)
{
location="../B/map.aspx?pic="+escape(pic)+"&paperName="+escape(papername)+"&qnum="+qnum+"&pageNum="+pageNum;
}
    </script>

    <style type="text/css">
        .bts1
        {
            border: 0;
            padding: 0;
            margin: 0;
            background-color: #FFF7EF;
            color: #F74C24;
            line-height: 24px;
            height: 24px;
        }
    </style>
    <style type="text/css">
        body
        {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }
    </style>
</head>
<body>
    <form id="ff" runat="server">
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="99%">
        <tbody>
            <tr>
                <td>
                    <fieldset>
                        <legend class="tt1">版面示意图添加</legend>
                        <table align="left" border="0" cellpadding="0" cellspacing="3" height="100%" width="99%">
                            <tbody>
                                <tr>
                                    <td height="559" valign="top" width="32%">
                                        <iframe id="mapIframe" marginheight="1" marginwidth="1" height="539" scrolling="no"
                                            width="400"></iframe>
                                        <iframe id="mapIframe1" marginheight="1" marginwidth="1" height="0" scrolling="no"
                                            width="0"></iframe>
                                    </td>
                                    <td height="559" valign="top" width="68%">
                                        <table class="tab3" border="0" cellpadding="0" cellspacing="0" width="100%" runat="server">
                                            <tbody>
                                                <tr>
                                                    <td colspan="2">
                                                        第一步：点击 新闻标题，建立热区；<br>
                                                        第二步：在左边的编辑框内拖拽热区，缩放至理想大小；<br>
                                                        第三步：热区位置固定后，双击热区；<br>
                                                        所有热区链接添加完成点击 “最后一步：所有添加完毕” ，完成！
                                                        <div id="area_db">
                                                        </div>
                                                        <input id="Button2" type="button" value="添加新闻" onclick="addA()" class="button2" /><br>
                                                        <br>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2">
                                                        <%--<input class="button2" id="btnNew" class="button2" title="新建热点链接" onclick="newMap()"
                                                            value="第一步：新建链接" type="button">--%>
                                                        (双击蓝色区块可编辑链接)
                                                        <input name="cc_id" id="cc_id" type="hidden">
                                                    </td>
                                                </tr>
                                                <tr id="ccc2">
                                                    <td valign="top" width="20%">
                                                        链接新闻：
                                                    </td>
                                                    <td width="80%">
                                                        <input name="cc_link" id="Hidden1" type="hidden"><input name="cc_link2" class="bts1"
                                                            id="Text1" size="35" readonly="readonly" type="text">
                                                        <input name="cc_link3" id="Hidden2" type="hidden">
                                                        <select name="cc_link1" size="15" id="cc_link1" style="overflow: hidden; width: 260px;
                                                            background-color: rgb(239, 247, 255);" onclick="pass_cc_link(this.options[selectedIndex].value,this.options[selectedIndex].text)"
                                                            runat="server">
                                                        </select>
                                                        <input name="jieguo" id="Hidden3" type="hidden" runat="server">
                                                        <input name="zhuangtai" id="Hidden4" value="0" size="8" type="hidden">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2">
                                                        <%--<input name="button" class="button22" id="button" onclick="get_link();" value="第二步：添加链接"
                                                            type="button">--%>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2">
                                                        <asp:Button ID="Button1" runat="server" Text="最后一步，所有添加完毕" OnClientClick="if(confirm('您确定所有热区都添加完毕了吗？')){done();return true;}return false;"
                                                            OnClick="Button1_Click" CssClass="button22" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </fieldset>
                </td>
            </tr>
        </tbody>
    </table>
    <asp:HiddenField ID="HiddenField1" runat="server" Value="11" />
    <asp:HiddenField ID="HiddenField_paperName" runat="server" />
    <asp:HiddenField ID="HiddenField2" runat="server" Value="" />
    <asp:HiddenField ID="HiddenField_BName" runat="server" />
    <asp:HiddenField ID="HiddenField_Qnum" runat="server" />
    <asp:HiddenField ID="HiddenField_PageNum" runat="server" />
    <input id="Hidden2" type="hidden" runat="server" />

    <script language="JavaScript">

doInit();
    </script>

    <asp:HiddenField ID="HiddenField3" runat="server" />
    </form>
</body>
</html>
