function bannnerSlider(){
	var slideTimer = 8000;
	var transitionTime = 1500;
	var items = $$('.slide_item');
	var numItems = items.length;
	var numNav = new Array();
	var prevBtn = $('prevbtn');
	var playBtn = $('playbtn');
	var nextBtn = $('nextbtn');
	var itemNum = 0;
	var isPaused = 0;
	var isSliding = 0;
	var numNavHolder = $('num_nav');
	var preLoadImgs = $('top_graphic').getElements('img').get('src');
	var loader = new Asset.images(preLoadImgs, {
		onComplete: function() {
			numNavHolder.set('html','');
			$('control_holder').set('opacity','0');
			$('control_holder').removeClass('display_none');
			$('control_holder').tween('opacity', .8);
			items.each(function(element, index) {
				if(index == 0){
					element.removeClass('first_item');
					element.setStyle('left', "0");
				}
				else{
					element.setStyle('left', 606);
				}
				
				var numItem = new Element('li', {id: 'num'+index});
				var numLink = new Element('a', {
					'class': 'numbtn',
					'html': (index+1)
				});
				
				numItem.adopt(numLink);
				numNavHolder.adopt(numItem);
				numNav.push(numLink);
			});
			var initNum = numNav[itemNum];
			origColor = initNum.getStyle('color');
			initNum.setStyles({
				'background-color': '#6d6e71',
				'color': '#FFFFFF'
			});
			var slideMove = function(direction, passedID){ 
				var curItem = items[itemNum]; 
				var curNumItem =  numNav[itemNum];
				if(direction == 1){
					if(itemNum < (numItems - 1)){
						itemNum++; 
					}
					else{
						itemNum = 0;
					}
				}else if(direction == 0){
					if(itemNum > 0){
						itemNum--; 
					}
					else{
						itemNum = (numItems - 1);
					}
				}else{
					if(itemNum != passedID){
						itemNum = passedID;
					}
				}
				var newItem = items[itemNum];
				var newNumItem =  numNav[itemNum];
				var item_in = new Fx.Morph(newItem, {
						 duration: transitionTime, 
						 link: 'ignore',
						 onStart: function(){
							isSliding = 1;
						 },
						 onComplete: function(){
							isSliding = 0;
						}
				});
				var item_out = new Fx.Morph(curItem, {
						 duration: transitionTime, 
						 link: 'ignore'
				});
				var num_in = new Fx.Morph(newNumItem, {
						 duration: 150, 
						 link: 'ignore'
				});
				var num_out = new Fx.Morph(curNumItem, {
						 duration: 150, 
						 link: 'ignore'
				});
				item_in.start({
					'left': [606, 0]
				});
				item_out.start({
					'left': -606
				});
				num_in.start({
					'background-color': '#6d6e71' ,
					'color': '#FFFFFF'
				});
				num_out.start({
					'background-color': '#9d9fa3' ,
					'color': origColor
				});
			};
			var theTimer = slideMove.periodical(slideTimer, this, 1); 
			nextBtn.addEvent('click', function(){
				if(isSliding == 0){
					if(isPaused == 0){
						$clear(theTimer);
						theTimer = slideMove.periodical(slideTimer, this, 1);
					}
					slideMove(1);
				}
			});
			prevBtn.addEvent('click', function(){
				if(isSliding == 0){
					if(isPaused == 0){
						$clear(theTimer);
						theTimer = slideMove.periodical(slideTimer, this, 1); 
					}				     
					slideMove(0);
				}
			});
			playBtn.addEvent('click', function(){
				if(isSliding == 0){
					if(isPaused == 0){
						isPaused = 1;
						$clear(theTimer);
						this.getElement('img').set('src', '/images/play.gif');
					}else{
						isPaused = 0;
						slideMove(1);
						theTimer = slideMove.periodical(slideTimer, this, 1); 
						this.getElement('img').set('src', '/images/pause.gif');
					}
				}
			 });
			numNav.each(function(element, index) {
				var origColor = element.getStyle('color');
				
				element.addEvents({
					'click' : function(){
						if(isSliding == 0 && itemNum != index){
							if(isPaused == 0){
								$clear(theTimer);
								theTimer = slideMove.periodical(slideTimer, this, 1);
							}
							slideMove(2, index);
							//alert("index: " + index);
						}
					},
					'mouseenter' : function() {
						this.setStyle('cursor', 'pointer');
					}
				});
			});
			
		}
	});
}
window.addEvent('domready', function() {
	if($defined($('top_graphic'))){
		bannnerSlider();
	}
});