// JavaScript Document
(function(){
	jSlide = {};
	jSlide.ui = {
		$ : function(node){
			return document.getElementById(node);
		},
		getTag : function(parsentNode,node){
			parsentNode = parsentNode || document;
			if(typeof node == 'string'){
				return parsentNode.getElementsByTagName(node);
			}
		},
		setStyle : function(node,styles){
			for (property in styles) {
				if(!styles.hasOwnProperty(property)) {continue}
				else{node.style[property] = styles[property];}
			}
			return true;
		},
		addEvent : function(node, type, listener ) {
			if (node.addEventListener) {
				node.addEventListener( type, listener, false );
				return true;
			} else if(node.attachEvent) {
				node['e'+type+listener] = listener;
				node[type+listener] = function(){node['e'+type+listener]( window.event );}
				node.attachEvent( 'on'+type, node[type+listener] );
				return true;
			}
			return false;
		}
	};
})();

(function(){
	var $ = jSlide.ui;
	var _play = true;
	var _curIndex = 0;
	var _timer = 0;
	$.addEvent(window,'load',function(){
		var _stage = $.getTag($.$('stage'),'li');
		var _text = $.getTag($.$('text'),'li');
		var _stick = $.getTag($.$('stick'),'li');
		var slide = function(index){
			$.addEvent(_stick[index],'mouseover',function(){
				for(var i = 0;i<_stick.length;i++)
				{
					_stick[i].className = '';
					_stick[3].className = 'last';
					_stage[i].className = '';
					_text[i].className = '';
				}
				_stick[index].className += _stick[index].className == ''? 'selected':' selected';	
				_stage[index].className = 'selected';
				_text[index].className = 'selected';
				
				_curIndex = index;
				_play = false;
				run();		
			})
			$.addEvent(_stick[index],'mouseout',function(){
				_play = true;
				run();										  
			})
			$.addEvent(_stage[index],'mouseover',function(){
				_play = false;
				run();										  
			})
			$.addEvent(_stage[index],'mouseout',function(){
				_play = true;
				run();										  
			})
		}
		var run = function(){
			if(_curIndex > 4)		
			{
				_curIndex = 0;		
			}

			for(var i = 0;i<_stick.length;i++)
			{
				_stick[i].className = '';
				_stick[4].className = 'last';
				_stage[i].className = '';
				_text[i].className = '';
			}
			_stick[_curIndex].className += _stick[_curIndex].className == ''? 'selected':' selected';	
			_stage[_curIndex].className = 'selected';
			_text[_curIndex].className = 'selected';
			
			change();
		}
		
		var change = function(){
			clearTimeout(_timer);											//清除循环标志值
			if(_play)														//判断滚动标志是否为true
			{
				_timer = setInterval(function(){_curIndex++;run();},1500);
			}
		}
		
		for(var i = 0; i < _stick.length; i++)
		{
			slide(i);
		}
		run();
	})
})();