function $(id) { return document.getElementById(id); }

	function moveElement(elementID,final_x,final_y,interval) {

		if (!document.getElementById) return false;
		if (!document.getElementById(elementID)) return false;
		var elem = document.getElementById(elementID);

		if (elem.movement) {
			clearTimeout(elem.movement);
		}
		if (!elem.style.left) {
			elem.style.left = "0px";
		}
		if (!elem.style.top) {
			elem.style.top = "0px";
		}
		var xpos = parseInt(elem.style.left);
		var ypos = parseInt(elem.style.top);

		if (xpos == final_x && ypos == final_y) {
			moveing = false;
			return true;
		}
		if (xpos < final_x) {
			var dist = Math.ceil((final_x - xpos)/10);
			xpos = xpos + dist;
		}
		if (xpos > final_x) {
			var dist = Math.ceil((xpos - final_x)/10);
			xpos = xpos - dist;
		}
		if (ypos < final_y) {
			var dist = Math.ceil((final_y - ypos)/10);
			ypos = ypos + dist;
		}
		if (ypos > final_y) {
			var dist = Math.ceil((ypos - final_y)/10);
			ypos = ypos - dist;
		}
		elem.style.left = xpos + "px";
		elem.style.top = ypos + "px";
		var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
		elem.movement = setTimeout(repeat,interval);
	}

	function classNormal() {
		var picList = $('ibanner_pic').getElementsByTagName('img');
		for (var i=0; i<picList.length; i++){
			picList[i].className='normal';
		}
	}

	function picZ() {
		var picList = $('ibanner_pic').getElementsByTagName('img');
		for (var i=0; i<picList.length; i++){
			picList[i].style.zIndex='1';
		}
	}

	
	function showNext(){
		clearInterval(intervalId);
		autoBanner();
		intervalId = setInterval('autoBanner()', 5000);
	}

	function showPre(){
		clearInterval(intervalId);
		
		var picList = $('ibanner_pic').getElementsByTagName('img');

		/* if length of pics == 1, return */
		if (picList.length==1) return;

		for(var i=0; i<picList.length; i++) {
			if (picList[i].className == 'current') {
				var currentNum = i;
			}
		}

		/* if currentNum==picList.length-1, as the number start from 0, this is already last one, reset */
		if (currentNum==0){
			var maxNum = picList.length-1;
			/* reset all class name for buttons to normal */
			classNormal();
			/* reset all z-index for pics to 1 */
			picZ();
			picList[maxNum].className = 'current';
			picList[currentNum].style.zIndex='3';
			picList[maxNum].style.zIndex='2';
			picList[maxNum].style.left='0';
			moveElement('picLi_'+currentNum,753,0,10);
		} else {
			classNormal();
			picZ();
			var nextNum = currentNum-1;
			picList[nextNum].className = 'current';
			picList[currentNum].style.zIndex='3';
			picList[nextNum].style.zIndex='2';
			picList[nextNum].style.left='0';
			moveElement('picLi_'+currentNum,753,0,10);
		}

		intervalId = setInterval('autoBanner()', 5000);
	}

	/* will call autoBanner function every 5 sections */
	function autoBanner() {
		
		if(!$('ibanner')||!$('ibanner_pic')) return;
		
		/* get a list of buttons and pics */
		var picList = $('ibanner_pic').getElementsByTagName('img');

		/* if length of pics == 1, return */
		if (picList.length==1) return;

		for(var i=0; i<picList.length; i++) {
			if (picList[i].className == 'current') {
				var currentNum = i;
			}
		}

		/* if currentNum==picList.length-1, as the number start from 0, this is already last one, reset */
		if (currentNum==(picList.length-1) ){
			/* reset all class name for buttons to normal */
			classNormal();
			/* reset all z-index for pics to 1 */
			picZ();
			picList[0].className = 'current';
			picList[currentNum].style.zIndex='2';
			picList[0].style.zIndex='3';
			picList[0].style.left='650px';
			moveElement('picLi_0',0,0,10);
		} else {
			classNormal();
			picZ();
			var nextNum = currentNum+1;
			picList[nextNum].className = 'current';
			picList[currentNum].style.zIndex='2';
			picList[nextNum].style.zIndex='3';
			picList[nextNum].style.left='650px';
			moveElement('picLi_'+nextNum,0,0,10);
		}
	}