﻿function bindBannerGallery(id)
{
	var $=jQuery;
	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:8px;_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;
	var status = "play";
	var globalIndex = null;

	function AutoJump()
	{
		var i = 0;
		if(globalIndex == null)
			i = 0;
		else
			i = (globalIndex + 1) % items.length;
		JumpTo(i);
		if(status == "play")
			timerID = window.setTimeout(AutoJump, 2000);
	}

	function JumpTo(i)
	{
		if(globalIndex != null)
		{
			items.eq(globalIndex).fadeOut(500);
			numbers.eq(globalIndex).css({"borderColor":"#999","color":"#333"});
		}
		items.eq(i).fadeIn(500);
		numbers.eq(i).css({"borderColor":"#FF0000","color":"#000"});
		globalIndex = i;
	}

	numbers.click(function()
	{
		var i = parseInt($(this).attr("index"),10);
		window.clearTimeout(timerID);
		JumpTo(i);
		return false;
	});
	AutoJump();

	box.bind("mouseover", function(e)
	{
		status = "pause";
		window.clearTimeout(timerID);
	});
	box.bind("mouseleave", function(e)
	{
		status = "play";
		timerID = window.setTimeout(AutoJump, 2000);
	});
}
