﻿function bindBannerGallery(id)
{
	var box=$("#"+id);
	var config={width:box.width(),height:box.height()};
	var items=box.find("a");
	var index=0;

	//less than 2 pictures, cancel.
	if(items.length<2)
		return false;

	box.css("position","relative");
	items.css({
		position:"absolute",
		left:"0px",
		top:"0px",
		width:config.width+"px",
		height:config.height+"px",
		overflow:"hidden",
		display:"none"
	});

	var numberBox=$("<div style='position:absolute;margin:0px;padding:0px;z-index:1;right:10px;bottom:10px;'></div>");
	box.append(numberBox);
	for(var i=0;i<items.length;i++)
	{
		var number=$("<div style='float:left;cursor:pointer;margin:0px;margin-left:10px;_display:inline;padding:0px;width:16px;height:16px;line-height:16px;font-size:11px;font-family:Tahoma;color:#333;text-align:center;border:1px #999 solid;background:#FFF;'></div>");
		number.text(i+1);
		number.attr("index",i);
		numberBox.append(number);
	}
	var numbers=numberBox.find(">div");
	var timerID=0;

	function JumpTo(i)
	{
		i=i%items.length;
		items.eq(index).fadeOut(500);
		numbers.eq(index).css({"borderColor":"#999","color":"#333"});
		items.eq(i).fadeIn(500);
		numbers.eq(i).css({"borderColor":"#FF0000","color":"#000"});
		index=i;

		timerID=window.setTimeout(function(){JumpTo(index+1);},3000);
	}

	numbers.click(function()
	{
		var i=parseInt($(this).attr("index"),10);
		window.clearTimeout(timerID);
		JumpTo(i);
	});
	JumpTo(0);
}