<html><head><style type="text/css">.header {display:block;position:fixed;top:0px;
left:0px;width: 100%;
height:60px;background-image:url('headerBg.png');
z-index:2000;
}
body
{
background-color: #999999;
//cursor:move;
}
.form
{
text-align: right;
padding-right:15px;
padding-top:7px;
color: white;
font-size: 13;
}
.button
{
width: 55px;
vertical-align: bottom;
text-align: center;
color: #222222;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 12px;
font-size: 13;
background-image:url('button.png');
background-repeat:no-repeat;
background-position:center;
}
a.btn
{
color: #222222;
}
.logo
{
padding-left: 10%;
}
.search
{
display:block;
position:fixed;
bottom:5px;
right:-213px;
width: 248px;
height: 35px;
text-align: left;
padding-left: 0px;
padding-top:10px;
background-image: url('searchBg.png');
background-repeat: no-repeat;
background-position: left bottom;
z-index:2000;
}
.searchButton
{
width: 55px;
text-align: center;
color: #222222;
padding-left: 3px;
padding-right: 3px;
padding-top: 4px;
font-size: 13;
background-image:url('button.png');
background-repeat:no-repeat;
background-position:center;
}
.searchIcon
{
width: 40px;
height: 25px;
background-image:url('searchIcon.png');
background-repeat:no-repeat;
background-position:center;
}
.searchText
{
padding-left: 4px;
}

#dashButton
{
display:block;
position:fixed;
bottom:10px;
left:10px;
width: 36px;
height: 37px;
background-image:url('dash.png');
z-index:2001;
}
#block
{
position:fixed;
width:100%;
height:100%;
z-index:1000;
display:none;
background-color:black;
padding:0px;
margin:0px;
border:0px;
left:0px;
top:0px;
opacity:0.4;filter:alpha(opacity=40);
}
#dash
{
background-image: url('dashBg.png');
background-repeat: repeat-x;
width:100%;
height:155px;
left:0px;
top:100%;
margin-top:0px;
display:block;
position:fixed;
z-index:2000;
}

#main
{
position:fixed;
width:3000px;
height:3000px;
top:-1000px;
left:-1000px;
z-index:500;
}

.feedFrame
{
display:block;
position:absolute;
width:320;
height:480;
top:1100;
left:1300;
z-index:500;
background-image:url('feedBg.png');
background-repeat: no-repeat;
background-position:center;
}
.closeFrame
{
display:block;
position:absolute;
width:20px;
height:20px;
top:-3px;
right:-5px;
z-index:1900;
}
.customize
{
display:block;
position:absolute;
width:46px;
height:18px;
bottom:5px;
right:140px;
z-index:1900;
}
.up
{
display:block;
position:absolute;
width:21px;
height:18px;
bottom:5px;
right:187px;
z-index:1900;
}
.down
{
display:block;
position:absolute;
width:21px;
height:18px;
bottom:5px;
right:118px;
z-index:1900;
}

#dashText
{
position:absolute;
width:100;
height:40;
top:20;
left:30;
text-align: center;
color:white;
font-size: 13;
}

#timeIcon
{
position:absolute;
width:100;
height:100;
top:35;
left:40;
background-image:url('timeIcon.png');
background-repeat: no-repeat;
background-position:center;
}
#timeText
{
display:none;
position:absolute;
width:80;
height:60;
top:120;
left:53;
text-align: center;
color:white;
font-size: 11;
}

#locationIcon
{
position:absolute;
width:100;
height:100;
top:35;
left:120;
background-image:url('locationIcon.png');
background-repeat: no-repeat;
background-position:center;
}
#locationText
{
display:none;
position:absolute;
width:80;
height:60;
top:120;
left:133;
text-align: center;
color:white;
font-size: 11;
}

#tagIcon
{
position:absolute;
width:100;
height:100;
top:35;
left:200;
background-image:url('tagIcon.png');
background-repeat: no-repeat;
background-position:center;
}
#tagText
{
display:none;
position:absolute;
width:80;
height:60;
top:120;
left:213;
text-align: center;
color:white;
font-size: 11;
}

#friendIcon
{
position:absolute;
width:100;
height:100;
top:35;
left:280;
background-image:url('friendIcon.png');
background-repeat: no-repeat;
background-position:center;
}
#friendText
{
display:none;
position:absolute;
width:80;
height:60;
top:120;
left:293;
text-align: center;
color:white;
font-size: 11;
}

#chatIcon
{
position:absolute;
width:100;
height:100;
top:35;
left:360;
background-image:url('chatIcon.png');
background-repeat: no-repeat;
background-position:center;
}
#chatText
{
display:none;
position:absolute;
width:80;
height:60;
top:120;
left:373;
text-align: center;
color:white;
font-size: 11;
}

#newEventIcon
{
position:absolute;
width:100;
height:100;
top:35;
left:440;
background-image:url('newEventIcon.png');
background-repeat: no-repeat;
background-position:center;
}
#newEventText
{
display:none;
position:absolute;
width:80;
height:60;
top:120;
left:453;
text-align: center;
color:white;
font-size: 11;
}
</style>

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
var dashOpen = 0;
var isTracing = 0;
var oldx,oldy,newx,newy;
var count;
var numOfItem;
var nowTracing;
var items;
function showDash()
{
	if (dashOpen == 0)
	{
	dashOpen = 1;
	$("#block").fadeIn(500);
	$("#dash").animate({marginTop:"-155px"},500);
	$("#dashButton").animate({bottom:"165px"},500);
	document.getElementById("dashButton").style.backgroundImage = "url('dash2.png')";
	$(".closeFrame").hide();
	}
	else
	{
	dashOpen = 0;
	$("#block").fadeOut(500);
	$("#dash").animate({marginTop:"0px"},500);
	$("#dashButton").animate({bottom:"10px"},500);
	document.getElementById("dashButton").style.backgroundImage = "url('dash.png')";
	for (var i=0 ; i < numOfItem; i++)
	{
		document.getElementById("feedFrame"+i).style.zIndex = 500+i;
	}
	$(".closeFrame").show();	
	$(".closeFrame").click(deleteItem);

	}
}
function startTracing(e)
{
	isTracing = 1;
	count =1;
	oldx=e.pageX;
	oldy=e.pageY;
	nowTracing = e.target;
}
function trace(e)
{
	if (isTracing != 1) return;
	if (count++ %2 !=0) return;
	var x=e.pageX;
	var y=e.pageY;
	newx = x;
	newy = y;
	var newLeft = parseInt((nowTracing.style.left.split("px"))[0]) + newx - oldx;
	var newTop = parseInt((nowTracing.style.top.split("px"))[0]) + newy - oldy;
	oldx = newx;
	oldy = newy;
	nowTracing.style.left = newLeft+"px";
	nowTracing.style.top = newTop+"px";
}

function stopTracing(e)
{
	isTracing = 0;
	if (nowTracing.id.charAt(0) == 'f')
	{
		var xOffset = 0 - parseInt((document.getElementById("main").style.left.split("px"))[0]);
		var yOffset = 0 - parseInt((document.getElementById("main").style.top.split("px"))[0]);

		var x = parseInt(nowTracing.id.charAt(9));
		items[x].posX = (e.pageX + xOffset) + "px";
		items[x].posY = (e.pageY + yOffset) + "px";
	}
}

function showSearch()
{
	document.getElementById("searchIcon").style.display = "none";
	$(".search").animate({right: "0px"},400);
}
function closeSearch()
{
	document.getElementById("searchIcon").style.display = "block";
	$(".search").animate({right: "-213px"},400);
}

function newTimeFeed(e)
{
	var xOffset = 0 - parseInt((document.getElementById("main").style.left.split("px"))[0]) + (numOfItem*10);
	var yOffset = 0 - parseInt((document.getElementById("main").style.top.split("px"))[0]) + (numOfItem*10);
	items[numOfItem++] = {type:"condition",posX:(xOffset+e.pageX)+"px",posY:(yOffset+150)+"px"};
	var i = numOfItem-1;
	document.getElementById("main").innerHTML+="<div class = 'feedFrame' id = 'feedFrame"+i+"'><img src = 'dash2.png' class = 'closeFrame' /><img src='customize.png' class = 'customize' /><img src = 'up.png' class = 'up' /><img src = 'down.png' class = 'down' /></div>";
//	alert("<div class = 'feedFrame' id = 'feedFrame"+i+"'></div>");
	document.getElementById("feedFrame"+i).style.left = items[i].posX;
	document.getElementById("feedFrame"+i).style.top = items[i].posY;
	document.getElementById("feedFrame"+i).style.zIndex = 3000;
	$("#feedFrame"+i).mousedown(startTracing);
}


function deleteItem(e)
{
	var theItem = e.target.parentNode;
	var x = parseInt(theItem.id.charAt(9));
	numOfItem --;
	theItem.id = "trashed";
	theItem.style.display = "none";
	for (var i=x;i<numOfItem;i++)
	{
		items[i]=items[i+1];
		document.getElementById("feedFrame"+(i+1)).id = "feedFrame"+i;
	}
}


$(document).ready(function(){
// For testting purpose, should be generated by php
	numOfItem = 2;
	items = new Array();
	items.length = 100;
	items[0] = {type:"condition",posX:"1300px",posY:"1300px"};
	items[1] = {type:"condition",posX:"1500px",posY:"1100px"};
	
	for (var i=0 ; i < numOfItem; i++)
	{
		document.getElementById("main").innerHTML+="<div class = 'feedFrame' id = 'feedFrame"+i+"'><img src = 'dash2.png' class = 'closeFrame' /><img src='customize.png' class = 'customize' /><img src = 'up.png' class = 'up' /><img src = 'down.png' class = 'down' /></div>";
		document.getElementById("feedFrame"+i).style.left = items[i].posX;
		document.getElementById("feedFrame"+i).style.top = items[i].posY;
		document.getElementById("feedFrame"+i).style.zIndex = 500+i;
		$("#feedFrame"+i).mousedown(startTracing);
	}
	
	$(".closeFrame").click(deleteItem);

	
	document.getElementById("main").style.left = "-1000px";
	document.getElementById("main").style.top = "-1000px";

	
	$("#main").mousedown(startTracing);
	$("#main").mousemove(trace);
	$("#main").mouseup(stopTracing);
	$("#searchIcon").click(showSearch);
	$("#searchBack").click(closeSearch);
	$("#timeIcon").hover(function(){$("#timeText").show();},
						function(){$("#timeText").hide();});
	$("#timeIcon").click(newTimeFeed);
	$("#locationIcon").hover(function(){$("#locationText").show();},
						function(){$("#locationText").hide();});
	$("#tagIcon").hover(function(){$("#tagText").show();},
						function(){$("#tagText").hide();});
	$("#friendIcon").hover(function(){$("#friendText").show();},
						function(){$("#friendText").hide();});
	$("#chatIcon").hover(function(){$("#chatText").show();},
						function(){$("#chatText").hide();});
	$("#newEventIcon").hover(function(){$("#newEventText").show();},
						function(){$("#newEventText").hide();});
	});
</script>

<title>
＝＝ 围观网 ＝＝
</title>
</head><body>

<div class = "header" ><table width = 100%><tr><td ><img class = "logo" src="logo.png" /></td><td class = "form">帐号: <input type = "text" value ="" id = "id" />密码: <input type = "password" value="" id = "pwd" /></td><td class = "button"><a class = "btn" href=# >登陆</a>
</td><td class = "button"><a class = "btn" href=# >注册</a>
</td><td width = 3%></td></tr></table></div>


<div class = "search">
<table height = "32px">
<td>
<div class = "searchIcon" id = "searchIcon" />
</td>
<td>
<div class = "searchText"> <input type = "text" id ="search" size = "25" value = ""/> </div>
<td/>
<td>
<img src = "searchIcon.png" id = "searchBtn" />
</td>
<td>
<img src="searchBack.png" id = "searchBack" />
</td>
</table>
</div>

<div id = "dashButton" onclick = "showDash()">
</div>


<div id = "dash">

<div id = "dashText">
添加新 Widget:
</div>

<div id = "timeIcon">
</div>
<div id = "timeText">
订阅最近发生的事情
</div>
<div id = "locationIcon">
</div>
<div id = "locationText">
订阅某地发生的事情
</div>
<div id = "tagIcon">
</div>
<div id = "tagText">
订阅包含某标签的事情
</div>
<div id = "friendIcon">
</div>
<div id = "friendText">
订阅某人关注的事情
</div>
<div id = "chatIcon">
</div>
<div id = "chatText">
添加聊天工具
</div>
<div id = "newEventIcon">
</div>
<div id = "newEventText">
发表新事件
</div>

</div>


<div id = "main">
	<div id = "block">
	</div>
</div>


</body></html>﻿
�