<script language="javascript" type="text/javascript">
//<![CDATA[

HEMiDEMi_Scriptlet_Action='user_bookmark_recent';
HEMiDEMi_Scriptlet_Username='hinablue';
HEMiDEMi_Scriptlet_WebsiteId=489;
HEMiDEMi_Scriptlet_Size='l';
HEMiDEMi_Scriptlet_Color='b';
HEMiDEMi_Scriptlet_DataOnly=1;
//]]>
</script>
<script type="text/javascript" src="http://js.hemidemi.com/javascripts/scriptlet/wrapper.js"></script>

<script language="javascript" type="text/javascript">
//<![CDDA[

window.addEvent('domready', function(){
	var szNormal = 70, szSmall  = 60, szFull   = 130;
	 
	var kwicks = $$("#kwicks .kwick");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
	kwicks.each(function(kwick, i) {
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
			kwick.setStyle("background", 'url(../images/bubble_130x45.gif) 0 0 no-repeat #ffffff');
			var hdlink_item = kwick.getLast();
			hdlink_item.setStyle('display', 'block');

			kwicks.each(function(other, j) {
				if(i != j) {
					other.setStyle("background", 'url(../images/bubble_60x45.gif) 0 0 no-repeat #ffffff');
					var w = other.getStyle("width").toInt();
					if(w != szSmall) o[j] = {width: [w, szSmall]};
					var hdlink_item = other.getLast();
					hdlink_item.setStyle('display', 'none');
				}
			});
			fx.start(o);
		});
	});
	 
	$("kwicks").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			kwick.setStyle("background", 'url(../images/bubble_70x45.gif) 0 0 no-repeat #ffffff');
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
			var hdlink_item = kwick.getLast();
			hdlink_item.setStyle('display', 'none');
		});
		fx.start(o);
	});

	var list = $$('.icons img');
	list.each(function(element) {
		var fx = new Fx.Styles(element, {duration:200, wait:false});
		fx.start({
				'width': '55%',
				'float': 'left',
				'margin': '2px 2px'
			});
	});

	var myTips = new Tips($$('.myTips'), {
		initialize:function(){
			this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
		},
		onShow: function(toolTip) {
			this.fx.start(1);
		},
		onHide: function(toolTip) {
			this.fx.start(0);
		}
	});

});

//]]>
</script>

<div id="kwicks_container">
	<ul id="kwicks">
		<script type="text/javascript">
		//<![CDDA[
		for(var i=0,b;b=HEMiDEMi_Scriptlet_Objects[i], i<5 && i<HEMiDEMi_Scriptlet_Objects.length;i++){
			with(document) {
				write('<li class="kwick myTips" title="'+b.t+' :: '+b.d+'">');
				write('<div class="icons">'+b.p+'</div>');
				write('<div class="hdlinks"><span class="permalink"><a href="'+b.pl+'">書籤網址</a></span><br />');
				write('<span class="hdurl"><a href="'+b.l+'">黑米網址</a></span></div>');
				write('</li>');
			}
		}
		//]]>
		</script>
	</ul>
</div>

#kwicks_container * { 
	font-size: 12px;
	font-family: "微軟正黑體", Helvetica, AppleGothic, Sans-serif;
	letter-spacing: 1px;
}

#kwicks_container { 
	height: 100px;
	width: 500px;
	background-color: #ffffff;
	z-index: 10000;
}

#kwicks {
	position: relative;
}
 
#kwicks .kwick {
	float: left;
	display: block;
	width: 70px;
	height: 45px;
	background: url(../images/bubble_70x45.gif) 0 0 no-repeat #ffffff;
	margin: 1px;
}

.kwick .icons, .kwick .hdlinks {
	float: left;
}

.kwick .hdlinks {
	margin: 6px 3px;
	padding-left: 6px;
	display: none;
}

span.permalink a, span.hdurl a {
	color: #ff6600;
	text-decoration: none;
}

.tool-tip {
	color: #CCFF99;
	width: 145px;
	height: 100px;
	z-index: 13000;
	background: url(../images/bubble_tips.gif) 0 0 no-repeat #ffffff;
}
 
.tool-title {
	font-weight: bold;
	margin: 0;
	color: #CCFF99;
	padding: 8px 8px 4px;
}
 
.tool-text {
	padding: 4px 8px 8px;
}